refactor(DT-3906): Migrate workflows-summary table + relationships to runes (carved from #3370 - Part 5)

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}

src/lib/components/workflow/relationships/workflow-family-node-description.svelte

@@ -1,27 +1,43 @@
 <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';
 
   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>

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"

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}

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"

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>