fix: Center Functions Empty state (#7378)

## Description
- This PR fix #7012
- It changes the logic behind the rendering of `SettingsPageContainer`
component. Now, the component is only rendered when the page content is
not blank.
## Changes
| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/98b64370-f145-41a2-a829-f86ae9687f73)
|
![image](https://github.com/user-attachments/assets/4cb0cc32-a669-4151-9444-4bc734bd2909)
|

<details><summary>Details</summary>
<p>
This change aligns the behavior of the settings page with the existing
logic found on the `/rockets` page
<img
src="https://github.com/user-attachments/assets/d2b80fbc-83e4-4823-a708-6775e19a153a"/>
</p>
</details>

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Gabriel Utzig
2024-10-04 20:23:02 -03:00
committed by GitHub
parent 23e7958218
commit c73feb513a
2 changed files with 26 additions and 26 deletions

View File

@@ -1,3 +1,4 @@
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsServerlessFunctionsFieldItemTableRow } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsFieldItemTableRow'; import { SettingsServerlessFunctionsFieldItemTableRow } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsFieldItemTableRow';
import { SettingsServerlessFunctionsTableEmpty } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty'; import { SettingsServerlessFunctionsTableEmpty } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty';
import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions'; import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
@@ -24,26 +25,28 @@ export const SettingsServerlessFunctionsTable = () => {
return ( return (
<> <>
{serverlessFunctions.length ? ( {serverlessFunctions.length ? (
<Table> <SettingsPageContainer>
<StyledTableRow> <Table>
<TableHeader>Name</TableHeader> <StyledTableRow>
<TableHeader>Runtime</TableHeader> <TableHeader>Name</TableHeader>
<TableHeader></TableHeader> <TableHeader>Runtime</TableHeader>
</StyledTableRow> <TableHeader></TableHeader>
<StyledTableBody> </StyledTableRow>
{serverlessFunctions.map( <StyledTableBody>
(serverlessFunction: ServerlessFunction) => ( {serverlessFunctions.map(
<SettingsServerlessFunctionsFieldItemTableRow (serverlessFunction: ServerlessFunction) => (
key={serverlessFunction.id} <SettingsServerlessFunctionsFieldItemTableRow
serverlessFunction={serverlessFunction} key={serverlessFunction.id}
to={getSettingsPagePath(SettingsPath.ServerlessFunctions, { serverlessFunction={serverlessFunction}
id: serverlessFunction.id, to={getSettingsPagePath(SettingsPath.ServerlessFunctions, {
})} id: serverlessFunction.id,
/> })}
), />
)} ),
</StyledTableBody> )}
</Table> </StyledTableBody>
</Table>
</SettingsPageContainer>
) : ( ) : (
<SettingsServerlessFunctionsTableEmpty /> <SettingsServerlessFunctionsTableEmpty />
)} )}

View File

@@ -1,4 +1,3 @@
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsServerlessFunctionsTable } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTable'; import { SettingsServerlessFunctionsTable } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTable';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath'; import { SettingsPath } from '@/types/SettingsPath';
@@ -35,11 +34,9 @@ export const SettingsServerlessFunctions = () => {
}, },
]} ]}
> >
<SettingsPageContainer> <Section>
<Section> <SettingsServerlessFunctionsTable />
<SettingsServerlessFunctionsTable /> </Section>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer> </SubMenuTopBarContainer>
); );
}; };