Lab (#9667)

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

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

packages/twenty-front/src/modules/settings/lab/hooks/useLabPublicFeatureFlags.ts

@@ -0,0 +1,66 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState';
+import { useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
+import {
+  FeatureFlagKey,
+  useUpdateLabPublicFeatureFlagMutation,
+} from '~/generated/graphql';
+
+export const useLabPublicFeatureFlags = () => {
+  const [error, setError] = useState<string | null>(null);
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+  const labPublicFeatureFlags = useRecoilValue(labPublicFeatureFlagsState);
+
+  const [updateLabPublicFeatureFlag] = useUpdateLabPublicFeatureFlagMutation();
+
+  const handleLabPublicFeatureFlagUpdate = async (
+    publicFeatureFlag: FeatureFlagKey,
+    value: boolean,
+  ) => {
+    if (!isDefined(currentWorkspace)) {
+      setError('No workspace selected');
+      return false;
+    }
+
+    setError(null);
+
+    const response = await updateLabPublicFeatureFlag({
+      variables: {
+        input: {
+          publicFeatureFlag,
+          value,
+        },
+      },
+      onError: (error) => {
+        setError(error.message);
+      },
+    });
+
+    if (isDefined(response.data)) {
+      setCurrentWorkspace({
+        ...currentWorkspace,
+        featureFlags: currentWorkspace.featureFlags?.map((flag) =>
+          flag.key === publicFeatureFlag ? { ...flag, value } : flag,
+        ),
+      });
+    }
+
+    return !!response.data;
+  };
+
+  return {
+    labPublicFeatureFlags: labPublicFeatureFlags.map((flag) => ({
+      ...flag,
+      value:
+        currentWorkspace?.featureFlags?.find(
+          (workspaceFlag) => workspaceFlag.key === flag.key,
+        )?.value ?? false,
+    })),
+    handleLabPublicFeatureFlagUpdate,
+    error,
+  };
+};