Workflows Table Row Density

src/lib/components/workers/workers-table/workers-table-cell.svelte

@@ -13,6 +13,7 @@
     createFilter,
     updateQueryParamsFromFilter,
   } from '$lib/utilities/query/to-list-workflow-filters';
+  import { truncateValue } from '$lib/utilities/truncate-value';
 
   interface Props {
     attribute?: string;
@@ -79,12 +80,6 @@
       hideFilterOrCopy();
     }
   };
-  const truncate = (value: string | undefined | null): string => {
-    if (value?.length && value.length > 13) {
-      return `${value.slice(0, 6)}...${value.slice(-6)}`;
-    }
-    return value ?? '';
-  };
 </script>
 
 <td
@@ -99,11 +94,11 @@
   {#if attribute === 'BuildId' || attribute === 'WorkerInstanceKey'}
     {#if href}
       <Tooltip text={value ?? undefined} top class="min-w-0">
-        <Link {href}>{truncate(value)}</Link>
+        <Link {href}>{truncateValue(value)}</Link>
       </Tooltip>
     {:else}
       <Tooltip text={value ?? undefined} top class="min-w-0">
-        {truncate(value)}
+        {truncateValue(value)}
       </Tooltip>
     {/if}
   {:else if href}

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

@@ -3,6 +3,7 @@
 
   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';
   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';
@@ -12,6 +13,8 @@
     fetchPaginatedWorkflows,
   } from '$lib/services/workflow-service';
   import { configurableTableColumns } from '$lib/stores/configurable-table-columns';
+  import { viewFeature } from '$lib/stores/new-feature-tags';
+  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';
@@ -74,6 +77,13 @@
   };
 
   $: onFetch = () => fetchPaginatedWorkflows(namespace, query);
+
+  $: dense = $tableDensity === 'dense';
+
+  const setTableDensity = () => {
+    $tableDensity = dense ? 'comfortable' : 'dense';
+    viewFeature('tableDensity');
+  };
 </script>
 
 {#key [namespace, query, $refresh]}
@@ -109,14 +119,14 @@
         childCount={childrenActive(workflow)?.children.length}
       >
         {#each columns as column}
-          <TableBodyCell {workflow} {column} />
+          <TableBodyCell {workflow} {column} truncate={dense} />
         {/each}
       </TableRow>
       {#if childrenActive(workflow)}
         {#each childrenActive(workflow).children as child (`${child.id}:${child.runId}`)}
           <TableRow workflow={child} child>
             {#each columns as column}
-              <TableBodyCell workflow={child} {column} />
+              <TableBodyCell workflow={child} {column} truncate={dense} />
             {/each}
           </TableRow>
         {/each}
@@ -128,6 +138,21 @@
       </TableEmptyState>
     </svelte:fragment>
     <svelte:fragment slot="actions-end-additional" let:visibleItems let:page>
+      <Tooltip
+        text={dense
+          ? translate('common.dense')
+          : translate('common.comfortable')}
+        top
+      >
+        <FeatureTag feature="tableDensity" alpha />
+        <Button
+          on:click={setTableDensity}
+          data-testid="table-density-button"
+          size="xs"
+          variant="ghost"
+          leadingIcon={dense ? 'table-dense' : 'table-comfy'}
+        ></Button>
+      </Tooltip>
       <Tooltip text={translate('common.download-json')} top>
         <Button
           on:click={() => exportWorkflows(visibleItems, page)}

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

@@ -15,31 +15,28 @@
     createFilter,
     updateQueryParamsFromFilter,
   } from '$lib/utilities/query/to-list-workflow-filters';
+  import {
+    TRUNCATE_LENGTH,
+    truncateValue,
+  } from '$lib/utilities/truncate-value';
 
   type Props = {
     attribute: string;
     filterOrCopyButtonsVisible: boolean;
     value: string;
     href?: string;
     type?: SearchAttributeType;
+    truncate?: boolean;
   };
   let {
     attribute,
     filterOrCopyButtonsVisible = false,
     value,
     href,
     type = SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+    truncate = false,
   }: Props = $props();
 
-  const truncateRunId = (runId: string): string => {
-    if (runId.length > 11) {
-      return `${runId.slice(0, 4)}...${runId.slice(-4)}`;
-    }
-    return runId;
-  };
-
-  const isRunId = attribute === 'RunId';
-
   const onRowFilterClick = () => {
     const filter = $workflowFilters.find((f) => f.attribute === attribute);
     const getOtherFilters = () =>
@@ -59,16 +56,20 @@
 
     updateQueryParamsFromFilter(page.url, $workflowFilters);
   };
+
+  const hideTooltip = $derived(
+    !truncate || (truncate && truncateValue(value).length <= TRUNCATE_LENGTH),
+  );
 </script>
 
-{#if isRunId}
-  <Tooltip text={value} top class="min-w-0">
-    <Link {href} class="cursor-help">{truncateRunId(value)}</Link>
+{#if href}
+  <Tooltip text={value} top class="min-w-0" hide={hideTooltip}>
+    <Link {href}>{truncate ? truncateValue(value) : value}</Link>
   </Tooltip>
-{:else if href}
-  <Link {href}>{value}</Link>
 {:else}
-  {value}
+  <Tooltip text={value} top class="min-w-0" hide={hideTooltip}>
+    {truncate ? truncateValue(value) : value}
+  </Tooltip>
 {/if}
 <FilterOrCopyButtons
   copyIconTitle={translate('common.copy-icon-title')}