From 252922b522e5622e440c39361a8b4e86cea72ae5 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 11 Feb 2025 22:40:28 +0530
Subject: [PATCH] Admin panel refactor (#10119)

addressing >
There are two patterns to avoid:
Creating functions that return JSX like renderThing() -> this was taken
already addressed in https://github.com/twentyhq/twenty/pull/10011
Making a hook that "stores" all the logic of a component - > this PR is
addressing this particular pattern
In essence, handlers should remain in the component and be connected to
their events.
And everything in a handler can be abstracted into its dedicated hook.
For example:
const { myReactiveState } =
useRecoilValue(myReactiveStateComponentState);
const { removeThingFromOtherThing } = useRemoveThingFromOtherThing();

const handleClick = () => {
  if (isDefined(myReactiveState)) {
    removeThingFromOtherThing();
  }
}

Broadly speaking, this is how you can split large components into
several sub-hooks.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/SettingsAdminEnvVariables.tsx  | 115 ++++++++++--------
 .../components/SettingsAdminGeneral.tsx       |  72 +++++------
 .../SettingsAdminWorkspaceContent.tsx         | 105 ++++++++++++++--
 .../admin-panel/hooks/useFeatureFlag.ts       |  63 ----------
 .../admin-panel/hooks/useFeatureFlagState.ts  |  36 ++++++
 .../admin-panel/hooks/useImpersonate.ts       |  78 ------------
 .../admin-panel/hooks/useImpersonationAuth.ts |  18 +++
 .../hooks/useImpersonationRedirect.ts         |  21 ++++
 .../admin-panel/hooks/useUserLookup.ts        |  42 -------
 .../states/adminPanelErrorState.ts            |   6 -
 .../environment-variables-group-metadata.ts   |   6 +-
 11 files changed, 266 insertions(+), 296 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlag.ts
 create mode 100644 packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlagState.ts
 delete mode 100644 packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonate.ts
 create mode 100644 packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationAuth.ts
 create mode 100644 packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationRedirect.ts
 delete mode 100644 packages/twenty-front/src/modules/settings/admin-panel/hooks/useUserLookup.ts
 delete mode 100644 packages/twenty-front/src/modules/settings/admin-panel/states/adminPanelErrorState.ts

diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx
index ab3e0485b..56239efd3 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx
@@ -36,6 +36,8 @@ const StyledShowMoreButton = styled(Button)<{ isSelected?: boolean }>`
   `}
 `;
 
+const StyledEnvVariablesDescription = styled.div``;
+
 export const SettingsAdminEnvVariables = () => {
   const { data: environmentVariables } = useGetEnvironmentVariablesGroupedQuery(
     {
@@ -65,59 +67,68 @@ export const SettingsAdminEnvVariables = () => {
     );
 
   return (
-    <Section>
-      {visibleGroups.map((group) => (
-        <StyledGroupContainer key={group.name}>
-          <H1Title title={group.name} fontColor={H1TitleFontColor.Primary} />
-          {group.description !== '' && (
-            <StyledGroupDescription>{group.description}</StyledGroupDescription>
-          )}
-          {group.variables.length > 0 && (
-            <StyledGroupVariablesContainer>
-              <SettingsAdminEnvVariablesTable variables={group.variables} />
-            </StyledGroupVariablesContainer>
-          )}
-        </StyledGroupContainer>
-      ))}
+    <>
+      <StyledEnvVariablesDescription>
+        These are only the server values. Ensure your worker environment has the
+        same variables and values, this is required for asynchronous tasks like
+        email sync.
+      </StyledEnvVariablesDescription>
+      <Section>
+        {visibleGroups.map((group) => (
+          <StyledGroupContainer key={group.name}>
+            <H1Title title={group.name} fontColor={H1TitleFontColor.Primary} />
+            {group.description !== '' && (
+              <StyledGroupDescription>
+                {group.description}
+              </StyledGroupDescription>
+            )}
+            {group.variables.length > 0 && (
+              <StyledGroupVariablesContainer>
+                <SettingsAdminEnvVariablesTable variables={group.variables} />
+              </StyledGroupVariablesContainer>
+            )}
+          </StyledGroupContainer>
+        ))}
 
-      {hiddenGroups.length > 0 && (
-        <>
-          <StyledButtonsRow>
-            {hiddenGroups.map((group) => (
-              <StyledShowMoreButton
-                key={group.name}
-                onClick={() => toggleGroupVisibility(group.name)}
-                title={group.name}
-                variant="secondary"
-                isSelected={selectedGroup === group.name}
-              >
-                {group.name} variables
-              </StyledShowMoreButton>
-            ))}
-          </StyledButtonsRow>
+        {hiddenGroups.length > 0 && (
+          <>
+            <StyledButtonsRow>
+              {hiddenGroups.map((group) => (
+                <StyledShowMoreButton
+                  key={group.name}
+                  onClick={() => toggleGroupVisibility(group.name)}
+                  title={group.name}
+                  variant="secondary"
+                  isSelected={selectedGroup === group.name}
+                >
+                  {group.name} variables
+                </StyledShowMoreButton>
+              ))}
+            </StyledButtonsRow>
 
-          {selectedGroupData && (
-            <StyledGroupContainer>
-              <H1Title
-                title={selectedGroupData.name}
-                fontColor={H1TitleFontColor.Primary}
-              />
-              {selectedGroupData.description !== '' && (
-                <StyledGroupDescription>
-                  {selectedGroupData.description}
-                </StyledGroupDescription>
-              )}
-              {selectedGroupData.variables.length > 0 && (
-                <StyledGroupVariablesContainer>
-                  <SettingsAdminEnvVariablesTable
-                    variables={selectedGroupData.variables}
-                  />
-                </StyledGroupVariablesContainer>
-              )}
-            </StyledGroupContainer>
-          )}
-        </>
-      )}
-    </Section>
+            {selectedGroupData && (
+              <StyledGroupContainer>
+                <H1Title
+                  title={selectedGroupData.name}
+                  fontColor={H1TitleFontColor.Primary}
+                />
+                {selectedGroupData.description !== '' && (
+                  <StyledGroupDescription>
+                    {selectedGroupData.description}
+                  </StyledGroupDescription>
+                )}
+                {selectedGroupData.variables.length > 0 && (
+                  <StyledGroupVariablesContainer>
+                    <SettingsAdminEnvVariablesTable
+                      variables={selectedGroupData.variables}
+                    />
+                  </StyledGroupVariablesContainer>
+                )}
+              </StyledGroupContainer>
+            )}
+          </>
+        )}
+      </Section>
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
index 356c0b425..0632b0966 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
@@ -1,10 +1,9 @@
 import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
 import { SettingsAdminWorkspaceContent } from '@/settings/admin-panel/components/SettingsAdminWorkspaceContent';
 import { SETTINGS_ADMIN_USER_LOOKUP_WORKSPACE_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminUserLookupWorkspaceTabsId';
-import { useImpersonate } from '@/settings/admin-panel/hooks/useImpersonate';
-import { useUserLookup } from '@/settings/admin-panel/hooks/useUserLookup';
-import { adminPanelErrorState } from '@/settings/admin-panel/states/adminPanelErrorState';
 import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@@ -12,7 +11,7 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared';
 import {
   Button,
@@ -23,6 +22,7 @@ import {
   Section,
 } from 'twenty-ui';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { useUserLookupAdminPanelMutation } from '~/generated/graphql';
 
 const StyledLinkContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
@@ -35,11 +35,6 @@ const StyledContainer = styled.div`
   flex-direction: row;
 `;
 
-const StyledErrorSection = styled.div`
-  color: ${({ theme }) => theme.font.color.danger};
-  margin-top: ${({ theme }) => theme.spacing(2)};
-`;
-
 const StyledUserInfo = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(5)};
 `;
