Lab (#9667)

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

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: [],
+});