From 5fb613a8f761e1f6f4c343e0a185e01a78045169 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Mon, 10 Mar 2025 18:56:23 +0100
Subject: [PATCH] Fix permissions front followup (#10758)

---
 .../settings/roles/components/Roles.tsx       | 31 +++---
 .../roles/components/RolesTableHeader.tsx     | 13 +--
 .../roles/components/RolesTableRow.tsx        | 97 +++++++++----------
 .../components/RoleAssignment.tsx             | 22 +++--
 .../components/RoleAssignmentTableHeader.tsx  |  9 +-
 .../RolePermissionsSettingsTableRow.tsx       |  2 -
 .../pages/settings/roles/SettingsRoleEdit.tsx | 30 +++---
 .../pages/settings/roles/SettingsRoles.tsx    |  9 +-
 packages/twenty-front/vite.config.ts          |  2 -
 9 files changed, 109 insertions(+), 106 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/roles/components/Roles.tsx b/packages/twenty-front/src/modules/settings/roles/components/Roles.tsx
index cbe5f2ce8..b8e591257 100644
--- 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>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/components/RolesTableHeader.tsx b/packages/twenty-front/src/modules/settings/roles/components/RolesTableHeader.tsx
index 991666a2e..1a56cc4d7 100644
--- 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>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/components/RolesTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/components/RolesTableRow.tsx
index 8c4ebf777..884d5e6d8 100644
--- 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>
   );
diff --git 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
index 62102c2c3..578e8e61d 100644
--- 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>
diff --git 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
index e8fdda18c..018241083 100644
--- 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>
 );
diff --git 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
index e0dbe27a5..3aae9ff04 100644
--- 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)`
diff --git a/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx b/packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx
index 8b8953c6e..522cb2592 100644
--- 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>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx b/packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx
index b0b5d7318..bdd04ba88 100644
--- 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>
diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
index 8e13f21ed..1570984bf 100644
--- 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,