Revert "[Permissions] Force open title input for role label when empty" (#12817)

Reverts twentyhq/twenty#12710

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

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

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

@@ -7,7 +7,6 @@ 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';
@@ -20,7 +19,6 @@ 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';
@@ -54,10 +52,6 @@ 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,
@@ -281,12 +275,7 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
 
   return (
     <SubMenuTopBarContainer
-      title={
+      title={<SettingsRoleLabelContainer roleId={roleId} />}
-        <>
-          <SettingsRoleLabelContainer roleId={roleId} />
-          <SettingsRoleLabelContainerEffect roleId={roleId} />
-        </>
-      }
       links={[
         {
           children: 'Workspace',
@@ -297,19 +286,14 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
           href: getSettingsPath(SettingsPath.Roles),
         },
         {
-          children:
+          children: settingsDraftRole.label,
-            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,8 +29,6 @@ export const SettingsRoleLabelContainer = ({
     settingsDraftRoleFamilyState(roleId),
   );
 
-  const titleInputInstanceId = `settings-role-label-${roleId}`;
-
   const handleChange = (newValue: string) => {
     setSettingsDraftRole({
       ...settingsDraftRole,
@@ -45,9 +43,8 @@ export const SettingsRoleLabelContainer = ({
         sizeVariant="md"
         value={settingsDraftRole.label}
         onChange={handleChange}
-        placeholder={t`Untitled Role`}
+        placeholder={t`Role name`}
         hotkeyScope={ROLE_LABEL_EDIT_HOTKEY_SCOPE}
-        instanceId={titleInputInstanceId}
       />
     </StyledHeaderTitle>
   );

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

@@ -1,34 +0,0 @@
-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,9 +6,7 @@ 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';
 
@@ -27,7 +25,6 @@ type InputProps = {
 
 export type TitleInputProps = {
   disabled?: boolean;
-  instanceId: string;
 } & InputProps;
 
 const StyledDiv = styled.div<{
@@ -145,18 +142,14 @@ export const TitleInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-  instanceId,
 }: TitleInputProps) => {
-  const [isTitleInputOpen, setIsTitleInputOpen] = useRecoilComponentStateV2(
+  const [isOpened, setIsOpened] = useState(false);
-    titleInputComponentState,
-    instanceId,
-  );
 
   const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
 
   return (
     <>
-      {isTitleInputOpen ? (
+      {isOpened ? (
         <Input
           sizeVariant={sizeVariant}
           value={value}
@@ -168,7 +161,7 @@ export const TitleInput = ({
           onClickOutside={onClickOutside}
           onTab={onTab}
           onShiftTab={onShiftTab}
-          setIsOpened={setIsTitleInputOpen}
+          setIsOpened={setIsOpened}
         />
       ) : (
         <StyledDiv
@@ -176,7 +169,7 @@ export const TitleInput = ({
           disabled={disabled}
           onClick={() => {
             if (!disabled) {
-              setIsTitleInputOpen(true);
+              setIsOpened(true);
               setHotkeyScopeAndMemorizePreviousScope({
                 scope: hotkeyScope,
               });

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

@@ -11,7 +11,6 @@ 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

@@ -1,4 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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