[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 &&
-        isDirty && (
+        isRoleEditable && 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 <></>;
+};