refactor(DT-3906): Migrate workflow client-action modals to runes (carved from #3370 - Part 4)

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

@@ -20,15 +20,20 @@
 
   import BatchOperationConfirmationModalBody from './batch-operation-confirmation-form.svelte';
 
-  export let namespace: string;
-  export let open: boolean;
+  interface Props {
+    namespace: string;
+    open: boolean;
+  }
+
+  let { namespace, open = $bindable() }: Props = $props();
+
   const identity = getIdentity();
   const reason = writable('');
   const reasonPlaceholder = getPlaceholder(Action.Cancel, identity);
   const jobId = writable('');
   const jobIdValid = writable(true);
-  let jobIdPlaceholder = crypto.randomUUID();
-  let error = '';
+  let jobIdPlaceholder = $state(crypto.randomUUID());
+  let error = $state('');
 
   const { allSelected, cancelableWorkflows } =
     getContext<BatchOperationContext>(BATCH_OPERATION_CONTEXT);
@@ -40,7 +45,9 @@
     jobIdPlaceholder = crypto.randomUUID();
   };
 
-  $: if (open) resetForm();
+  $effect(() => {
+    if (open) resetForm();
+  });
 
   const cancelWorkflows = async () => {
     error = '';
@@ -61,9 +68,10 @@
         id: 'batch-cancel-success-toast',
       });
     } catch (err) {
-      error = isNetworkError(err)
-        ? err.message
-        : translate('common.unknown-error');
+      error =
+        isNetworkError(err) && err.message
+          ? err.message
+          : translate('common.unknown-error');
     }
   };
 </script>

src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { derived, type Readable } from 'svelte/store';
 
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
 
   import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -13,12 +13,25 @@
   } from '$lib/pages/workflows-with-new-search.svelte';
   import { workflowsQuery } from '$lib/stores/workflows';
 
-  export let action: Action;
-  export let reason: string;
-  export let jobId: string;
-  export let reasonPlaceholder: string;
-  export let jobIdPlaceholder: string;
-  export let jobIdValid: boolean;
+  interface Props {
+    action: Action;
+    reason: string;
+    jobId: string;
+    reasonPlaceholder: string;
+    jobIdPlaceholder: string;
+    jobIdValid: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    action,
+    reason = $bindable(),
+    jobId = $bindable(),
+    reasonPlaceholder,
+    jobIdPlaceholder,
+    jobIdValid = $bindable(),
+    children,
+  }: Props = $props();
 
   const {
     allSelected,
@@ -27,9 +40,6 @@
     selectedWorkflows,
   } = getContext<BatchOperationContext>(BATCH_OPERATION_CONTEXT);
 
-  $: actionText = getActionText(action);
-  $: operableWorkflowsCount = getOperableWorkflowsCount(action);
-
   const getActionText = (action: Action): string => {
     switch (action) {
       case Action.Cancel:
@@ -38,6 +48,8 @@
         return translate('workflows.terminate');
       case Action.Reset:
         return translate('workflows.reset');
+      default:
+        return '';
     }
   };
 
@@ -52,13 +64,19 @@
             return $terminable.length;
           case Action.Reset:
             return $selected.length;
+          default:
+            return 0;
         }
       },
     );
   };
 
-  const handleJobIdChange = (event: InputEvent) => {
-    jobIdValid = /^[\w.~-]*$/.test((event.target as HTMLInputElement).value);
+  const actionText = $derived(getActionText(action));
+  const operableWorkflowsCount = $derived(getOperableWorkflowsCount(action));
+
+  const handleJobIdChange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    jobIdValid = /^[\w.~-]*$/.test(target.value);
   };
 </script>
 
@@ -119,5 +137,5 @@
     on:input={handleJobIdChange}
     valid={jobIdValid}
   />
-  <slot />
+  {@render children?.()}
 </div>

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

@@ -22,11 +22,16 @@
 
   import BatchOperationConfirmationForm from './batch-operation-confirmation-form.svelte';
 
