Open showpage on workflow creation (#9714)

- Created an new component state
`isRecordEditableNameRenamingComponentState`
- Updated `useCreateNewTableRecord` to open the ShowPage on workflow
creation
- Refactored `RecordEditableName` and its components to remove the
useEffect (This was causing the recordName state to be updated after the
focus on `NavigationDrawerInput`, but we want the text so be selected
after the update).
- Introduced a new component `EditableBreadcrumbItem`
- Created an autosizing text input: This is done by a hack using a span
inside a div and the input position is set to absolute and takes the
size of the div. There are two problems that I didn't manage to fix:
If the text is too long, the title overflows, and the letter spacing is
different between the span and the input creating a small offset.


https://github.com/user-attachments/assets/4aa1e177-7458-4691-b0c8-96567b482206


New text input component:


https://github.com/user-attachments/assets/94565546-fe2b-457d-a1d8-907007e0e2ce

packages/twenty-front/src/modules/object-record/components/RecordEditableName.tsx

@@ -1,100 +0,0 @@
-import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
-import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
-import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
-import styled from '@emotion/styled';
-import { useEffect, useState } from 'react';
-import { capitalize } from 'twenty-shared';
-
-const StyledEditableTitleContainer = styled.div`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: row;
-`;
-
-const StyledEditableTitlePrefix = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  line-height: 24px;
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => theme.spacing(0.75)};
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-export const RecordEditableName = ({
-  objectNameSingular,
-  objectRecordId,
-  objectLabelPlural,
-}: {
-  objectNameSingular: string;
-  objectRecordId: string;
-  objectLabelPlural: string;
-}) => {
-  const [isRenaming, setIsRenaming] = useState(false);
-  const { record, loading } = useFindOneRecord({
-    objectNameSingular,
-    objectRecordId,
-    recordGqlFields: {
-      name: true,
-    },
-  });
-
-  const [recordName, setRecordName] = useState(record?.name);
-
-  const { updateOneRecord } = useUpdateOneRecord({
-    objectNameSingular,
-    recordGqlFields: {
-      name: true,
-    },
-  });
-
-  const handleSubmit = (value: string) => {
-    updateOneRecord({
-      idToUpdate: objectRecordId,
-      updateOneRecordInput: {
-        name: value,
-      },
-    });
-    setIsRenaming(false);
-  };
-
-  const handleCancel = () => {
-    setRecordName(record?.name);
-    setIsRenaming(false);
-  };
-
-  useEffect(() => {
-    setRecordName(record?.name);
-  }, [record?.name]);
-
-  if (loading) {
-    return null;
-  }
-
-  return (
-    <StyledEditableTitleContainer>
-      <StyledEditableTitlePrefix>
-        {capitalize(objectLabelPlural)}
-        <span>{' / '}</span>
-      </StyledEditableTitlePrefix>
-      {isRenaming ? (
-        <NavigationDrawerInput
-          value={recordName}
-          onChange={setRecordName}
-          onSubmit={handleSubmit}
-          onCancel={handleCancel}
-          onClickOutside={handleCancel}
-          hotkeyScope="favorites-folder-input"
-        />
-      ) : (
-        <NavigationDrawerItem
-          label={recordName}
-          onClick={() => setIsRenaming(true)}
-          rightOptions={undefined}
-          className="navigation-drawer-item"
-          active
-        />
-      )}
-    </StyledEditableTitleContainer>
-  );
-};