Fix permissions front followup (#10758)

2025-03-10 18:56:23 +01:00
parent c8b44aa242
commit 5fb613a8f7
9 changed files with 109 additions and 106 deletions
--- a/packages/twenty-front/src/modules/settings/roles/components/Roles.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/components/Roles.tsx
@ -7,16 +7,17 @@ import { RolesTableRow } from '@/settings/roles/components/RolesTableRow';
 import { Button, H2Title, IconPlus, Section } from 'twenty-ui';
 import { Role } from '~/generated-metadata/graphql';

-const StyledTable = styled(Table)`
-  margin-top: ${({ theme }) => theme.spacing(0.5)};
-`;
-
-const StyledBottomSection = styled(Section)`
+const StyledCreateRoleSection = styled(Section)`
  border-top: 1px solid ${({ theme }) => theme.border.color.light};
-  margin-top: ${({ theme }) => theme.spacing(2)};
-  padding-top: ${({ theme }) => theme.spacing(4)};
  display: flex;
  justify-content: flex-end;
+  padding-top: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTableRows = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
 `;

 export const Roles = ({ roles }: { roles: Role[] }) => {
@ -26,13 +27,15 @@ export const Roles = ({ roles }: { roles: Role[] }) => {
        title={t`All roles`}
        description={t`Assign roles to specify each member's access permissions`}
      />
-      <StyledTable>
+      <Table>
        <RolesTableHeader />
-        {roles.map((role) => (
-          <RolesTableRow key={role.id} role={role} />
-        ))}
-      </StyledTable>
-      <StyledBottomSection>
+        <StyledTableRows>
+          {roles.map((role) => (
+            <RolesTableRow key={role.id} role={role} />
+          ))}
+        </StyledTableRows>
+      </Table>
+      <StyledCreateRoleSection>
        <Button
          Icon={IconPlus}
          title={t`Create Role`}
@ -40,7 +43,7 @@ export const Roles = ({ roles }: { roles: Role[] }) => {
          size="small"
          soon
        />
-      </StyledBottomSection>
+      </StyledCreateRoleSection>
    </Section>
  );
 };
--- a/packages/twenty-front/src/modules/settings/roles/components/RolesTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/components/RolesTableHeader.tsx
@ -1,25 +1,20 @@
 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';
 import { Trans } from '@lingui/react/macro';

-const StyledTableHeaderRow = styled(Table)`
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-`;
-
 export const RolesTableHeader = () => {
  return (
-    <StyledTableHeaderRow>
-      <TableRow gridAutoColumns="3fr 2fr 1fr">
+    <Table>
+      <TableRow gridAutoColumns="332px 3fr 2fr 1fr">
        <TableHeader>
          <Trans>Name</Trans>
        </TableHeader>
        <TableHeader align={'right'}>
          <Trans>Assigned to</Trans>
        </TableHeader>
-        <TableHeader align={'right'}></TableHeader>
+        <TableHeader></TableHeader>
      </TableRow>
-    </StyledTableHeaderRow>
+    </Table>
  );
 };
--- a/packages/twenty-front/src/modules/settings/roles/components/RolesTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/components/RolesTableRow.tsx
@ -15,36 +15,20 @@ import {
 import { Role } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

-const StyledIconChevronRight = styled(IconChevronRight)`
-  color: ${({ theme }) => theme.font.color.tertiary};
-`;
-
-const StyledAvatarContainer = styled.div`
-  border: 0px;
-`;
-
 const StyledAssignedText = styled.div`
  color: ${({ theme }) => theme.font.color.secondary};
  font-size: ${({ theme }) => theme.font.size.sm};
 `;

 const StyledNameCell = styled.div`
-  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
-  color: ${({ theme }) => theme.font.color.primary};
-`;
-
-const StyledAssignedCell = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(4)};
 `;

 const StyledAvatarGroup = styled.div`
-  align-items: center;
  display: flex;
