Fix e2e tests and "Use as Draft" (#12536)

Closes https://github.com/twentyhq/twenty/issues/12535

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

@@ -30,21 +30,31 @@ test('The workflow run visualizer shows the executed draft version without the l
 
   await launchTestButton.click();
 
-  const goToExecutionPageLink = page.getByRole('link', {
-    name: 'View execution details',
-  });
-  const executionPageUrl = await goToExecutionPageLink.getAttribute('href');
-  expect(executionPageUrl).not.toBeNull();
+  await workflowVisualizer.closeSidePanel();
 
   await workflowVisualizer.deleteStep(firstStepId);
 
-  await page.goto(executionPageUrl!);
+  await page.goto('/objects/workflowRuns');
 
-  const workflowRunName = page
+  const recordTableRowForWorkflowRun = page
+    .getByRole('row', {
+      name: workflowVisualizer.workflowName,
+    })
+    .first();
+
+  const linkToWorkflowRun = recordTableRowForWorkflowRun
+    .getByRole('link', {
+      name: workflowVisualizer.workflowName,
+    })
+    .first();
+
+  await linkToWorkflowRun.click({ force: true });
+
+  const workflowRunNameElement = page
     .getByText(`#1 - ${workflowVisualizer.workflowName}`)
     .nth(1);
 
-  await expect(workflowRunName).toBeVisible();
+  await expect(workflowRunNameElement).toBeVisible();
 
   const executedFirstStepNode = workflowVisualizer.getStepNode(firstStepId);
 
@@ -86,12 +96,6 @@ test('Workflow Runs with a pending form step can be opened in the side panel and
 
   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}`;

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/components/UseAsDraftWorkflowVersionSingleRecordAction.tsx

@@ -2,17 +2,19 @@ import { Action } from '@/action-menu/actions/components/Action';
 import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { AppPath } from '@/types/AppPath';
+import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
+import { OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID } from '@/workflow/constants/OverrideWorkflowDraftConfirmationModalId';
 import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
 import { useState } from 'react';
-import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const UseAsDraftWorkflowVersionSingleRecordAction = () => {
+  const { openModal } = useModal();
+
   const recordId = useSelectedRecordIdOrThrow();
   const workflowVersion = useWorkflowVersion(recordId);
   const workflow = useWorkflowWithCurrentVersion(
@@ -20,9 +22,6 @@ export const UseAsDraftWorkflowVersionSingleRecordAction = () => {
   );
   const { createDraftFromWorkflowVersion } =
     useCreateDraftFromWorkflowVersion();
-  const setOpenOverrideWorkflowDraftConfirmationModal = useSetRecoilState(
-    openOverrideWorkflowDraftConfirmationModalState,
-  );
   const navigate = useNavigateApp();
   const [hasNavigated, setHasNavigated] = useState(false);
 
@@ -35,7 +34,7 @@ export const UseAsDraftWorkflowVersionSingleRecordAction = () => {
     }
 
     if (hasAlreadyDraftVersion) {
-      setOpenOverrideWorkflowDraftConfirmationModal(true);
+      openModal(OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID);
     } else {
       const executeActionWithoutWaiting = async () => {
         await createDraftFromWorkflowVersion({

packages/twenty-front/src/modules/workflow/components/OverrideWorkflowDraftConfirmationModal.tsx

@@ -5,14 +5,12 @@ import {
   StyledCenteredButton,
 } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID } from '@/workflow/constants/OverrideWorkflowDraftConfirmationModalId';
 import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
 import { t } from '@lingui/core/macro';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { getAppPath } from '~/utils/navigation/getAppPath';
 
-const OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID =
-  'override-workflow-draft-confirmation-modal';
-
 export const OverrideWorkflowDraftConfirmationModal = ({
   workflowId,
   workflowVersionIdToCopy,

packages/twenty-front/src/modules/workflow/constants/OverrideWorkflowDraftConfirmationModalId.ts

@@ -0,0 +1,2 @@
+export const OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID =
+  'override-workflow-draft-confirmation-modal';

packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts

@@ -1,6 +0,0 @@
-import { createState } from 'twenty-ui/utilities';
-export const openOverrideWorkflowDraftConfirmationModalState =
-  createState<boolean>({
-    key: 'openOverrideWorkflowDraftConfirmationModalState',
-    defaultValue: false,
-  });