Fix: Improve UX by explaining email edit restriction for multi-workspace users

packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx

@@ -1,12 +1,19 @@
 import { styled } from '@linaria/react';
+import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { useCanEditProfileField } from '@/settings/profile/hooks/useCanEditProfileField';
 import { useUpdateEmail } from '@/settings/profile/hooks/useUpdateEmail';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { IconCheck, IconPencil, IconX } from 'twenty-ui/display';
+import {
+  AppTooltip,
+  IconCheck,
+  IconPencil,
+  IconX,
+  TooltipDelay,
+} from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
@@ -39,8 +46,10 @@ const StyledActionButtonContainer = styled.div`
 `;
 
 export const EmailField = () => {
+  const { t } = useLingui();
   const currentUser = useAtomStateValue(currentUserState);
-  const { canEdit } = useCanEditProfileField('email');
+  const { canEdit, isBlockedByWorkspaceLimit } =
+    useCanEditProfileField('email');
   const { updateEmail } = useUpdateEmail();
 
   const [draftEmail, setDraftEmail] = useState('');
@@ -81,6 +90,9 @@ export const EmailField = () => {
   };
 
   const currentUserId = currentUser?.id;
+  const emailEditTooltipAnchorId = 'profile-email-edit-disabled-tooltip-anchor';
+  const shouldShowWorkspaceLimitTooltip =
+    !isEditing && !canEdit && isBlockedByWorkspaceLimit;
 
   return (
     <StyledContainer>
@@ -120,7 +132,13 @@ export const EmailField = () => {
           </StyledActionWrapper>
         ) : (
           <StyledActionWrapper key="view">
-            <StyledActionButtonContainer>
+            <StyledActionButtonContainer
+              id={
+                shouldShowWorkspaceLimitTooltip
+                  ? emailEditTooltipAnchorId
+                  : undefined
+              }
+            >
               <Button
                 Icon={IconPencil}
                 variant="secondary"
@@ -130,6 +148,14 @@ export const EmailField = () => {
                 type="button"
               />
             </StyledActionButtonContainer>
+            {shouldShowWorkspaceLimitTooltip && (
+              <AppTooltip
+                anchorSelect={`#${emailEditTooltipAnchorId}`}
+                content={t`You can't change your email because you belong to 2 or more workspaces.`}
+                delay={TooltipDelay.noDelay}
+                place="top"
+              />
+            )}
           </StyledActionWrapper>
         )}
       </StyledFieldRow>

packages/twenty-front/src/modules/settings/profile/hooks/useCanEditProfileField.ts

@@ -2,8 +2,8 @@ import { availableWorkspacesState } from '@/auth/states/availableWorkspacesState
 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { countAvailableWorkspaces } from '@/auth/utils/availableWorkspacesUtils';
-import { PermissionFlagType } from '~/generated-metadata/graphql';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { PermissionFlagType } from '~/generated-metadata/graphql';
 
 export type EditableProfileField =
   | 'email'
@@ -17,7 +17,10 @@ export const useCanEditProfileField = (field: EditableProfileField) => {
   const availableWorkspaces = useAtomStateValue(availableWorkspacesState);
 
   if (!currentWorkspace || !currentUserWorkspace) {
-    return { canEdit: false };
+    return {
+      canEdit: false,
+      isBlockedByWorkspaceLimit: false,
+    };
   }
 
   const editableFields = currentWorkspace.editableProfileFields ?? [];
@@ -31,10 +34,13 @@ export const useCanEditProfileField = (field: EditableProfileField) => {
   const requiresSingleWorkspace = field === 'email';
   const isSingleWorkspaceUser =
     countAvailableWorkspaces(availableWorkspaces) <= 1;
-  const meetsWorkspaceLimit = !requiresSingleWorkspace || isSingleWorkspaceUser;
+  const isBlockedByWorkspaceLimit =
+    requiresSingleWorkspace && !isSingleWorkspaceUser;
+  const meetsWorkspaceLimit = !isBlockedByWorkspaceLimit;
 
   return {
     canEdit:
       workspaceAllowsField && hasProfilePermission && meetsWorkspaceLimit,
+    isBlockedByWorkspaceLimit,
   };
 };