diff --git a/src/lib/components/workers/workers-table/workers-table-cell.svelte b/src/lib/components/workers/workers-table/workers-table-cell.svelte index 8aef0aecc1..f90beb5e4e 100644 --- a/src/lib/components/workers/workers-table/workers-table-cell.svelte +++ b/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 ?? ''; - }; - {truncate(value)} + {truncateValue(value)} {:else} - {truncate(value)} + {truncateValue(value)} {/if} {:else if href} diff --git a/src/lib/components/workflow/workflows-summary-configurable-table.svelte b/src/lib/components/workflow/workflows-summary-configurable-table.svelte index 1c73801fe9..8a91abe12c 100644 --- a/src/lib/components/workflow/workflows-summary-configurable-table.svelte +++ b/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'); + }; {#key [namespace, query, $refresh]} @@ -109,14 +119,14 @@ childCount={childrenActive(workflow)?.children.length} > {#each columns as column} - + {/each} {#if childrenActive(workflow)} {#each childrenActive(workflow).children as child (`${child.id}:${child.runId}`)} {#each columns as column} - + {/each} {/each} @@ -128,6 +138,21 @@ + + + + {/if} @@ -43,7 +43,7 @@ {/if} @@ -56,7 +56,7 @@ } .copy-or-filter-button { - @apply surface-primary relative top-[40%] h-7 w-7 translate-y-[-40%] rounded-full p-0.5 text-primary hover:surface-inverse; + @apply surface-primary relative top-[50%] h-6 w-6 translate-y-[-50%] rounded-full p-0.5 text-primary hover:surface-inverse; } .filtered { diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts index 12e795c5db..e658f37433 100644 --- a/src/lib/holocene/icon/paths.ts +++ b/src/lib/holocene/icon/paths.ts @@ -122,6 +122,8 @@ import sun from './svg/sun.svelte'; import support from './svg/support.svelte'; import switchIcon from './svg/switch.svelte'; import systemWindow from './svg/system-window.svelte'; +import tableComfy from './svg/table-comfy.svelte'; +import tableDense from './svg/table-dense.svelte'; import table from './svg/table.svelte'; import tag from './svg/tag.svelte'; import target from './svg/target.svelte'; @@ -274,6 +276,8 @@ export const icons = { support, switch: switchIcon, table, + 'table-comfy': tableComfy, + 'table-dense': tableDense, tag, target, 'temporal-logo': temporalLogo, diff --git a/src/lib/holocene/icon/svg/table-comfy.svelte b/src/lib/holocene/icon/svg/table-comfy.svelte new file mode 100644 index 0000000000..91748fc56c --- /dev/null +++ b/src/lib/holocene/icon/svg/table-comfy.svelte @@ -0,0 +1,10 @@ + + + + + + + diff --git a/src/lib/holocene/icon/svg/table-dense.svelte b/src/lib/holocene/icon/svg/table-dense.svelte new file mode 100644 index 0000000000..527ea59d8c --- /dev/null +++ b/src/lib/holocene/icon/svg/table-dense.svelte @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts index b2e212bf7b..d883f1e0e5 100644 --- a/src/lib/i18n/locales/en/common.ts +++ b/src/lib/i18n/locales/en/common.ts @@ -220,4 +220,6 @@ export const Strings = { 'slack-community': 'Slack Community', 'community-forum': 'Community Forum', 'change-log': 'Change Log', + comfortable: 'Comfortable', + dense: 'Dense', } as const; diff --git a/src/lib/stores/table-density.ts b/src/lib/stores/table-density.ts new file mode 100644 index 0000000000..06565619e9 --- /dev/null +++ b/src/lib/stores/table-density.ts @@ -0,0 +1,8 @@ +import { persistStore } from './persist-store'; + +type TableDensity = 'dense' | 'comfortable'; +export const tableDensity = persistStore( + 'tableDensity', + 'comfortable', + true, +); diff --git a/src/lib/utilities/truncate-value.ts b/src/lib/utilities/truncate-value.ts new file mode 100644 index 0000000000..a0d186f886 --- /dev/null +++ b/src/lib/utilities/truncate-value.ts @@ -0,0 +1,9 @@ +export const TRUNCATE_LENGTH = 15; +const half = Math.floor(TRUNCATE_LENGTH / 2); + +export const truncateValue = (value: string | undefined | null): string => { + if (value?.length && value.length > TRUNCATE_LENGTH) { + return `${value.slice(0, half)}...${value.slice(-half)}`; + } + return value ?? ''; +};