Remove current workspace member from role assignment picker (#10482)

## Context
Removing the ability to assign yourself from the UI. The backend already
checks that. This is because a member can only have one role for the V1
of permissions
Took the opportunity to move some roles related components in dedicated
folders

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateReadOnly.tsx

@@ -14,7 +14,7 @@ export const RecordTableEmptyStateReadOnly = () => {
   return (
     <RecordTableEmptyStateDisplay
       title={t`No records found`}
-      subTitle={t`You are not allowed to create records in this object`}
+      subTitle={t`You are not allowed to create records for this object`}
       animatedPlaceholderType="noRecord"
       buttonTitle={buttonTitle}
       ButtonIcon={IconPlus}

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

@@ -17,10 +17,10 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useGetRolesQuery } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { RolePermissions } from '~/pages/settings/roles/components/RolePermissions';
+import { RolePermissions } from '~/pages/settings/roles/role-permissions/components/RolePermissions';
-import { RoleSettings } from '~/pages/settings/roles/components/RoleSettings';
+import { RoleSettings } from '~/pages/settings/roles/role-settings/components/RoleSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { RoleAssignment } from './components/RoleAssignment';
+import { RoleAssignment } from './role-assignment/components/RoleAssignment';
 
 const StyledContentContainer = styled.div`
   flex: 1;

packages/twenty-front/src/pages/settings/roles/role-assignment/components/RoleAssignment.tsx

@@ -1,4 +1,5 @@
 import { currentWorkspaceMembersState } from '@/auth/states/currentWorkspaceMembersStates';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -24,11 +25,11 @@ import {
   useUpdateWorkspaceMemberRoleMutation,
 } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { RoleAssignmentConfirmationModalSelectedWorkspaceMember } from '~/pages/settings/roles/types/RoleAssignmentConfirmationModalSelectedWorkspaceMember';
+import { RoleAssignmentTableHeader } from '~/pages/settings/roles/role-assignment/components/RoleAssignmentTableHeader';
+import { RoleAssignmentWorkspaceMemberPickerDropdown } from '~/pages/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdown';
+import { RoleAssignmentConfirmationModalSelectedWorkspaceMember } from '~/pages/settings/roles/role-assignment/types/RoleAssignmentConfirmationModalSelectedWorkspaceMember';
 import { RoleAssignmentConfirmationModal } from './RoleAssignmentConfirmationModal';
-import { RoleAssignmentTableHeader } from './RoleAssignmentTableHeader';
 import { RoleAssignmentTableRow } from './RoleAssignmentTableRow';
-import { RoleWorkspaceMemberPickerDropdown } from './RoleWorkspaceMemberPickerDropdown';
 
 const StyledBottomSection = styled(Section)<{ hasRows: boolean }>`
   ${({ hasRows, theme }) =>
@@ -82,6 +83,7 @@ export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
   const { closeDropdown } = useDropdown('role-member-select');
   const [searchFilter, setSearchFilter] = useState('');
   const currentWorkspaceMembers = useRecoilValue(currentWorkspaceMembersState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const workspaceMemberRoleMap = new Map<
     string,
@@ -108,6 +110,18 @@ export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
         );
       });
 
+  const assignedWorkspaceMemberIds = role.workspaceMembers.map(
+    (workspaceMember) => workspaceMember.id,
+  );
+
+  const assignableWorkspaceMembers = currentWorkspaceMembers.filter(
+    (member) => member.id !== currentWorkspaceMember?.id,
+  );
+
+  const allWorkspaceMembersHaveThisRole = assignableWorkspaceMembers.every(
+    (member) => assignedWorkspaceMemberIds.includes(member.id),
+  );
+
   const handleModalClose = () => {
     setConfirmationModalIsOpen(false);
     setSelectedWorkspaceMember(null);
@@ -147,9 +161,6 @@ export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
     setSearchFilter(text);
   };
 
-  const allWorkspaceMembersHaveThisRole =
-    role.workspaceMembers.length === currentWorkspaceMembers.length;
-
   return (
     <>
       <Section>
@@ -201,10 +212,11 @@ export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
             </>
           }
           dropdownComponents={
-            <RoleWorkspaceMemberPickerDropdown
+            <RoleAssignmentWorkspaceMemberPickerDropdown
-              excludedWorkspaceMemberIds={role.workspaceMembers.map(
+              excludedWorkspaceMemberIds={[
-                (workspaceMember) => workspaceMember.id,
+                ...assignedWorkspaceMemberIds,
-              )}
+                currentWorkspaceMember?.id,
+              ]}
               onSelect={handleSelectWorkspaceMember}
             />
           }

packages/twenty-front/src/pages/settings/roles/role-assignment/components/RoleAssignmentConfirmationModal.tsx

@@ -1,7 +1,7 @@
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { t } from '@lingui/core/macro';
-import { RoleAssignmentConfirmationModalSubtitle } from '~/pages/settings/roles/components/RoleAssignmentConfirmationModalSubtitle';
+import { RoleAssignmentConfirmationModalSubtitle } from '~/pages/settings/roles/role-assignment/components/RoleAssignmentConfirmationModalSubtitle';
-import { RoleAssignmentConfirmationModalSelectedWorkspaceMember } from '~/pages/settings/roles/types/RoleAssignmentConfirmationModalSelectedWorkspaceMember';
+import { RoleAssignmentConfirmationModalSelectedWorkspaceMember } from '~/pages/settings/roles/role-assignment/types/RoleAssignmentConfirmationModalSelectedWorkspaceMember';
 
 type RoleAssignmentConfirmationModalProps = {
   selectedWorkspaceMember: RoleAssignmentConfirmationModalSelectedWorkspaceMember;

packages/twenty-front/src/pages/settings/roles/role-assignment/components/RoleAssignmentConfirmationModalSubtitle.tsx

@@ -2,7 +2,7 @@ import { SettingsCard } from '@/settings/components/SettingsCard';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { IconUser } from 'twenty-ui';
-import { RoleAssignmentConfirmationModalSelectedWorkspaceMember } from '~/pages/settings/roles/types/RoleAssignmentConfirmationModalSelectedWorkspaceMember';
+import { RoleAssignmentConfirmationModalSelectedWorkspaceMember } from '~/pages/settings/roles/role-assignment/types/RoleAssignmentConfirmationModalSelectedWorkspaceMember';
 
 const StyledSettingsCardContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(2)};

packages/twenty-front/src/pages/settings/roles/role-assignment/components/RoleAssignmentTableHeader.tsx

@@ -8,14 +8,8 @@ const StyledTableHeaderRow = styled(Table)`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
-type RoleAssignmentTableHeaderProps = {
+export const RoleAssignmentTableHeader = () => (
-  className?: string;
+  <StyledTableHeaderRow>
-};
-
-export const RoleAssignmentTableHeader = ({
-  className,
-}: RoleAssignmentTableHeaderProps) => (
-  <StyledTableHeaderRow className={className}>
     <TableRow gridAutoColumns="150px 1fr 1fr">
       <TableHeader>{t`Name`}</TableHeader>
       <TableHeader>{t`Email`}</TableHeader>

packages/twenty-front/src/pages/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdown.tsx

@@ -6,17 +6,17 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { ChangeEvent, useState } from 'react';
 import { WorkspaceMember } from '~/generated-metadata/graphql';
-import { RoleWorkspaceMemberPickerDropdownContent } from './RoleWorkspaceMemberPickerDropdownContent';
+import { RoleAssignmentWorkspaceMemberPickerDropdownContent } from '~/pages/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdownContent';
 
-type RoleWorkspaceMemberPickerDropdownProps = {
+type RoleAssignmentWorkspaceMemberPickerDropdownProps = {
   excludedWorkspaceMemberIds: string[];
   onSelect: (workspaceMember: WorkspaceMember) => void;
 };
 
-export const RoleWorkspaceMemberPickerDropdown = ({
+export const RoleAssignmentWorkspaceMemberPickerDropdown = ({
   excludedWorkspaceMemberIds,
   onSelect,
-}: RoleWorkspaceMemberPickerDropdownProps) => {
+}: RoleAssignmentWorkspaceMemberPickerDropdownProps) => {
   const [searchFilter, setSearchFilter] = useState('');
 
   const { loading, records: workspaceMembers } = useSearchRecords({
@@ -42,7 +42,7 @@ export const RoleWorkspaceMemberPickerDropdown = ({
       />
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer>
-        <RoleWorkspaceMemberPickerDropdownContent
+        <RoleAssignmentWorkspaceMemberPickerDropdownContent
           loading={loading}
           searchFilter={searchFilter}
           filteredWorkspaceMembers={filteredWorkspaceMembers}

packages/twenty-front/src/pages/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdownContent.tsx

@@ -2,19 +2,19 @@ import { t } from '@lingui/core/macro';
 import { MenuItem, MenuItemAvatar } from 'twenty-ui';
 import { WorkspaceMember } from '~/generated-metadata/graphql';
 
-type RoleWorkspaceMemberPickerDropdownContentProps = {
+type RoleAssignmentWorkspaceMemberPickerDropdownContentProps = {
   loading: boolean;
   searchFilter: string;
   filteredWorkspaceMembers: WorkspaceMember[];
   onSelect: (workspaceMember: WorkspaceMember) => void;
 };
 
-export const RoleWorkspaceMemberPickerDropdownContent = ({
+export const RoleAssignmentWorkspaceMemberPickerDropdownContent = ({
   loading,
   searchFilter,
   filteredWorkspaceMembers,
   onSelect,
-}: RoleWorkspaceMemberPickerDropdownContentProps) => {
+}: RoleAssignmentWorkspaceMemberPickerDropdownContentProps) => {
   if (loading) {
     return null;
   }

packages/twenty-front/src/pages/settings/roles/role-permissions/components/RolePermissions.tsx

@@ -10,9 +10,9 @@ import {
 } from 'twenty-ui';
 import { Role } from '~/generated-metadata/graphql';
 import { SettingsPermissions } from '~/generated/graphql';
-import { RolePermissionsObjectsTableHeader } from '~/pages/settings/roles/components/RolePermissionsObjectsTableHeader';
+import { RolePermissionsObjectsTableHeader } from '~/pages/settings/roles/role-permissions/components/RolePermissionsObjectsTableHeader';
-import { RolePermissionsSettingsTableHeader } from '~/pages/settings/roles/components/RolePermissionsSettingsTableHeader';
+import { RolePermissionsSettingsTableHeader } from '~/pages/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader';
-import { RolePermissionsSettingsTableRow } from '~/pages/settings/roles/components/RolePermissionsSettingsTableRow';
+import { RolePermissionsSettingsTableRow } from '~/pages/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow';
 import { RolePermissionsObjectPermission } from '~/pages/settings/roles/types/RolePermissionsObjectPermission';
 import { RolePermissionsObjectsTableRow } from './RolePermissionsObjectsTableRow';