@@ -60,40 +55,48 @@ const StyledContentContainer = styled.div`
 
 export const SettingsAdminGeneral = () => {
   const [userIdentifier, setUserIdentifier] = useState('');
-  const [userId, setUserId] = useState('');
-
-  const { error: impersonateError } = useImpersonate();
+  const { enqueueSnackBar } = useSnackBar();
 
   const { activeTabId, setActiveTabId } = useTabList(
     SETTINGS_ADMIN_USER_LOOKUP_WORKSPACE_TABS_ID,
   );
-  const userLookupResult = useRecoilValue(userLookupResultState);
-  const adminPanelError = useRecoilValue(adminPanelErrorState);
+  const [userLookupResult, setUserLookupResult] = useRecoilState(
+    userLookupResultState,
+  );
+  const [isUserLookupLoading, setIsUserLookupLoading] = useState(false);
 
-  const { handleUserLookup, isLoading } = useUserLookup();
+  const [userLookup] = useUserLookupAdminPanelMutation();
 
   const canManageFeatureFlags = useRecoilValue(canManageFeatureFlagsState);
 
   const handleSearch = async () => {
     setActiveTabId('');
+    setIsUserLookupLoading(true);
+    setUserLookupResult(null);
 
-    const result = await handleUserLookup(userIdentifier);
+    const response = await userLookup({
+      variables: { userIdentifier },
+      onCompleted: (data) => {
+        setIsUserLookupLoading(false);
+        if (isDefined(data?.userLookupAdminPanel)) {
+          setUserLookupResult(data.userLookupAdminPanel);
+        }
+      },
+      onError: (error) => {
+        setIsUserLookupLoading(false);
+        enqueueSnackBar(error.message, {
+          variant: SnackBarVariant.Error,
+        });
+      },
+    });
 
-    if (isDefined(result?.user?.id) && !adminPanelError) {
-      setUserId(result.user.id.trim());
-    }
+    const result = response.data?.userLookupAdminPanel;
 
-    if (
-      isDefined(result?.workspaces) &&
-      result.workspaces.length > 0 &&
-      !adminPanelError
-    ) {
+    if (isDefined(result?.workspaces) && result.workspaces.length > 0) {
       setActiveTabId(result.workspaces[0].id);
     }
   };
 
-  const shouldShowUserData = userLookupResult && !adminPanelError;
-
   const activeWorkspace = userLookupResult?.workspaces.find(
     (workspace) => workspace.id === activeTabId,
   );
@@ -139,7 +142,7 @@ export const SettingsAdminGeneral = () => {
               onInputEnter={handleSearch}
               placeholder="Enter user ID or email address"
               fullWidth
-              disabled={isLoading}
+              disabled={isUserLookupLoading}
             />
           </StyledLinkContainer>
           <Button
@@ -148,18 +151,12 @@ export const SettingsAdminGeneral = () => {
             accent="blue"
             title="Search"
             onClick={handleSearch}
-            disabled={!userIdentifier.trim() || isLoading}
+            disabled={!userIdentifier.trim() || isUserLookupLoading}
           />
         </StyledContainer>
-
-        {(adminPanelError || impersonateError) && (
-          <StyledErrorSection>
-            {adminPanelError ?? impersonateError}
-          </StyledErrorSection>
-        )}
       </Section>
 
-      {shouldShowUserData && (
+      {isDefined(userLookupResult) && (
         <Section>
           <StyledUserInfo>
             <H1Title title="User Info" fontColor={H1TitleFontColor.Primary} />
@@ -180,10 +177,7 @@ export const SettingsAdminGeneral = () => {
             />
           </StyledTabListContainer>
           <StyledContentContainer>
-            <SettingsAdminWorkspaceContent
-              activeWorkspace={activeWorkspace}
-              userId={userId}
-            />
+            <SettingsAdminWorkspaceContent activeWorkspace={activeWorkspace} />
           </StyledContentContainer>
         </Section>
       )}
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx
index 93d38720f..9eae0825b 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx
@@ -1,19 +1,30 @@
 import { Button, H2Title, IconUser, Toggle } from 'twenty-ui';
 
+import { currentUserState } from '@/auth/states/currentUserState';
 import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
-import { useFeatureFlag } from '@/settings/admin-panel/hooks/useFeatureFlag';
-import { useImpersonate } from '@/settings/admin-panel/hooks/useImpersonate';
+import { useFeatureFlagState } from '@/settings/admin-panel/hooks/useFeatureFlagState';
+import { useImpersonationAuth } from '@/settings/admin-panel/hooks/useImpersonationAuth';
+import { useImpersonationRedirect } from '@/settings/admin-panel/hooks/useImpersonationRedirect';
+import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
 import { WorkspaceInfo } from '@/settings/admin-panel/types/WorkspaceInfo';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared';
+import {
+  FeatureFlagKey,
+  useImpersonateMutation,
+  useUpdateWorkspaceFeatureFlagMutation,
+} from '~/generated/graphql';
 
 type SettingsAdminWorkspaceContentProps = {
   activeWorkspace: WorkspaceInfo | undefined;
-  userId: string;
 };
 
 const StyledTable = styled(Table)`
