From 3d0ec566d79ad2447b3a94a19c00eef74bc045e8 Mon Sep 17 00:00:00 2001 From: Tegan Churchill Date: Fri, 1 May 2026 10:06:20 -0700 Subject: [PATCH 01/19] refactor(DT-3906): Simple Svelte 5 migrations (#3359) * Update translate to svelte 5 syntax * Update PageTitle to Svelte 5 syntax * Update Panel to Svelte 5 syntax * Update PayloadInput * Update WorkflowStatus to svelte 5 syntax * Update BatchOperations Table to Svelte 5 syntax * Update Icon and Svg components to Svelte 5 syntax * Update Error to Svelte 5 syntax * Update Keyboard Short components to Svelte 5 syntax * Update Label component Svelte 5 syntax * Update TabPanel to Svelte 5 syntax * Update Combobox async-test to Svelte 5 syntax * Update Logo to Svelte 5 syntax * Update Batch Operations Page to Svelte 5 syntax * Update (app) +page to Svelte 5 syntax * Update NameSpace page to Svelte 5 syntax * update UserMenuMobile to Svelte 5 syntax * Update Lines and Dots components to Svelte 5 syntax * Use worse type to not introduce more errors * Migrate forgotten lines and dots component to Svelte 5 syntax * Change derived state to reactive state in async combobox test --- .../components/batch-operations/table.svelte | 8 ++- .../lines-and-dots/svg/graph-widget.svelte | 24 ++++++-- .../svg/group-details-text.svelte | 16 ++++-- .../svg/history-graph-row-visual.svelte | 56 ++++++++++--------- .../lines-and-dots/svg/history-graph.svelte | 34 +++++------ .../lines-and-dots/svg/workflow-row.svelte | 14 +++-- .../workflow-error-stack-trace.svelte | 10 +++- .../workflow-pending-task.svelte | 6 +- src/lib/components/page-title.svelte | 15 +++-- src/lib/components/panel.svelte | 14 ++++- src/lib/components/payload-input.svelte | 32 ++++++++--- .../components/workflow-status.stories.svelte | 3 +- src/lib/components/workflow-status.svelte | 45 ++++++++++----- src/lib/holocene/combobox/async-test.svelte | 18 +++--- src/lib/holocene/error.svelte | 18 +++--- src/lib/holocene/icon/icon.stories.svelte | 3 +- src/lib/holocene/icon/icon.svelte | 34 ++++++----- src/lib/holocene/icon/svg.svelte | 24 ++++++-- .../keyboard-shortcut/arrow-down.svelte | 6 +- .../keyboard-shortcut/arrow-left.svelte | 6 +- .../keyboard-shortcut/arrow-right.svelte | 6 +- .../keyboard-shortcut/arrow-up.svelte | 6 +- .../keyboard-shortcut/shortcut.svelte | 21 +++++-- src/lib/holocene/label.stories.svelte | 3 +- src/lib/holocene/label.svelte | 30 ++++++---- src/lib/holocene/logo.svelte | 14 +++-- src/lib/holocene/tab/tab-panel.svelte | 16 +++--- src/lib/holocene/user-menu-mobile.svelte | 6 +- src/lib/i18n/translate.svelte | 18 ++++-- src/lib/pages/batch-operations.svelte | 6 +- src/routes/(app)/+page.svelte | 16 +++--- .../(app)/namespaces/[namespace]/+page.svelte | 14 +++-- 32 files changed, 361 insertions(+), 181 deletions(-) diff --git a/src/lib/components/batch-operations/table.svelte b/src/lib/components/batch-operations/table.svelte index d891f13097..bc4fa19d78 100644 --- a/src/lib/components/batch-operations/table.svelte +++ b/src/lib/components/batch-operations/table.svelte @@ -13,8 +13,12 @@ } from '$lib/types/batch'; import { routeForBatchOperation } from '$lib/utilities/route-for'; - export let namespace: string; - export let operations: BatchOperationInfo[]; + interface Props { + namespace: string; + operations: BatchOperationInfo[]; + } + + let { namespace, operations }: Props = $props(); const jobStateToBadgeType: Record = { Completed: 'success', diff --git a/src/lib/components/lines-and-dots/svg/graph-widget.svelte b/src/lib/components/lines-and-dots/svg/graph-widget.svelte index 42e33815c5..b2f898db0e 100644 --- a/src/lib/components/lines-and-dots/svg/graph-widget.svelte +++ b/src/lib/components/lines-and-dots/svg/graph-widget.svelte @@ -7,11 +7,23 @@ import TimelineGraph from './timeline-graph.svelte'; - export let namespace: string; - export let workflowId: string; - export let runId = ''; - export let viewportHeight = 360; - export let onLoad: () => void = () => {}; + interface Props { + namespace: string; + workflowId: string; + runId?: string; + viewportHeight?: number; + onLoad?: () => void; + class?: string; + } + + let { + namespace, + workflowId, + runId = '', + viewportHeight = 360, + onLoad = () => {}, + class: className = '', + }: Props = $props(); const getWorkflowAndEventHistory = async () => { const [workflow, history] = await Promise.all([ @@ -32,7 +44,7 @@ {#await getWorkflowAndEventHistory() then { workflow, history }} -
+
; - export let attributes: CombinedAttributes; - export let onDecode: (decodedValue: string) => void | undefined = undefined; + interface Props { + key: string; + value: string | Record; + attributes: CombinedAttributes; + onDecode?: (decodedValue: string) => void | undefined; + } + + let { key, value, attributes, onDecode = undefined }: Props = $props(); const { fontSizeRatio } = DetailsConfig; - $: codeBlockValue = getCodeBlockValue(value); - $: linkType = displayLinkType(key, attributes); + const codeBlockValue = $derived(getCodeBlockValue(value)); + const linkType = $derived(displayLinkType(key, attributes)); {#if typeof value === 'object'} diff --git a/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte b/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte index bf8217e0ea..5d803eb203 100644 --- a/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte +++ b/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte @@ -23,46 +23,52 @@ import Dot from './dot.svelte'; import Line from './line.svelte'; - export let event: WorkflowEventWithPending; - export let group: EventGroup; - export let history: WorkflowEventWithPending[]; - export let groups: EventGroups; - export let index: number; - export let canvasWidth: number; + interface Props { + event: WorkflowEventWithPending; + group: EventGroup; + history: WorkflowEventWithPending[]; + groups: EventGroups; + index: number; + canvasWidth: number; + } + + let { event, group, history, groups, index, canvasWidth }: Props = $props(); const { height, radius } = HistoryConfig; const strokeWidth = radius / 2; - $: y = index * height + height / 2; - $: ({ nextDistance, offset } = getNextDistanceAndOffset( - history, - event, - groups, - height, - $eventFilterSort, - )); + const y = $derived(index * height + height / 2); + const distanceAndOffset = $derived( + getNextDistanceAndOffset(history, event, groups, height, $eventFilterSort), + ); + const nextDistance = $derived(distanceAndOffset.nextDistance); + const offset = $derived(distanceAndOffset.offset); - $: zoomNextDistance = offset > 0 && nextDistance; + const zoomNextDistance = $derived(offset > 0 && nextDistance); - $: classification = + const classification = $derived( isPendingActivity(event) || isPendingNexusOperation(event) ? 'pending' - : event?.classification; + : event?.classification, + ); - $: horizontalOffset = offset * 1.75 * radius; - $: nextIsPending = - isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending; - $: connectLine = + const horizontalOffset = $derived(offset * 1.75 * radius); + const nextIsPending = $derived( + isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending, + ); + const connectLine = $derived( isPendingActivity(event) || isPendingNexusOperation(event) || offset === 0 ? false - : !isMiddleEvent(event, groups); - $: category = + : !isMiddleEvent(event, groups), + ); + const category = $derived( isPendingActivity(event) || isPendingNexusOperation(event) ? 'pending' : nextIsPending ? event?.category - : (undefined as EventTypeCategory | 'pending' | undefined); - $: reverseSort = $eventFilterSort === 'descending'; + : (undefined as EventTypeCategory | 'pending' | undefined), + ); + const reverseSort = $derived($eventFilterSort === 'descending'); diff --git a/src/lib/components/lines-and-dots/svg/history-graph.svelte b/src/lib/components/lines-and-dots/svg/history-graph.svelte index f7d61ac6c9..cffc176542 100644 --- a/src/lib/components/lines-and-dots/svg/history-graph.svelte +++ b/src/lib/components/lines-and-dots/svg/history-graph.svelte @@ -11,27 +11,26 @@ import HistoryGraphRowVisual from './history-graph-row-visual.svelte'; import Line from './line.svelte'; - export let groups: EventGroups; - export let history: WorkflowEventWithPending[]; + interface Props { + groups: EventGroups; + history: WorkflowEventWithPending[]; + } - $: workflowTaskGroups = groupWorkflowTaskEvents( - $filteredEventHistory, - $eventFilterSort, + let { groups, history }: Props = $props(); + + const workflowTaskGroups = $derived( + groupWorkflowTaskEvents($filteredEventHistory, $eventFilterSort), ); - $: allGroups = [...workflowTaskGroups, ...groups]; + const allGroups = $derived([...workflowTaskGroups, ...groups]); const { height, radius } = HistoryConfig; const nodeBuffer = 4 * radius; const maxWidth = 600; - let canvasWidth = nodeBuffer; - let visualWidth = 0; - - $: canvasHeight = history.length * height; - - $: getMaxWidth = (items: WorkflowEventWithPending[]) => { - items.forEach((event) => { + const canvasWidth = $derived.by(() => { + let width = nodeBuffer; + history.forEach((event) => { const { offset } = getNextDistanceAndOffset( history, event, @@ -39,12 +38,13 @@ height, $eventFilterSort, ); - canvasWidth = Math.max(canvasWidth, offset * 1.75 * radius + nodeBuffer); - visualWidth = Math.min(canvasWidth - 2 * radius, maxWidth); + width = Math.max(width, offset * 1.75 * radius + nodeBuffer); }); - }; + return width; + }); + const visualWidth = $derived(Math.min(canvasWidth - 2 * radius, maxWidth)); - $: getMaxWidth(history); + const canvasHeight = $derived(history.length * height);
diff --git a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte index dea28a8a6d..bcc21f1365 100644 --- a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte +++ b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte @@ -4,7 +4,13 @@ import { translate } from '$lib/i18n/translate'; import type { Failure } from '$lib/types'; - export let failure: Failure | undefined = undefined; + import Self from './workflow-error-stack-trace.svelte'; + + interface Props { + failure?: Failure | undefined; + } + + let { failure = undefined }: Props = $props(); {#if failure} @@ -42,5 +48,5 @@ {/if} {#if failure?.cause} - + {/if} diff --git a/src/lib/components/lines-and-dots/workflow-pending-task.svelte b/src/lib/components/lines-and-dots/workflow-pending-task.svelte index 3db5a4df14..29d45798d2 100644 --- a/src/lib/components/lines-and-dots/workflow-pending-task.svelte +++ b/src/lib/components/lines-and-dots/workflow-pending-task.svelte @@ -5,7 +5,11 @@ import { translate } from '$lib/i18n/translate'; import type { PendingWorkflowTaskInfo } from '$lib/types'; - export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined; + interface Props { + pendingTask?: PendingWorkflowTaskInfo | undefined; + } + + let { pendingTask = undefined }: Props = $props(); diff --git a/src/lib/components/page-title.svelte b/src/lib/components/page-title.svelte index 5c9de8188e..eb03c13f9b 100644 --- a/src/lib/components/page-title.svelte +++ b/src/lib/components/page-title.svelte @@ -1,13 +1,20 @@ - diff --git a/src/lib/components/panel.svelte b/src/lib/components/panel.svelte index 2a72031f73..111ca4a12c 100644 --- a/src/lib/components/panel.svelte +++ b/src/lib/components/panel.svelte @@ -1,9 +1,17 @@ -
- +
+ {@render children?.()}
diff --git a/src/lib/components/workflow/dropdown-filter/datetime-inputs.svelte b/src/lib/components/workflow/dropdown-filter/datetime-inputs.svelte deleted file mode 100644 index 32af154d20..0000000000 --- a/src/lib/components/workflow/dropdown-filter/datetime-inputs.svelte +++ /dev/null @@ -1,50 +0,0 @@ - - -
- - - - - (time = 'AM')} - >{translate('common.ante-meridiem')} - (time = 'PM')} - >{translate('common.post-meridiem')} - -
diff --git a/src/lib/components/workflow/dropdown-filter/text-filter.svelte b/src/lib/components/workflow/dropdown-filter/text-filter.svelte deleted file mode 100644 index 4a65cff79f..0000000000 --- a/src/lib/components/workflow/dropdown-filter/text-filter.svelte +++ /dev/null @@ -1,89 +0,0 @@ - - - - - {attributeToHumanReadable[attribute]} - {#snippet trailing()} - - {/snippet} - - - - - diff --git a/src/lib/components/workflow/dropdown-filter/workflow-datetime-filter.svelte b/src/lib/components/workflow/dropdown-filter/workflow-datetime-filter.svelte deleted file mode 100644 index a2e1c7254b..0000000000 --- a/src/lib/components/workflow/dropdown-filter/workflow-datetime-filter.svelte +++ /dev/null @@ -1,272 +0,0 @@ - - -
- - - {value} - - - {#if custom} -
- - - - -
- - -
-
- {:else} -
-
- onChange('All Time')} - >{translate('common.all-time')} -
-
- onChange('Custom')} - >{translate('common.custom')} -
- {#each columnOrderedDurations as duration} -
- onChange(duration)}>{duration} -
- {/each} -
-
- onTimeFieldChange('StartTime')} - > - {translate('common.start-time')} - -
-
- onTimeFieldChange('CloseTime')} - > - {translate('common.end-time')} - -
-
-
- {/if} - - - - - -
diff --git a/src/lib/holocene/holocene-components.json b/src/lib/holocene/holocene-components.json index 4661a49b55..849dd77d9f 100644 --- a/src/lib/holocene/holocene-components.json +++ b/src/lib/holocene/holocene-components.json @@ -713,7 +713,6 @@ "type": "'up' | 'down' | 'left' | 'right' | undefined" } ], - "labs-mode-guard": [], "link": [ { "name": "href", diff --git a/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap b/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap index 7428d6a948..2a81cdbcf3 100644 --- a/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap +++ b/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap @@ -102,8 +102,6 @@ exports[`Icon > json renders 1`] = `""`; -exports[`Icon > labs renders 1`] = `""`; - exports[`Icon > lightning-bolt renders 1`] = `""`; exports[`Icon > link renders 1`] = `""`; diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts index 233f71f2c1..632a1fc83d 100644 --- a/src/lib/holocene/icon/paths.ts +++ b/src/lib/holocene/icon/paths.ts @@ -79,7 +79,6 @@ import invite from './svg/invite.svelte'; import json from './svg/json.svelte'; import key from './svg/key.svelte'; import keyboard from './svg/keyboard.svelte'; -import labs from './svg/labs.svelte'; import laptopCode from './svg/laptop-code.svelte'; import lightningBolt from './svg/lightning-bolt.svelte'; import link from './svg/link.svelte'; @@ -236,7 +235,6 @@ export const icons = { json, keyboard, key, - labs, 'laptop-code': laptopCode, 'lightning-bolt': lightningBolt, link, diff --git a/src/lib/holocene/icon/svg/labs.svelte b/src/lib/holocene/icon/svg/labs.svelte deleted file mode 100644 index c197d6ea96..0000000000 --- a/src/lib/holocene/icon/svg/labs.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/src/lib/holocene/labs-mode-guard.svelte b/src/lib/holocene/labs-mode-guard.svelte deleted file mode 100644 index 8bfbaf294d..0000000000 --- a/src/lib/holocene/labs-mode-guard.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - -{#if $labsMode} - -{:else} - -{/if} diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts index 6a8dc29988..df3d9a3bbc 100644 --- a/src/lib/i18n/locales/en/common.ts +++ b/src/lib/i18n/locales/en/common.ts @@ -154,7 +154,6 @@ export const Strings = { 'arrow-key-right': 'Arrow key right', on: 'On', off: 'Off', - labs: 'Labs', experimental: 'Experimental', timezone: 'Timezone {{ timezone }}', 'time-unit': 'Time Unit', diff --git a/src/lib/pages/workflow-history.svelte b/src/lib/pages/workflow-history.svelte deleted file mode 100644 index 6e5775e774..0000000000 --- a/src/lib/pages/workflow-history.svelte +++ /dev/null @@ -1,29 +0,0 @@ - diff --git a/src/lib/stores/labs-mode.ts b/src/lib/stores/labs-mode.ts deleted file mode 100644 index 7dffc9b846..0000000000 --- a/src/lib/stores/labs-mode.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { persistStore } from './persist-store'; - -export const labsMode = persistStore('labsMode', false, true); From 77a0238b9869f4bfa3e75fe6ba01d3d3f6ae3a75 Mon Sep 17 00:00:00 2001 From: Tegan Churchill Date: Thu, 7 May 2026 12:16:12 -0700 Subject: [PATCH 14/19] refactor(DT-3906): Migrate workflow client-action modals to runes (carved from #3370 - Part 4) (#3375) Co-authored-by: Tegan Churchill --- .../batch-cancel-confirmation-modal.svelte | 24 ++++++---- .../batch-operation-confirmation-form.svelte | 44 +++++++++++++------ .../batch-reset-confirmation-modal.svelte | 28 +++++++----- .../batch-terminate-confirmation-modal.svelte | 24 ++++++---- .../cancel-confirmation-modal.svelte | 28 ++++++++---- .../reset-confirmation-modal.svelte | 22 ++++++---- .../signal-confirmation-modal.svelte | 41 +++++++++-------- .../terminate-confirmation-modal.svelte | 33 +++++++++----- .../download-event-history-modal.svelte | 17 +++++-- .../workflow/start-workflow-button.svelte | 2 +- 10 files changed, 172 insertions(+), 91 deletions(-) diff --git a/src/lib/components/workflow/client-actions/batch-cancel-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/batch-cancel-confirmation-modal.svelte index f6da3432d4..94fd633298 100644 --- a/src/lib/components/workflow/client-actions/batch-cancel-confirmation-modal.svelte +++ b/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(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'); } }; diff --git a/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte b/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte index ab63ba89d8..1a532d3e03 100644 --- a/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte +++ b/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte @@ -1,7 +1,7 @@ @@ -119,5 +137,5 @@ on:input={handleJobIdChange} valid={jobIdValid} /> - + {@render children?.()}
diff --git a/src/lib/components/workflow/client-actions/batch-reset-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/batch-reset-confirmation-modal.svelte index 3f34c251d8..ab1b74ced7 100644 --- a/src/lib/components/workflow/client-actions/batch-reset-confirmation-modal.svelte +++ b/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'); } }; @@ -97,7 +105,7 @@ > (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'); } }; diff --git a/src/lib/components/workflow/client-actions/cancel-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/cancel-confirmation-modal.svelte index 41cd1ffe26..59ea31d3ef 100644 --- a/src/lib/components/workflow/client-actions/cancel-confirmation-modal.svelte +++ b/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 | undefined = undefined; + interface Props { + open: boolean; + workflow: WorkflowExecution; + namespace: string; + refresh?: Writable; + } - 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; } diff --git a/src/lib/components/workflow/client-actions/reset-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/reset-confirmation-modal.svelte index 65b749d10b..3ee003e249 100644 --- a/src/lib/components/workflow/client-actions/reset-confirmation-modal.svelte +++ b/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 = 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(); diff --git a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte index 88f7fc39e7..d85d05b1e2 100644 --- a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte +++ b/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 = writable(defaultEncoding); - let messageType = ''; + let input = $state(''); + const encoding: Writable = 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} >

