Add default role to workspace (#10444)

## Context
Adding a defaultRole to each workspace, this role will be automatically
added when a member joins a workspace via invite link or public link
(seeds work differently though).
Took the occasion to refactor a bit the frontend components, splitting
them in smaller components for more readability.

## Test
<img width="948" alt="Screenshot 2025-02-24 at 14 54 02"
src="https://github.com/user-attachments/assets/13ef1452-d3c9-4385-940c-2ced0f0b05ef"
/>

packages/twenty-front/src/pages/settings/roles/SettingsRoles.tsx

@@ -1,106 +1,19 @@
-import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
-import {
-  AppTooltip,
-  Avatar,
-  Button,
-  H2Title,
-  IconChevronRight,
-  IconLock,
-  IconPlus,
-  IconUser,
-  Section,
-  TooltipDelay,
-} from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { useTheme } from '@emotion/react';
-import React from 'react';
 import { useGetRolesQuery } from '~/generated/graphql';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { Roles } from '~/pages/settings/roles/components/Roles';
+import { RolesDefaultRole } from '~/pages/settings/roles/components/RolesDefaultRole';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
-const StyledTable = styled(Table)`
-  margin-top: ${({ theme }) => theme.spacing(0.5)};
-`;
-
-const StyledTableRow = styled(TableRow)`
-  &:hover {
-    background: ${({ theme }) => theme.background.transparent.light};
-    cursor: pointer;
-  }
-`;
-
-const StyledNameCell = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledAssignedCell = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledAvatarGroup = styled.div`
-  align-items: center;
-  display: flex;
-  margin-right: ${({ theme }) => theme.spacing(1)};
-
-  > * {
-    margin-left: -5px;
-
-    &:first-of-type {
-      margin-left: 0;
-    }
-  }
-`;
-
-const StyledTableHeaderRow = styled(Table)`
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledBottomSection = 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;
-`;
-
-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.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
-`;
-
 export const SettingsRoles = () => {
   const { t } = useLingui();
-
-  const theme = useTheme();
-  const navigateSettings = useNavigateSettings();
   const { data: rolesData, loading: rolesLoading } = useGetRolesQuery({
     fetchPolicy: 'network-only',
   });
 
-  const handleRoleClick = (roleId: string) => {
-    navigateSettings(SettingsPath.RoleDetail, { roleId });
-  };
-
   return (
     <SubMenuTopBarContainer
       title={t`Roles`}
@@ -113,90 +26,12 @@ export const SettingsRoles = () => {
       ]}
     >
       <SettingsPageContainer>
-        <Section>
-          <H2Title
-            title={t`All roles`}
-            description={t`Assign roles to specify each member's access permissions`}
-          />
-          <StyledTable>
-            <StyledTableHeaderRow>
-              <TableRow>
-                <TableHeader>
-                  <Trans>Name</Trans>
-                </TableHeader>
-                <TableHeader align={'right'}>
-                  <Trans>Assigned to</Trans>
-                </TableHeader>
-                <TableHeader align={'right'}></TableHeader>
-              </TableRow>
-            </StyledTableHeaderRow>
-            {!rolesLoading &&
-              rolesData?.getRoles.map((role) => (
-                <StyledTableRow
-                  key={role.id}
-                  onClick={() => handleRoleClick(role.id)}
-                >
-                  <TableCell>
-                    <StyledNameCell>
-                      <IconUser size={theme.icon.size.md} />
-                      {role.label}
-                      {!role.isEditable && (
-                        <IconLock size={theme.icon.size.sm} />
-                      )}
-                    </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}
-                              />
-                            </React.Fragment>
-                          ))}
-                      </StyledAvatarGroup>
-                      <StyledAssignedText>
-                        {role.workspaceMembers.length}
-                      </StyledAssignedText>
-                    </StyledAssignedCell>
-                  </TableCell>
-                  <TableCell align={'right'}>
-                    <StyledIconChevronRight size={theme.icon.size.md} />
-                  </TableCell>
-                </StyledTableRow>
-              ))}
-          </StyledTable>
-          <StyledBottomSection>
-            <Button
-              Icon={IconPlus}
-              title={t`Create Role`}
-              variant="secondary"
-              size="small"
-              soon
-            />
-          </StyledBottomSection>
-        </Section>
+        {!rolesLoading && (
+          <>
+            <Roles roles={rolesData?.getRoles ?? []} />
+            <RolesDefaultRole roles={rolesData?.getRoles ?? []} />
+          </>
+        )}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

packages/twenty-front/src/pages/settings/roles/components/RolePermissionsObjectsTableRow.tsx

