Lab

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

@@ -179,6 +179,7 @@ export type ClientConfig = {
   frontDomain: Scalars['String'];
   isEmailVerificationRequired: Scalars['Boolean'];
   isMultiWorkspaceEnabled: Scalars['Boolean'];
+  publicFeatureFlags: Array<PublicFeatureFlag>;
   sentry: Sentry;
   signInPrefilled: Scalars['Boolean'];
   support: Support;
@@ -530,6 +531,7 @@ export type Mutation = {
   switchWorkspace: PublicWorkspaceDataOutput;
   track: Analytics;
   updateBillingSubscription: UpdateBillingEntity;
+  updateLabPublicFeatureFlag: Scalars['Boolean'];
   updateOneField: Field;
   updateOneObject: Object;
   updateOneServerlessFunction: ServerlessFunction;
@@ -747,6 +749,11 @@ export type MutationTrackArgs = {
 };
 
 
+export type MutationUpdateLabPublicFeatureFlagArgs = {
+  input: UpdateLabPublicFeatureFlagInput;
+};
+
+
 export type MutationUpdateOneFieldArgs = {
   input: UpdateOneFieldMetadataInput;
 };
@@ -890,6 +897,19 @@ export type ProductPricesEntity = {
   totalNumberOfPrices: Scalars['Int'];
 };
 
+export type PublicFeatureFlag = {
+  __typename?: 'PublicFeatureFlag';
+  key: FeatureFlagKey;
+  metadata: PublicFeatureFlagMetadata;
+};
+
+export type PublicFeatureFlagMetadata = {
+  __typename?: 'PublicFeatureFlagMetadata';
+  description: Scalars['String'];
+  imagePath: Scalars['String'];
+  label: Scalars['String'];
+};
+
 export type PublicWorkspaceDataOutput = {
   __typename?: 'PublicWorkspaceDataOutput';
   authProviders: AuthProviders;
@@ -1358,6 +1378,11 @@ export type UpdateFieldInput = {
   settings?: InputMaybe<Scalars['JSON']>;
 };
 
+export type UpdateLabPublicFeatureFlagInput = {
+  publicFeatureFlag: Scalars['String'];
+  value: Scalars['Boolean'];
+};
+
 export type UpdateObjectPayload = {
   description?: InputMaybe<Scalars['String']>;
   icon?: InputMaybe<Scalars['String']>;
@@ -2103,7 +2128,7 @@ export type UpdateBillingSubscriptionMutation = { __typename?: 'Mutation', updat
 export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, isMultiWorkspaceEnabled: boolean, isEmailVerificationRequired: boolean, defaultSubdomain?: string | null, frontDomain: string, debugMode: boolean, analyticsEnabled: boolean, chromeExtensionId?: string | null, canManageFeatureFlags: boolean, billing: { __typename?: 'Billing', isBillingEnabled: boolean, billingUrl?: string | null, trialPeriods: Array<{ __typename?: 'TrialPeriodDTO', duration: number, isCreditCardRequired: boolean }> }, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean, microsoft: boolean, sso: Array<{ __typename?: 'SSOIdentityProvider', id: string, name: string, type: IdentityProviderType, status: SsoIdentityProviderStatus, issuer: string }> }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null }, sentry: { __typename?: 'Sentry', dsn?: string | null, environment?: string | null, release?: string | null }, captcha: { __typename?: 'Captcha', provider?: CaptchaDriverType | null, siteKey?: string | null }, api: { __typename?: 'ApiConfig', mutationMaximumAffectedRecords: number } } };
+export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, isMultiWorkspaceEnabled: boolean, isEmailVerificationRequired: boolean, defaultSubdomain?: string | null, frontDomain: string, debugMode: boolean, analyticsEnabled: boolean, chromeExtensionId?: string | null, canManageFeatureFlags: boolean, billing: { __typename?: 'Billing', isBillingEnabled: boolean, billingUrl?: string | null, trialPeriods: Array<{ __typename?: 'TrialPeriodDTO', duration: number, isCreditCardRequired: boolean }> }, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean, microsoft: boolean, sso: Array<{ __typename?: 'SSOIdentityProvider', id: string, name: string, type: IdentityProviderType, status: SsoIdentityProviderStatus, issuer: string }> }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null }, sentry: { __typename?: 'Sentry', dsn?: string | null, environment?: string | null, release?: string | null }, captcha: { __typename?: 'Captcha', provider?: CaptchaDriverType | null, siteKey?: string | null }, api: { __typename?: 'ApiConfig', mutationMaximumAffectedRecords: number }, publicFeatureFlags: Array<{ __typename?: 'PublicFeatureFlag', key: FeatureFlagKey, metadata: { __typename?: 'PublicFeatureFlagMetadata', label: string, description: string, imagePath: string } }> } };
 
 export type SkipSyncEmailOnboardingStepMutationVariables = Exact<{ [key: string]: never; }>;
 
