Map default columns to the namespace column store (#1476)

* Map default columns to the namespace column store * Export default columns and use it if there's no namespace key * Use totalColumnCount for check of No column headers are in view, default to default columns in old store check
temporalio · Jul 10, 2023 · 81be422 · 81be422
1 parent 52f70cc
commit 81be422
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table.svelte b/src/lib/components/workflow/workflows-summary-configurable-table.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { workflowTableColumns } from '$lib/stores/workflow-table-columns';
+  import {
+    getDefaultColumns,
+    workflowTableColumns,
+  } from '$lib/stores/workflow-table-columns';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import Drawer from '$lib/holocene/drawer.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -18,10 +21,11 @@
   let customizationDrawerOpen: boolean = false;
 
   $: ({ namespace } = $page.params);
-  $: columns = $workflowTableColumns?.[namespace] ?? [];
-  $: empty = workflows.length === 0 || columns.length === 0;
+  $: columns = $workflowTableColumns?.[namespace] ?? getDefaultColumns();
+  $: empty = workflows.length === 0;
   $: pinnedColumns = columns.filter((column) => column.pinned);
   $: otherColumns = columns.filter((column) => !column.pinned);
+  $: totalColumnCount = pinnedColumns.length + otherColumns.length;
 
   const openCustomizationDrawer = () => {
     customizationDrawerOpen = true;
@@ -34,7 +38,7 @@
 
 <div class="workflows-summary-configurable-table">
   <TableWrapper noPinnedColumns={pinnedColumns.length === 0}>
-    <Table pinned {empty} columns={pinnedColumns}>
+    <Table pinned {empty} {totalColumnCount} columns={pinnedColumns}>
       <TableHeaderRow pinned {workflows} {pinnedColumns} {empty} slot="headers">
         {#each pinnedColumns as column}
           <TableHeaderCell {column} />
@@ -48,7 +52,12 @@
         </TableRow>
       {/each}
     </Table>
-    <Table {empty} columns={otherColumns} slot="unpinned-columns">
+    <Table
+      {empty}
+      {totalColumnCount}
+      columns={otherColumns}
+      slot="unpinned-columns"
+    >
       <TableHeaderRow
         onClickConfigure={openCustomizationDrawer}
         {workflows}

diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table.svelte
@@ -8,6 +8,7 @@
 
   export let pinned = false;
   export let columns: WorkflowHeader[];
+  export let totalColumnCount: number;
   export let empty: boolean;
 </script>
 
@@ -35,7 +36,7 @@
           />
         </td>
       </tr>
-    {:else if !pinned && columns.length === 0}
+    {:else if !pinned && totalColumnCount === 0}
       <tr>
         <td colspan={columns.length + 1}>
           <EmptyState title="No column headers are in view">

diff --git a/src/lib/stores/workflow-table-columns.ts b/src/lib/stores/workflow-table-columns.ts
@@ -76,17 +76,18 @@ const DEFAULT_AVAILABLE_COLUMNS: WorkflowHeader[] = [
   { label: 'Task Queue', pinned: false },
 ];
 
-const getDefaultColumns = (): WorkflowHeader[] => {
+export const getDefaultColumns = (): WorkflowHeader[] => {
   let columns: WorkflowHeader[];
   try {
     // try to get the list of columns that was stored last time they interacted
     // with the table before we made it namespace-specific
     const stringifiedOldColumns = window.localStorage.getItem(
       'workflow-table-columns',
     );
+    const parsedOldColumns = JSON.parse(stringifiedOldColumns);
 
-    if (stringifiedOldColumns) {
-      columns = JSON.parse(stringifiedOldColumns);
+    if (stringifiedOldColumns && parsedOldColumns?.length) {
+      columns = parsedOldColumns;
     } else {
       columns = DEFAULT_COLUMNS;
     }
@@ -106,13 +107,27 @@ export const workflowTableColumns: Readable<State> = derived(
   [namespaces, persistedWorkflowTableColumns],
   ([$namespaces, $persistedWorkflowTableColumns]) => {
     const state: State = {};
+
+    const useOrAddDefaultTableColumnsToNamespace = (
+      columns: State,
+      namespace: string,
+    ) => {
+      if (!columns?.[namespace]?.length) {
+        columns[namespace] = [...getDefaultColumns()];
+        return columns[namespace];
+      }
+      return columns[namespace];
+    };
+
     return (
       $namespaces?.reduce(
         (namespaceToColumnsMap, { namespaceInfo: { name } }) => {
           return {
             ...namespaceToColumnsMap,
-            [name]:
-              $persistedWorkflowTableColumns?.[name] ?? getDefaultColumns(),
+            [name]: useOrAddDefaultTableColumnsToNamespace(
+              $persistedWorkflowTableColumns,
+              name,
+            ),
           };
         },
         state,