[Permissions] Force open title input for role label when empty (#12710)

- Fix empty title in breadcrumb 
- Enforce role label input open if empty

packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx

@@ -68,7 +68,7 @@ export const SettingsRoleSettings = ({
                 label: value,
               });
             }}
-            placeholder={t`Role name`}
+            placeholder={t`Untitled Role`}
             disabled={!isEditable}
           />
         </StyledInputsContainer>

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRole.tsx

@@ -7,6 +7,7 @@ import { SettingsRoleAssignment } from '@/settings/roles/role-assignment/compone
 import { SettingsRolePermissions } from '@/settings/roles/role-permissions/components/SettingsRolePermissions';
 import { SettingsRoleSettings } from '@/settings/roles/role-settings/components/SettingsRoleSettings';
 import { SettingsRoleLabelContainer } from '@/settings/roles/role/components/SettingsRoleLabelContainer';
+import { SettingsRoleLabelContainerEffect } from '@/settings/roles/role/components/SettingsRoleLabelContainerEffect';
 import { SETTINGS_ROLE_DETAIL_TABS } from '@/settings/roles/role/constants/SettingsRoleDetailTabs';
 import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
 import { settingsPersistedRoleFamilyState } from '@/settings/roles/states/settingsPersistedRoleFamilyState';
@@ -19,6 +20,7 @@ import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -52,6 +54,10 @@ const ROLE_BASIC_KEYS: Array<keyof Role> = [
   'canDestroyAllObjectRecords',
 ];
 