@@ -2126,6 +2151,13 @@ export type UserLookupAdminPanelMutationVariables = Exact<{
 
 export type UserLookupAdminPanelMutation = { __typename?: 'Mutation', userLookupAdminPanel: { __typename?: 'UserLookup', user: { __typename?: 'UserInfo', id: string, email: string, firstName?: string | null, lastName?: string | null }, workspaces: Array<{ __typename?: 'WorkspaceInfo', id: string, name: string, logo?: string | null, totalUsers: number, allowImpersonation: boolean, users: Array<{ __typename?: 'UserInfo', id: string, email: string, firstName?: string | null, lastName?: string | null }>, featureFlags: Array<{ __typename?: 'FeatureFlag', key: FeatureFlagKey, value: boolean }> }> } };
 
+export type UpdateLabPublicFeatureFlagMutationVariables = Exact<{
+  input: UpdateLabPublicFeatureFlagInput;
+}>;
+
+
+export type UpdateLabPublicFeatureFlagMutation = { __typename?: 'Mutation', updateLabPublicFeatureFlag: boolean };
+
 export type CreateOidcIdentityProviderMutationVariables = Exact<{
   input: SetupOidcSsoInput;
 }>;
@@ -3615,6 +3647,14 @@ export const GetClientConfigDocument = gql`
     }
     chromeExtensionId
     canManageFeatureFlags
+    publicFeatureFlags {
+      key
+      metadata {
+        label
+        description
+        imagePath
+      }
+    }
   }
 }
     `;
@@ -3769,6 +3809,37 @@ export function useUserLookupAdminPanelMutation(baseOptions?: Apollo.MutationHoo
 export type UserLookupAdminPanelMutationHookResult = ReturnType<typeof useUserLookupAdminPanelMutation>;
 export type UserLookupAdminPanelMutationResult = Apollo.MutationResult<UserLookupAdminPanelMutation>;
 export type UserLookupAdminPanelMutationOptions = Apollo.BaseMutationOptions<UserLookupAdminPanelMutation, UserLookupAdminPanelMutationVariables>;
+export const UpdateLabPublicFeatureFlagDocument = gql`
+    mutation UpdateLabPublicFeatureFlag($input: UpdateLabPublicFeatureFlagInput!) {
+  updateLabPublicFeatureFlag(input: $input)
+}
+    `;
+export type UpdateLabPublicFeatureFlagMutationFn = Apollo.MutationFunction<UpdateLabPublicFeatureFlagMutation, UpdateLabPublicFeatureFlagMutationVariables>;
+
+/**
+ * __useUpdateLabPublicFeatureFlagMutation__
+ *
+ * To run a mutation, you first call `useUpdateLabPublicFeatureFlagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateLabPublicFeatureFlagMutation` 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 [updateLabPublicFeatureFlagMutation, { data, loading, error }] = useUpdateLabPublicFeatureFlagMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useUpdateLabPublicFeatureFlagMutation(baseOptions?: Apollo.MutationHookOptions<UpdateLabPublicFeatureFlagMutation, UpdateLabPublicFeatureFlagMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateLabPublicFeatureFlagMutation, UpdateLabPublicFeatureFlagMutationVariables>(UpdateLabPublicFeatureFlagDocument, options);
+      }
+export type UpdateLabPublicFeatureFlagMutationHookResult = ReturnType<typeof useUpdateLabPublicFeatureFlagMutation>;
+export type UpdateLabPublicFeatureFlagMutationResult = Apollo.MutationResult<UpdateLabPublicFeatureFlagMutation>;
+export type UpdateLabPublicFeatureFlagMutationOptions = Apollo.BaseMutationOptions<UpdateLabPublicFeatureFlagMutation, UpdateLabPublicFeatureFlagMutationVariables>;
 export const CreateOidcIdentityProviderDocument = gql`
     mutation CreateOIDCIdentityProvider($input: SetupOIDCSsoInput!) {
   createOIDCIdentityProvider(input: $input) {
@@ -4707,4 +4778,4 @@ export function useGetWorkspaceFromInviteHashLazyQuery(baseOptions?: Apollo.Lazy
         }
 export type GetWorkspaceFromInviteHashQueryHookResult = ReturnType<typeof useGetWorkspaceFromInviteHashQuery>;
 export type GetWorkspaceFromInviteHashLazyQueryHookResult = ReturnType<typeof useGetWorkspaceFromInviteHashLazyQuery>;
-export type GetWorkspaceFromInviteHashQueryResult = Apollo.QueryResult<GetWorkspaceFromInviteHashQuery, GetWorkspaceFromInviteHashQueryVariables>;
+export type GetWorkspaceFromInviteHashQueryResult = Apollo.QueryResult<GetWorkspaceFromInviteHashQuery, GetWorkspaceFromInviteHashQueryVariables>;

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -253,6 +253,12 @@ const SettingsAdminContent = lazy(() =>
   ),
 );
 
+const SettingsLab = lazy(() =>
+  import('~/pages/settings/lab/SettingsLab').then((module) => ({
+    default: module.SettingsLab,
+  })),
+);
+
 type SettingsRoutesProps = {
   isBillingEnabled?: boolean;
   isServerlessFunctionSettingsEnabled?: boolean;
@@ -379,6 +385,7 @@ export const SettingsRoutes = ({
           />
         </>
       )}
+      <Route path={SettingsPath.Lab} element={<SettingsLab />} />
     </Routes>
   </Suspense>
 );

packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx

@@ -10,6 +10,7 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
 import { isEmailVerificationRequiredState } from '@/client-config/states/isEmailVerificationRequiredState';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
+import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState';
 import { sentryConfigState } from '@/client-config/states/sentryConfigState';
 import { supportChatState } from '@/client-config/states/supportChatState';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
@@ -52,6 +53,10 @@ export const ClientConfigProviderEffect = () => {
     canManageFeatureFlagsState,
   );
 
+  const setLabPublicFeatureFlags = useSetRecoilState(
+    labPublicFeatureFlagsState,
+  );
+
   const { data, loading, error } = useGetClientConfigQuery({
     skip: clientConfigApiStatus.isLoaded,
   });
@@ -117,6 +122,7 @@ export const ClientConfigProviderEffect = () => {
       frontDomain: data?.clientConfig?.frontDomain,
     });
     setCanManageFeatureFlags(data?.clientConfig?.canManageFeatureFlags);
+    setLabPublicFeatureFlags(data?.clientConfig?.publicFeatureFlags);
   }, [
     data,
     setIsDebugMode,
@@ -136,6 +142,7 @@ export const ClientConfigProviderEffect = () => {
     setDomainConfiguration,
     setAuthProviders,
     setCanManageFeatureFlags,
+    setLabPublicFeatureFlags,
   ]);
 
   return <></>;

packages/twenty-front/src/modules/client-config/graphql/queries/getClientConfig.ts

@@ -48,6 +48,14 @@ export const GET_CLIENT_CONFIG = gql`
       }
       chromeExtensionId
       canManageFeatureFlags
+      publicFeatureFlags {
+        key
+        metadata {
+          label
+          description
+          imagePath
+        }
+      }
     }
   }
 `;

packages/twenty-front/src/modules/client-config/states/labPublicFeatureFlagsState.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { PublicFeatureFlag } from '~/generated/graphql';
+
+export const labPublicFeatureFlagsState = atom<PublicFeatureFlag[]>({
+  key: 'labPublicFeatureFlagsState',
+  default: [],
+});

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 />}

packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx

@@ -0,0 +1,84 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
+import { useLabPublicFeatureFlags } from '@/settings/lab/hooks/useLabPublicFeatureFlags';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { Card, MOBILE_VIEWPORT } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated/graphql';
+
+const StyledCardGrid = styled.div`
+  display: grid;
+  gap: ${({ theme }) => theme.spacing(4)};
+  grid-template-columns: 1fr;
+
+  & > *:not(:first-child) {
+    grid-column: span 1;
+  }
+
+  @media (min-width: ${MOBILE_VIEWPORT}px) {
+    grid-template-columns: repeat(2, 1fr);
+
+    & > *:first-child {
+      grid-column: 1 / -1;
+    }
+  }
+`;
+
+const StyledImage = styled.img<{ isFirstCard: boolean }>`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  height: ${({ isFirstCard }) => (isFirstCard ? '240px' : '120px')};
+  width: 100%;
+`;
+
+const StyledFallbackDiv = styled.div<{ isFirstCard: boolean }>`
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  height: ${({ isFirstCard }) => (isFirstCard ? '240px' : '120px')};
+  width: 100%;
+`;
+
+export const SettingsLabContent = () => {
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const { labPublicFeatureFlags, handleLabPublicFeatureFlagUpdate } =
+    useLabPublicFeatureFlags();
+  const [hasImageLoadingError, setHasImageLoadingError] = useState<
+    Record<string, boolean>
+  >({});
+
+  const handleToggle = async (key: FeatureFlagKey, value: boolean) => {
+    await handleLabPublicFeatureFlagUpdate(key, value);
+  };
+
+  const handleImageError = (key: string) => {
+    setHasImageLoadingError((prev) => ({ ...prev, [key]: true }));
+  };
+
+  return (
+    currentWorkspace?.id && (
+      <StyledCardGrid>
+        {labPublicFeatureFlags.map((flag, index) => (
+          <Card key={flag.key} rounded>
+            {flag.metadata.imagePath && !hasImageLoadingError[flag.key] ? (
+              <StyledImage
+                src={flag.metadata.imagePath}
+                alt={flag.metadata.label}
+                isFirstCard={index === 0}
+                onError={() => handleImageError(flag.key)}
+              />
+            ) : (
+              <StyledFallbackDiv isFirstCard={index === 0} />
+            )}
+            <SettingsOptionCardContentToggle
+              title={flag.metadata.label}
+              description={flag.metadata.description}
+              checked={flag.value}
+              onChange={(value) => handleToggle(flag.key, value)}
+              toggleCentered={false}
+            />
+          </Card>
+        ))}
+      </StyledCardGrid>
+    )
+  );
+};

packages/twenty-front/src/modules/settings/lab/graphql/mutations/updateLabPublicFeatureFlag.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_LAB_PUBLIC_FEATURE_FLAG = gql`
+  mutation UpdateLabPublicFeatureFlag(
+    $input: UpdateLabPublicFeatureFlagInput!
+  ) {
+    updateLabPublicFeatureFlag(input: $input)
+  }
+`;