add ability to toggle off cancel (#963)

* add ability to toggle off cancel

* fix typo

* flip logic on feature guard

* fix default prop

* v2.1.87

Author: rossedfort

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "@temporalio/ui",
-  "version": "2.1.86",
+  "version": "2.1.87",
   "type": "module",
   "description": "Temporal.io UI",
   "keywords": [

Diff for: src/lib/components/workflow-actions.svelte

@@ -14,10 +14,13 @@
   import { cancelWorkflow } from '$lib/services/workflow-service';
   import { toaster } from '$lib/holocene/toaster.svelte';
   import Input from '$lib/holocene/input/input.svelte';
+  import FeatureGuard from './feature-guard.svelte';
+  import Button from '$lib/holocene/button.svelte';
 
   export let workflow: WorkflowExecution;
   export let namespace: string;
   export let cancelInProgress: boolean;
+  export let cancelEnabled: boolean;
 
   let reason = '';
   let showTerminationConfirmation = false;
@@ -92,22 +95,33 @@
   width={200}
   text="You do not have permission to edit this workflow. Contact your admin for assistance."
 >
-  <SplitButton
-    primaryActionDisabled={cancelInProgress}
-    disabled={actionsDisabled}
-    label="Request Cancellation"
-    on:click={showCancellationModal}
-    id="workflow-actions"
-  >
-    <MenuItem
-      destructive
+  <FeatureGuard enabled={cancelEnabled}>
+    <SplitButton
+      primaryActionDisabled={cancelInProgress}
+      disabled={actionsDisabled}
+      label="Request Cancellation"
+      on:click={showCancellationModal}
+      id="workflow-actions"
+    >
+      <MenuItem
+        destructive
+        on:click={showTerminationModal}
+        disabled={actionsDisabled}
+        dataCy="terminate-button"
+      >
+        Terminate
+      </MenuItem>
+    </SplitButton>
+    <Button
+      slot="fallback"
+      variant="destructive"
       on:click={showTerminationModal}
       disabled={actionsDisabled}
       dataCy="terminate-button"
     >
       Terminate
-    </MenuItem>
-  </SplitButton>
+    </Button>
+  </FeatureGuard>
 </Tooltip>
 
 {#if !actionsDisabled}

Diff for: src/lib/layouts/workflow-header.svelte

@@ -31,6 +31,7 @@
   export let namespace: string;
   export let workflow: WorkflowExecution;
   export let workers: GetPollersResponse;
+  export let cancelEnabled: boolean = true;
 
   let refreshInterval;
   const refreshRate = 15000;
@@ -118,7 +119,12 @@
           class="flex flex-col items-center justify-center gap-4 whitespace-nowrap sm:flex-row lg:justify-end"
         >
           <AutoRefreshWorkflow onChange={onRefreshChange} />
-          <WorkflowActions {cancelInProgress} {workflow} {namespace} />
+          <WorkflowActions
+            {cancelEnabled}
+            {cancelInProgress}
+            {workflow}
+            {namespace}
+          />
         </div>
       {/if}
     </div>

Diff for: src/lib/layouts/workflow-run-layout.svelte

@@ -9,6 +9,8 @@
   import { onDestroy, onMount } from 'svelte';
   import { eventFilterSort, EventSortOrder } from '$lib/stores/event-view';
 
+  export let cancelEnabled: boolean = true;
+
   onMount(() => {
     const sort = $page.url.searchParams.get('sort');
     if (sort) $eventFilterSort = sort as EventSortOrder;
@@ -28,6 +30,7 @@
         namespace={$page.params.namespace}
         workflow={$workflowRun.workflow}
         workers={$workflowRun.workers}
+        {cancelEnabled}
       />
       <slot />
     </PageTransition>