Support Moved to Security Setting (#11335)

This PR addresses issue #11321 by moving the "Support" section from the
General tab to the Security tab.

---------

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

packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx

@@ -1,9 +1,11 @@
 import { useRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Toggle } from 'twenty-ui';
+import { t } from '@lingui/core/macro';
+import { Card, IconLifebuoy } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 export const ToggleImpersonate = () => {
@@ -39,9 +41,15 @@ export const ToggleImpersonate = () => {
   };
 
   return (
-    <Toggle
-      value={currentWorkspace?.allowImpersonation}
-      onChange={handleChange}
-    />
+    <Card rounded>
+      <SettingsOptionCardContentToggle
+        Icon={IconLifebuoy}
+        title={t`Allow Support Team Access`}
+        description={t`Grant access to your workspace so we can troubleshoot problems.`}
+        checked={currentWorkspace?.allowImpersonation ?? false}
+        onChange={handleChange}
+        advancedMode
+      />
+    </Card>
   );
 };

packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx

@@ -4,21 +4,20 @@ import {
   H2Title,
   IconWorld,
   Section,
-  UndecoratedLink,
   Status,
+  UndecoratedLink,
 } from 'twenty-ui';
 
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
 import { NameField } from '@/settings/workspace/components/NameField';
-import { ToggleImpersonate } from '@/settings/workspace/components/ToggleImpersonate';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 
 export const SettingsWorkspace = () => {
   const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
@@ -66,13 +65,6 @@ export const SettingsWorkspace = () => {
                 />
               </UndecoratedLink>
             </Section>
-            <Section>
-              <H2Title
-                title={t`Support`}
-                adornment={<ToggleImpersonate />}
-                description={t`Grant Twenty support temporary access to your workspace so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time.`}
-              />
-            </Section>
           </>
         )}
         <Section>

packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx

@@ -2,13 +2,16 @@ import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { H2Title, IconLock, Section, Tag } from 'twenty-ui';
 
+import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsSSOIdentitiesProvidersListCard } from '@/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard';
 import { SettingsSecurityAuthProvidersOptionsList } from '@/settings/security/components/SettingsSecurityAuthProvidersOptionsList';
 import { SettingsApprovedAccessDomainsListCard } from '@/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard';
+import { ToggleImpersonate } from '@/settings/workspace/components/ToggleImpersonate';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useRecoilValue } from 'recoil';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
@@ -30,6 +33,7 @@ const StyledSection = styled(Section)`
 export const SettingsSecurity = () => {
   const { t } = useLingui();
 
+  const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
   const IsApprovedAccessDomainsEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IsApprovedAccessDomainsEnabled,
   );
@@ -80,6 +84,15 @@ export const SettingsSecurity = () => {
               <SettingsSecurityAuthProvidersOptionsList />
             </StyledContainer>
           </Section>
+          {isMultiWorkspaceEnabled && (
+            <Section>
+              <H2Title
+                title={t`Support`}
+                description={t`Manage support access settings`}
+              />
+              <ToggleImpersonate />
+            </Section>
+          )}
         </StyledMainContent>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -184,6 +184,7 @@ export {
   IconLayoutSidebarRightCollapse,
   IconLayoutSidebarRightExpand,
   IconLibraryPlus,
+  IconLifebuoy,
   IconLink,
   IconLinkOff,
   IconList,