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-e2e-testing/tests/workflow-creation.spec.ts

@@ -26,9 +26,6 @@ test('Create workflow', async ({ page }) => {
     await createWorkflowButton.click(),
   ]);
 
-  const nameInputClosedState = page.getByText('Name').first();
-  await nameInputClosedState.click();
-
   const nameInput = page.getByRole('textbox');
   await nameInput.fill(NEW_WORKFLOW_NAME);
   await nameInput.press('Enter');
@@ -37,23 +34,11 @@ test('Create workflow', async ({ page }) => {
   const newWorkflowId = body.data.createWorkflow.id;
 
   try {
-    const newWorkflowRowEntryName = page
-      .getByTestId(`row-id-${newWorkflowId}`)
-      .locator('div')
-      .filter({ hasText: NEW_WORKFLOW_NAME })
-      .nth(2);
-
-    await Promise.all([
-      page.waitForURL(
-        (url) => url.pathname === `/object/workflow/${newWorkflowId}`,
-      ),
-
-      newWorkflowRowEntryName.click(),
-    ]);
-
     const workflowName = page.getByRole('button', { name: NEW_WORKFLOW_NAME });
 
     await expect(workflowName).toBeVisible();
+
+    await expect(page).toHaveURL(`/object/workflow/${newWorkflowId}`);
   } finally {
     await deleteWorkflow({
       page,