+const StyledUntitledRole = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
 export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
   const activeTabId = useRecoilComponentValueV2(
     activeTabIdComponentState,
@@ -275,7 +281,12 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
 
   return (
     <SubMenuTopBarContainer
-      title={<SettingsRoleLabelContainer roleId={roleId} />}
+      title={
+        <>
+          <SettingsRoleLabelContainer roleId={roleId} />
+          <SettingsRoleLabelContainerEffect roleId={roleId} />
+        </>
+      }
       links={[
         {
           children: 'Workspace',
@@ -286,14 +297,19 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
           href: getSettingsPath(SettingsPath.Roles),
         },
         {
-          children: settingsDraftRole.label,
+          children:
+            isDefined(settingsDraftRole.label) &&
+            settingsDraftRole.label !== '' ? (
+              settingsDraftRole.label
+            ) : (
+              <StyledUntitledRole>{t`Untitled Role`}</StyledUntitledRole>
+            ),
         },
       ]}
       actionButton={
-        isRoleEditable &&
+        isRoleEditable && isDirty ? (
-        isDirty && (
           <SaveAndCancelButtons onSave={handleSave} onCancel={handleCancel} />
-        )
+        ) : null
       }
     >
       <SettingsPageContainer>

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx

@@ -29,6 +29,8 @@ export const SettingsRoleLabelContainer = ({
     settingsDraftRoleFamilyState(roleId),
   );
 
+  const titleInputInstanceId = `settings-role-label-${roleId}`;
+
   const handleChange = (newValue: string) => {
     setSettingsDraftRole({
       ...settingsDraftRole,
@@ -43,8 +45,9 @@ export const SettingsRoleLabelContainer = ({
         sizeVariant="md"
         value={settingsDraftRole.label}
         onChange={handleChange}
-        placeholder={t`Role name`}
+        placeholder={t`Untitled Role`}
         hotkeyScope={ROLE_LABEL_EDIT_HOTKEY_SCOPE}
+        instanceId={titleInputInstanceId}
       />
     </StyledHeaderTitle>
   );

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainerEffect.tsx

@@ -0,0 +1,34 @@
+import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
+import { titleInputComponentState } from '@/ui/input/states/titleInputComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+export const SettingsRoleLabelContainerEffect = ({
+  roleId,
+}: {
+  roleId: string;
+}) => {
+  const settingsDraftRole = useRecoilValue(
+    settingsDraftRoleFamilyState(roleId),
+  );
+  const titleInputInstanceId = `settings-role-label-${roleId}`;
+
+  const [isTitleInputOpen, setIsTitleInputOpen] = useRecoilComponentStateV2(
+    titleInputComponentState,
+    titleInputInstanceId,
+  );
+
+  useEffect(() => {
+    if (settingsDraftRole.label === '' && !isTitleInputOpen) {
+      setIsTitleInputOpen(true);
+    }
+  }, [
+    settingsDraftRole.label,
+    setIsTitleInputOpen,
+    titleInputInstanceId,
+    isTitleInputOpen,
+  ]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx

@@ -6,7 +6,9 @@ import { useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
+import { titleInputComponentState } from '@/ui/input/states/titleInputComponentState';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import styled from '@emotion/styled';
 import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
@@ -25,6 +27,7 @@ type InputProps = {
 
 export type TitleInputProps = {
   disabled?: boolean;
+  instanceId: string;
 } & InputProps;
 
 const StyledDiv = styled.div<{
@@ -142,14 +145,18 @@ export const TitleInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
+  instanceId,
 }: TitleInputProps) => {
-  const [isOpened, setIsOpened] = useState(false);
+  const [isTitleInputOpen, setIsTitleInputOpen] = useRecoilComponentStateV2(
+    titleInputComponentState,
+    instanceId,
+  );
 
   const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
 
   return (
     <>
-      {isOpened ? (
+      {isTitleInputOpen ? (
         <Input
           sizeVariant={sizeVariant}
           value={value}
@@ -161,7 +168,7 @@ export const TitleInput = ({
           onClickOutside={onClickOutside}
           onTab={onTab}
           onShiftTab={onShiftTab}
-          setIsOpened={setIsOpened}
+          setIsOpened={setIsTitleInputOpen}
         />
       ) : (
         <StyledDiv
@@ -169,7 +176,7 @@ export const TitleInput = ({
           disabled={disabled}
           onClick={() => {
             if (!disabled) {
-              setIsOpened(true);
+              setIsTitleInputOpen(true);
               setHotkeyScopeAndMemorizePreviousScope({
                 scope: hotkeyScope,
               });

packages/twenty-front/src/modules/ui/input/components/__stories__/TitleInput.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<typeof TitleInput> = {
     placeholder: 'Enter title',
     hotkeyScope: 'titleInput',
     sizeVariant: 'md',
+    instanceId: 'title-input-story',
   },
   argTypes: {
     hotkeyScope: { control: false },

packages/twenty-front/src/modules/ui/input/contexts/titleInputComponentInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const TitleInputComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/ui/input/states/selectors/titleInputComponentSelector.ts

@@ -0,0 +1,17 @@
+import { TitleInputComponentInstanceContext } from '@/ui/input/contexts/titleInputComponentInstanceContext';
+import { titleInputComponentState } from '@/ui/input/states/titleInputComponentState';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
+
+export const titleInputComponentSelector = createComponentSelectorV2({
+  key: 'titleInputComponentSelector',
+  get:
+    ({ instanceId }) =>
+    ({ get }) => {
+      const isTitleInputOpen = get(
+        titleInputComponentState.atomFamily({ instanceId }),
+      );
+
+      return isTitleInputOpen;
+    },
+  componentInstanceContext: TitleInputComponentInstanceContext,
+});

packages/twenty-front/src/modules/ui/input/states/titleInputComponentState.ts

@@ -0,0 +1,8 @@
+import { TitleInputComponentInstanceContext } from '@/ui/input/contexts/titleInputComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const titleInputComponentState = createComponentStateV2<boolean>({
+  key: 'titleInputComponentState',
+  defaultValue: false,
+  componentInstanceContext: TitleInputComponentInstanceContext,
+});

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx

@@ -114,6 +114,7 @@ export const WorkflowStepHeader = ({
             onClickOutside={saveTitle}
             onTab={saveTitle}
             onShiftTab={saveTitle}
+            instanceId="workflow-step-title"
           />
         </StyledHeaderTitle>
         <StyledHeaderType>{headerType}</StyledHeaderType>