-  export let namespace: string;
-  export let open = false;
-  let error = '';
-  let jobIdPlaceholder = crypto.randomUUID();
-  let resetType = writable<'first' | 'last'>('first');
+  interface Props {
+    namespace: string;
+    open?: boolean;
+  }
+
+  let { namespace, open = $bindable(false) }: Props = $props();
+
+  let error = $state('');
+  let jobIdPlaceholder = $state(crypto.randomUUID());
+  const resetType = writable<'first' | 'last'>('first');
   const identity = getIdentity();
   const reason = writable('');
   const reasonPlaceholder = getPlaceholder(Action.Reset, identity);
@@ -44,7 +49,9 @@
     jobIdPlaceholder = crypto.randomUUID();
   };
 
-  $: if (open) resetForm();
+  $effect(() => {
+    if (open) resetForm();
+  });
 
   const resetWorkflows = async () => {
     error = '';
@@ -67,9 +74,10 @@
         id: 'batch-reset-success-toast',
       });
     } catch (err) {
-      error = isNetworkError(err)
-        ? err.message
-        : translate('common.unknown-error');
+      error =
+        isNetworkError(err) && err.message
+          ? err.message
+          : translate('common.unknown-error');
     }
   };
 </script>
@@ -97,7 +105,7 @@
     >
       <RadioGroup
         description={translate('workflows.reset-event-radio-group-description')}
-        bind:group={resetType}
+        group={resetType}
         name="reset-event"
       >
         <RadioInput

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

@@ -20,15 +20,20 @@
 
   import BatchOperationConfirmationModalBody from './batch-operation-confirmation-form.svelte';
 
-  export let namespace: string;
-  export let open: boolean;
+  interface Props {
+    namespace: string;
+    open: boolean;
+  }
+
+  let { namespace, open = $bindable() }: Props = $props();
+
   const identity = getIdentity();
   const reason = writable('');
   const reasonPlaceholder = getPlaceholder(Action.Terminate, identity);
   const jobId = writable('');
   const jobIdValid = writable(true);
-  let jobIdPlaceholder = crypto.randomUUID();
-  let error = '';
+  let jobIdPlaceholder = $state(crypto.randomUUID());
+  let error = $state('');
 
   const { allSelected, terminableWorkflows } =
     getContext<BatchOperationContext>(BATCH_OPERATION_CONTEXT);
@@ -40,7 +45,9 @@
     jobIdPlaceholder = crypto.randomUUID();
   };
 
-  $: if (open) resetForm();
+  $effect(() => {
+    if (open) resetForm();
+  });
 
   const terminateWorkflows = async () => {
     error = '';
@@ -61,9 +68,10 @@
         id: 'batch-terminate-success-toast',
       });
     } catch (err) {
-      error = isNetworkError(err)
-        ? err.message
-        : translate('common.unknown-error');
+      error =
+        isNetworkError(err) && err.message
+          ? err.message
+          : translate('common.unknown-error');
     }
   };
 </script>

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

@@ -11,13 +11,22 @@
   import { getIdentity } from '$lib/utilities/core-context';
   import { isNetworkError } from '$lib/utilities/is-network-error';
 
-  export let open: boolean;
-  export let workflow: WorkflowExecution;
-  export let namespace: string;
-  export let refresh: Writable<number> | undefined = undefined;
+  interface Props {
+    open: boolean;
+    workflow: WorkflowExecution;
+    namespace: string;
+    refresh?: Writable<number>;
+  }
 
-  let loading: boolean;
-  let error: string = '';
+  let {
+    open = $bindable(),
+    workflow,
+    namespace,
+    refresh = undefined,
+  }: Props = $props();
+
+  let loading = $state(false);
+  let error = $state('');
 
   const identity = getIdentity();
 
