Add empty states to settings tables (#10978)

## Context
Fixes https://github.com/twentyhq/twenty/issues/10964

## Test
<img width="617" alt="Screenshot 2025-03-18 at 12 18 30"
src="https://github.com/user-attachments/assets/dab8738d-d221-4a6b-a72e-061ab5fffb70"
/>
<img width="647" alt="Screenshot 2025-03-18 at 12 18 25"
src="https://github.com/user-attachments/assets/45466a80-7a80-4cde-a0c5-420cd6c05cb2"
/>
<img width="637" alt="Screenshot 2025-03-18 at 12 18 19"
src="https://github.com/user-attachments/assets/46a9f27a-bd3a-4e91-9885-668cf780d562"
/>
<img width="630" alt="Screenshot 2025-03-18 at 12 18 07"
src="https://github.com/user-attachments/assets/e1f805a0-ed7f-4cf2-8f75-78b865bd1ca2"
/>
<img width="649" alt="Screenshot 2025-03-18 at 12 18 01"
src="https://github.com/user-attachments/assets/e9f3086f-fe97-4f3b-99e0-25249e9dd43b"
/>
This commit is contained in:
Weiko
2025-03-18 14:18:33 +01:00
committed by GitHub
parent 1ca5a5e9f6
commit be1b877868
6 changed files with 210 additions and 160 deletions

View File

@ -32,7 +32,11 @@ const StyledRolePermissionsContainer = styled.div`
const StyledTable = styled.div`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
`;
const StyledTableRows = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(2)};
`;
type RolePermissionsProps = {
@ -136,12 +140,14 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => {
/>
<StyledTable>
<RolePermissionsObjectsTableHeader allPermissions={true} />
{objectPermissionsConfig.map((permission) => (
<RolePermissionsObjectsTableRow
key={permission.key}
permission={permission}
/>
))}
<StyledTableRows>
{objectPermissionsConfig.map((permission) => (
<RolePermissionsObjectsTableRow
key={permission.key}
permission={permission}
/>
))}
</StyledTableRows>
</StyledTable>
</Section>
<Section>
@ -150,12 +156,14 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => {
<RolePermissionsSettingsTableHeader
allPermissions={role.canUpdateAllSettings}
/>
{settingsPermissionsConfig.map((permission) => (
<RolePermissionsSettingsTableRow
key={permission.key}
permission={permission}
/>
))}
<StyledTableRows>
{settingsPermissionsConfig.map((permission) => (
<RolePermissionsSettingsTableRow
key={permission.key}
permission={permission}
/>
))}
</StyledTableRows>
</StyledTable>
</Section>
</StyledRolePermissionsContainer>