Skip to content

Commit 6079d46

Browse files
laurakwhitlaurakwhit
authored
[DT-190] Reveal all workflow ID (#981)
* Adjust row widths for better responsiveness * Remove truncate and break on words for Workflow ID * Give Workflow ID column more width * Set width for checkbox column on sm breakpoint * Add gradient on hover * Fix status row width when row is checked on sm breakpoint * Bump version
1 parent f2f0e7c commit 6079d46

6 files changed

+41
-29
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@temporalio/ui",
3-
"version": "2.1.90",
3+
"version": "2.1.91",
44
"type": "module",
55
"description": "Temporal.io UI",
66
"keywords": [

‎src/lib/components/workflow/workflows-summary-row-with-filters.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
/>
8686
</td>
8787
<td
88-
class="relative truncate"
88+
class="relative break-words pr-4"
8989
on:mouseover={() => (showFilterCopy = true)}
9090
on:focus={() => (showFilterCopy = true)}
9191
on:mouseleave={() => (showFilterCopy = false)}
@@ -101,6 +101,7 @@
101101
(f) => f.attribute === 'WorkflowId' && f.value === workflow.id,
102102
),
103103
)}
104+
class="bg-gradient-to-b from-blue-100 to-purple-100"
104105
/>
105106
<p class="inline-time-cell">
106107
{formatDate(workflow.startTime, timeFormat)}
@@ -128,6 +129,7 @@
128129
(f) => f.attribute === 'WorkflowType' && f.value === workflow.name,
129130
),
130131
)}
132+
class="bg-gradient-to-b from-blue-100 to-purple-100"
131133
/>
132134
<p class="inline-time-cell">
133135
{formatDate(workflow.endTime, timeFormat)}
@@ -147,7 +149,7 @@
147149

