Add download json button to Standalone Activities table

src/lib/components/download-json-button.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { downloadJson } from '$lib/utilities/download-json';
+
+  interface Props {
+    items: unknown[];
+    page: number;
+    filePrefix: string;
+    dataKey?: string;
+    testId?: string;
+  }
+
+  let {
+    items,
+    page,
+    filePrefix,
+    dataKey = filePrefix,
+    testId = 'download-json-button',
+  }: Props = $props();
+
+  const onClick = () => {
+    const fileName = `${filePrefix}-${items.length}-${page}-${Date.now()}.json`;
+    downloadJson({ [dataKey]: items }, fileName);
+  };
+</script>
+
+<Tooltip text={translate('common.download-json')} top>
+  <Button
+    on:click={onClick}
+    data-testid={testId}
+    size="xs"
+    variant="ghost"
+    aria-label={translate('common.download-json')}
+  >
+    <Icon name="download" />
+  </Button>
+</Tooltip>

src/lib/components/standalone-activities/activities-summary-configurable-table.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
 
+  import DownloadJsonButton from '$lib/components/download-json-button.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import PaginatedTable from '$lib/holocene/table/paginated-table/api-paginated.svelte';
@@ -48,21 +49,22 @@
     </caption>
     <TableHeaderRow slot="headers">
       <th></th>
-      {#each columns as column}
+      {#each columns as column, i (`${column.label}:${i}`)}
         <TableHeaderCell {column} />
       {/each}
     </TableHeaderRow>
-    {#each visibleItems as activity}
+    {#each visibleItems as activity (`${activity.activityId}:${activity.runId}`)}
       <TableRow {activity}>
-        {#each columns as column}
+        {#each columns as column, i (`${column.label}:${i}`)}
           <TableBodyCell {activity} {column} />
         {/each}
       </TableRow>
     {/each}
     <svelte:fragment slot="empty">
       <TableEmptyState />
     </svelte:fragment>
-    <svelte:fragment slot="actions-end-additional">
+    <svelte:fragment slot="actions-end-additional" let:visibleItems let:page>
+      <DownloadJsonButton items={visibleItems} {page} filePrefix="activities" />
       <Tooltip text={translate('common.configure-columns')} top>
         <Button
           on:click={onClickConfigure}

src/lib/components/workflow/workflows-summary-configurable-table.svelte

@@ -5,6 +5,7 @@
 
   import { page } from '$app/state';
 
+  import DownloadJsonButton from '$lib/components/download-json-button.svelte';
   import TableEmptyState from '$lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte';
   import Button from '$lib/holocene/button.svelte';
   import FeatureTag from '$lib/holocene/feature-tag.svelte';
@@ -25,7 +26,6 @@
   import { tableDensity } from '$lib/stores/table-density';
   import { refresh, workflowCount } from '$lib/stores/workflows';
   import type { WorkflowExecution } from '$lib/types/workflows';
-  import { exportWorkflows } from '$lib/utilities/export-workflows';
 
   import TableBodyCell from './workflows-summary-configurable-table/table-body-cell.svelte';
   import TableHeaderCell from './workflows-summary-configurable-table/table-header-cell.svelte';
@@ -301,17 +301,12 @@
             : translate('common.comfortable')}
         ></Button>
       </Tooltip>
-      <Tooltip text={translate('common.download-json')} top>
-        <Button
-          on:click={() => exportWorkflows(visibleItems, page)}
-          data-testid="export-history-button"
-          size="xs"
-          variant="ghost"
-          aria-label={translate('common.download-json')}
-        >
-          <Icon name="download" />
-        </Button>
-      </Tooltip>
+      <DownloadJsonButton
+        items={visibleItems}
+        {page}
+        filePrefix="workflows"
+        testId="export-history-button"
+      />
       <Tooltip text={translate('common.configure-columns')} top>
         <Button
           on:click={onClickConfigure}

src/lib/utilities/download-json.ts

@@ -0,0 +1,15 @@
+import { stringifyWithBigInt } from './parse-with-big-int';
+
+export const downloadJson = (
+  data: Record<string, unknown>,
+  fileName: string,
+) => {
+  const content = stringifyWithBigInt(data, undefined, 2);
+  const a = document.createElement('a');
+  const file = new Blob([content], { type: 'text/plain' });
+  const url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  URL.revokeObjectURL(url);
+};

src/routes/(app)/namespaces/[namespace]/archival/_archival-table.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
   import { page } from '$app/state';
 
+  import DownloadJsonButton from '$lib/components/download-json-button.svelte';
   import TableBodyCell from '$lib/components/workflow/workflows-summary-configurable-table/table-body-cell.svelte';
   import TableHeaderCell from '$lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
   import PaginatedTable from '$lib/holocene/table/paginated-table/api-paginated.svelte';
-  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
   import { fetchPaginatedArchivedWorkflows } from '$lib/services/workflow-service';
   import { DEFAULT_WORKFLOWS_COLUMNS } from '$lib/stores/configurable-table-columns';
-  import { exportWorkflows } from '$lib/utilities/export-workflows';
 
   const namespace = $derived(page.params.namespace);
-  const query = $derived(page.url.searchParams.get('query'));
+  const query = $derived(page.url.searchParams.get('query') ?? undefined);
 
   const onFetch = $derived(() =>
     fetchPaginatedArchivedWorkflows(namespace, query),
@@ -33,28 +30,24 @@
     emptyStateMessage={translate('workflows.empty-state-title')}
   >
     <tr slot="headers">
-      {#each columns as column}
+      {#each columns as column, i (`${column.label}:${i}`)}
         <TableHeaderCell {column} />
       {/each}
     </tr>
     {#each visibleItems as workflow (`${workflow.id}:${workflow.runId}`)}
       <tr data-testid="workflows-summary-configurable-table-row" class="dense">
-        {#each columns as column}
+        {#each columns as column, i (`${workflow.id}:${workflow.runId}:${column.label}:${i}`)}
           <TableBodyCell {workflow} {column} archival />
         {/each}
       </tr>
     {/each}
     <svelte:fragment slot="actions-end-additional" let:visibleItems let:page>
-      <Tooltip text={translate('common.download-json')} top>
-        <Button
-          on:click={() => exportWorkflows(visibleItems, page)}
-          data-testid="export-history-button"
-          size="xs"
-          variant="ghost"
-        >
-          <Icon name="download" />
-        </Button>
-      </Tooltip>
+      <DownloadJsonButton
+        items={visibleItems}
+        {page}
+        filePrefix="workflows"
+        testId="export-history-button"
+      />
     </svelte:fragment>
   </PaginatedTable>
 {/key}