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>

package.json

@@ -230,6 +230,7 @@
     "@types/js-cookie": "^3.0.3",
     "@types/lodash.camelcase": "^4.3.7",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.isempty": "^4.4.7",
     "@types/lodash.isequal": "^4.5.7",
     "@types/lodash.isobject": "^3.0.7",

packages/twenty-front/src/generated/graphql.tsx

@@ -254,6 +254,7 @@ export type Mutation = {
   generateJWT: AuthTokens;
   generateTransientToken: TransientToken;
   impersonate: Verify;
+  removeWorkspaceMember: Scalars['String'];
   renewToken: AuthTokens;
   signUp: LoginToken;
   track: Analytics;
@@ -311,6 +312,11 @@ export type MutationImpersonateArgs = {
 };
 
 
+export type MutationRemoveWorkspaceMemberArgs = {
+  memberId: Scalars['String'];
+};
+
+
 export type MutationRenewTokenArgs = {
   refreshToken: Scalars['String'];
 };
@@ -953,6 +959,13 @@ export type GenerateApiKeyTokenMutationVariables = Exact<{
 
 export type GenerateApiKeyTokenMutation = { __typename?: 'Mutation', generateApiKeyToken: { __typename?: 'ApiKeyToken', token: string } };
 
+export type GenerateJwtMutationVariables = Exact<{
+  workspaceId: Scalars['String'];
+}>;
+
+
+export type GenerateJwtMutation = { __typename?: 'Mutation', generateJWT: { __typename?: 'AuthTokens', tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
+
 export type GenerateTransientTokenMutationVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -963,7 +976,7 @@ export type ImpersonateMutationVariables = Exact<{
 }>;
 
 
-export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
+export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: string, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
 
 export type RenewTokenMutationVariables = Exact<{
   refreshToken: Scalars['String'];
@@ -994,7 +1007,7 @@ export type VerifyMutationVariables = Exact<{
 }>;
 
 
-export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
+export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: string, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
 
 export type CheckUserExistsQueryVariables = Exact<{
   email: Scalars['String'];
@@ -1053,7 +1066,7 @@ export type UploadImageMutationVariables = Exact<{
 
 export type UploadImageMutation = { __typename?: 'Mutation', uploadImage: string };
 
-export type UserQueryFragmentFragment = { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null } };
+export type UserQueryFragmentFragment = { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: string, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> };
 
 export type DeleteUserAccountMutationVariables = Exact<{ [key: string]: never; }>;
 
@@ -1072,6 +1085,13 @@ export type GetCurrentUserQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', status: string } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null } | null }> } };
 
+export type RemoveWorkspaceMemberMutationVariables = Exact<{
+  memberId: Scalars['String'];
+}>;
+
+
+export type RemoveWorkspaceMemberMutation = { __typename?: 'Mutation', removeWorkspaceMember: string };
+
 export type ActivateWorkspaceMutationVariables = Exact<{
   input: ActivateWorkspaceInput;
 }>;
@@ -1232,6 +1252,14 @@ export const UserQueryFragmentFragmentDoc = gql`
       workspaceId
     }
   }
+  workspaces {
+    workspace {
+      id
+      logo
+      displayName
+      domainName
+    }
+  }
 }
     `;
 export const GetTimelineCalendarEventsFromCompanyIdDocument = gql`
@@ -1535,6 +1563,41 @@ export function useGenerateApiKeyTokenMutation(baseOptions?: Apollo.MutationHook
 export type GenerateApiKeyTokenMutationHookResult = ReturnType<typeof useGenerateApiKeyTokenMutation>;
 export type GenerateApiKeyTokenMutationResult = Apollo.MutationResult<GenerateApiKeyTokenMutation>;
 export type GenerateApiKeyTokenMutationOptions = Apollo.BaseMutationOptions<GenerateApiKeyTokenMutation, GenerateApiKeyTokenMutationVariables>;
+export const GenerateJwtDocument = gql`
+    mutation GenerateJWT($workspaceId: String!) {
+  generateJWT(workspaceId: $workspaceId) {
+    tokens {
+      ...AuthTokensFragment
+    }
+  }
+}
+    ${AuthTokensFragmentFragmentDoc}`;
+export type GenerateJwtMutationFn = Apollo.MutationFunction<GenerateJwtMutation, GenerateJwtMutationVariables>;
+
+/**
+ * __useGenerateJwtMutation__
+ *
+ * To run a mutation, you first call `useGenerateJwtMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useGenerateJwtMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [generateJwtMutation, { data, loading, error }] = useGenerateJwtMutation({
+ *   variables: {
+ *      workspaceId: // value for 'workspaceId'
+ *   },
+ * });
+ */
+export function useGenerateJwtMutation(baseOptions?: Apollo.MutationHookOptions<GenerateJwtMutation, GenerateJwtMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<GenerateJwtMutation, GenerateJwtMutationVariables>(GenerateJwtDocument, options);
+      }
+export type GenerateJwtMutationHookResult = ReturnType<typeof useGenerateJwtMutation>;
+export type GenerateJwtMutationResult = Apollo.MutationResult<GenerateJwtMutation>;
+export type GenerateJwtMutationOptions = Apollo.BaseMutationOptions<GenerateJwtMutation, GenerateJwtMutationVariables>;
 export const GenerateTransientTokenDocument = gql`
     mutation generateTransientToken {
   generateTransientToken {
@@ -2202,6 +2265,37 @@ export function useGetCurrentUserLazyQuery(baseOptions?: Apollo.LazyQueryHookOpt
 export type GetCurrentUserQueryHookResult = ReturnType<typeof useGetCurrentUserQuery>;
 export type GetCurrentUserLazyQueryHookResult = ReturnType<typeof useGetCurrentUserLazyQuery>;
 export type GetCurrentUserQueryResult = Apollo.QueryResult<GetCurrentUserQuery, GetCurrentUserQueryVariables>;
+export const RemoveWorkspaceMemberDocument = gql`
+    mutation RemoveWorkspaceMember($memberId: String!) {
+  removeWorkspaceMember(memberId: $memberId)
+}
+    `;
+export type RemoveWorkspaceMemberMutationFn = Apollo.MutationFunction<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>;
+
+/**
+ * __useRemoveWorkspaceMemberMutation__
+ *
+ * To run a mutation, you first call `useRemoveWorkspaceMemberMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRemoveWorkspaceMemberMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [removeWorkspaceMemberMutation, { data, loading, error }] = useRemoveWorkspaceMemberMutation({
+ *   variables: {
+ *      memberId: // value for 'memberId'
+ *   },
+ * });
+ */
+export function useRemoveWorkspaceMemberMutation(baseOptions?: Apollo.MutationHookOptions<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>(RemoveWorkspaceMemberDocument, options);
+      }
+export type RemoveWorkspaceMemberMutationHookResult = ReturnType<typeof useRemoveWorkspaceMemberMutation>;
+export type RemoveWorkspaceMemberMutationResult = Apollo.MutationResult<RemoveWorkspaceMemberMutation>;
+export type RemoveWorkspaceMemberMutationOptions = Apollo.BaseMutationOptions<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>;
 export const ActivateWorkspaceDocument = gql`
     mutation ActivateWorkspace($input: ActivateWorkspaceInput!) {
   activateWorkspace(data: $input) {

packages/twenty-front/src/modules/auth/graphql/mutations/generateJWT.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const GENERATE_JWT = gql`
+  mutation GenerateJWT($workspaceId: String!) {
+    generateJWT(workspaceId: $workspaceId) {
+      tokens {
+        ...AuthTokensFragment
+      }
+    }
+  }
+`;

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -11,6 +11,7 @@ import {
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
+import { workspacesState } from '@/auth/states/workspaces';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { billingState } from '@/client-config/states/billingState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
@@ -40,6 +41,7 @@ export const useAuth = () => {
 
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
   const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState);
+  const setWorkspaces = useSetRecoilState(workspacesState);
 
   const [challenge] = useChallengeMutation();
   const [signUp] = useSignUpMutation();
@@ -101,6 +103,15 @@ export const useAuth = () => {
       }
       const workspace = user.defaultWorkspace ?? null;
       setCurrentWorkspace(workspace);
+      if (isDefined(verifyResult.data?.verify.user.workspaces)) {
+        const validWorkspaces = verifyResult.data?.verify.user.workspaces
+          .filter(
+            ({ workspace }) => workspace !== null && workspace !== undefined,
+          )
+          .map((validWorkspace) => validWorkspace.workspace!);
+
+        setWorkspaces(validWorkspaces);
+      }
       return {
         user,
         workspaceMember,
@@ -114,6 +125,7 @@ export const useAuth = () => {
       setCurrentUser,
       setCurrentWorkspaceMember,
       setCurrentWorkspace,
+      setWorkspaces,
     ],
   );
 

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -54,6 +54,7 @@ export const SignInUpForm = () => {
   const { form } = useSignInUpForm();
 
   const {
+    isInviteMode,
     signInUpStep,
     signInUpMode,
     continueWithCredentials,
@@ -89,14 +90,14 @@ export const SignInUpForm = () => {
   }, [signInUpMode, signInUpStep]);
 
   const title = useMemo(() => {
-    if (signInUpMode === SignInUpMode.Invite) {
+    if (isInviteMode) {
       return `Join ${workspace?.displayName ?? ''} team`;
     }
 
     return signInUpMode === SignInUpMode.SignIn
       ? 'Sign in to Twenty'
       : 'Sign up to Twenty';
-  }, [signInUpMode, workspace?.displayName]);
+  }, [signInUpMode, workspace?.displayName, isInviteMode]);
 
   const theme = useTheme();
 

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -15,7 +15,6 @@ import { useAuth } from '../../hooks/useAuth';
 export enum SignInUpMode {
   SignIn = 'sign-in',
   SignUp = 'sign-up',
-  Invite = 'invite',
 }
 
 export enum SignInUpStep {
@@ -33,15 +32,13 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
 
   const { navigateAfterSignInUp } = useNavigateAfterSignInUp();
 
+  const [isInviteMode] = useState(() => isMatchingLocation(AppPath.Invite));
+
   const [signInUpStep, setSignInUpStep] = useState<SignInUpStep>(
     SignInUpStep.Init,
   );
 
   const [signInUpMode, setSignInUpMode] = useState<SignInUpMode>(() => {
-    if (isMatchingLocation(AppPath.Invite)) {
-      return SignInUpMode.Invite;
-    }
-
     return isMatchingLocation(AppPath.SignIn)
       ? SignInUpMode.SignIn
       : SignInUpMode.SignUp;
@@ -72,24 +69,14 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
       },
       onCompleted: (data) => {
         if (data?.checkUserExists.exists) {
-          isMatchingLocation(AppPath.Invite)
+          setSignInUpMode(SignInUpMode.SignIn);
-            ? setSignInUpMode(SignInUpMode.Invite)
-            : setSignInUpMode(SignInUpMode.SignIn);
         } else {
-          isMatchingLocation(AppPath.Invite)
+          setSignInUpMode(SignInUpMode.SignUp);
-            ? setSignInUpMode(SignInUpMode.Invite)
-            : setSignInUpMode(SignInUpMode.SignUp);
         }
         setSignInUpStep(SignInUpStep.Password);
       },
     });
-  }, [
+  }, [setSignInUpStep, checkUserExistsQuery, form, setSignInUpMode]);
-    isMatchingLocation,
-    setSignInUpStep,
-    checkUserExistsQuery,
-    form,
-    setSignInUpMode,
-  ]);
 
   const submitCredentials: SubmitHandler<Form> = useCallback(
     async (data) => {
@@ -102,7 +89,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
           workspace: currentWorkspace,
           workspaceMember: currentWorkspaceMember,
         } =
-          signInUpMode === SignInUpMode.SignIn
+          signInUpMode === SignInUpMode.SignIn && !isInviteMode
             ? await signInWithCredentials(
                 data.email.toLowerCase().trim(),
                 data.password,
@@ -122,6 +109,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
     },
     [
       signInUpMode,
+      isInviteMode,
       signInWithCredentials,
       signUpWithCredentials,
       workspaceInviteHash,
@@ -156,6 +144,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
   );
 
   return {
+    isInviteMode,
     signInUpStep,
     signInUpMode,
     continueWithCredentials,

packages/twenty-front/src/modules/auth/states/workspaces.ts

@@ -0,0 +1,9 @@
+import { createState } from '@/ui/utilities/state/utils/createState';
+import { Workspace } from '~/generated/graphql';
+
+export type Workspaces = Pick<Workspace, 'id' | 'logo' | 'displayName'>;
+
+export const workspacesState = createState<Workspaces[] | null>({
+  key: 'workspacesState',
+  defaultValue: [],
+});

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { Workspaces } from '@/auth/states/workspaces';
+import { IconChevronDown } from '@/ui/display/icon';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
+import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
+import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId';
+import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
+import { NavigationDrawerHotKeyScope } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerHotKeyScope';
+
+const StyledLogo = styled.div<{ logo: string }>`
+  background: url(${({ logo }) => logo});
+  background-position: center;
+  background-size: cover;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 16px;
+  width: 16px;
+`;
+
+const StyledContainer = styled.div`
+  align-items: center;
+  cursor: pointer;
+  color: ${({ theme }) => theme.font.color.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border: 1px solid transparent;
+  display: flex;
+  justify-content: space-between;
+  height: ${({ theme }) => theme.spacing(7)};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.background.transparent.lighter};
+    border: 1px solid ${({ theme }) => theme.border.color.medium};
+  }
+`;
+
+const StyledLabel = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
+`;
+
+type MultiWorkspaceDropdownButtonProps = {
+  workspaces: Workspaces[];
+};
+
+export const MultiWorkspaceDropdownButton = ({
+  workspaces,
+}: MultiWorkspaceDropdownButtonProps) => {
+  const theme = useTheme();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
+  const [isMultiWorkspaceDropdownOpen, setToggleMultiWorkspaceDropdown] =
+    useState(false);
+
+  const { switchWorkspace } = useWorkspaceSwitching();
+
+  const { closeDropdown } = useDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
+
+  const handleChange = async (workspaceId: string) => {
+    setToggleMultiWorkspaceDropdown(!isMultiWorkspaceDropdownOpen);
+    closeDropdown();
+    await switchWorkspace(workspaceId);
+  };
+
+  return (
+    <Dropdown
+      dropdownId={MULTI_WORKSPACE_DROPDOWN_ID}
+      dropdownHotkeyScope={{
+        scope: NavigationDrawerHotKeyScope.MultiWorkspaceDropdownButton,
+      }}
+      clickableComponent={
+        <StyledContainer>
+          <StyledLogo
+            logo={
+              currentWorkspace?.logo === null
+                ? DEFAULT_WORKSPACE_LOGO
+                : currentWorkspace?.logo ?? ''
+            }
+          />
+          <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
+          <StyledIconChevronDown
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        </StyledContainer>
+      }
+      dropdownComponents={
+        <DropdownMenuItemsContainer>
+          {workspaces.map((workspace) => (
+            <MenuItemSelectAvatar
+              key={workspace.id}
+              text={workspace.displayName!}
+              avatar={
+                <StyledLogo
+                  logo={
+                    workspace.logo === null
+                      ? DEFAULT_WORKSPACE_LOGO
+                      : workspace.logo ?? ''
+                  }
+                />
+              }
+              selected={currentWorkspace?.id === workspace.id}
+              onClick={() => handleChange(workspace.id)}
+            />
+          ))}
+        </DropdownMenuItemsContainer>
+      }
+    />
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -1,5 +1,10 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
+import { workspacesState } from '@/auth/states/workspaces';
+import { MultiWorkspaceDropdownButton } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton';
+import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
+import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
@@ -44,16 +49,24 @@ type NavigationDrawerHeaderProps = {
 };
 
 export const NavigationDrawerHeader = ({
-  name = 'Twenty',
+  name = DEFAULT_WORKSPACE_NAME,
-  logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=',
+  logo = DEFAULT_WORKSPACE_LOGO,
   showCollapseButton,
 }: NavigationDrawerHeaderProps) => {
   const isMobile = useIsMobile();
+  const workspaces = useRecoilValue(workspacesState);
 
   return (
     <StyledContainer>
-      <StyledLogo logo={logo} />
+      {workspaces !== null && workspaces.length > 1 ? (
-      <StyledName>{name}</StyledName>
+        <MultiWorkspaceDropdownButton workspaces={workspaces} />
+      ) : (
+        <>
+          <StyledLogo logo={logo} />
+          <StyledName>{name}</StyledName>
+        </>
+      )}
+
       {!isMobile && (
         <StyledNavigationDrawerCollapseButton
           direction="left"

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_WORKSPACE_LOGO =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName.ts

@@ -0,0 +1 @@
+export const DEFAULT_WORKSPACE_NAME = 'Twenty';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId.ts

@@ -0,0 +1 @@
+export const MULTI_WORKSPACE_DROPDOWN_ID = 'multi-workspace-dropdown-id';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching.ts

@@ -0,0 +1,38 @@
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { tokenPairState } from '@/auth/states/tokenPairState';
+import { useGenerateJwtMutation } from '~/generated/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+export const useWorkspaceSwitching = () => {
+  const navigate = useNavigate();
+  const setTokenPair = useSetRecoilState(tokenPairState);
+  const [generateJWT] = useGenerateJwtMutation();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
+  const switchWorkspace = async (workspaceId: string) => {
+    if (currentWorkspace?.id === workspaceId) return;
+    const jwt = await generateJWT({
+      variables: {
+        workspaceId,
+      },
+    });
+
+    if (isDefined(jwt.errors)) {
+      throw jwt.errors;
+    }
+
+    if (!isDefined(jwt.data?.generateJWT)) {
+      throw new Error('could not create token');
+    }
+
+    const { tokens } = jwt.data.generateJWT;
+    setTokenPair(tokens);
+    navigate(`/objects/companies`);
+    window.location.reload();
+  };
+
+  return { switchWorkspace };
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/types/NavigationDrawerHotKeyScope.ts

@@ -0,0 +1,3 @@
+export enum NavigationDrawerHotKeyScope {
+  MultiWorkspaceDropdownButton = 'multi-workspace-dropdown',
+}

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
+      }
+    }
   }
 `;

packages/twenty-server/src/database/commands/data-seed-dev-workspace.command.ts

@@ -15,6 +15,10 @@ import { WorkspaceDataSourceService } from 'src/engine/workspace-datasource/work
 import { WorkspaceSyncMetadataService } from 'src/engine/workspace-manager/workspace-sync-metadata/workspace-sync-metadata.service';
 import { seedCalendarEvents } from 'src/database/typeorm-seeds/workspace/calendar-events';
 import { EnvironmentService } from 'src/engine/integrations/environment/environment.service';
+import {
+  SeedAppleWorkspaceId,
+  SeedTwentyWorkspaceId,
+} from 'src/database/typeorm-seeds/core/workspaces';
 
 // TODO: implement dry-run
 @Command({
@@ -23,7 +27,7 @@ import { EnvironmentService } from 'src/engine/integrations/environment/environm
     'Seed workspace with initial data. This command is intended for development only.',
 })
 export class DataSeedWorkspaceCommand extends CommandRunner {
-  workspaceId = '20202020-1c25-4d02-bf25-6aeccf7ea419';
+  workspaceIds = [SeedAppleWorkspaceId, SeedTwentyWorkspaceId];
 
   constructor(
     private readonly environmentService: EnvironmentService,
@@ -45,79 +49,88 @@ export class DataSeedWorkspaceCommand extends CommandRunner {
         schema: 'core',
       });
 
-      await dataSource.initialize();
+      for (const workspaceId of this.workspaceIds) {
+        await dataSource.initialize();
 
-      await seedCoreSchema(dataSource, this.workspaceId);
+        await seedCoreSchema(dataSource, workspaceId);
 
-      await dataSource.destroy();
+        await dataSource.destroy();
 
-      const schemaName =
+        const schemaName =
-        await this.workspaceDataSourceService.createWorkspaceDBSchema(
+          await this.workspaceDataSourceService.createWorkspaceDBSchema(
-          this.workspaceId,
+            workspaceId,
-        );
+          );
 
-      const dataSourceMetadata =
+        const dataSourceMetadata =
-        await this.dataSourceService.createDataSourceMetadata(
+          await this.dataSourceService.createDataSourceMetadata(
-          this.workspaceId,
+            workspaceId,
-          schemaName,
+            schemaName,
-        );
+          );
 
-      await this.workspaceSyncMetadataService.synchronize({
+        await this.workspaceSyncMetadataService.synchronize({
-        workspaceId: this.workspaceId,
+          workspaceId: workspaceId,
-        dataSourceId: dataSourceMetadata.id,
+          dataSourceId: dataSourceMetadata.id,
-      });
+        });
+      }
     } catch (error) {
       console.error(error);
 
       return;
     }
 
-    const dataSourceMetadata =
+    for (const workspaceId of this.workspaceIds) {
-      await this.dataSourceService.getLastDataSourceMetadataFromWorkspaceIdOrFail(
+      const dataSourceMetadata =
-        this.workspaceId,
+        await this.dataSourceService.getLastDataSourceMetadataFromWorkspaceIdOrFail(
-      );
+          workspaceId,
-
-    const workspaceDataSource =
-      await this.typeORMService.connectToDataSource(dataSourceMetadata);
-
-    if (!workspaceDataSource) {
-      throw new Error('Could not connect to workspace data source');
-    }
-
-    try {
-      const objectMetadata =
-        await this.objectMetadataService.findManyWithinWorkspace(
-          this.workspaceId,
         );
-      const objectMetadataMap = objectMetadata.reduce((acc, object) => {
-        acc[object.nameSingular] = {
-          id: object.id,
-          fields: object.fields.reduce((acc, field) => {
-            acc[field.name] = field.id;
 
-            return acc;
+      const workspaceDataSource =
-          }, {}),
+        await this.typeORMService.connectToDataSource(dataSourceMetadata);
-        };
 
-        return acc;
+      if (!workspaceDataSource) {
-      }, {});
+        throw new Error('Could not connect to workspace data source');
+      }
 
-      await seedCompanies(workspaceDataSource, dataSourceMetadata.schema);
+      try {
-      await seedPeople(workspaceDataSource, dataSourceMetadata.schema);
+        const objectMetadata =
-      await seedPipelineStep(workspaceDataSource, dataSourceMetadata.schema);
+          await this.objectMetadataService.findManyWithinWorkspace(workspaceId);
-      await seedOpportunity(workspaceDataSource, dataSourceMetadata.schema);
+        const objectMetadataMap = objectMetadata.reduce((acc, object) => {
-      await seedCalendarEvents(workspaceDataSource, dataSourceMetadata.schema);
+          acc[object.nameSingular] = {
+            id: object.id,
+            fields: object.fields.reduce((acc, field) => {
+              acc[field.name] = field.id;
 
-      await seedViews(
+              return acc;
-        workspaceDataSource,
+            }, {}),
-        dataSourceMetadata.schema,
+          };
-        objectMetadataMap,
+
-      );
+          return acc;
-      await seedWorkspaceMember(workspaceDataSource, dataSourceMetadata.schema);
+        }, {});
-    } catch (error) {
+
-      console.error(error);
+        await seedCompanies(workspaceDataSource, dataSourceMetadata.schema);
+        await seedPeople(workspaceDataSource, dataSourceMetadata.schema);
+        await seedPipelineStep(workspaceDataSource, dataSourceMetadata.schema);
+        await seedOpportunity(workspaceDataSource, dataSourceMetadata.schema);
+        await seedCalendarEvents(
+          workspaceDataSource,
+          dataSourceMetadata.schema,
+        );
+
+        await seedViews(
+          workspaceDataSource,
+          dataSourceMetadata.schema,
+          objectMetadataMap,
+        );
+        await seedWorkspaceMember(
+          workspaceDataSource,
+          dataSourceMetadata.schema,
+          workspaceId,
+        );
+      } catch (error) {
+        console.error(error);
+      }
+
+      await this.typeORMService.disconnectFromDataSource(dataSourceMetadata.id);
     }
-
-    await this.typeORMService.disconnectFromDataSource(dataSourceMetadata.id);
   }
 }

packages/twenty-server/src/database/typeorm-seeds/core/userWorkspaces.ts

@@ -1,5 +1,11 @@
 import { DataSource } from 'typeorm';
 
+import {
+  SeedAppleWorkspaceId,
+  SeedTwentyWorkspaceId,
+} from 'src/database/typeorm-seeds/core/workspaces';
+import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
+
 // import { SeedWorkspaceId } from 'src/database/typeorm-seeds/core/workspaces';
 
 const tableName = 'userWorkspace';
@@ -15,12 +21,10 @@ export const seedUserWorkspaces = async (
   schemaName: string,
   workspaceId: string,
 ) => {
-  await workspaceDataSource
+  let userWorkspaces: Pick<UserWorkspace, 'userId' | 'workspaceId'>[] = [];
-    .createQueryBuilder()
+
-    .insert()
+  if (workspaceId === SeedAppleWorkspaceId) {
-    .into(`${schemaName}.${tableName}`, ['userId', 'workspaceId'])
+    userWorkspaces = [
-    .orIgnore()
-    .values([
       {
         userId: SeedUserIds.Tim,
         workspaceId,
@@ -33,7 +37,23 @@ export const seedUserWorkspaces = async (
         userId: SeedUserIds.Phil,
         workspaceId,
       },
-    ])
+    ];
+  }
+
+  if (workspaceId === SeedTwentyWorkspaceId) {
+    userWorkspaces = [
+      {
+        userId: SeedUserIds.Tim,
+        workspaceId,
+      },
+    ];
+  }
+  await workspaceDataSource
+    .createQueryBuilder()
+    .insert()
+    .into(`${schemaName}.${tableName}`, ['userId', 'workspaceId'])
+    .orIgnore()
+    .values(userWorkspaces)
     .execute();
 };
 

packages/twenty-server/src/database/typeorm-seeds/workspace/workspaceMember.ts

@@ -1,6 +1,11 @@
 import { DataSource } from 'typeorm';
 
 import { SeedUserIds } from 'src/database/typeorm-seeds/core/users';
+import {
+  SeedAppleWorkspaceId,
+  SeedTwentyWorkspaceId,
+} from 'src/database/typeorm-seeds/core/workspaces';
+import { WorkspaceMember } from 'src/engine/modules/user/dtos/workspace-member.dto';
 
 const tableName = 'workspaceMember';
 
@@ -10,24 +15,25 @@ const WorkspaceMemberIds = {
   Phil: '20202020-1553-45c6-a028-5a9064cce07f',
 };
 
+type WorkspaceMembers = Pick<
+  WorkspaceMember,
+  'id' | 'locale' | 'colorScheme'
+> & {
+  nameFirstName: string;
+  nameLastName: string;
+  userEmail: string;
+  userId: string;
+};
+
 export const seedWorkspaceMember = async (
   workspaceDataSource: DataSource,
   schemaName: string,
+  workspaceId: string,
 ) => {
-  await workspaceDataSource
+  let workspaceMembers: WorkspaceMembers[] = [];
-    .createQueryBuilder()
+
-    .insert()
+  if (workspaceId === SeedAppleWorkspaceId) {
-    .into(`${schemaName}.${tableName}`, [
+    workspaceMembers = [
-      'id',
-      'nameFirstName',
-      'nameLastName',
-      'locale',
-      'colorScheme',
-      'userEmail',
-      'userId',
-    ])
-    .orIgnore()
-    .values([
       {
         id: WorkspaceMemberIds.Tim,
         nameFirstName: 'Tim',
@@ -55,6 +61,35 @@ export const seedWorkspaceMember = async (
         userEmail: 'phil.schiler@apple.dev',
         userId: SeedUserIds.Phil,
       },
+    ];
+  }
+
+  if (workspaceId === SeedTwentyWorkspaceId) {
+    workspaceMembers = [
+      {
+        id: WorkspaceMemberIds.Tim,
+        nameFirstName: 'Tim',
+        nameLastName: 'Apple',
+        locale: 'en',
+        colorScheme: 'Light',
+        userEmail: 'tim@apple.dev',
+        userId: SeedUserIds.Tim,
+      },
+    ];
+  }
+  await workspaceDataSource
+    .createQueryBuilder()
+    .insert()
+    .into(`${schemaName}.${tableName}`, [
+      'id',
+      'nameFirstName',
+      'nameLastName',
+      'locale',
+      'colorScheme',
+      'userEmail',
+      'userId',
     ])
+    .orIgnore()
+    .values(workspaceMembers)
     .execute();
 };

packages/twenty-server/src/database/typeorm/core/migrations/1707778127558-addUserWorkspaces.ts

@@ -14,10 +14,6 @@ export class AddUserWorkspaces1707778127558 implements MigrationInterface {
                 "deletedAt" TIMESTAMP
             )`,
     );
-
-    await queryRunner.query(
-      `ALTER TABLE "core"."user" DROP CONSTRAINT "FK_2ec910029395fa7655621c88908"`,
-    );
   }
 
   public async down(): Promise<void> {}

packages/twenty-server/src/database/typeorm/core/migrations/1709680520888-updateUserWorkspaceColumnConstraints.ts

@@ -0,0 +1,44 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class updateUserWorkspaceColumnConstraints1709680520888
+  implements MigrationInterface
+{
+  name = 'updateUserWorkspaceColumnConstraints1709680520888';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    // ----------------- WARNING ------------------------
+    // Dropping constraints and adding them back is NOT a recommended and should be AVOIDED,
+    // since it can affect data integrity and cause downtime and unintentional data loss.
+    await queryRunner.query(
+      `ALTER TABLE "core"."userWorkspace" DROP CONSTRAINT "userWorkspace_userId_fkey"`,
+    );
+
+    await queryRunner.query(
+      `ALTER TABLE "core"."userWorkspace" DROP CONSTRAINT "userWorkspace_workspaceId_fkey"`,
+    );
+
+    await queryRunner.query(
+      `ALTER TABLE "core"."userWorkspace" DROP CONSTRAINT "FK_cb488f32c6a0827b938edadf221"`,
+    );
+
+    await queryRunner.query(
+      `ALTER TABLE "core"."userWorkspace" DROP CONSTRAINT "FK_37fdc7357af701e595c5c3a9bd6"`,
+    );
+
+    await queryRunner.query(`
+            ALTER TABLE "core"."userWorkspace" 
+            ADD CONSTRAINT "FK_37fdc7357af701e595c5c3a9bd6" 
+            FOREIGN KEY ("workspaceId") REFERENCES "core"."workspace"("id") 
+            ON DELETE CASCADE ON UPDATE NO ACTION
+        `);
+
+    await queryRunner.query(`
+            ALTER TABLE "core"."userWorkspace" 
+            ADD CONSTRAINT "FK_cb488f32c6a0827b938edadf221" 
+            FOREIGN KEY ("userId") REFERENCES "core"."user"("id") 
+            ON DELETE CASCADE ON UPDATE NO ACTION
+        `);
+  }
+
+  public async down(): Promise<void> {}
+}

packages/twenty-server/src/engine/api/rest/api-rest-query-builder/utils/__tests__/fields.utils.spec.ts

@@ -20,7 +20,9 @@ describe('FieldUtils', () => {
         checkFields(objectMetadataItemMock, ['fieldNumber']),
       ).not.toThrow();
 
-      expect(() => checkFields(objectMetadataItemMock, ['wrongField'])).toThrow();
+      expect(() =>
+        checkFields(objectMetadataItemMock, ['wrongField']),
+      ).toThrow();
 
       expect(() =>
         checkFields(objectMetadataItemMock, ['fieldNumber', 'wrongField']),

packages/twenty-server/src/engine/modules/user/services/user.service.spec.ts

@@ -4,6 +4,7 @@ import { getRepositoryToken } from '@nestjs/typeorm';
 import { User } from 'src/engine/modules/user/user.entity';
 import { DataSourceService } from 'src/engine-metadata/data-source/data-source.service';
 import { TypeORMService } from 'src/database/typeorm/typeorm.service';
+import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
 
 import { UserService } from './user.service';
 
@@ -18,6 +19,10 @@ describe('UserService', () => {
           provide: getRepositoryToken(User, 'core'),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(UserWorkspace, 'core'),
+          useValue: {},
+        },
         {
           provide: DataSourceService,
           useValue: {},

packages/twenty-server/src/engine/modules/user/services/user.service.ts

@@ -8,12 +8,15 @@ import { User } from 'src/engine/modules/user/user.entity';
 import { WorkspaceMember } from 'src/engine/modules/user/dtos/workspace-member.dto';
 import { DataSourceService } from 'src/engine-metadata/data-source/data-source.service';
 import { TypeORMService } from 'src/database/typeorm/typeorm.service';
+import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
 import { DataSourceEntity } from 'src/engine-metadata/data-source/data-source.entity';
 
 export class UserService extends TypeOrmQueryService<User> {
   constructor(
     @InjectRepository(User, 'core')
     private readonly userRepository: Repository<User>,
+    @InjectRepository(UserWorkspace, 'core')
+    private readonly userWorkspaceRepository: Repository<UserWorkspace>,
     private readonly dataSourceService: DataSourceService,
     private readonly typeORMService: TypeORMService,
   ) {
@@ -104,6 +107,8 @@ export class UserService extends TypeOrmQueryService<User> {
       `DELETE FROM ${dataSourceMetadata.schema}."workspaceMember" WHERE "userId" = '${userId}'`,
     );
 
+    await this.userWorkspaceRepository.delete({ userId });
+
     await this.userRepository.delete(user.id);
 
     return user;

packages/twenty-server/src/engine/modules/workspace/services/workspace.service.spec.ts

@@ -2,11 +2,11 @@ import { Test, TestingModule } from '@nestjs/testing';
 import { getRepositoryToken } from '@nestjs/typeorm';
 
 import { Workspace } from 'src/engine/modules/workspace/workspace.entity';
-import { WorkspaceManagerService } from 'src/engine/workspace-manager/workspace-manager.service';
 import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
 import { User } from 'src/engine/modules/user/user.entity';
-import { BillingService } from 'src/engine/modules/billing/billing.service';
+import { WorkspaceManagerService } from 'src/engine/workspace-manager/workspace-manager.service';
 import { UserWorkspaceService } from 'src/engine/modules/user-workspace/user-workspace.service';
+import { BillingService } from 'src/engine/modules/billing/billing.service';
 
 import { WorkspaceService } from './workspace.service';
 

packages/twenty-server/src/engine/modules/workspace/services/workspace.service.ts

@@ -6,13 +6,13 @@ import assert from 'assert';
 import { TypeOrmQueryService } from '@ptc-org/nestjs-query-typeorm';
 import { Repository } from 'typeorm';
 
-import { WorkspaceManagerService } from 'src/engine/workspace-manager/workspace-manager.service';
 import { Workspace } from 'src/engine/modules/workspace/workspace.entity';
-import { User } from 'src/engine/modules/user/user.entity';
-import { ActivateWorkspaceInput } from 'src/engine/modules/workspace/dtos/activate-workspace-input';
 import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
+import { User } from 'src/engine/modules/user/user.entity';
+import { WorkspaceManagerService } from 'src/engine/workspace-manager/workspace-manager.service';
 import { UserWorkspaceService } from 'src/engine/modules/user-workspace/user-workspace.service';
 import { BillingService } from 'src/engine/modules/billing/billing.service';
+import { ActivateWorkspaceInput } from 'src/engine/modules/workspace/dtos/activate-workspace-input';
 
 export class WorkspaceService extends TypeOrmQueryService<Workspace> {
   constructor(
@@ -70,4 +70,118 @@ export class WorkspaceService extends TypeOrmQueryService<Workspace> {
       .find()
       .then((workspaces) => workspaces.map((workspace) => workspace.id));
   }
+
+  private async reassignDefaultWorkspace(
+    currentWorkspaceId: string,
+    user: User,
+    worskpaces: UserWorkspace[],
+  ) {
+    // We'll filter all user workspaces without the one which its getting removed from
+    const filteredUserWorkspaces = worskpaces.filter(
+      (workspace) => workspace.workspaceId !== currentWorkspaceId,
+    );
+
+    // Loop over each workspace in the filteredUserWorkspaces array and check if it currently exists in
+    // the database
+    for (let index = 0; index < filteredUserWorkspaces.length; index++) {
+      const userWorkspace = filteredUserWorkspaces[index];
+
+      const nextWorkspace = await this.workspaceRepository.findOneBy({
+        id: userWorkspace.workspaceId,
+      });
+
+      if (nextWorkspace) {
+        await this.userRepository.save({
+          id: user.id,
+          defaultWorkspace: nextWorkspace,
+          updatedAt: new Date().toISOString(),
+        });
+        break;
+      }
+
+      // if no workspaces are valid then we delete the user
+      if (index === filteredUserWorkspaces.length - 1) {
+        await this.userRepository.delete({ id: user.id });
+      }
+    }
+  }
+
+  /* 
+  async removeWorkspaceMember(workspaceId: string, memberId: string) {
+    const dataSourceMetadata =
+      await this.dataSourceService.getLastDataSourceMetadataFromWorkspaceIdOrFail(
+        workspaceId,
+      );
+
+    const workspaceDataSource =
+      await this.typeORMService.connectToDataSource(dataSourceMetadata);
+
+    // using "SELECT *" here because we will need the corresponding members userId later
+    const [workspaceMember] = await workspaceDataSource?.query(
+      `SELECT * FROM ${dataSourceMetadata.schema}."workspaceMember" WHERE "id" = '${memberId}'`,
+    );
+
+    if (!workspaceMember) {
+      throw new NotFoundException('Member not found.');
+    }
+
+    await workspaceDataSource?.query(
+      `DELETE FROM ${dataSourceMetadata.schema}."workspaceMember" WHERE "id" = '${memberId}'`,
+    );
+
+    const workspaceMemberUser = await this.userRepository.findOne({
+      where: {
+        id: workspaceMember.userId,
+      },
+      relations: ['defaultWorkspace'],
+    });
+
+    if (!workspaceMemberUser) {
+      throw new NotFoundException('User not found');
+    }
+
+    const userWorkspaces = await this.userWorkspaceRepository.find({
+      where: { userId: workspaceMemberUser.id },
+      relations: ['workspace'],
+    });
+
+    // We want to check if we the user has signed up to more than one workspace
+    if (userWorkspaces.length > 1) {
+      // We neeed to check if the workspace that its getting removed from is its default workspace, if it is then
+      // change the default workspace to point to the next workspace available.
+      if (workspaceMemberUser.defaultWorkspace.id === workspaceId) {
+        await this.reassignDefaultWorkspace(
+          workspaceId,
+          workspaceMemberUser,
+          userWorkspaces,
+        );
+      }
+      // if its not the default workspace then simply delete the user-workspace mapping
+      await this.userWorkspaceRepository.delete({
+        userId: workspaceMemberUser.id,
+        workspaceId,
+      });
+    } else {
+      await this.userWorkspaceRepository.delete({
+        userId: workspaceMemberUser.id,
+      });
+
+      // After deleting the user-workspace mapping, we have a condition where we have the users default workspace points to a
+      // workspace which it doesnt have access to. So we delete the user.
+      await this.userRepository.delete({ id: workspaceMemberUser.id });
+    }
+
+    const payload =
+      new ObjectRecordDeleteEvent<WorkspaceMemberObjectMetadata>();
+
+    payload.workspaceId = workspaceId;
+    payload.details = {
+      before: workspaceMember,
+    };
+
+    this.eventEmitter.emit('workspaceMember.deleted', payload);
+
+    return memberId;
+  }
+  */
 }

packages/twenty-server/src/engine/modules/workspace/workspace.module.ts

@@ -6,15 +6,16 @@ import { NestjsQueryTypeOrmModule } from '@ptc-org/nestjs-query-typeorm';
 import { WorkspaceManagerModule } from 'src/engine/workspace-manager/workspace-manager.module';
 import { WorkspaceResolver } from 'src/engine/modules/workspace/workspace.resolver';
 import { TypeORMModule } from 'src/database/typeorm/typeorm.module';
-import { FeatureFlagEntity } from 'src/engine/modules/feature-flag/feature-flag.entity';
-import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
-import { User } from 'src/engine/modules/user/user.entity';
-import { UserWorkspaceModule } from 'src/engine/modules/user-workspace/user-workspace.module';
 import { BillingModule } from 'src/engine/modules/billing/billing.module';
+import { UserWorkspace } from 'src/engine/modules/user-workspace/user-workspace.entity';
+import { FeatureFlagEntity } from 'src/engine/modules/feature-flag/feature-flag.entity';
+import { UserWorkspaceModule } from 'src/engine/modules/user-workspace/user-workspace.module';
+import { User } from 'src/engine/modules/user/user.entity';
+import { DataSourceModule } from 'src/engine-metadata/data-source/data-source.module';
 import { FileUploadModule } from 'src/engine/modules/file/file-upload/file-upload.module';
 
-import { Workspace } from './workspace.entity';
 import { workspaceAutoResolverOpts } from './workspace.auto-resolver-opts';
+import { Workspace } from './workspace.entity';
 
 import { WorkspaceService } from './services/workspace.service';
 
@@ -31,6 +32,8 @@ import { WorkspaceService } from './services/workspace.service';
         ),
         UserWorkspaceModule,
         WorkspaceManagerModule,
+        DataSourceModule,
+        TypeORMModule,
       ],
       services: [WorkspaceService],
       resolvers: workspaceAutoResolverOpts,

yarn.lock

@@ -16560,6 +16560,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.groupby@npm:^4.6.9":
+  version: 4.6.9
+  resolution: "@types/lodash.groupby@npm:4.6.9"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 1302531f76da99cc8f1bbd486a8c7048a833352b12c39eb5b2ded01173dd5fff76f2c7ace04f08b51c55840271170f1cfbffe4e454dde8597c3ee996e70d4e11
+  languageName: node
+  linkType: hard
+
 "@types/lodash.isempty@npm:^4.4.7":
   version: 4.4.9
   resolution: "@types/lodash.isempty@npm:4.4.9"
@@ -45916,6 +45925,7 @@ __metadata:
     "@types/js-cookie": "npm:^3.0.3"
     "@types/lodash.camelcase": "npm:^4.3.7"
     "@types/lodash.debounce": "npm:^4.0.7"
+    "@types/lodash.groupby": "npm:^4.6.9"
     "@types/lodash.isempty": "npm:^4.4.7"
     "@types/lodash.isequal": "npm:^4.5.7"
     "@types/lodash.isobject": "npm:^3.0.7"