fix(workflow): disable work item button for incorrect work item status

Author: anehx

Diff for: packages/-ember-caluma/mirage/scenarios/default.js

@@ -200,6 +200,7 @@ export default function (server) {
       workflowId: server.create("workflow").id,
       workItemIds: [
         server.create("work-item", {
+          status: "READY",
           taskId: server.create("task", {
             type: "COMPLETE_WORKFLOW_FORM",
           }).id,

Diff for: packages/workflow/addon/components/work-item-button.hbs

@@ -1,7 +1,7 @@
 <UkButton
   ...attributes
   @type={{@type}}
-  @disabled={{or @disabled @loading this.mutate.isRunning}}
+  @disabled={{this.disabled}}
   @active={{@active}}
   @loading={{or @loading this.mutate.isRunning}}
   @color={{or @color "default"}}

Diff for: packages/workflow/addon/components/work-item-button.js

@@ -2,10 +2,12 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
+import { trackedFunction } from "reactiveweb/function";
 
 import cancelWorkItem from "@projectcaluma/ember-workflow/gql/mutations/cancel-work-item.graphql";
 import completeWorkItem from "@projectcaluma/ember-workflow/gql/mutations/complete-work-item.graphql";
 import skipWorkItem from "@projectcaluma/ember-workflow/gql/mutations/skip-work-item.graphql";
+import workItemStatusQuery from "@projectcaluma/ember-workflow/gql/queries/work-item-status.graphql";
 
 /**
  * Component to render a UkButton which mutates the given work item.
@@ -36,6 +38,36 @@ export default class WorkItemButtonComponent extends Component {
   completeWorkItemMutation = completeWorkItem;
   skipWorkItemMutation = skipWorkItem;
 
+  get disabled() {
+    return (
+      this.args.disabled ||
+      this.args.loading ||
+      this.mutate.isRunning ||
+      !this.#workItemHasRequiredStatus.value
+    );
+  }
+
+  get requiredWorkItemStatus() {
+    if (this.args.mutation === "cancel") {
+      return ["READY", "SUSPENDED"];
+    }
+
+    return ["READY"];
+  }
+
+  #workItemHasRequiredStatus = trackedFunction(this, async () => {
+    const status = await this.apollo.query(
+      {
+        query: workItemStatusQuery,
+        variables: { id: this.args.workItemId },
+        fetchPolicy: "network-only",
+      },
+      "allWorkItems.edges.0.node.status",
+    );
+
+    return this.requiredWorkItemStatus.includes(status);
+  });
+
   @dropTask
   *mutate() {
     try {

Diff for: packages/workflow/addon/gql/queries/work-item-status.graphql

@@ -0,0 +1,10 @@
+query WorkItemStatus($id: ID!) {
+  allWorkItems(filter: [{ id: $id }], first: 1) {
+    edges {
+      node {
+        id
+        status
+      }
+    }
+  }
+}

Diff for: packages/workflow/tests/integration/components/work-item-button-test.js

@@ -9,25 +9,34 @@ module("Integration | Component | work-item-button", function (hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
+  hooks.beforeEach(function () {
+    this.workItem = this.server.create("workItem", { status: "READY" });
+    this.id = this.workItem.id;
+  });
+
   test("it renders default", async function (assert) {
     await render(
-      hbs`<WorkItemButton @mutation="complete" @workItemId="test" />`,
+      hbs`<WorkItemButton @mutation="complete" @workItemId={{this.id}} />`,
     );
 
     assert.dom("button").hasText("Complete");
   });
 
   test("it renders label", async function (assert) {
     await render(
-      hbs`<WorkItemButton @mutation="complete" @workItemId="test" @label="Lorem Ipsum" />`,
+      hbs`<WorkItemButton
+  @mutation="complete"
+  @workItemId={{this.id}}
+  @label="Lorem Ipsum"
+/>`,
     );
 
     assert.dom("button").hasText("Lorem Ipsum");
   });
 
   test("it renders block", async function (assert) {
     await render(
-      hbs`<WorkItemButton @mutation="complete" @workItemId="test">Lorem Ipsum</WorkItemButton>`,
+      hbs`<WorkItemButton @mutation="complete" @workItemId={{this.id}}>Lorem Ipsum</WorkItemButton>`,
     );
 
     assert.dom("button").hasText("Lorem Ipsum");
@@ -39,6 +48,10 @@ module("Integration | Component | work-item-button", function (hooks) {
     let mutation = "complete";
     this.set("mutation", mutation);
 
+    await render(
+      hbs`<WorkItemButton @mutation={{this.mutation}} @workItemId={{this.id}} />`,
+    );
+
     this.server.post(
       "graphql",
       (_, request) => {
@@ -53,10 +66,6 @@ module("Integration | Component | work-item-button", function (hooks) {
       200,
     );
 
-    await render(
-      hbs`<WorkItemButton @mutation={{this.mutation}} @workItemId="test" />`,
-    );
-
     await click("button");
 
     mutation = "skip";
@@ -79,7 +88,7 @@ module("Integration | Component | work-item-button", function (hooks) {
     await render(
       hbs`<WorkItemButton
   @mutation="complete"
-  @workItemId="test"
+  @workItemId={{this.id}}
   @beforeMutate={{this.beforeMutate}}
 />`,
     );
@@ -88,4 +97,23 @@ module("Integration | Component | work-item-button", function (hooks) {
 
     assert.verifySteps(["beforeMutate"]);
   });
+
+  test("it renders as disabled if the required work item status is not given", async function (assert) {
+    assert.expect(2);
+
+    await render(
+      hbs`<WorkItemButton @mutation="complete" @workItemId={{this.id}} />`,
+    );
+
+    assert.dom("button").isNotDisabled();
+
+    this.workItem.status = "COMPLETED";
+    this.workItem.save();
+
+    await render(
+      hbs`<WorkItemButton @mutation="complete" @workItemId={{this.id}} />`,
+    );
+
+    assert.dom("button").isDisabled();
+  });
 });