feat(*): allow to select auth providers + add multiworkspace with subdomain management (#8656)

## Summary
Add support for multi-workspace feature and adjust configurations and
states accordingly.
- Introduced new state isMultiWorkspaceEnabledState.
- Updated ClientConfigProviderEffect component to handle
multi-workspace.
- Modified GraphQL schema and queries to include multi-workspace related
configurations.
- Adjusted server environment variables and their respective
documentation to support multi-workspace toggle.
- Updated server-side logic to handle new multi-workspace configurations
and conditions.

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

@@ -15,6 +15,13 @@ import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { IconChevronDown, MenuItemSelectAvatar } from 'twenty-ui';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { Link } from 'react-router-dom';
+import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  width: 100%;
+`;
 
 const StyledLogo = styled.div<{ logo: string }>`
   background: url(${({ logo }) => logo});
@@ -72,6 +79,7 @@ export const MultiWorkspaceDropdownButton = ({
     useState(false);
 
   const { switchWorkspace } = useWorkspaceSwitching();
+  const { buildWorkspaceUrl } = useUrlManager();
 
   const { closeDropdown } = useDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
 
@@ -96,13 +104,9 @@ export const MultiWorkspaceDropdownButton = ({
           isNavigationDrawerExpanded={isNavigationDrawerExpanded}
         >
           <StyledLogo
-            logo={
-              getImageAbsoluteURI(
-                currentWorkspace?.logo === null
-                  ? DEFAULT_WORKSPACE_LOGO
-                  : currentWorkspace?.logo,
-              ) ?? ''
-            }
+            logo={getImageAbsoluteURI(
+              currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO,
+            )}
           />
           <NavigationDrawerAnimatedCollapseWrapper>
             <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
@@ -118,23 +122,26 @@ export const MultiWorkspaceDropdownButton = ({
       dropdownComponents={
         <DropdownMenuItemsContainer>
           {workspaces.map((workspace) => (
-            <MenuItemSelectAvatar
+            <StyledLink
               key={workspace.id}
-              text={workspace.displayName ?? ''}
-              avatar={
-                <StyledLogo
-                  logo={
-                    getImageAbsoluteURI(
-                      workspace.logo === null
-                        ? DEFAULT_WORKSPACE_LOGO
-                        : workspace.logo,
-                    ) ?? ''
-                  }
-                />
-              }
-              selected={currentWorkspace?.id === workspace.id}
-              onClick={() => handleChange(workspace.id)}
-            />
+              to={buildWorkspaceUrl(workspace.subdomain)}
+            >
+              <MenuItemSelectAvatar
+                text={workspace.displayName ?? ''}
+                avatar={
+                  <StyledLogo
+                    logo={getImageAbsoluteURI(
+                      workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
+                    )}
+                  />
+                }
+                selected={currentWorkspace?.id === workspace.id}
+                onClick={(event) => {
+                  event?.preventDefault();
+                  handleChange(workspace.id);
+                }}
+              />
+            </StyledLink>
           ))}
         </DropdownMenuItemsContainer>
       }

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

@@ -11,6 +11,7 @@ import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigat
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { isNonEmptyString } from '@sniptt/guards';
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
+import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -60,14 +61,17 @@ export const NavigationDrawerHeader = ({
 }: NavigationDrawerHeaderProps) => {
   const isMobile = useIsMobile();
   const workspaces = useRecoilValue(workspacesState);
-  const isMultiWorkspace = workspaces !== null && workspaces.length > 1;
+  const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
+
   const isNavigationDrawerExpanded = useRecoilValue(
     isNavigationDrawerExpandedState,
   );
 
   return (
     <StyledContainer>
-      {isMultiWorkspace ? (
+      {isMultiWorkspaceEnabled &&
+      workspaces !== null &&
+      workspaces.length > 1 ? (
         <MultiWorkspaceDropdownButton workspaces={workspaces} />
       ) : (
         <StyledSingleWorkspaceContainer>