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/lib/fixtures/blank-workflow.ts

@@ -24,6 +24,8 @@ export class WorkflowVisualizerPage {
   readonly useAsDraftButton: Locator;
   readonly overrideDraftButton: Locator;
   readonly discardDraftButton: Locator;
+  readonly seeRunsButton: Locator;
+  readonly goBackInCommandMenu: Locator;
 
   #actionNames: Record<WorkflowActionType, string> = {
     'create-record': 'Create Record',
@@ -31,6 +33,7 @@ export class WorkflowVisualizerPage {
     'delete-record': 'Delete Record',
     code: 'Code',
     'send-email': 'Send Email',
+    form: 'Form',
   };
 
   #createdActionNames: Record<WorkflowActionType, string> = {
@@ -39,6 +42,7 @@ export class WorkflowVisualizerPage {
     'delete-record': 'Delete Record',
     code: 'Code - Serverless Function',
     'send-email': 'Send Email',
+    form: 'Form',
   };
 
   #triggerNames: Record<WorkflowTriggerType, string> = {
@@ -84,6 +88,10 @@ export class WorkflowVisualizerPage {
     this.discardDraftButton = page.getByRole('button', {
       name: 'Discard Draft',
     });
+    this.seeRunsButton = page.getByRole('link', { name: 'See runs' });
+    this.goBackInCommandMenu = this.commandMenu
+      .getByRole('button')
+      .and(this.commandMenu.getByTestId('command-menu-go-back-button'));
   }
 
   async createOneWorkflow() {

packages/twenty-e2e-testing/lib/types/workflows.ts

@@ -9,4 +9,5 @@ export type WorkflowActionType =
   | 'update-record'
   | 'delete-record'
   | 'code'
-  | 'send-email';
+  | 'send-email'
+  | 'form';

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',
+  );
+});