admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add empty states to settings tables (#10978)

Browse Source 
## 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
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx
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>

21
packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsObjectsTableHeader.tsx
View File

@ -1,4 +1,3 @@
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
@ -20,25 +19,17 @@ const StyledActionsHeader = styled(TableHeader)`
padding-right: ${({ theme }) => theme.spacing(4)};
`;
const StyledTable = styled(Table)`
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
type RolePermissionsObjectsTableHeaderProps = {
className?: string;
allPermissions: boolean;
};
export const RolePermissionsObjectsTableHeader = ({
className,
allPermissions,
}: RolePermissionsObjectsTableHeaderProps) => (
<StyledTable className={className}>
<StyledTableHeaderRow>
<StyledNameHeader>{t`Name`}</StyledNameHeader>
<StyledActionsHeader aria-label={t`Actions`}>
<Checkbox checked={allPermissions} disabled />
</StyledActionsHeader>
</StyledTableHeaderRow>
</StyledTable>
<StyledTableHeaderRow>
<StyledNameHeader>{t`Name`}</StyledNameHeader>
<StyledActionsHeader aria-label={t`Actions`}>
<Checkbox checked={allPermissions} disabled />
</StyledActionsHeader>
</StyledTableHeaderRow>
);

23
packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx
View File

@ -1,4 +1,3 @@
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
@ -23,30 +22,22 @@ const StyledActionsHeader = styled(TableHeader)`
padding-right: ${({ theme }) => theme.spacing(4)};
`;
const StyledTable = styled(Table)`
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
const StyledTypeHeader = styled(TableHeader)`
flex: 1;
`;
type RolePermissionsSettingsTableHeaderProps = {
className?: string;
allPermissions: boolean;
};
export const RolePermissionsSettingsTableHeader = ({
className,
allPermissions,
}: RolePermissionsSettingsTableHeaderProps) => (
<StyledTable className={className}>
<StyledTableHeaderRow>
<StyledNameHeader>{t`Name`}</StyledNameHeader>
<StyledTypeHeader>{t`Type`}</StyledTypeHeader>
<StyledActionsHeader aria-label={t`Actions`}>
<Checkbox checked={allPermissions} disabled />
</StyledActionsHeader>
</StyledTableHeaderRow>
</StyledTable>
<StyledTableHeaderRow>
<StyledNameHeader>{t`Name`}</StyledNameHeader>
<StyledTypeHeader>{t`Type`}</StyledTypeHeader>
<StyledActionsHeader aria-label={t`Actions`}>
<Checkbox checked={allPermissions} disabled />
</StyledActionsHeader>
</StyledTableHeaderRow>
);