From 4904b8c401d949dcedf0c693914c5d20095366d0 Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Wed, 6 May 2026 08:40:55 -0700
Subject: [PATCH] refactor(DT-3906): migrate workflows-summary table +
 relationships components to Svelte 5 runes

- workflow/workflows-summary-configurable-table/{batch-actions,table-header-row,table-row}.svelte
- workflow/relationships/workflow-family-node-description{,-details}.svelte
- workflow/workflow-relationships.svelte
- workflow/workflow-advanced-search.svelte

Carved out of #3370 to make the migration PR easier to review.
---
 ...low-family-node-description-details.svelte | 10 ++--
 .../workflow-family-node-description.svelte   | 51 +++++++++++-----
 .../workflow/workflow-advanced-search.svelte  | 25 +++-----
 .../workflow/workflow-relationships.svelte    | 60 +++++++++++--------
 .../batch-actions.svelte                      | 42 ++++++-------
 .../table-header-row.svelte                   | 30 ++++++----
 .../table-row.svelte                          | 58 +++++++++++-------
 7 files changed, 162 insertions(+), 114 deletions(-)

diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
index 31ca061e25..8a6d20470b 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
+++ b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
@@ -15,7 +15,7 @@
     namespace: string;
     isRootWorkflow?: boolean;
     isActive?: boolean;
-    children?: number;
+    childrenCount?: number;
     expanded?: boolean;
   };
 
@@ -24,7 +24,7 @@
     namespace,
     isRootWorkflow = false,
     isActive = false,
-    children = 0,
+    childrenCount = 0,
     expanded = false,
   }: Props = $props();
 
@@ -36,7 +36,9 @@
     }),
   );
 
-  const showExpandIcon = $derived(!isRootWorkflow && $showFullTree && children);
+  const showExpandIcon = $derived(
+    !isRootWorkflow && $showFullTree && childrenCount,
+  );
 </script>
 
 <div
@@ -75,7 +77,7 @@
           <p class="text-xs">{translate('common.child-count')}</p>
         {/if}
         <div class="flex basis-16 items-center gap-1 leading-4 lg:justify-end">
-          <span class="font-mono">{children}</span>
+          <span class="font-mono">{childrenCount}</span>
         </div>
       </div>
     {/if}
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
index 554b95925b..59f3641dd4 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
+++ b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import type { RootNode } from '$lib/services/workflow-service';
   import type { WorkflowExecution } from '$lib/types/workflows';
@@ -7,21 +7,37 @@
   import WorkflowFamilyNodeDescriptionDetails from './workflow-family-node-description-details.svelte';
   import WorkflowFamilyNodeDescriptionTree from './workflow-family-node-description-tree.svelte';
 
-  export let root: RootNode;
-  export let expandAll: boolean;
-  export let generation = 0;
-  export let onNodeClick: (node: RootNode, generation: number) => void;
-  export let activeWorkflow: WorkflowExecution | undefined = undefined;
-  export let openRuns: Map<number, string>;
+  type Props = {
+    root: RootNode;
+    expandAll: boolean;
+    generation?: number;
+    onNodeClick: (node: RootNode, generation: number) => void;
+    activeWorkflow?: WorkflowExecution | undefined;
+    openRuns: Map<number, string>;
+  };
+
+  let {
+    root,
+    expandAll,
+    generation = 0,
+    onNodeClick,
+    activeWorkflow = undefined,
+    openRuns,
+  }: Props = $props();
 
-  $: ({ namespace, workflow, run } = $page.params);
-  $: expanded =
+  const namespace = $derived(page.params.namespace);
+  const workflow = $derived(page.params.workflow);
+  const run = $derived(page.params.run);
+  const expanded = $derived(
     expandAll ||
-    openRuns.get(generation) === root.workflow.runId ||
-    generation === 0;
-  $: isCurrent = root.workflow.id === workflow && root.workflow.runId === run;
-  $: isActive = root.workflow.runId === activeWorkflow?.runId;
-  $: isRootWorkflow = generation === 0;
+      openRuns.get(generation) === root.workflow.runId ||
+      generation === 0,
+  );
+  const isCurrent = $derived(
+    root.workflow.id === workflow && root.workflow.runId === run,
+  );
+  const isActive = $derived(root.workflow.runId === activeWorkflow?.runId);
+  const isRootWorkflow = $derived(generation === 0);
 
   const onClick = () => {
     onNodeClick(root, generation);
@@ -36,7 +52,10 @@
       'surface-subtle'} items-center gap-1 px-2 py-1 lg:py-2 {!isActive &&
       'hover:surface-interactive-secondary'}"
     class:border-l={!isRootWorkflow && !isActive}
