refactor(DT-3906): UI svelte 5 migrate components/events

src/lib/components/event/event-card.svelte

@@ -157,7 +157,7 @@
 {/snippet}
 
 {#snippet eventLinks(links: ELink[])}
   {#each links as link}
     {@render eventLink(link)}
     {@render eventNamespaceLink(link)}
   {/each}
@@ -167,12 +167,10 @@
   <div class="flex items-start gap-4">
     <p class="min-w-56 text-sm text-secondary/80">Summary</p>
     <p class="whitespace-pre-line">
-      <MetadataDecoder
-        {value}
-        let:decodedValue
-        fallback={translate('events.decode-failed')}
-      >
-        {decodedValue}
+      <MetadataDecoder {value} fallback={translate('events.decode-failed')}>
+        {#snippet children(decodedValue)}
+          {decodedValue}
+        {/snippet}
       </MetadataDecoder>
     </p>
   </div>

src/lib/components/event/event-category-multiselect-filter.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
-  import MultiSelect from '$lib/holocene/select/multi-select.svelte';
+  import MultiSelect, {
+    type MultiSelectOptions,
+  } from '$lib/holocene/select/multi-select.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
     allEventTypeOptions,
@@ -12,39 +14,42 @@
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
   import { isVersionNewer } from '$lib/utilities/version-check';
 
-  export let compact = false;
+  let { compact = false }: { compact?: boolean } = $props();
 
-  $: label = compact
-    ? translate('events.event-type')
-    : translate('events.workflow-events');
+  const label = $derived(
+    compact
+      ? translate('events.event-type')
+      : translate('events.workflow-events'),
+  );
 
-  let parameter = 'category';
-  let options = (compact ? compactEventTypeOptions : allEventTypeOptions).map(
-    (o) => ({
+  const parameter = 'category';
+  const baseOptions = $derived(
+    (compact ? compactEventTypeOptions : allEventTypeOptions).map((o) => ({
       ...o,
       label: translate(o.label),
-    }),
+    })),
+  );
+  const options = $derived(
+    isVersionNewer('1.21', $temporalVersion)
+      ? baseOptions.filter(({ value }) => value !== 'update')
+      : baseOptions,
+  );
+  const initialSelected = $derived(
+    $eventCategoryFilter
+      ? options.filter((o) => $eventCategoryFilter.includes(o.value))
+      : [],
   );
 
-  $: {
-    if (isVersionNewer('1.21', $temporalVersion)) {
-      options = options.filter(({ value }) => value !== 'update');
-    }
-  }
-  $: initialSelected = $eventCategoryFilter
-    ? options.filter((o) => $eventCategoryFilter.includes(o.value))
-    : [];
-
-  const onOptionClick = (_options) => {
+  const onOptionClick = (_options: MultiSelectOptions) => {
     if (_options.length === options.length) {
       _options = [];
     }
 
     const value = _options.map((o) => o.value).join(',');
     updateQueryParameters({
-      parameter: parameter,
+      parameter,
       value,
-      url: $page.url,
+      url: page.url,
     });
   };
 </script>

src/lib/components/event/event-empty-row.svelte

@@ -4,9 +4,15 @@
   import { translate } from '$lib/i18n/translate';
   import { isCloud } from '$lib/stores/advanced-visibility';
 
-  export let loading = false;
-  export let title = translate('events.empty-state-title');
-  export let content = translate('events.empty-state-description');
+  let {
+    loading = false,
+    title = translate('events.empty-state-title'),
+    content = translate('events.empty-state-description'),
+  }: {
+    loading?: boolean;
+    title?: string;
+    content?: string;
+  } = $props();
 </script>
 
 <tr class="bg-primary">

src/lib/components/event/event-metadata-expanded.svelte

@@ -10,13 +10,11 @@
 
 <div class="block w-full select-all px-2 py-1 text-left">
   <p class="text-sm">Summary</p>
-  <MetadataDecoder
-    {value}
-    let:decodedValue
-    fallback={translate('events.decode-failed')}
-  >
-    <Badge type="secondary" class="inline-block whitespace-pre-wrap">
-      {decodedValue}
-    </Badge>
+  <MetadataDecoder {value} fallback={translate('events.decode-failed')}>
+    {#snippet children(decodedValue)}
+      <Badge type="secondary" class="inline-block whitespace-pre-wrap">
+        {decodedValue}
+      </Badge>
+    {/snippet}
   </MetadataDecoder>
 </div>

src/lib/components/event/event-summary-row.svelte

@@ -215,7 +215,7 @@
   {#if isEventGroup(event)}
     <td class="font-mono">
       <div class="flex items-center gap-0.5">
         {#each event.eventList as groupEvent}
           <Link
             data-testid="link"
             href={routeForEventHistoryEvent({
@@ -327,20 +327,19 @@
         <EventDetailsRow {...primaryLocalAttribute} {attributes} />
       {/if}
       {#if currentEvent?.userMetadata?.summary}
-        <MetadataDecoder
-          value={currentEvent.userMetadata.summary}
-          let:decodedValue
-        >
-          {#if decodedValue}
-            <div
-              class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
-            >
-              <p class="whitespace-nowrap text-right text-xs">Summary</p>
-              <Badge type="secondary" class="block select-none truncate">
-                {decodedValue}
-              </Badge>
-            </div>
-          {/if}
+        <MetadataDecoder value={currentEvent.userMetadata.summary}>
+          {#snippet children(decodedValue)}
+            {#if decodedValue}
+              <div
+                class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
+              >
+                <p class="whitespace-nowrap text-right text-xs">Summary</p>
+                <Badge type="secondary" class="block select-none truncate">
+                  {decodedValue}
+                </Badge>
+              </div>
+            {/if}
+          {/snippet}
         </MetadataDecoder>
       {/if}
       {#if currentEvent?.links?.length}

src/lib/components/event/event-summary-table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import EventHistoryLegend from '$lib/components/lines-and-dots/event-history-legend.svelte';
   import Paginated from '$lib/holocene/table/paginated-table/paginated.svelte';
@@ -30,40 +30,49 @@
   import PendingActivitySummaryRow from './pending-activity-summary-row.svelte';
   import PendingNexusSummaryRow from './pending-nexus-summary-row.svelte';
 
-  export let items: IterableEventWithPending[];
-  export let groups: EventGroups = [];
-  export let updating = false;
-  export let loading = false;
-  export let compact = false;
-  export let minimized = true;
-  export let hoveredEventId: string | undefined = undefined;
+  let {
+    items,
+    groups = [],
+    updating = false,
+    loading = false,
+    compact = false,
+    minimized = true,
+    hoveredEventId = $bindable(undefined),
+  }: {
+    items: IterableEventWithPending[];
+    groups?: EventGroups;
+    updating?: boolean;
+    loading?: boolean;
+    compact?: boolean;
+    minimized?: boolean;
+    hoveredEventId?: string;
+  } = $props();
 
-  $: showGraph = !minimized && !compact;
+  const showGraph = $derived(!minimized && !compact);
+  const initialItem = $derived($fullEventHistory?.[0]);
+  const url = $derived(page.url);
+  const perPageParam = $derived(url.searchParams.get(perPageKey) ?? '100');
+  const currentPageParam = $derived(
+    url.searchParams.get(currentPageKey) || '1',
+  );
 
-  $: initialItem = $fullEventHistory?.[0];
+  const filteredForStatus = (items: IterableEventWithPending[]) =>
+    getFailedOrPendingEvents(items, $eventStatusFilter);
 
-  $: url = $page.url;
-  $: perPageParam = url.searchParams.get(perPageKey) ?? '100';
-  $: currentPageParam = url.searchParams.get(currentPageKey) || '1';
-  $: paginatedHistory = (items: IterableEventWithPending[]) => {
+  const paginatedHistory = (items: IterableEventWithPending[]) => {
     return filteredForStatus(items).slice(
       (parseInt(currentPageParam) - 1) * parseInt(perPageParam),
       parseInt(currentPageParam) * parseInt(perPageParam),
     ) as WorkflowEventWithPending[];
   };
-  $: filteredForStatus = (items: IterableEventWithPending[]) =>
-    getFailedOrPendingEvents(items, $eventStatusFilter);
 
-  const columns = [
+  const columns = $derived([
     { label: 'Event ID' },
     { label: 'Timestamp' },
     { label: 'Event Type' },
     { label: 'Details' },
-  ];
-
-  $: if ($isCloud && columns.length === 4) {
-    columns.push({ label: 'Billable Actions' });
-  }
+    ...($isCloud ? [{ label: 'Billable Actions' }] : []),
+  ]);
 
   const iterableKey = (event: IterableEventWithPending) => {
     if (isPendingNexusOperation(event))

src/lib/components/event/event-summary.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
   import TabButton from '$lib/holocene/tab-buttons/tab-button.svelte';
@@ -16,29 +16,40 @@
   } from '$lib/types/events';
   import { orderGroupsByPending } from '$lib/utilities/order-groups-by-pending';
 
-  export let history: IterableEventWithPending[];
-  export let groups: EventGroups;
-  export let minimized = true;
+  let {
+    history,
+    groups,
+    minimized = true,
+  }: {
+    history: IterableEventWithPending[];
+    groups: EventGroups;
+    minimized?: boolean;
+  } = $props();
 
-  $: ({ workflow } = $workflowRun);
-  $: reverseSort = $eventFilterSort === 'descending';
-  $: updating = !$fullEventHistory.length;
-  $: compact = $eventViewType === 'compact';
+  const workflow = $derived($workflowRun.workflow);
+  const reverseSort = $derived($eventFilterSort === 'descending');
+  const updating = $derived(!$fullEventHistory.length);
+  const compact = $derived($eventViewType === 'compact');
 
-  $: $eventCategoryFilter = $page.url?.searchParams?.get('category')
-    ? ($page.url?.searchParams
-        ?.get('category')
-        .split(',') as EventTypeCategory[])
-    : undefined;
+  $effect(() => {
+    const category = page.url?.searchParams?.get('category');
+    $eventCategoryFilter = category
+      ? (category.split(',') as EventTypeCategory[])
+      : undefined;
+  });
 
-  $: pendingActivities = workflow.pendingActivities;
-  $: pendingNexusOperations = workflow.pendingNexusOperations;
+  const pendingActivities = $derived(workflow?.pendingActivities ?? []);
+  const pendingNexusOperations = $derived(
+    workflow?.pendingNexusOperations ?? [],
+  );
 
-  $: items = compact
-    ? orderGroupsByPending(groups, reverseSort)
-    : reverseSort
-      ? [...pendingNexusOperations, ...pendingActivities, ...history]
-      : [...history, ...pendingActivities, ...pendingNexusOperations];
+  const items = $derived(
+    compact
+      ? orderGroupsByPending(groups, reverseSort)
+      : reverseSort
+        ? [...pendingNexusOperations, ...pendingActivities, ...history]
+        : [...history, ...pendingActivities, ...pendingNexusOperations],
+  );
 
   const onAllClick = () => {
     $eventViewType = 'feed';

src/lib/components/event/metadata-decoder.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import type { Payload } from '$lib/types';
   import { decodeUserMetadata } from '$lib/utilities/decode-payload';
 
-  export let value: Payload | undefined = undefined;
-  export let fallback: string = '';
-  export let prefix: string = '';
-  export let onDecode: (decodedValue: string) => void | undefined = undefined;
+  let {
+    value,
+    fallback = '',
+    prefix = '',
+    onDecode,
+    children,
+  }: {
+    value?: Payload;
+    fallback?: string;
+    prefix?: string;
+    onDecode?: (decodedValue: string) => void;
+    children?: Snippet<[string]>;
+  } = $props();
 
   const maxLength = 120;
 
@@ -20,27 +31,25 @@
     return metadata;
   };
 
-  $: decodePayload = async (_value: Payload | undefined) => {
+  const decodePayload = $derived(async (_value: Payload | undefined) => {
     if (!_value) return fallback;
     if (decodedValue) return decodedValue;
 
     const metadata = await decodeUserMetadata(_value);
 
     if (typeof metadata === 'string') {
       decodedValue = setPrefix(metadata);
-      if (onDecode) {
-        onDecode(decodedValue);
-      }
+      onDecode?.(decodedValue);
       return decodedValue;
     }
 
     decodedValue = fallback;
     return fallback;
-  };
+  });
 </script>
 
 {#await decodePayload(value) then metadata}
-  <slot decodedValue={metadata} />
+  {@render children?.(metadata)}
 {:catch}
-  <slot decodedValue={fallback} />
+  {@render children?.(fallback)}
 {/await}