148150
<style lang="postcss">
149151
:global(.workflow-summary-row:hover) {
150-
@apply bg-gray-50;
152+
@apply bg-gradient-to-b from-blue-100 to-purple-100;
151153
152154
.table-link {
153155
@apply text-blue-700 underline decoration-blue-700;

‎src/lib/components/workflow/workflows-summary-row.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
/>
5353
</td>
5454
<td
55-
class="relative truncate"
55+
class="relative break-words pr-4"
5656
on:mouseover={() => (showFilterCopy = true)}
5757
on:focus={() => (showFilterCopy = true)}
5858
on:mouseleave={() => (showFilterCopy = false)}
@@ -63,6 +63,7 @@
6363
show={showFilterCopy}
6464
content={workflow.id}
6565
filterable={false}
66+
class="bg-gradient-to-b from-blue-100 to-purple-100"
6667
/>
6768
<p class="inline-time-cell">
6869
{formatDate(workflow.startTime, timeFormat)}
@@ -86,6 +87,7 @@
8687
content={workflow.name}
8788
onFilter={() => onTypeClick(workflow.name)}
8889
filtered={$page.url?.searchParams?.get('query')?.includes(workflow.name)}
90+
class="bg-gradient-to-b from-blue-100 to-purple-100"
8991
/>
9092
<p class="inline-time-cell">
9193
{formatDate(workflow.endTime, timeFormat)}
@@ -105,7 +107,7 @@
105107

106108
<style lang="postcss">
107109
:global(.workflow-summary-row:hover) {
108-
@apply bg-gray-50;
110+
@apply bg-gradient-to-b from-blue-100 to-purple-100;
109111
110112
.table-link {
111113
@apply text-blue-700 underline decoration-blue-700;

‎src/lib/components/workflow/workflows-summary-table-with-filters.svelte

+22-20
Original file line numberDiff line numberDiff line change
@@ -81,23 +81,25 @@
8181
{#if bulkActionsEnabled}
8282
<Table
8383
id="workflows-table-with-bulk-actions"
84-
class="w-full md:table-fixed"
84+
class="w-full min-w-[600px] table-fixed"
8585
{updating}
8686
>
8787
<TableHeaderRow slot="headers">
88-
<th class="h-10 w-12">
89-
{#if !updating}
90-
<Checkbox
91-
id="select-visible-workflows"
92-
onDark
93-
{checked}
94-
{indeterminate}
95-
on:change={handleCheckboxChange}
96-
/>
97-
{/if}
88+
<th class="table-cell h-10 w-12">
89+
<div class="w-12">
90+
{#if !updating}
91+
<Checkbox
92+
id="select-visible-workflows"
93+
onDark
94+
{checked}
95+
{indeterminate}
96+
on:change={handleCheckboxChange}
97+
/>
98+
{/if}
99+
</div>
98100
</th>
99101
{#if showBulkActions}
100-
<th class="w-48 overflow-visible whitespace-nowrap">
102+
<th class="w-32 overflow-visible whitespace-nowrap">
101103
{#if allSelected}
102104
<span class="font-semibold"
103105
>All {filteredWorkflowCount} selected</span
@@ -130,22 +132,22 @@
130132
>
131133
</div>
132134
</th>
133-
<th class="table-cell md:w-60 xl:w-auto" />
134-
<th class="table-cell md:w-60 xl:w-80" />
135+
<th class="table-cell md:w-auto" />
136+
<th class="table-cell xl:w-60" />
135137
<th class="hidden xl:table-cell xl:w-60" />
136138
<th class="hidden xl:table-cell xl:w-60" />
137139
{:else}
138-
<th class="table-cell w-48"
140+
<th class="table-cell w-32"
139141
><div class="flex items-center gap-1">
140142
<ExecutionStatusDropdownFilter />
141143
</div>
142144
</th>
143-
<th class="table-cell md:w-60 xl:w-auto"
145+
<th class="table-cell md:w-auto"
144146
><div class="flex items-center gap-1">
145147
<WorkflowIdDropdownFilter />
146148
</div>
147149
</th>
148-
<th class="table-cell md:w-60 xl:w-80">
150+
<th class="table-cell xl:w-60">
149151
<div class="flex items-center gap-1">
150152
<WorkflowTypeDropdownFilter />
151153
</div>
@@ -167,17 +169,17 @@
167169
{:else}
168170
<Table class="w-full md:table-fixed" {updating}>
169171
<TableHeaderRow slot="headers">
170-
<th class="table-cell w-48"
172+
<th class="table-cell w-32"
171173
><div class="flex items-center gap-1">
172174
<ExecutionStatusDropdownFilter />
173175
</div>
174176
</th>
175-
<th class="table-cell md:w-60 xl:w-auto"
177+
<th class="table-cell md:w-auto"
176178
><div class="flex items-center gap-1">
177179
<WorkflowIdDropdownFilter />
178180
</div>
179181
</th>
180-
<th class="table-cell md:w-60 xl:w-80">
182+
<th class="table-cell xl:w-60">
181183
<div class="flex items-center gap-1">
182184
<WorkflowTypeDropdownFilter />
183185
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
<Table class="w-full md:table-fixed" {updating}>
99
<TableHeaderRow slot="headers">
1010
<th class="hidden w-32 md:table-cell">Status</th>
11-
<th class="hidden md:table-cell md:w-60 xl:w-auto">Workflow ID</th>
12-
<th class="hidden md:table-cell md:w-60 xl:w-80">Type</th>
11+
<th class="hidden md:table-cell md:w-auto">Workflow ID</th>
12+
<th class="hidden md:table-cell xl:w-60">Type</th>
1313
<th class="hidden xl:table-cell xl:w-60">Start</th>
1414
<th class="hidden xl:table-cell xl:w-60">End</th>
1515
<th class="table-cell md:hidden" colspan="3">Summary</th>

‎src/lib/holocene/filter-or-copy-buttons.svelte

+8-2
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,17 @@
1010
export let onFilter: () => void = noop;
1111
export let filtered = false;
1212
13+
let className = '';
14+
export { className as class };
15+
1316
const { copy, copied } = copyToClipboard(700);
1417
</script>
1518

1619
{#if show}
17-
<div class="copy-or-filter" on:click|preventDefault|stopPropagation={noop}>
20+
<div
21+
class="copy-or-filter {className}"
22+
on:click|preventDefault|stopPropagation={noop}
23+
>
1824
{#if filterable}
1925
<button on:click|preventDefault|stopPropagation={onFilter}>
2026
{#key filtered}
@@ -37,6 +43,6 @@
3743

3844
<style lang="postcss">
3945
.copy-or-filter {
40-
@apply absolute right-0 top-0 bottom-0 inline-flex gap-2 rounded-full bg-gray-50 px-2;
46+
@apply absolute right-0 top-0 bottom-0 inline-flex gap-2 px-2;
4147
}
4248
</style>

0 commit comments

Comments
 (0)