{translate('workflows.signal-modal-title')}

- {#if signalDefinitions?.length > 0 && !customSignal} + {#if signalDefinitions && signalDefinitions.length > 0 && !customSignal} - + {@render children?.()} {/if} diff --git a/src/lib/components/timezone-select.svelte b/src/lib/components/timezone-select.svelte index ad11912112..38da2b385e 100644 --- a/src/lib/components/timezone-select.svelte +++ b/src/lib/components/timezone-select.svelte @@ -1,7 +1,8 @@ { if (!value) updateDatetime(); From be0c2137f383539c6f70de637e8a4df19a89dc75 Mon Sep 17 00:00:00 2001 From: Tegan Churchill Date: Thu, 7 May 2026 14:09:31 -0700 Subject: [PATCH 17/19] refactor(DT-3906): Migrate workflows-summary table + relationships to runes (carved from #3370 - Part 5) (#3376) --- ...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, + );
{translate('common.child-count')}

{/if}
- {children} + {childrenCount}
{/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 @@ @@ -69,7 +75,11 @@ {#await fetchWorkflowsForTree()} {:then root} - + {#if root} + + {:else} + + {/if} {:catch} {/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 @@ {#if $allSelected} @@ -77,7 +79,7 @@ ({translate('workflows.select-all-leading')}