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>
2025-02-11 22:40:28 +05:30
parent 83bf2d1739
commit 252922b522
11 changed files with 266 additions and 296 deletions
--- 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>
+    </>
  );
 };
--- 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>
      )}
--- 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
          }