@@ -6,8 +6,8 @@ import { RolePermissionsObjectPermission } from '~/pages/settings/roles/types/Ro
 
 const StyledIconWrapper = styled.div`
   align-items: center;
-  background: ${({ theme }) => theme.color.blue10};
-  border: 1px solid ${({ theme }) => theme.color.blue30};
+  background: ${({ theme }) => theme.adaptiveColors.blue1};
+  border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
   height: ${({ theme }) => theme.spacing(4)};

packages/twenty-front/src/pages/settings/roles/components/Roles.tsx

@@ -0,0 +1,46 @@
+import { Table } from '@/ui/layout/table/components/Table';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+
+import { Button, H2Title, IconPlus, Section } from 'twenty-ui';
+import { Role } from '~/generated-metadata/graphql';
+import { RolesTableHeader } from '~/pages/settings/roles/components/RolesTableHeader';
+import { RolesTableRow } from '~/pages/settings/roles/components/RolesTableRow';
+
+const StyledTable = styled(Table)`
+  margin-top: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+const StyledBottomSection = 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;
+`;
+
+export const Roles = ({ roles }: { roles: Role[] }) => {
+  return (
+    <Section>
+      <H2Title
+        title={t`All roles`}
+        description={t`Assign roles to specify each member's access permissions`}
+      />
+      <StyledTable>
+        <RolesTableHeader />
+        {roles.map((role) => (
+          <RolesTableRow key={role.id} role={role} />
+        ))}
+      </StyledTable>
+      <StyledBottomSection>
+        <Button
+          Icon={IconPlus}
+          title={t`Create Role`}
+          variant="secondary"
+          size="small"
+          soon
+        />
+      </StyledBottomSection>
+    </Section>
+  );
+};

packages/twenty-front/src/pages/settings/roles/components/RolesDefaultRole.tsx

@@ -0,0 +1,80 @@
+import {
+  CurrentWorkspace,
+  currentWorkspaceState,
+} from '@/auth/states/currentWorkspaceState';
+import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { Select } from '@/ui/input/components/Select';
+import { t } from '@lingui/core/macro';
+import { useRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared';
+import { Card, H2Title, IconUserPin, Section } from 'twenty-ui';
+import {
+  Role,
+  UpdateWorkspaceMutation,
+  useUpdateWorkspaceMutation,
+} from '~/generated/graphql';
+
+export const RolesDefaultRole = ({ roles }: { roles: Role[] }) => {
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
+
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+
+  const defaultRole = currentWorkspace?.defaultRole;
+
+  const updateDefaultRole = (
+    defaultRoleId: string | null,
+    currentWorkspace: CurrentWorkspace,
+  ) => {
+    updateWorkspace({
+      variables: {
+        input: {
+          defaultRoleId: isDefined(defaultRoleId) ? defaultRoleId : null,
+        },
+      },
+      onCompleted: (data: UpdateWorkspaceMutation) => {
+        const defaultRole = data.updateWorkspace.defaultRole;
+
+        setCurrentWorkspace({
+          ...currentWorkspace,
+          defaultRole: isDefined(defaultRole) ? defaultRole : null,
+        });
+      },
+    });
+  };
+
+  if (!currentWorkspace) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <H2Title
+        title={t`Options`}
+        description={t`Adjust the role-related settings`}
+      />
+      <Card rounded>
+        <SettingsOptionCardContentSelect
+          Icon={IconUserPin}
+          title="Default Role"
+          description={t`Set a default role for this workspace`}
+        >
+          <Select
+            selectSizeVariant="small"
+            withSearchInput
+            dropdownId="default-role-select"
+            options={roles.map((role) => ({
+              label: role.label,
+              value: role.id,
+            }))}
+            value={defaultRole?.id ?? ''}
+            onChange={(value) =>
+              updateDefaultRole(value as string, currentWorkspace)
+            }
+          />
+        </SettingsOptionCardContentSelect>
+      </Card>
+    </Section>
+  );
+};

packages/twenty-front/src/pages/settings/roles/components/RolesTableHeader.tsx

@@ -0,0 +1,25 @@
+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>
+        <TableHeader>
+          <Trans>Name</Trans>
+        </TableHeader>
+        <TableHeader align={'right'}>
+          <Trans>Assigned to</Trans>
+        </TableHeader>
+        <TableHeader align={'right'}></TableHeader>
+      </TableRow>
+    </StyledTableHeaderRow>
+  );
+};

packages/twenty-front/src/pages/settings/roles/components/RolesTableRow.tsx

@@ -0,0 +1,117 @@
+import { SettingsPath } from '@/types/SettingsPath';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import React from 'react';
+import {
+  AppTooltip,
+  Avatar,
+  IconChevronRight,
+  IconLock,
+  IconUser,
+  TooltipDelay,
+} from 'twenty-ui';
+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.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
+const StyledNameCell = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledAssignedCell = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledAvatarGroup = styled.div`
+  align-items: center;
+  display: flex;
+  margin-right: ${({ theme }) => theme.spacing(1)};
+
+  > * {
+    margin-left: -5px;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+`;
+
+const StyledTableRow = styled(TableRow)`
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    cursor: pointer;
+  }
+`;
+
+export const RolesTableRow = ({ role }: { role: Role }) => {
+  const theme = useTheme();
+
+  const navigateSettings = useNavigateSettings();
+
+  const handleRoleClick = (roleId: string) => {
+    navigateSettings(SettingsPath.RoleDetail, { roleId });
+  };
+
+  return (
+    <StyledTableRow key={role.id} onClick={() => handleRoleClick(role.id)}>
+      <TableCell>
+        <StyledNameCell>
+          <IconUser size={theme.icon.size.md} />
+          {role.label}
+          {!role.isEditable && <IconLock size={theme.icon.size.sm} />}
+        </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}
+                />
+              </React.Fragment>
+            ))}
+          </StyledAvatarGroup>
+          <StyledAssignedText>
+            {role.workspaceMembers.length}
+          </StyledAssignedText>
+        </StyledAssignedCell>
+      </TableCell>
+      <TableCell align={'right'}>
+        <StyledIconChevronRight size={theme.icon.size.md} />
+      </TableCell>
+    </StyledTableRow>
+  );
+};