Workflow runs in side panel (#11669)

Vidéo explicative : https://share.cleanshot.com/VsvWknlW

Closes https://github.com/twentyhq/core-team-issues/issues/810
Closes https://github.com/twentyhq/core-team-issues/issues/806

Known issues to fix later:

- https://github.com/twentyhq/core-team-issues/issues/879

packages/twenty-e2e-testing/tests/workflow-run.spec.ts

@@ -56,3 +56,113 @@ test('The workflow run visualizer shows the executed draft version without the l
     'Create Record',
   );
 });
+
+test('Workflow Runs with a pending form step can be opened in the side panel and then in full screen', async ({
+  workflowVisualizer,
+  page,
+}) => {
+  await workflowVisualizer.createInitialTrigger('manual');
+
+  const manualTriggerAvailabilitySelect = page.getByRole('button', {
+    name: 'When record(s) are selected',
+  });
+
+  await manualTriggerAvailabilitySelect.click();
+
+  const alwaysAvailableOption = page.getByText(
+    'When no record(s) are selected',
+  );
+
+  await alwaysAvailableOption.click();
+
+  await workflowVisualizer.closeSidePanel();
+
+  const { createdStepId: firstStepId } =
+    await workflowVisualizer.createStep('form');
+
+  await workflowVisualizer.closeSidePanel();
+
+  const launchTestButton = page.getByLabel(workflowVisualizer.workflowName);
+
+  await launchTestButton.click();
+
+  const goToExecutionPageLink = page.getByRole('link', {
+    name: 'View execution details',
+  });
+
+  await expect(goToExecutionPageLink).toBeVisible();
+
+  await workflowVisualizer.seeRunsButton.click();
+
+  const workflowRunName = `#1 - ${workflowVisualizer.workflowName}`;
+
+  const workflowRunNameCell = page.getByRole('cell', { name: workflowRunName });
+
+  await expect(workflowRunNameCell).toBeVisible();
+
+  const recordTableOptionsButton = page.getByText('Options');
+
+  await recordTableOptionsButton.click();
+
+  const layoutButton = page.getByText('Layout');
+
+  await layoutButton.click();
+
+  const openInButton = page.getByText('Open in');
+
+  await openInButton.click();
+
+  const openInSidePanelOption = page.getByRole('option', {
+    name: 'Side panel',
+  });
+
+  await openInSidePanelOption.click();
+
+  // 1. Exit the dropdown
+  await workflowRunNameCell.click();
+  // 2. Actually open the workflow run in the side panel
+  await workflowRunNameCell.click();
+
+  await expect(workflowVisualizer.stepHeaderInCommandMenu).toContainText(
+    'Form',
+  );
+
+  await workflowVisualizer.goBackInCommandMenu.click();
+
+  const workflowRunNameInCommandMenu =
+    workflowVisualizer.commandMenu.getByText(workflowRunName);
+
+  await expect(workflowRunNameInCommandMenu).toBeVisible();
+
+  await workflowVisualizer.triggerNode.click();
+
+  await expect(workflowVisualizer.stepHeaderInCommandMenu).toContainText(
+    'Launch manually',
+  );
+
+  await workflowVisualizer.goBackInCommandMenu.click();
+
+  const formStep = workflowVisualizer.getStepNode(firstStepId);
+
+  await formStep.click();
+
+  await workflowVisualizer.goBackInCommandMenu.click();
+
+  const openInFullScreenButton = workflowVisualizer.commandMenu.getByRole(
+    'button',
+    { name: 'Open' },
+  );
+
+  await openInFullScreenButton.click();
+
+  const workflowRunNameInShowPage = page
+    .getByText(`#1 - ${workflowVisualizer.workflowName}`)
+    .nth(1);
+
+  await expect(workflowRunNameInShowPage).toBeVisible();
+
+  // Expect the side panel to be opened by default on the form.
+  await expect(workflowVisualizer.stepHeaderInCommandMenu).toContainText(
+    'Form',
+  );
+});