@@ -22,17 +33,85 @@ const StyledTable = styled(Table)`
 
 export const SettingsAdminWorkspaceContent = ({
   activeWorkspace,
-  userId,
 }: SettingsAdminWorkspaceContentProps) => {
   const canManageFeatureFlags = useRecoilValue(canManageFeatureFlagsState);
+  const [isImpersonateLoading, setIsImpersonationLoading] = useState(false);
+  const { enqueueSnackBar } = useSnackBar();
+  const [currentUser] = useRecoilState(currentUserState);
 
-  const {
-    handleImpersonate,
-    isLoading: isImpersonateLoading,
-    canImpersonate,
-  } = useImpersonate();
+  const { executeImpersonationAuth } = useImpersonationAuth();
+  const { executeImpersonationRedirect } = useImpersonationRedirect();
+  const [updateFeatureFlag] = useUpdateWorkspaceFeatureFlagMutation();
+  const [impersonate] = useImpersonateMutation();
 
-  const { handleFeatureFlagUpdate } = useFeatureFlag();
+  const { updateFeatureFlagState } = useFeatureFlagState();
+  const [userLookupResult, setUserLookupResult] = useRecoilState(
+    userLookupResultState,
+  );
+
+  const handleImpersonate = async (workspaceId: string) => {
+    if (!userLookupResult?.user.id) {
+      enqueueSnackBar('Please search for a user first', {
+        variant: SnackBarVariant.Error,
+      });
+      return;
+    }
+
+    setIsImpersonationLoading(true);
+
+    await impersonate({
+      variables: { userId: userLookupResult.user.id, workspaceId },
+      onCompleted: async (data) => {
+        const { loginToken, workspace } = data.impersonate;
+        const isCurrentWorkspace = workspace.id === activeWorkspace?.id;
+        setUserLookupResult(null);
+        if (isCurrentWorkspace) {
+          await executeImpersonationAuth(loginToken.token);
+          return;
+        }
+
+        return executeImpersonationRedirect(
+          workspace.workspaceUrls,
+          loginToken.token,
+        );
+      },
+      onError: (error) => {
+        enqueueSnackBar(`Failed to impersonate user. ${error.message}`, {
+          variant: SnackBarVariant.Error,
+        });
+      },
+    }).finally(() => {
+      setIsImpersonationLoading(false);
+    });
+  };
+
+  const handleFeatureFlagUpdate = async (
+    workspaceId: string,
+    featureFlag: FeatureFlagKey,
+    value: boolean,
+  ) => {
+    const previousValue = userLookupResult?.workspaces
+      .find((workspace) => workspace.id === workspaceId)
+      ?.featureFlags.find((flag) => flag.key === featureFlag)?.value;
+
+    updateFeatureFlagState(workspaceId, featureFlag, value);
+    await updateFeatureFlag({
+      variables: {
+        workspaceId,
+        featureFlag,
+        value,
+      },
+
+      onError: (error) => {
+        if (isDefined(previousValue)) {
+          updateFeatureFlagState(workspaceId, featureFlag, previousValue);
+        }
+        enqueueSnackBar(`Failed to update feature flag. ${error.message}`, {
+          variant: SnackBarVariant.Error,
+        });
+      },
+    });
+  };
 
   if (!activeWorkspace) return null;
 
@@ -45,13 +124,13 @@ export const SettingsAdminWorkspaceContent = ({
         }`}
         description={'Total Users'}
       />
