fix(frontend): various UI fix (#3098)

* fix(frontend): Fix Tree view whitespace break + add w-max to contextual variable table + Migrate script history tab to Datatable + uniformize branch one/all settings + Migrate cache setting old layout

* fix(frontend): add class prop to datatable

* fix(frontend): add noBorder prop

frontend/src/lib/components/EditorBar.svelte

@@ -506,7 +506,7 @@
 					{#if !iconOnly}
 						Assistants
 					{/if}
-					<span class="ml-1 -my-1">
+					<span class="-my-1">
 						{#if lang == 'deno'}
 							(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
 						{:else if lang == 'go'}

frontend/src/lib/components/TableSimple.svelte

@@ -15,7 +15,8 @@
 			<tr>
 				{#if headers}
 					{#each headers as header, i}
-						<Cell first={i == 0} last={i == headers.length - 1} head>{header}</Cell>
+						<Cell first={i == 0} last={i == headers.length - 1} head class="max-w-96">{header}</Cell
+						>
 					{/each}
 				{/if}
 			</tr>
@@ -25,7 +26,11 @@
 				{#each data as row}
 					<tr>
 						{#each keys as key, i}
-							<Cell first={i == 0} last={i == keys.length - 1} class="w-1/3 whitespace-pre-wrap">
+							<Cell
+								first={i == 0}
+								last={i == keys.length - 1}
+								class="max-w-96 whitespace-pre-wrap overflow-hidden text-ellipsis"
+							>
 								{row[key] ?? ''}
 							</Cell>
 						{/each}

frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -31,12 +31,11 @@
 			<Splitpanes horizontal>
 				<Pane size={flowModule ? 60 : 100}>
 					<Alert
-						notRounded
 						type="info"
 						title="All branches will be run"
 						tooltip="Branch all"
 						documentationLink="https://www.windmill.dev/docs/flows/flow_branches#branch-all"
-						class="m-2"
+						class="m-4"
 					>
 						The result of this step is the list of the result of each branch.
 					</Alert>

frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -36,11 +36,11 @@
 						title="Only first branch whose condition is true will be run"
 						tooltip="Branch one"
 						documentationLink="https://www.windmill.dev/docs/flows/flow_branches#branch-one"
-						class="m-2"
+						class="m-4"
 					>
 						The result of this step is the result of the branch.
 					</Alert>
-					<div class="p-2">
+					<div class="p-4">
 						<h3 class="my-4">
 							{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}
 						</h3>

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -282,33 +282,35 @@
 						</Section>
 					</TabContent>
 					<TabContent value="settings-cache" class="p-4 flex flex-col">
-						<h2 class="border-b pb-1 mb-4 flex items-center gap-4"
-							>Cache <Toggle
-								size="xs"
-								checked={Boolean($flowStore.value.cache_ttl)}
-								on:change={() => {
-									if ($flowStore.value.cache_ttl && $flowStore.value.cache_ttl != undefined) {
-										$flowStore.value.cache_ttl = undefined
-									} else {
-										$flowStore.value.cache_ttl = 300
-									}
-								}}
-								options={{
-									right: 'Cache the results for each possible inputs'
-								}}
-							/></h2
-						>
+						<Section label="Cache">
+							<svelte:fragment slot="action">
+								<Toggle
+									size="xs"
+									checked={Boolean($flowStore.value.cache_ttl)}
+									on:change={() => {
+										if ($flowStore.value.cache_ttl && $flowStore.value.cache_ttl != undefined) {
+											$flowStore.value.cache_ttl = undefined
+										} else {
+											$flowStore.value.cache_ttl = 300
+										}
+									}}
+									options={{
+										right: 'Cache the results for each possible inputs'
+									}}
+								/>
+							</svelte:fragment>
 
-						<div class="flex gap-x-4 flex-col gap-2">
-							<div class="text-xs">How long to keep the cache valid</div>
-							<div>
-								{#if $flowStore.value.cache_ttl}
-									<SecondsInput bind:seconds={$flowStore.value.cache_ttl} />
-								{:else}
-									<SecondsInput disabled />
-								{/if}
+							<div class="flex gap-x-4 flex-col gap-2">
+								<div class="text-xs">How long to keep the cache valid</div>
+								<div>
+									{#if $flowStore.value.cache_ttl}
+										<SecondsInput bind:seconds={$flowStore.value.cache_ttl} />
+									{:else}
+										<SecondsInput disabled />
+									{/if}
+								</div>
 							</div>
-						</div>
+						</Section>
 					</TabContent>
 
 					<TabContent value="settings-worker-group" class="p-4 flex flex-col">

frontend/src/lib/components/home/ItemsList.svelte

@@ -412,17 +412,17 @@
 				{#if treeView}
 					<Button
 						wrapperClasses="mb-0.5"
-						size="xs"
+						size="xs2"
 						variant="contained"
 						color="light"
 						on:click={() => (collapseAll = !collapseAll)}
 					>
 						{#if collapseAll}
-							Expand
+							Expand all
 						{:else}
-							Collapse
-						{/if}</Button
-					>
+							Collapse all
+						{/if}
+					</Button>
 				{/if}
 			</div>
 		{/if}

frontend/src/lib/components/home/TreeView.svelte

@@ -52,7 +52,7 @@
 
 				<div>
 					{#if depth === 0}f/{/if}{item.folderName}
-					<div class="text-2xs font-normal text-secondary">
+					<div class="text-2xs font-normal text-secondary whitespace-nowrap">
 						({pluralize(item.items.length, ' item')})
 					</div>
 				</div>
@@ -118,7 +118,7 @@
 
 				<div>
 					u/{item.username}
-					<div class="text-2xs font-normal text-secondary"
+					<div class="text-2xs font-normal text-secondary whitespace-nowrap"
 						>({pluralize(item.items.length, ' item')})</div
 					>
 				</div>

frontend/src/lib/components/scriptEditor/LogPanel.svelte

@@ -4,9 +4,7 @@
 	import { displayDate } from '$lib/utils'
 	import Tabs from '../common/tabs/Tabs.svelte'
 	import Tab from '../common/tabs/Tab.svelte'
-	import TabContent from '../common/tabs/TabContent.svelte'
 	import DisplayResult from '../DisplayResult.svelte'
-	import TableCustom from '../TableCustom.svelte'
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import DrawerContent from '../common/drawer/DrawerContent.svelte'
 	import HighlightCode from '../HighlightCode.svelte'
@@ -17,6 +15,9 @@
 	import type Editor from '../Editor.svelte'
 	import type DiffEditor from '../DiffEditor.svelte'
 	import ScriptFix from '../copilot/ScriptFix.svelte'
+	import Cell from '../table/Cell.svelte'
+	import DataTable from '../table/DataTable.svelte'
+	import Head from '../table/Head.svelte'
 
 	export let lang: Preview.language | undefined
 	export let previewIsLoading = false
@@ -127,33 +128,35 @@
 				</Splitpanes>
 			</SplitPanesWrapper>
 		{/if}
-		<TabContent value="history" class="p-2">
-			<TableCustom>
-				<tr slot="header-row">
-					<th class="text-xs">Id</th>
-					<th class="text-xs">Created at</th>
-					<th class="text-xs">Success</th>
-					<th class="text-xs">Result</th>
-					<th class="text-xs">Code</th>
-					<th class="text-xs">Logs</th>
-				</tr>
-				<tbody slot="body">
+		<div>
+			<DataTable size="xs" noBorder>
+				<Head>
+					<tr>
+						<Cell first>Id</Cell>
+						<Cell>Created at</Cell>
+						<Cell>Success</Cell>
+						<Cell>Result</Cell>
+						<Cell>Code</Cell>
+						<Cell last>Logs</Cell>
+					</tr>
+				</Head>
+				<tbody class="divide-y">
 					{#each pastPreviews as { id, created_at, success }}
-						<tr class="">
-							<td class="text-xs">
+						<tr>
+							<Cell first>
 								<a class="pr-3" href="/run/{id}?workspace={$workspaceStore}" target="_blank"
 									>{id.substring(30)}</a
 								>
-							</td>
-							<td class="text-xs">{displayDate(created_at)}</td>
-							<td class="text-xs">
+							</Cell>
+							<Cell>{displayDate(created_at)}</Cell>
+							<Cell>
 								{#if success}
 									<CheckCircle2 size={10} class="text-green-600" />
 								{:else}
 									<XCircle size={10} class="text-red-700" />
 								{/if}
-							</td>
-							<td class="text-xs">
+							</Cell>
+							<Cell>
 								<button
 									class="text-xs"
 									on:click|preventDefault={() => {
@@ -168,8 +171,8 @@
 								>
 									See Result
 								</button>
-							</td>
-							<td class="text-xs">
+							</Cell>
+							<Cell>
 								<button
 									class="text-xs"
 									on:click|preventDefault={async () => {
@@ -189,8 +192,8 @@
 								>
 									View code
 								</button>
-							</td>
-							<td>
+							</Cell>
+							<Cell last>
 								<button
 									class="text-xs"
 									on:click|preventDefault={async () => {
@@ -205,11 +208,11 @@
 								>
 									View logs
 								</button>
-							</td>
+							</Cell>
 						</tr>
 					{/each}
 				</tbody>
-			</TableCustom>
-		</TabContent>
+			</DataTable>
+		</div>
 	</svelte:fragment>
 </Tabs>

frontend/src/lib/components/table/DataTable.svelte

@@ -19,6 +19,7 @@
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
 	export let perPage: number | undefined = undefined
 	export let shouldHidePagination: boolean = false
+	export let noBorder: boolean = false
 
 	const dispatch = createEventDispatcher()
 
@@ -27,7 +28,13 @@
 	})
 </script>
 
-<div class={twMerge('border h-full overflow-auto', rounded ? 'rounded-md' : '')}>
+<div
+	class={twMerge(
+		'h-full overflow-auto',
+		rounded ? 'rounded-md' : '',
+		noBorder ? 'border-0' : 'border'
+	)}
+>
 	<div class={twMerge('overflow-auto')}>
 		<table class={twMerge('min-w-full divide-y')}>
 			<slot />