Environment variables in admin panel (read only) - front (#10011)

Frontend for https://github.com/twentyhq/core-team-issues/issues/293

POC - https://github.com/twentyhq/twenty/pull/9903

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlag.ts

@@ -1,46 +1,21 @@
-import { UserLookup } from '@/settings/admin-panel/types/UserLookup';
-import { useState } from 'react';
+import { adminPanelErrorState } from '@/settings/admin-panel/states/adminPanelErrorState';
+import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import {
   FeatureFlagKey,
   useUpdateWorkspaceFeatureFlagMutation,
-  useUserLookupAdminPanelMutation,
 } from '~/generated/graphql';
 
-export const useFeatureFlagsManagement = () => {
-  const [userLookupResult, setUserLookupResult] = useState<UserLookup | null>(
-    null,
+export const useFeatureFlag = () => {
+  const [userLookupResult, setUserLookupResult] = useRecoilState(
+    userLookupResultState,
   );
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
-  const [userLookup] = useUserLookupAdminPanelMutation({
-    onCompleted: (data) => {
-      setIsLoading(false);
-      if (isDefined(data?.userLookupAdminPanel)) {
-        setUserLookupResult(data.userLookupAdminPanel);
-      }
-    },
-    onError: (error) => {
-      setIsLoading(false);
-      setError(error.message);
-    },
-  });
+  const setError = useSetRecoilState(adminPanelErrorState);
 
   const [updateFeatureFlag] = useUpdateWorkspaceFeatureFlagMutation();
 
-  const handleUserLookup = async (userIdentifier: string) => {
-    setError(null);
-    setIsLoading(true);
-    setUserLookupResult(null);
-
-    const response = await userLookup({
-      variables: { userIdentifier },
-    });
-
-    return response.data?.userLookupAdminPanel;
-  };
-
   const handleFeatureFlagUpdate = async (
     workspaceId: string,
     featureFlag: FeatureFlagKey,
@@ -83,10 +58,6 @@ export const useFeatureFlagsManagement = () => {
   };
 
   return {
-    userLookupResult,
-    handleUserLookup,
     handleFeatureFlagUpdate,
-    isLoading,
-    error,
   };
 };

packages/twenty-front/src/modules/settings/admin-panel/hooks/useUserLookup.ts

@@ -0,0 +1,42 @@
+import { adminPanelErrorState } from '@/settings/admin-panel/states/adminPanelErrorState';
+import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
+import { useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared';
+import { useUserLookupAdminPanelMutation } from '~/generated/graphql';
+
+export const useUserLookup = () => {
+  const setUserLookupResult = useSetRecoilState(userLookupResultState);
+  const setError = useSetRecoilState(adminPanelErrorState);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [userLookup] = useUserLookupAdminPanelMutation({
+    onCompleted: (data) => {
+      setIsLoading(false);
+      if (isDefined(data?.userLookupAdminPanel)) {
+        setUserLookupResult(data.userLookupAdminPanel);
+      }
+    },
+    onError: (error) => {
+      setIsLoading(false);
+      setError(error.message);
+    },
+  });
+
+  const handleUserLookup = async (userIdentifier: string) => {
+    setError(null);
+    setIsLoading(true);
+    setUserLookupResult(null);
+
+    const response = await userLookup({
+      variables: { userIdentifier },
+    });
+
+    return response.data?.userLookupAdminPanel;
+  };
+
+  return {
+    handleUserLookup,
+    isLoading,
+  };
+};