-      {canImpersonate && (
+      {currentUser?.canImpersonate && (
         <Button
           Icon={IconUser}
           variant="primary"
           accent="blue"
           title={'Impersonate'}
-          onClick={() => handleImpersonate(userId, activeWorkspace.id)}
+          onClick={() => handleImpersonate(activeWorkspace.id)}
           disabled={
             isImpersonateLoading || activeWorkspace.allowImpersonation === false
           }
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlag.ts b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlag.ts
deleted file mode 100644
index 3255a2c20..000000000
--- a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlag.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-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,
-} from '~/generated/graphql';
-
-export const useFeatureFlag = () => {
-  const [userLookupResult, setUserLookupResult] = useRecoilState(
-    userLookupResultState,
-  );
-
-  const setError = useSetRecoilState(adminPanelErrorState);
-
-  const [updateFeatureFlag] = useUpdateWorkspaceFeatureFlagMutation();
-
-  const handleFeatureFlagUpdate = async (
-    workspaceId: string,
-    featureFlag: FeatureFlagKey,
-    value: boolean,
-  ) => {
-    setError(null);
-    const previousState = userLookupResult;
-
-    if (isDefined(userLookupResult)) {
-      setUserLookupResult({
-        ...userLookupResult,
-        workspaces: userLookupResult.workspaces.map((workspace) =>
-          workspace.id === workspaceId
-            ? {
-                ...workspace,
-                featureFlags: workspace.featureFlags.map((flag) =>
-                  flag.key === featureFlag ? { ...flag, value } : flag,
-                ),
-              }
-            : workspace,
-        ),
-      });
-    }
-
-    const response = await updateFeatureFlag({
-      variables: {
-        workspaceId,
-        featureFlag,
-        value,
-      },
-      onError: (error) => {
-        if (isDefined(previousState)) {
-          setUserLookupResult(previousState);
-        }
-        setError(error.message);
-      },
-    });
-
-    return !!response.data;
-  };
-
-  return {
-    handleFeatureFlagUpdate,
-  };
-};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlagState.ts b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlagState.ts
new file mode 100644
index 000000000..c8f885473
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlagState.ts
@@ -0,0 +1,36 @@
+import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
+import { useRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared';
+import { FeatureFlagKey } from '~/generated/graphql';
+
+export const useFeatureFlagState = () => {
+  const [userLookupResult, setUserLookupResult] = useRecoilState(
+    userLookupResultState,
+  );
+
+  const updateFeatureFlagState = (
+    workspaceId: string,
+    featureFlag: FeatureFlagKey,
+    value: boolean,
+  ) => {
+    if (!isDefined(userLookupResult)) return;
+
+    setUserLookupResult({
+      ...userLookupResult,
+      workspaces: userLookupResult.workspaces.map((workspace) =>
+        workspace.id === workspaceId
+          ? {
+              ...workspace,
+              featureFlags: workspace.featureFlags.map((flag) =>
+                flag.key === featureFlag ? { ...flag, value } : flag,
+              ),
+            }
+          : workspace,
+      ),
+    });
+  };
+
+  return {
+    updateFeatureFlagState,
+  };
+};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonate.ts b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonate.ts
deleted file mode 100644
index 67e26d02f..000000000
--- a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonate.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useAuth } from '@/auth/hooks/useAuth';
-import { currentUserState } from '@/auth/states/currentUserState';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
-import { AppPath } from '@/types/AppPath';
-import { useState } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { isDefined } from 'twenty-shared';
-import { useImpersonateMutation } from '~/generated/graphql';
-import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
-
-export const useImpersonate = () => {
-  const [currentUser] = useRecoilState(currentUserState);
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
-    isAppWaitingForFreshObjectMetadataState,
-  );
-
-  const { getAuthTokensFromLoginToken } = useAuth();
-
-  const [impersonate] = useImpersonateMutation();
-  const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleImpersonate = async (userId: string, workspaceId: string) => {
-    if (!userId.trim()) {
-      setError('Please enter a user ID');
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const impersonateResult = await impersonate({
-        variables: { userId, workspaceId },
-      });
-
-      if (isDefined(impersonateResult.errors)) {
-        throw impersonateResult.errors;
-      }
-
-      if (!impersonateResult.data?.impersonate) {
-        throw new Error('No impersonate result');
-      }
-
-      const { loginToken, workspace } = impersonateResult.data.impersonate;
-
-      if (workspace.id === currentWorkspace?.id) {
-        setIsAppWaitingForFreshObjectMetadata(true);
-        await getAuthTokensFromLoginToken(loginToken.token);
-        setIsAppWaitingForFreshObjectMetadata(false);
-        return;
-      }
-
-      return redirectToWorkspaceDomain(
-        getWorkspaceUrl(workspace.workspaceUrls),
-        AppPath.Verify,
-        {
-          loginToken: loginToken.token,
-        },
-      );
-    } catch (error) {
-      setError('Failed to impersonate user. Please try again.');
-      setIsLoading(false);
-    }
-  };
-
-  return {
-    handleImpersonate,
-    isLoading,
-    error,
-    canImpersonate: currentUser?.canImpersonate,
-  };
-};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationAuth.ts b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationAuth.ts
new file mode 100644
index 000000000..228004b44
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationAuth.ts
@@ -0,0 +1,18 @@
+import { useAuth } from '@/auth/hooks/useAuth';
+import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
+import { useSetRecoilState } from 'recoil';
+
+export const useImpersonationAuth = () => {
+  const { getAuthTokensFromLoginToken } = useAuth();
+  const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
+    isAppWaitingForFreshObjectMetadataState,
+  );
+
+  const executeImpersonationAuth = async (loginToken: string) => {
+    setIsAppWaitingForFreshObjectMetadata(true);
+    await getAuthTokensFromLoginToken(loginToken);
+    setIsAppWaitingForFreshObjectMetadata(false);
+  };
+
+  return { executeImpersonationAuth };
+};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationRedirect.ts b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationRedirect.ts
new file mode 100644
index 000000000..437873821
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationRedirect.ts
@@ -0,0 +1,21 @@
+import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
+import { AppPath } from '@/types/AppPath';
+import { WorkspaceUrls } from '~/generated/graphql';
+import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
+
+export const useImpersonationRedirect = () => {
+  const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
+
+  const executeImpersonationRedirect = (
+    workspaceUrls: WorkspaceUrls,
+    loginToken: string,
+  ) => {
+    return redirectToWorkspaceDomain(
+      getWorkspaceUrl(workspaceUrls),
+      AppPath.Verify,
+      { loginToken },
+    );
+  };
+
+  return { executeImpersonationRedirect };
+};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useUserLookup.ts b/packages/twenty-front/src/modules/settings/admin-panel/hooks/useUserLookup.ts
deleted file mode 100644
index 80a97dc7e..000000000
--- a/packages/twenty-front/src/modules/settings/admin-panel/hooks/useUserLookup.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-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,
-  };
-};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/states/adminPanelErrorState.ts b/packages/twenty-front/src/modules/settings/admin-panel/states/adminPanelErrorState.ts
deleted file mode 100644
index 8d8383984..000000000
--- a/packages/twenty-front/src/modules/settings/admin-panel/states/adminPanelErrorState.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const adminPanelErrorState = atom<string | null>({
-  key: 'adminPanelErrorState',
-  default: null,
-});
diff --git a/packages/twenty-server/src/engine/core-modules/environment/constants/environment-variables-group-metadata.ts b/packages/twenty-server/src/engine/core-modules/environment/constants/environment-variables-group-metadata.ts
index 73d476e49..d97a5d1bc 100644
--- a/packages/twenty-server/src/engine/core-modules/environment/constants/environment-variables-group-metadata.ts
+++ b/packages/twenty-server/src/engine/core-modules/environment/constants/environment-variables-group-metadata.ts
@@ -19,7 +19,7 @@ export const ENVIRONMENT_VARIABLES_GROUP_METADATA: Record<
     position: 200,
     description:
       'We use this to limit the number of requests to the server. This is useful to prevent abuse.',
-    isHiddenOnLoad: false,
+    isHiddenOnLoad: true,
   },
   [EnvironmentVariablesGroup.StorageConfig]: {
     position: 300,
@@ -46,13 +46,13 @@ export const ENVIRONMENT_VARIABLES_GROUP_METADATA: Record<
   [EnvironmentVariablesGroup.Logging]: {
     position: 700,
     description: '',
-    isHiddenOnLoad: false,
+    isHiddenOnLoad: true,
   },
   [EnvironmentVariablesGroup.ExceptionHandler]: {
     position: 800,
     description:
       'By default, exceptions are sent to the logs. This should be enough for most self-hosting use-cases. For our cloud app we use Sentry.',
-    isHiddenOnLoad: false,
+    isHiddenOnLoad: true,
   },
   [EnvironmentVariablesGroup.Other]: {
     position: 900,