fix(frontend): Remove legacy tabs (#695)

windmill-labs · Oct 7, 2022 · e424b6b · e424b6b
1 parent b59d1f8
commit e424b6b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 75 deletions.
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
@@ -8,23 +8,23 @@
 
 <div class="flex flex-col sm:flex-row justify-between mt-4 mb-2">
 	{#if primary}
-		<h1>
-			{title}
+		<span class="text-xl font-bold flex items-center space-x-2">
+			<span class="mr-0.5">{title}</span>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
-		</h1>
-	{:else}
-		<h2>
-			{title}
+		</span>
+		{:else}
+		<span class="text-lg font-semibold flex items-center space-x-2">
+			<span class="mr-0.5">{title}</span>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
-		</h2>
+		</span>
 	{/if}
 
 	{#if $$slots.default}
-		<div class="my-2 sm:ml-4">
+		<div class="my-2">
 			<slot />
 		</div>
 	{/if}

diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
diff --git a/frontend/src/routes/flows.svelte b/frontend/src/routes/flows.svelte
@@ -31,11 +31,12 @@
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import Tabs from '$lib/components/Tabs.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import Modal from '$lib/components/Modal.svelte'
 	import FlowViewer from '$lib/components/FlowViewer.svelte'
 	import { Button } from '../lib/components/common'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import Tab from '$lib/components/common/tabs/Tab.svelte'
 
 	type Tab = 'all' | 'personal' | 'groups' | 'shared' | 'hub'
 	type Section = [string, FlowW[]]
@@ -164,17 +165,14 @@
 		</div>
 	</PageHeader>
 
-	<Tabs
-		tabs={[
-			['all', 'all'],
-			['hub', 'hub'],
-			['personal', `personal space (${$userStore?.username})`],
-			['groups', 'groups'],
-			['shared', 'shared']
-		]}
-		bind:tab
-		on:update={loadFlows}
-	/>
+	<Tabs bind:selected={tab}>
+		<Tab value="all">All</Tab>
+		<Tab value="hub">Hub</Tab>
+		<Tab value="personal">{`Personal space (${$userStore?.username})`}</Tab>
+		<Tab value="groups">Groups</Tab>
+		<Tab value="shared">Shared</Tab>
+	</Tabs>
+
 	{#if tab != 'hub'}
 		<input placeholder="Search flows" bind:value={flowFilter} class="search-bar mt-2" />
 	{/if}

diff --git a/frontend/src/routes/runs/[...path].svelte b/frontend/src/routes/runs/[...path].svelte
@@ -16,7 +16,8 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import Tabs from '$lib/components/Tabs.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import JobDetail from '$lib/components/jobs/JobDetail.svelte'
 
 	let jobs: Job[] | undefined
@@ -37,7 +38,7 @@
 	let showOlderJobs = true
 	const jobsPerPage = 100
 
-	let jobKindsCat: string | undefined = $page.url.searchParams.get('job_kinds') ?? 'runs'
+	let jobKindsCat: string = $page.url.searchParams.get('job_kinds') ?? 'runs'
 
 	$: jobKinds = computeJobKinds(jobKindsCat)
 
@@ -129,6 +130,12 @@
 		}
 	}
 
+	async function syncCatWithURL() {
+		await setQuery($page.url, 'job_kinds', jobKindsCat)
+	}
+
+	$: jobKindsCat && syncCatWithURL()
+
 	onDestroy(() => {
 		if (intervalId) {
 			clearInterval(intervalId)
@@ -169,19 +176,14 @@ the bearer token they use has less privilege."
 			</select>
 		</div>
 		<div>
-			<Tabs
-				tabs={[
-					['all', 'all'],
-					['runs', 'runs'],
-					['previews', 'previews'],
-					['dependencies', 'dependencies']
-				]}
-				dflt={1}
-				bind:tab={jobKindsCat}
-				on:update={async (tab) => {
-					await setQuery($page.url, 'job_kinds', tab.detail)
-				}}
-			/>
+			<div class="my-2">
+				<Tabs bind:selected={jobKindsCat}>
+					<Tab value="all">All</Tab>
+					<Tab value="runs">Runs</Tab>
+					<Tab value="previews">Previews</Tab>
+					<Tab value="dependencies">Dependencies</Tab>
+				</Tabs>
+			</div>
 			{#if jobs}
 				<div class="space-y-2">
 					{#each jobs as job}

diff --git a/frontend/src/routes/scripts.svelte b/frontend/src/routes/scripts.svelte
@@ -36,13 +36,14 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import ShareModal from '$lib/components/ShareModal.svelte'
-	import Tabs from '$lib/components/Tabs.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { Highlight } from 'svelte-highlight'
 	import { typescript } from 'svelte-highlight/languages/typescript'
 	import { Button } from '$lib/components/common'
 	import CreateActions from '$lib/components/scripts/CreateActions.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import Tab from '$lib/components/common/tabs/Tab.svelte'
 
 	type Tab = 'all' | 'personal' | 'groups' | 'shared' | 'examples' | 'hub'
 	type Section = [string, ScriptW[]]
@@ -154,18 +155,19 @@
 	loadHubScriptsWFuse()
 
 	$: {
-		if ($workspaceStore && ($userStore || $superadmin)) {
+		if ($workspaceStore && ($userStore || $superadmin) && tab) {
 			loadScripts()
 		}
 	}
+
 </script>
 
 <Modal bind:this={codeViewer}>
 	<div slot="title">{codeViewerPath}</div>
 	<div slot="content">
 		<Highlight language={typescript} code={codeViewerContent} />
-	</div></Modal
->
+	</div>
+</Modal>
 
 <CenteredPage>
 	<PageHeader
@@ -180,21 +182,19 @@
 		<CreateActions />
 	</PageHeader>
 
-	<Tabs
-		tabs={[
-			['all', 'all'],
-			['hub', 'hub'],
-			['personal', `personal space (${$userStore?.username})`],
-			['groups', 'groups'],
-			['shared', 'shared'],
-			['examples', 'examples']
-		]}
-		bind:tab
-		on:update={loadScripts}
-	/>
+	<Tabs bind:selected={tab} >
+		<Tab value="all">All</Tab>
+		<Tab value="hub">Hub</Tab>
+		<Tab value="personal">{`Personal space (${$userStore?.username})`}</Tab>
+		<Tab value="groups">Groups</Tab>
+		<Tab value="shared">Shared</Tab>
+		<Tab value="examples">Examples</Tab>
+	</Tabs>
+
 	{#if tab != 'hub'}
 		<input placeholder="Search scripts" bind:value={scriptFilter} class="search-bar mt-2" />
 	{/if}
+
 	<div class="grid grid-cols-1 divide-y">
 		{#each tab == 'all' ? ['personal', 'groups', 'shared', 'examples', 'hub'] : [tab] as sectionTab}
 			<div class="shadow p-4 my-2">