Lab (#9667)

https://github.com/twentyhq/core-team-issues/issues/76

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -8,6 +8,7 @@ import {
   IconComponent,
   IconCurrencyDollar,
   IconDoorEnter,
+  IconFlask,
   IconFunction,
   IconHierarchy2,
   IconKey,
@@ -22,6 +23,7 @@ import {
 import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { billingState } from '@/client-config/states/billingState';
+import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -64,6 +66,7 @@ export const SettingsNavigationDrawerItems = () => {
 
   const currentUser = useRecoilValue(currentUserState);
   const isAdminPageEnabled = currentUser?.canImpersonate;
+  const labPublicFeatureFlags = useRecoilValue(labPublicFeatureFlagsState);
   // TODO: Refactor this part to only have arrays of navigation items
   const currentPathName = useLocation().pathname;
 
@@ -200,6 +203,13 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconServer}
           />
         )}
+        {labPublicFeatureFlags?.length > 0 && (
+          <SettingsNavigationDrawerItem
+            label={t`Lab`}
+            path={SettingsPath.Lab}
+            Icon={IconFlask}
+          />
+        )}
         <SettingsNavigationDrawerItem
           label={t`Releases`}
           path={SettingsPath.Releases}

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx

@@ -23,7 +23,11 @@ const StyledSettingsOptionCardToggleContent = styled(
   }
 `;
 
-const StyledSettingsOptionCardToggleButton = styled(Toggle)`
+const StyledSettingsOptionCardToggleButton = styled(Toggle)<{
+  toggleCentered?: boolean;
+}>`
+  align-self: ${({ toggleCentered }) =>
+    toggleCentered ? 'center' : 'flex-start'};
   margin-left: auto;
 `;
 
@@ -40,6 +44,7 @@ type SettingsOptionCardContentToggleProps = {
   divider?: boolean;
   disabled?: boolean;
   advancedMode?: boolean;
+  toggleCentered?: boolean;
   checked: boolean;
   onChange: (checked: boolean) => void;
 };
@@ -51,6 +56,7 @@ export const SettingsOptionCardContentToggle = ({
   divider,
   disabled = false,
   advancedMode = false,
+  toggleCentered = true,
   checked,
   onChange,
 }: SettingsOptionCardContentToggleProps) => {
@@ -83,6 +89,7 @@ export const SettingsOptionCardContentToggle = ({
           disabled={disabled}
           toggleSize="small"
           color={advancedMode ? theme.color.yellow : theme.color.blue}
+          toggleCentered={toggleCentered}
         />
       </StyledSettingsOptionCardToggleContent>
       {divider && <Separator />}