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

View File

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