-  margin-right: ${({ theme }) => theme.spacing(1)};
+  justify-content: flex-end;

  > * {
    margin-left: -5px;
@ -55,6 +39,12 @@ const StyledAvatarGroup = styled.div`
  }
 `;

+const StyledIconLockContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+`;
+
 const StyledTableRow = styled(TableRow)`
  &:hover {
    background: ${({ theme }) => theme.background.transparent.light};
@ -74,48 +64,57 @@ export const RolesTableRow = ({ role }: { role: Role }) => {
  return (
    <StyledTableRow
      key={role.id}
-      gridAutoColumns="3fr 2fr 1fr"
+      gridAutoColumns="332px 3fr 2fr 1fr"
      onClick={() => handleRoleClick(role.id)}
    >
      <TableCell>
        <StyledNameCell>
-          <IconUser size={theme.icon.size.md} />
+          <IconUser size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
          {role.label}
-          {!role.isEditable && <IconLock size={theme.icon.size.sm} />}
+          {!role.isEditable && (
+            <StyledIconLockContainer>
+              <IconLock
+                color={theme.font.color.light}
+                stroke={theme.icon.stroke.sm}
+                size={theme.icon.size.sm}
+              />
+            </StyledIconLockContainer>
+          )}
        </StyledNameCell>
      </TableCell>
      <TableCell align={'right'}>
-        <StyledAssignedCell>
-          <StyledAvatarGroup>
-            {role.workspaceMembers.slice(0, 5).map((workspaceMember) => (
-              <React.Fragment key={workspaceMember.id}>
-                <StyledAvatarContainer id={`avatar-${workspaceMember.id}`}>
-                  <Avatar
-                    avatarUrl={workspaceMember.avatarUrl}
-                    placeholderColorSeed={workspaceMember.id}
-                    placeholder={workspaceMember.name.firstName ?? ''}
-                    type="rounded"
-                    size="md"
-                  />
-                </StyledAvatarContainer>
-                <AppTooltip
-                  anchorSelect={`#avatar-${workspaceMember.id}`}
-                  content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
-                  noArrow
-                  place="top"
-                  positionStrategy="fixed"
-                  delay={TooltipDelay.shortDelay}
+        <StyledAvatarGroup>
+          {role.workspaceMembers.slice(0, 5).map((workspaceMember) => (
+            <React.Fragment key={workspaceMember.id}>
+              <div id={`avatar-${workspaceMember.id}`}>
+                <Avatar
+                  avatarUrl={workspaceMember.avatarUrl}
+                  placeholderColorSeed={workspaceMember.id}
+                  placeholder={workspaceMember.name.firstName ?? ''}
+                  type="rounded"
+                  size="md"
                />
-              </React.Fragment>
-            ))}
-          </StyledAvatarGroup>
-          <StyledAssignedText>
-            {role.workspaceMembers.length}
-          </StyledAssignedText>
-        </StyledAssignedCell>
+              </div>
+              <AppTooltip
+                anchorSelect={`#avatar-${workspaceMember.id}`}
+                content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
+                noArrow
+                place="top"
+                positionStrategy="fixed"
+                delay={TooltipDelay.shortDelay}
+              />
+            </React.Fragment>
+          ))}
+        </StyledAvatarGroup>
+      </TableCell>
+      <TableCell align={'left'}>
+        <StyledAssignedText>{role.workspaceMembers.length}</StyledAssignedText>
      </TableCell>
      <TableCell align={'right'}>
-        <StyledIconChevronRight size={theme.icon.size.md} />
+        <IconChevronRight
+          size={theme.icon.size.md}
+          color={theme.font.color.tertiary}
+        />
      </TableCell>
    </StyledTableRow>
  );
--- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignment.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignment.tsx
@ -38,7 +38,7 @@ const StyledAssignToMemberContainer = styled.div`
 `;

 const StyledSearchContainer = styled.div`
-  margin: ${({ theme }) => theme.spacing(2)} 0;
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
 `;

 const StyledTable = styled.div<{ hasRows: boolean }>`
@ -57,6 +57,12 @@ const StyledSearchInput = styled(TextInput)`
  }
 `;

+const StyledTableRows = styled.div`
+  gap: ${({ theme }) => theme.spacing(0.5)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
+
 type RoleAssignmentProps = {
  role: Pick<Role, 'id' | 'label' | 'canUpdateAllSettings'> & {
    workspaceMembers: Array<WorkspaceMember>;
@ -177,12 +183,14 @@ export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
        </StyledSearchContainer>
        <StyledTable hasRows={filteredWorkspaceMembers.length > 0}>
          <RoleAssignmentTableHeader />
-          {filteredWorkspaceMembers.map((workspaceMember) => (
-            <RoleAssignmentTableRow
-              key={workspaceMember.id}
-              workspaceMember={workspaceMember}
-            />
-          ))}
+          <StyledTableRows>
+            {filteredWorkspaceMembers.map((workspaceMember) => (
+              <RoleAssignmentTableRow
+                key={workspaceMember.id}
+                workspaceMember={workspaceMember}
+              />
+            ))}
+          </StyledTableRows>
        </StyledTable>

        <StyledAssignToMemberContainer>
--- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignmentTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignmentTableHeader.tsx
@ -1,18 +1,13 @@
 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';
 import { t } from '@lingui/core/macro';

-const StyledTableHeaderRow = styled(Table)`
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-`;
-
 export const RoleAssignmentTableHeader = () => (
-  <StyledTableHeaderRow>
+  <Table>
    <TableRow gridAutoColumns="2fr 4fr">
      <TableHeader>{t`Name`}</TableHeader>
      <TableHeader>{t`Email`}</TableHeader>
    </TableRow>
-  </StyledTableHeaderRow>
+  </Table>
 );
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx
@ -18,8 +18,6 @@ const StyledPermissionCell = styled(TableCell)`
  flex: 1;
  gap: ${({ theme }) => theme.spacing(2)};
  padding-left: ${({ theme }) => theme.spacing(2)};
-  color: ${({ theme }) => theme.font.color.secondary};
-  font-size: ${({ theme }) => theme.font.size.sm};
 `;

 const StyledCheckboxCell = styled(TableCell)`
--- a/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx
@ -43,8 +43,6 @@ export const SettingsRoleEdit = () => {
    }
  }, [role, navigateSettings, rolesLoading]);

-  if (!role) return null;
-
  const tabs = [
    {
      id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.ASSIGNMENT,
@ -67,6 +65,10 @@ export const SettingsRoleEdit = () => {
  ];

  const renderActiveTabContent = () => {
+    if (!role) {
+      return null;
+    }
+
    switch (activeTabId) {
      case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.ASSIGNMENT:
        return <RoleAssignment role={role} />;
@ -81,7 +83,7 @@ export const SettingsRoleEdit = () => {

  return (
    <SubMenuTopBarContainer
-      title={<H3Title title={role.label} />}
+      title={role && <H3Title title={role.label} />}
      links={[
        {
          children: 'Workspace',
@ -92,18 +94,22 @@ export const SettingsRoleEdit = () => {
          href: getSettingsPath(SettingsPath.Roles),
        },
        {
-          children: role.label,
+          children: role?.label,
        },
      ]}
    >
-      <SettingsPageContainer>
-        <TabList
-          tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
-          tabs={tabs}
-          className="tab-list"
-        />
-        {renderActiveTabContent()}
-      </SettingsPageContainer>
+      {!rolesLoading && role ? (
+        <SettingsPageContainer>
+          <TabList
+            tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
+            tabs={tabs}
+            className="tab-list"
+          />
+          {renderActiveTabContent()}
+        </SettingsPageContainer>
+      ) : (
+        <></>
+      )}
    </SubMenuTopBarContainer>
  );
 };
--- a/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx
+++ b/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx
@ -5,6 +5,7 @@ import { Roles } from '@/settings/roles/components/Roles';
 import { RolesDefaultRole } from '@/settings/roles/components/RolesDefaultRole';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { H3Title } from 'twenty-ui';
 import { useGetRolesQuery } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

@ -16,7 +17,7 @@ export const SettingsRoles = () => {

  return (
    <SubMenuTopBarContainer
-      title={t`Roles`}
+      title={rolesData && <H3Title title={t`Roles`} />}
      links={[
        {
          children: <Trans>Workspace</Trans>,
@ -26,10 +27,10 @@ export const SettingsRoles = () => {
      ]}
    >
      <SettingsPageContainer>
-        {!rolesLoading && (
+        {!rolesLoading && rolesData && (
          <>
-            <Roles roles={rolesData?.getRoles ?? []} />
-            <RolesDefaultRole roles={rolesData?.getRoles ?? []} />
+            <Roles roles={rolesData.getRoles ?? []} />
+            <RolesDefaultRole roles={rolesData.getRoles ?? []} />
          </>
        )}
      </SettingsPageContainer>
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@ -15,8 +15,6 @@ type Checkers = Parameters<typeof checker>[0];
 export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, __dirname, '');

-  console.log(__dirname);
-
  const {
    REACT_APP_SERVER_BASE_URL,
    VITE_BUILD_SOURCEMAP,