Add empty states to settings tables (#10978)

## 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"
/>

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -11,6 +11,7 @@ import {
   IconButton,
   IconMail,
   IconReload,
+  IconSearch,
   IconTrash,
   Section,
   Status,
@@ -26,6 +27,7 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { SettingsPath } from '@/types/SettingsPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Table } from '@/ui/layout/table/components/Table';
@@ -51,11 +53,7 @@ const StyledButtonContainer = styled.div`
 `;
 
 const StyledTable = styled(Table)`
-  margin-top: ${({ theme }) => theme.spacing(0.5)};
-`;
-
-const StyledTableHeaderRow = styled(Table)`
-  margin-bottom: ${({ theme }) => theme.spacing(1.5)};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
 `;
 
 const StyledIconWrapper = styled.div`
@@ -70,6 +68,26 @@ const StyledTextContainerWithEllipsis = styled.div`
   white-space: nowrap;
 `;
 
+const StyledSearchContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSearchInput = styled(TextInput)`
+  input {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+    border: 1px solid ${({ theme }) => theme.border.color.medium};
+  }
+`;
+
+const StyledTableRows = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledNoMembers = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
 export const SettingsWorkspaceMembers = () => {
   const { t } = useLingui();
   const { enqueueSnackBar } = useSnackBar();
@@ -100,6 +118,12 @@ export const SettingsWorkspaceMembers = () => {
   const workspaceInvitations = useRecoilValue(workspaceInvitationsState);
   const setWorkspaceInvitations = useSetRecoilState(workspaceInvitationsState);
 
+  const [searchFilter, setSearchFilter] = useState('');
+
+  const handleSearchChange = (text: string) => {
+    setSearchFilter(text);
+  };
+
   useGetWorkspaceInvitationsQuery({
     onError: (error: Error) => {
       enqueueSnackBar(error.message, {
@@ -138,6 +162,21 @@ export const SettingsWorkspaceMembers = () => {
       : formatDistanceToNow(new Date(expiresAt));
   };
 
+  const filteredWorkspaceMembers = !searchFilter
+    ? workspaceMembers
+    : workspaceMembers.filter((member) => {
+        const searchTerm = searchFilter.toLowerCase();
+        const firstName = member.name.firstName?.toLowerCase() || '';
+        const lastName = member.name.lastName?.toLowerCase() || '';
+        const email = member.userEmail?.toLowerCase() || '';
+
+        return (
+          firstName.includes(searchTerm) ||
+          lastName.includes(searchTerm) ||
+          email.includes(searchTerm)
+        );
+      });
+
   return (
     <SubMenuTopBarContainer
       title={t`Members`}
@@ -167,77 +206,94 @@ export const SettingsWorkspaceMembers = () => {
             title={t`Manage Members`}
             description={t`Manage the members of your space here`}
           />
-          <Table>
-            <StyledTableHeaderRow>
-              <TableRow
-                gridAutoColumns="150px 1fr 1fr"
-                mobileGridAutoColumns="100px 1fr 1fr"
-              >
-                <TableHeader>
-                  <Trans>Name</Trans>
-                </TableHeader>
-                <TableHeader>
-                  <Trans>Email</Trans>
-                </TableHeader>
-                <TableHeader align={'right'}></TableHeader>
-              </TableRow>
-            </StyledTableHeaderRow>
-            {workspaceMembers?.map((workspaceMember) => (
-              <StyledTable key={workspaceMember.id}>
-                <TableRow
-                  gridAutoColumns="150px 1fr 1fr"
-                  mobileGridAutoColumns="100px 1fr 1fr"
-                >
-                  <TableCell>
-                    <StyledIconWrapper>
-                      <Avatar
-                        avatarUrl={workspaceMember.avatarUrl}
-                        placeholderColorSeed={workspaceMember.id}
-                        placeholder={workspaceMember.name.firstName ?? ''}
-                        type="rounded"
-                        size="sm"
-                      />
-                    </StyledIconWrapper>
-                    <StyledTextContainerWithEllipsis
-                      id={`hover-text-${workspaceMember.id}`}
-                    >
-                      {workspaceMember.name.firstName +
-                        ' ' +
-                        workspaceMember.name.lastName}
-                    </StyledTextContainerWithEllipsis>
-                    <AppTooltip
-                      anchorSelect={`#hover-text-${workspaceMember.id}`}
-                      content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
-                      noArrow
-                      place="top"
-                      positionStrategy="fixed"
-                      delay={TooltipDelay.shortDelay}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <StyledTextContainerWithEllipsis>
-                      {workspaceMember.userEmail}
-                    </StyledTextContainerWithEllipsis>
-                  </TableCell>
-                  <TableCell align={'right'}>
-                    {currentWorkspaceMember?.id !== workspaceMember.id && (
-                      <StyledButtonContainer>
-                        <IconButton
-                          onClick={() => {
-                            setIsConfirmationModalOpen(true);
-                            setWorkspaceMemberToDelete(workspaceMember.id);
-                          }}
-                          variant="tertiary"
-                          size="medium"
-                          Icon={IconTrash}
+          <StyledSearchContainer>
+            <StyledSearchInput
+              value={searchFilter}
+              onChange={handleSearchChange}
+              placeholder={t`Search a team member...`}
+              fullWidth
+              LeftIcon={IconSearch}
+              sizeVariant="lg"
+            />
+          </StyledSearchContainer>
+          <StyledTable>
+            <TableRow
+              gridAutoColumns="150px 1fr 1fr"
+              mobileGridAutoColumns="100px 1fr 1fr"
+            >
+              <TableHeader>
+                <Trans>Name</Trans>
+              </TableHeader>
+              <TableHeader>
+                <Trans>Email</Trans>
+              </TableHeader>
+              <TableHeader align={'right'}></TableHeader>
+            </TableRow>
+            <StyledTableRows>
+              {filteredWorkspaceMembers.length > 0 ? (
+                filteredWorkspaceMembers.map((workspaceMember) => (
+                  <TableRow
+                    gridAutoColumns="150px 1fr 1fr"
+                    mobileGridAutoColumns="100px 1fr 1fr"
+                    key={workspaceMember.id}
+                  >
+                    <TableCell>
+                      <StyledIconWrapper>
+                        <Avatar
+                          avatarUrl={workspaceMember.avatarUrl}
+                          placeholderColorSeed={workspaceMember.id}
+                          placeholder={workspaceMember.name.firstName ?? ''}
+                          type="rounded"
+                          size="sm"
                         />
-                      </StyledButtonContainer>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </StyledTable>
-            ))}
-          </Table>
+                      </StyledIconWrapper>
+                      <StyledTextContainerWithEllipsis
+                        id={`hover-text-${workspaceMember.id}`}
+                      >
+                        {workspaceMember.name.firstName +
+                          ' ' +
+                          workspaceMember.name.lastName}
+                      </StyledTextContainerWithEllipsis>
+                      <AppTooltip
+                        anchorSelect={`#hover-text-${workspaceMember.id}`}
+                        content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
+                        noArrow
+                        place="top"
+                        positionStrategy="fixed"
+                        delay={TooltipDelay.shortDelay}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <StyledTextContainerWithEllipsis>
+                        {workspaceMember.userEmail}
+                      </StyledTextContainerWithEllipsis>
+                    </TableCell>
+                    <TableCell align={'right'}>
+                      {currentWorkspaceMember?.id !== workspaceMember.id && (
+                        <StyledButtonContainer>
+                          <IconButton
+                            onClick={() => {
+                              setIsConfirmationModalOpen(true);
+                              setWorkspaceMemberToDelete(workspaceMember.id);
+                            }}
+                            variant="tertiary"
+                            size="medium"
+                            Icon={IconTrash}
+                          />
+                        </StyledButtonContainer>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <StyledNoMembers>
+                  {!searchFilter
+                    ? t`No members`
+                    : t`No members match your search`}
+                </StyledNoMembers>
+              )}
+            </StyledTableRows>
+          </StyledTable>
         </Section>
         <Section>
           <H2Title
@@ -246,26 +302,25 @@ export const SettingsWorkspaceMembers = () => {
           />
           <WorkspaceInviteTeam />
           {isNonEmptyArray(workspaceInvitations) && (
-            <Table>
-              <StyledTableHeaderRow>
-                <TableRow
-                  gridAutoColumns="150px 1fr 1fr"
-                  mobileGridAutoColumns="100px 1fr 1fr"
-                >
-                  <TableHeader>
-                    <Trans>Email</Trans>
-                  </TableHeader>
-                  <TableHeader align={'right'}>
-                    <Trans>Expires in</Trans>
-                  </TableHeader>
-                  <TableHeader></TableHeader>
-                </TableRow>
-              </StyledTableHeaderRow>
-              {workspaceInvitations?.map((workspaceInvitation) => (
-                <StyledTable key={workspaceInvitation.id}>
+            <StyledTable>
+              <TableRow
+                gridAutoColumns="150px 1fr 1fr"
+                mobileGridAutoColumns="100px 1fr 1fr"
+              >
+                <TableHeader>
+                  <Trans>Email</Trans>
+                </TableHeader>
+                <TableHeader align={'right'}>
+                  <Trans>Expires in</Trans>
+                </TableHeader>
+                <TableHeader></TableHeader>
+              </TableRow>
+              <StyledTableRows>
+                {workspaceInvitations?.map((workspaceInvitation) => (
                   <TableRow
                     gridAutoColumns="150px 1fr 1fr"
                     mobileGridAutoColumns="100px 1fr 1fr"
+                    key={workspaceInvitation.id}
                   >
                     <TableCell>
                       <StyledIconWrapper>
@@ -309,9 +364,9 @@ export const SettingsWorkspaceMembers = () => {
                       </StyledButtonContainer>
                     </TableCell>
                   </TableRow>
-                </StyledTable>
-              ))}
-            </Table>
+                ))}
+              </StyledTableRows>
+            </StyledTable>
           )}
         </Section>
       </SettingsPageContainer>