feat: multi-workspace (frontend) (#4232)

* select workspace component

* generateJWT mutation

* workspaces state and hooks

* requested changes

* mutation fix

* requested changes

* user workpsace delete call

* migration to drop and createt user workspace

* revert select props

* add DropdownMenu

* seperate multi-workspace dropdown as component

* Signup button displayed accurately

* update seed data for multi-workspace

* lint fix

* lint fix

* css fix

* lint fix

* state fix

* isDefined check

* refactor

* add default workspace constants for logo and name

* update migration

* lint fix

* isInviteMode check on sign-in/up

* removeWorkspaceMember mutation

* import fixes

* prop name fix

* backfill migration

* handle edge cases

* refactor

* remove migration query

* delete user on no-workspace found condition

* emit workspaceMember.deleted

* Fix event class and unrelated fix linked to a previously missing dependency

* Edit migration (I did it in prod manually)

* Revert changes

* Fix tests

* Fix conflicts

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/users/components/UserProvider.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { useSetRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { Workspaces, workspacesState } from '@/auth/states/workspaces';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 import { isDefined } from '~/utils/isDefined';
@@ -14,6 +15,7 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
 
   const setCurrentUser = useSetRecoilState(currentUserState);
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+  const setWorkspaces = useSetRecoilState(workspacesState);
 
   const setCurrentWorkspaceMember = useSetRecoilState(
     currentWorkspaceMemberState,
@@ -36,12 +38,25 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
         colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
       });
     }
+    if (isDefined(queryData?.currentUser?.workspaces)) {
+      const validWorkspaces = queryData.currentUser.workspaces.filter(
+        (obj: any) => obj.workspace !== null && obj.workspace !== undefined,
+      );
+      const workspaces: Workspaces[] = [];
+      validWorkspaces.forEach((validWorkspace: any) => {
+        const workspace = validWorkspace.workspace! as Workspaces;
+        workspaces.push(workspace);
+      });
+
+      setWorkspaces(workspaces);
+    }
   }, [
     setCurrentUser,
     isLoading,
     queryLoading,
     setCurrentWorkspace,
     setCurrentWorkspaceMember,
+    setWorkspaces,
     queryData?.currentUser,
   ]);
 

packages/twenty-front/src/modules/users/graphql/fragments/userQueryFragment.ts

@@ -34,5 +34,13 @@ export const USER_QUERY_FRAGMENT = gql`
         workspaceId
       }
     }
+    workspaces {
+      workspace {
+        id
+        logo
+        displayName
+        domainName
+      }
+    }
   }
 `;