Workflow pause updates (#3196)

* Update logic where isRunning to include isPaused

* Pause live updates when pausing workflow

* Show activity commands when workflow is paused

* Show event attribute details for workflow pause and unpause

* Keep auto refresh enabled on pause

Author: laurakwhit

src/lib/components/activity/activity-options-update-drawer.svelte

@@ -9,6 +9,7 @@
   import NumberInput from '$lib/holocene/input/number-input.svelte';
   import Label from '$lib/holocene/label.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { Action } from '$lib/models/activity-actions';
   import { updateActivityOptions } from '$lib/services/workflow-activities-service';
   import { toaster } from '$lib/stores/toaster';
   import { triggerRefresh } from '$lib/stores/workflow-run';
@@ -99,7 +100,7 @@
         activityOptions,
         identity,
       });
-      triggerRefresh();
+      triggerRefresh(Action.Update);
       toaster.push({
         variant: 'success',
         message: `Options for Activity ${id} have been updated.`,

src/lib/components/activity/activity-pause-confirmation-modal.svelte

@@ -5,6 +5,7 @@
   import Input from '$lib/holocene/input/input.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { Action } from '$lib/models/workflow-actions';
   import { pauseActivity } from '$lib/services/workflow-activities-service';
   import { triggerRefresh } from '$lib/stores/workflow-run';
   import type { PendingActivity } from '$lib/types/events';
@@ -42,7 +43,7 @@
       type: includeType ? type : undefined,
       identity,
     });
-    triggerRefresh();
+    triggerRefresh(Action.Pause);
     hideModal();
   };
 </script>

src/lib/components/activity/activity-reset-confirmation-modal.svelte

@@ -4,6 +4,7 @@
   import Checkbox from '$lib/holocene/checkbox.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { Action } from '$lib/models/workflow-actions';
   import { resetActivity } from '$lib/services/workflow-activities-service';
   import { toaster } from '$lib/stores/toaster';
   import { triggerRefresh } from '$lib/stores/workflow-run';
@@ -42,7 +43,7 @@
       type: includeType ? type : undefined,
       identity,
     });
-    triggerRefresh();
+    triggerRefresh(Action.Reset);
     toaster.push({
       variant: 'success',
       message: translate('activities.reset-success', { activityId: id }),

src/lib/components/activity/activity-unpause-confirmation-modal.svelte

@@ -4,6 +4,7 @@
   import Checkbox from '$lib/holocene/checkbox.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { Action } from '$lib/models/activity-actions';
   import { unpauseActivity } from '$lib/services/workflow-activities-service';
   import { triggerRefresh } from '$lib/stores/workflow-run';
   import type { PendingActivity } from '$lib/types/events';
@@ -38,7 +39,7 @@
       type: includeType ? type : undefined,
       identity,
     });
-    triggerRefresh();
+    triggerRefresh(Action.Unpause);
     hideModal();
   };
 </script>

src/lib/components/lines-and-dots/end-time-interval.svelte

@@ -35,7 +35,7 @@
     if (pauseLiveUpdates) {
       clearInterval(endTimeInterval);
       endTimeInterval = null;
-    } else if (!endTimeInterval && workflow.isRunning) {
+    } else if (!endTimeInterval && (workflow.isRunning || workflow.isPaused)) {
       endTimeInterval = setInterval(() => {
         endTime = rightNow();
       }, 1000);

src/lib/components/workflow-actions.svelte

@@ -36,21 +36,14 @@
     workflow: WorkflowExecution;
     namespace: string;
     cancelInProgress: boolean;
-    isRunning: boolean;
-    isPaused: boolean;
     first?: string;
     next?: string;
   }
 
-  let {
-    workflow,
-    namespace,
-    cancelInProgress,
-    isRunning,
-    isPaused,
-    first,
-    next,
-  }: Props = $props();
+  let { workflow, namespace, cancelInProgress, first, next }: Props = $props();
+
+  const isRunning = $derived(workflow?.isRunning);
+  const isPaused = $derived(workflow?.isPaused);
 
   let cancelConfirmationModalOpen = $state(false);
   let terminateConfirmationModalOpen = $state(false);

src/lib/components/workflow/client-actions/pause-confirmation-modal.svelte

@@ -4,6 +4,7 @@
   import { translate } from '$lib/i18n/translate';
   import { Action } from '$lib/models/workflow-actions';
   import { pauseWorkflow } from '$lib/services/workflow-service';
+  import { pauseLiveUpdates } from '$lib/stores/events';
   import { toaster } from '$lib/stores/toaster';
   import { triggerRefresh } from '$lib/stores/workflow-run';
   import type { WorkflowExecution } from '$lib/types/workflows';

src/lib/components/workflow/input-and-results-payload.svelte

@@ -13,7 +13,7 @@
 
   export let title: string;
   export let content: string = '';
-  export let isRunning: boolean = false;
+  export let isPending: boolean = false;
 
   const parseContent = (c: string): PotentiallyDecodable | undefined => {
     try {
@@ -93,7 +93,7 @@
     {/key}
   {:else}
     <CodeBlock
-      content={isRunning ? 'Results will appear upon completion.' : 'null'}
+      content={isPending ? 'Results will appear upon completion.' : 'null'}
       language="text"
       copyable={false}
       maxHeight={300}

src/lib/components/workflow/input-and-results.svelte

@@ -8,18 +8,19 @@
 
   $: workflowEvents =
     getWorkflowStartedCompletedAndTaskFailedEvents($fullEventHistory);
-  $: isRunning = $workflowRun.workflow.isRunning;
+  $: isPending =
+    $workflowRun.workflow.isRunning || $workflowRun.workflow.isPaused;
 </script>
 
 <div class="flex flex-col gap-4 lg:flex-row" data-testid="input-and-result">
   <InputAndResultsPayload
     title={translate('workflows.input')}
     content={workflowEvents.input}
-    {isRunning}
+    {isPending}
   />
   <InputAndResultsPayload
     title={translate('workflows.result')}
     content={workflowEvents.results}
-    {isRunning}
+    {isPending}
   />
 </div>

src/lib/components/workflow/pending-activity/pending-activity-card.svelte

@@ -31,14 +31,16 @@
   }: { activity: PendingActivity; totalPending?: number } = $props();
   const failed = $derived(activity.attempt > 1 && !!activity.lastFailure);
   const isRunning = $derived($workflowRun?.workflow?.isRunning);
+  const isPaused = $derived($workflowRun?.workflow?.isPaused);
 
   let coreUser = coreUserStore();
   let showActivityCommands = $derived(
     activityCommandsEnabled(
       page.data.settings,
       $coreUser,
       page.params.namespace,
-    ) && isRunning,
+    ) &&
+      (isRunning || isPaused),
   );
 </script>