add ability to cancel workflows from workflow details page (#944)

* cancel workflow from workflow details page

- refactor toasts to support alternate positions eg. bottom right

* fix cy test

* fix other cy test

* add cy test for cancel

fix cy test for terminate hidden

* POC of handling deadzone for cancelled workflows

* add some animation to the alert

* fix disabled logic for terminate action and fix cy test

* fix access control for cancel and terminate

* copy + design changes

* wrap other modal in if statement for good measure

* fix copy

* disable cancel button when cancel request is sent
remove 1s sleep

* fix broken cy selector due to split button id changes

* only show cancel in progress alert if wf is running

cypress/integration/schedules.spec.js

@@ -74,8 +74,8 @@ describe('Schedules Edit', () => {
 
     cy.get('[data-cy="schedule-interval-frequency"]').contains('Every 30sec');
 
-    cy.get('.split-button > .right').click();
-    cy.get('#schedule-action-button > .edit').click();
+    cy.get('#schedule-actions-menu-button').click();
+    cy.get('#schedule-actions-menu > .edit').click();
     cy.url().should('contain', `/schedules/${scheduleId}/edit`);
     cy.get('#content').contains('Edit Schedule');
   });

cypress/integration/workflow-actions.spec.js

@@ -0,0 +1,75 @@
+/// <reference types="cypress" />
+
+import workflowCompletedFixture from '../fixtures/workflow-running.json';
+
+const { workflowId, runId } =
+  workflowCompletedFixture.workflowExecutionInfo.execution;
+
+describe('Workflow Actions', () => {
+  beforeEach(() => {
+    cy.interceptApi();
+
+    cy.intercept(
+      Cypress.env('VITE_API_HOST') +
+        `/api/v1/namespaces/default/workflows/*/runs/*/events/*`,
+      { fixture: 'event-history-completed-reverse.json' },
+    ).as('event-history-api');
+
+    cy.intercept(
+      Cypress.env('VITE_API_HOST') +
+        `/api/v1/namespaces/default/workflows/${workflowId}/runs/${runId}?`,
+      { fixture: 'workflow-running.json' },
+    ).as('workflow-api');
+  });
+
+  describe('Terminate', () => {
+    it('works if the workflow is running and write actions are enabled', () => {
+      cy.visit(
+        `/namespaces/default/workflows/${workflowId}/${runId}/history/feed?sort=descending`,
+      );
+
+      cy.wait('@settings-api');
+      cy.wait('@workflow-api');
+
+      cy.get('#workflow-actions-menu-button').click();
+      cy.get('#workflow-actions-menu > [data-cy="terminate-button"]').click();
+      cy.get('#workflow-termination-reason').type('test');
+      cy.get('[data-cy="confirm-modal-button"').click();
+      cy.get('#workflow-termination-success-toast').should('exist');
+    });
+  });
+
+  describe('Cancel', () => {
+    it('works if the workflow is running a write actions are enabled', () => {
+      cy.visit(
+        `/namespaces/default/workflows/${workflowId}/${runId}/history/feed?sort=descending`,
+      );
+
+      cy.wait('@settings-api');
+      cy.wait('@workflow-api');
+
+      cy.get('#workflow-actions-primary-button').click();
+      cy.get('[data-cy="confirm-modal-button"]').click();
+
+      cy.wait('@cancel-workflow-api');
+    });
+  });
+
+  describe('Write Actions Disabled', () => {
+    it('the Cancel button is disabled if write actions are disabled', () => {
+      cy.intercept(Cypress.env('VITE_API_HOST') + `/api/v1/settings?`, {
+        fixture: 'settings.write-actions-disabled.json',
+      }).as('settings-api');
+
+      cy.visit(
+        `/namespaces/default/workflows/${workflowId}/${runId}/history/feed?sort=descending`,
+      );
+
+      cy.wait('@settings-api');
+      cy.wait('@workflow-api');
+
+      cy.get('#workflow-actions-primary-button').should('be.disabled');
+      cy.get('#workflow-actions-menu-button').should('be.disabled');
+    });
+  });
+});

cypress/support/commands.js

@@ -149,6 +149,22 @@ Cypress.Commands.add('interceptDescribeBatchOperationApi', () => {
   ).as('describe-batch-operation-api');
 });
 
+Cypress.Commands.add('interceptTerminateWorkflowApi', () => {
+  cy.intercept(
+    Cypress.env('VITE_API_HOST') +
+      `/api/v1/namespaces/*/workflows/*/runs/*/terminate?`,
+    { statusCode: 200, body: {} },
+  ).as('terminate-workflow-api');
+});
+
+Cypress.Commands.add('interceptCancelWorkflowApi', () => {
+  cy.intercept(
+    Cypress.env('VITE_API_HOST') +
+      `/api/v1/namespaces/*/workflows/*/runs/*/cancel?`,
+    { statusCode: 200, body: {} },
+  ).as('cancel-workflow-api');
+});
+
 Cypress.Commands.add(
   'interceptApi',
   ({ namespace, archived } = { namespace: 'default', archived: false }) => {
@@ -167,5 +183,7 @@ Cypress.Commands.add(
     cy.interceptScheduleApi();
     cy.interceptBatchTerminateApi();
     cy.interceptDescribeBatchOperationApi();
+    cy.interceptTerminateWorkflowApi();
+    cy.interceptCancelWorkflowApi();
   },
 );

src/api.d.ts

@@ -8,6 +8,7 @@ type WorkflowsAPIRoutePath =
 type WorkflowAPIRoutePath =
   | 'workflow'
   | 'workflow.terminate'
+  | 'workflow.cancel'
   | 'events.ascending'
   | 'events.descending'
   | 'query';