-    on:click|stopPropagation={onClick}
+    onclick={(e) => {
+      e.stopPropagation();
+      onClick();
+    }}
   >
     {#if !isRootWorkflow && !isActive}
       <div
@@ -49,7 +68,7 @@
         {namespace}
         {isRootWorkflow}
         {isActive}
-        children={root.children?.length}
+        childrenCount={root.children?.length ?? 0}
         {expanded}
       />
     </div>
diff --git a/src/lib/components/workflow/workflow-advanced-search.svelte b/src/lib/components/workflow/workflow-advanced-search.svelte
index 69f16ee0c2..22bcbe40eb 100644
--- a/src/lib/components/workflow/workflow-advanced-search.svelte
+++ b/src/lib/components/workflow/workflow-advanced-search.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { fly } from 'svelte/transition';
+  import { fade, fly } from 'svelte/transition';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Button from '$lib/holocene/button.svelte';
   import Input from '$lib/holocene/input/input.svelte';
@@ -15,17 +14,8 @@
   import { MAX_QUERY_LENGTH } from '$lib/utilities/request-from-api';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  let manualSearchString = '';
-
-  $: query = $page.url.searchParams.get('query');
-
-  function setManualString(query: string) {
-    manualSearchString = query;
-  }
-
-  $: {
-    setManualString(query);
-  }
+  const query = $derived(page.url.searchParams.get('query'));
+  let manualSearchString = $derived(query ?? '');
 
   const onSearch = () => {
     if (!manualSearchString) {
@@ -46,7 +36,7 @@
       $refresh = Date.now();
     } else {
       updateQueryParameters({
-        url: $page.url,
+        url: page.url,
         parameter: 'query',
         value: manualSearchString,
         allowEmpty: true,
@@ -62,7 +52,10 @@
 
 <div class="w-full" in:fade>
   <form
-    on:submit|preventDefault={onSearch}
+    onsubmit={(e) => {
+      e.preventDefault();
+      onSearch();
+    }}
     class="flex gap-0"
     in:fly={{ x: -100, duration: 150 }}
     role="search"
diff --git a/src/lib/components/workflow/workflow-relationships.svelte b/src/lib/components/workflow/workflow-relationships.svelte
index ddcbbbf7b7..5219f588be 100644
--- a/src/lib/components/workflow/workflow-relationships.svelte
+++ b/src/lib/components/workflow/workflow-relationships.svelte
@@ -1,11 +1,11 @@
-<script context="module" lang="ts">
+<script module lang="ts">
+  import { writable } from 'svelte/store';
+
   export const showFullTree = writable(true);
 </script>
 
 <script lang="ts">
-  import { writable } from 'svelte/store';
-
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -22,44 +22,50 @@
 
   const MAX_UPPER_LIMIT = 5000;
 
-  $: ({ namespace } = $page.params);
-  $: ({ workflow } = $workflowRun);
+  const namespace = $derived(page.params.namespace);
+  const workflow = $derived($workflowRun.workflow);
 
-  let initialWorkflow: WorkflowExecution | undefined = undefined;
+  let initialWorkflow = $state<WorkflowExecution | undefined>(undefined);
 
-  $: rootWorkflowId = initialWorkflow?.rootExecution?.workflowId;
-  $: rootRunId = initialWorkflow?.rootExecution?.runId;
-  $: parentWorkflowId = initialWorkflow?.parent?.workflowId;
-  $: parentRunId = initialWorkflow?.parent?.runId;
+  const rootWorkflowId = $derived(initialWorkflow?.rootExecution?.workflowId);
+  const rootRunId = $derived(initialWorkflow?.rootExecution?.runId);
+  const parentWorkflowId = $derived(initialWorkflow?.parent?.workflowId);
+  const parentRunId = $derived(initialWorkflow?.parent?.runId);
 
-  $: {
+  $effect(() => {
     if (!initialWorkflow && workflow) {
       initialWorkflow = workflow;
     }
-  }
+  });
 
   const fetchWorkflowsForTree = async () => {
+    if (!rootWorkflowId || !rootRunId) {
+      return;
+    }
+
     const result = await fetchAllRootWorkflowsCount(
       namespace,
       rootWorkflowId,
       rootRunId,
     );
-    const count = parseInt(result.count);
+    const count = parseInt(result.count ?? '0', 10);
     const overMaxLimit = count > MAX_UPPER_LIMIT;
     if (overMaxLimit) {
       $showFullTree = false;
-    } else {
-      $showFullTree = true;
+
+      if (!parentWorkflowId || !parentRunId || !initialWorkflow) {
+        return;
+      }
+      return fetchAllDirectWorkflows({
+        namespace,
+        parentWorkflowId,
+        parentRunId,
+        workflow: initialWorkflow,
+      });
     }
 
-    return overMaxLimit
-      ? fetchAllDirectWorkflows({
-          namespace,
-          parentWorkflowId,
-          parentRunId,
-          workflow: initialWorkflow,
-        })
-      : fetchAllRootWorkflows(namespace, rootWorkflowId, rootRunId);
+    $showFullTree = true;
+    return fetchAllRootWorkflows(namespace, rootWorkflowId, rootRunId);
   };
 </script>
 
@@ -69,7 +75,11 @@
       {#await fetchWorkflowsForTree()}
         <Loading />
       {:then root}
-        <WorkflowFamilyTree {root} {namespace} />
+        {#if root}
+          <WorkflowFamilyTree {root} {namespace} />
+        {:else}
+          <WorkflowRelationshipsOld />
+        {/if}
       {:catch}
         <WorkflowRelationshipsOld />
       {/await}
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/batch-actions.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/batch-actions.svelte
index bd345f0b45..49b16293c3 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/batch-actions.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/batch-actions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -20,7 +20,11 @@
   import { workflowResetEnabled } from '$lib/utilities/workflow-reset-enabled';
   import { workflowTerminateEnabled } from '$lib/utilities/workflow-terminate-enabled';
 
-  export let workflows: WorkflowExecution[];
+  type Props = {
+    workflows: WorkflowExecution[];
+  };
+
+  let { workflows }: Props = $props();
 
   const {
     selectedWorkflows,
@@ -32,33 +36,31 @@
     openBatchResetConfirmationModal,
   } = getContext<BatchOperationContext>(BATCH_OPERATION_CONTEXT);
 
-  let coreUser = coreUserStore();
-  let selectedWorkflowsCount: number;
+  const coreUser = coreUserStore();
 
-  $: {
-    selectedWorkflowsCount = $selectedWorkflows?.length ?? 0;
-  }
+  const selectedWorkflowsCount = $derived($selectedWorkflows?.length ?? 0);
 
-  $: terminateEnabled = workflowTerminateEnabled(
-    $page.data.settings,
-    $coreUser,
-    $page.params.namespace,
+  const terminateEnabled = $derived(
+    workflowTerminateEnabled(
+      page.data.settings,
+      $coreUser,
+      page.params.namespace,
+    ),
   );
 
-  $: cancelEnabled = workflowCancelEnabled(
-    $page.data.settings,
-    $coreUser,
-    $page.params.namespace,
+  const cancelEnabled = $derived(
+    workflowCancelEnabled(page.data.settings, $coreUser, page.params.namespace),
   );
 
-  $: resetEnabled =
+  const resetEnabled = $derived(
     workflowResetEnabled(
-      $page.data.settings,
+      page.data.settings,
       $coreUser,
-      $page.params.namespace,
+      page.params.namespace,
     ) && $isCloud
       ? true
-      : minimumVersionRequired('1.23.0', $temporalVersion);
+      : minimumVersionRequired('1.23.0', $temporalVersion),
+  );
 </script>
 
 {#if $allSelected}
@@ -77,7 +79,7 @@
       ({translate('workflows.select-all-leading')}
       <button
         data-testid="select-all-workflows"
-        on:click={() => handleSelectAll(workflows)}
+        onclick={() => handleSelectAll(workflows)}
         class="cursor-pointer underline"
         ><Translate
           key="workflows.select-all"
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
index 3cdddac7b6..388b3414ea 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
 
   import Checkbox from '$lib/holocene/checkbox.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -12,15 +12,23 @@
 
   import BatchActions from './batch-actions.svelte';
 
-  export let workflows: WorkflowExecution[];
-  export let empty: boolean;
-  export let columnsCount: number;
-  export let pageSelectionStatus: 'checked' | 'unchecked' | 'partial' =
-    'unchecked';
-  export let onSelectPage: (
-    selected: boolean,
-    workflows: WorkflowExecution[],
-  ) => void;
+  type Props = {
+    workflows: WorkflowExecution[];
+    empty: boolean;
+    columnsCount: number;
+    pageSelectionStatus?: 'checked' | 'unchecked' | 'partial';
+    onSelectPage: (selected: boolean, workflows: WorkflowExecution[]) => void;
+    children?: Snippet;
+  };
+
+  let {
+    workflows,
+    empty,
+    columnsCount,
+    pageSelectionStatus = 'unchecked',
+    onSelectPage,
+    children,
+  }: Props = $props();
 
   const { batchActionsVisible } = getContext<BatchOperationContext>(
     BATCH_OPERATION_CONTEXT,
@@ -53,7 +61,7 @@
       <BatchActions {workflows} />
     </th>
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </tr>
 
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte
index 759a6f17ab..86e0ee3efb 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import IsTemporalServerVersionGuard from '$lib/components/is-temporal-server-version-guard.svelte';
   import Button from '$lib/holocene/button.svelte';
@@ -20,34 +20,48 @@
 
   import StartWorkflowButton from '../start-workflow-button.svelte';
 
-  export let workflow: WorkflowExecution;
-  export let empty = false;
-  export let toggleChildrenVisibility: (
-    workflow: WorkflowExecution,
-  ) => void | Promise<void> = () => {};
-  export let childCount: number | undefined = undefined;
-  export let child = false;
+  type Props = {
+    workflow: WorkflowExecution;
+    empty?: boolean;
+    toggleChildrenVisibility?: (
+      workflow: WorkflowExecution,
+    ) => void | Promise<void>;
+    childCount?: number | undefined;
+    child?: boolean;
+    onClickBatchSelect?: (e: MouseEvent) => void;
+    children?: Snippet;
+  };
+
+  let {
+    workflow,
+    empty = false,
+    toggleChildrenVisibility = () => {},
+    childCount = undefined,
+    child = false,
+    onClickBatchSelect = () => {},
+    children,
+  }: Props = $props();
 
   const { allSelected, selectedWorkflows } = getContext<BatchOperationContext>(
     BATCH_OPERATION_CONTEXT,
   );
 
-  export let onClickBatchSelect: (e: MouseEvent) => void = () => {};
-
-  $: ({ namespace } = $page.params);
+  const namespace = $derived(page.params.namespace);
 
-  $: parentWorkflows =
-    $page.url.searchParams.get('query') === '`ParentWorkflowId` is null';
+  const parentWorkflows = $derived(
+    page.url.searchParams.get('query') === '`ParentWorkflowId` is null',
+  );
 
-  $: label = translate('workflows.select-workflow', {
-    workflow: workflow?.id,
-  });
+  const label = $derived(
+    translate('workflows.select-workflow', { workflow: workflow?.id }),
+  );
 
-  $: childrenShown = childCount !== undefined;
+  const childrenShown = $derived(childCount !== undefined);
 
-  $: checked =
+  const checked = $derived(
     ($allSelected && !child) ||
-    $selectedWorkflows.some((selected) => selected.runId === workflow.runId);
+      $selectedWorkflows.some((selected) => selected.runId === workflow.runId),
+  );
 </script>
 
 <tr
@@ -75,7 +89,7 @@
         ? 'w-auto'
         : 'w-6'}"
     >
-      {#if !workflowCreateDisabled($page)}
+      {#if !workflowCreateDisabled(page)}
         <StartWorkflowButton
           {namespace}
           runId={workflow.runId}
@@ -108,7 +122,7 @@
   {:else}
     <td></td>
   {/if}
-  <slot />
+  {@render children?.()}
 </tr>
 
 <style lang="postcss">