@@ -45,9 +54,10 @@
         message: translate('workflows.cancel-success'),
       });
     } catch (err: unknown) {
-      error = isNetworkError(err)
-        ? err.message
-        : translate('common.unknown-error');
+      error =
+        isNetworkError(err) && err.message
+          ? err.message
+          : translate('common.unknown-error');
     } finally {
       loading = false;
     }

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

@@ -19,17 +19,21 @@
   import { isNetworkError } from '$lib/utilities/is-network-error';
   import { minimumVersionRequired } from '$lib/utilities/version-check';
 
-  export let open: boolean;
-  export let workflow: WorkflowExecution;
-  export let namespace: string;
+  interface Props {
+    open: boolean;
+    workflow: WorkflowExecution;
+    namespace: string;
+  }
 
-  let error = '';
-  let loading = false;
+  let { open = $bindable(), workflow, namespace }: Props = $props();
+
+  let error = $state('');
+  let loading = $state(false);
   let eventId: Writable<string> = writable('');
-  let reason: string;
-  let includeSignals = true;
-  let excludeSignals = false;
-  let excludeUpdates = false;
+  let reason = $state('');
+  let includeSignals = $state(true);
+  let excludeSignals = $state(false);
+  let excludeUpdates = $state(false);
 
   const identity = getIdentity();
 

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

@@ -16,23 +16,27 @@
   import { getIdentity } from '$lib/utilities/core-context';
   import { isNetworkError } from '$lib/utilities/is-network-error';
 
-  export let open: boolean;
-  export let workflow: WorkflowExecution;
-  export let namespace: string;
+  interface Props {
+    open: boolean;
+    workflow: WorkflowExecution;
+    namespace: string;
+  }
 
-  $: ({ metadata } = $workflowRun);
-  $: signalDefinitions = metadata?.definition?.signalDefinitions;
+  let { open = $bindable(), workflow, namespace }: Props = $props();
+
+  const metadata = $derived($workflowRun.metadata);
+  const signalDefinitions = $derived(metadata?.definition?.signalDefinitions);
 
   const defaultEncoding: PayloadInputEncoding = 'json/plain';
 
-  let error: string = '';
-  let loading = false;
-  let name = '';
-  let customSignal = false;
+  let error = $state('');
+  let loading = $state(false);
+  let name = $state('');
+  let customSignal = $state(false);
 
-  let input = '';
-  let encoding: Writable<PayloadInputEncoding> = writable(defaultEncoding);
-  let messageType = '';
+  let input = $state('');
+  const encoding: Writable<PayloadInputEncoding> = writable(defaultEncoding);
+  let messageType = $state('');
 
   const identity = getIdentity();
 
@@ -65,9 +69,10 @@
       });
       hideSignalModal();
     } catch (err) {
-      error = isNetworkError(err)
-        ? err.message
-        : translate('common.unknown-error');
+      error =
+        isNetworkError(err) && err.message
+          ? err.message
+          : translate('common.unknown-error');
     } finally {
       loading = false;
     }
@@ -87,13 +92,13 @@
   {loading}
   confirmText={translate('common.submit')}
   cancelText={translate('common.cancel')}
-  confirmDisabled={!name || !encoding}
+  confirmDisabled={!name || !$encoding}
   on:cancelModal={hideSignalModal}
   on:confirmModal={signal}
 >
   <h3 slot="title">{translate('workflows.signal-modal-title')}</h3>
   <div slot="content" class="flex flex-col gap-4">
-    {#if signalDefinitions?.length > 0 && !customSignal}
+    {#if signalDefinitions && signalDefinitions.length > 0 && !customSignal}
       <Select
         id="signal-select"
         label={translate('workflows.signal-name-label')}
@@ -120,6 +125,6 @@
         bind:value={name}
       />
     {/if}
-    <PayloadInputWithEncoding bind:input bind:encoding bind:messageType />
+    <PayloadInputWithEncoding bind:input {encoding} bind:messageType />
   </div>
 </Modal>