feat(frontend): add status when a flow setting is enabled (#3161)

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/common/tabs/Tab.svelte

@@ -11,6 +11,7 @@
 	export let selectedClass = ''
 	export let selectedStyle = ''
 	export let id: string | undefined = undefined
+	export let active: boolean | undefined = false
 
 	export let disabled: boolean = false
 
@@ -27,7 +28,7 @@
 
 <button
 	class={twMerge(
-		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-normal text-primary',
+		'border-b-2 py-1 px-2 cursor-pointer transition-all z-10 ease-linear font-normal text-primary',
 		$selected?.startsWith(value)
 			? 'wm-tab-active font-main'
 			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
@@ -48,5 +49,7 @@
 	{disabled}
 	{id}
 >
-	<slot />
+	<div class={twMerge(active ? 'bg-blue-50 text-blue-800 rounded-md ' : '', 'px-2 ')}>
+		<slot />
+	</div>
 </button>

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

@@ -346,14 +346,16 @@
 								/>
 							{:else if selected === 'advanced'}
 								<Tabs bind:selected={advancedSelected}>
-									<Tab value="retries">Retries</Tab>
+									<Tab value="retries" active={flowModule.retry !== undefined}>Retries</Tab>
 									{#if !$selectedId.includes('failure')}
 										<Tab value="runtime">Runtime</Tab>
-										<Tab value="cache">Cache</Tab>
-										<Tab value="early-stop">Early Stop</Tab>
-										<Tab value="suspend">Suspend</Tab>
-										<Tab value="sleep">Sleep</Tab>
-										<Tab value="mock">Mock</Tab>
+										<Tab value="cache" active={Boolean(flowModule.cache_ttl)}>Cache</Tab>
+										<Tab value="early-stop" active={Boolean(flowModule.stop_after_if)}>
+											Early Stop
+										</Tab>
+										<Tab value="suspend" active={Boolean(flowModule.suspend)}>Suspend</Tab>
+										<Tab value="sleep" active={Boolean(flowModule.sleep)}>Sleep</Tab>
+										<Tab value="mock" active={Boolean(flowModule.mock?.enabled)}>Mock</Tab>
 										<Tab value="same_worker">Shared Directory</Tab>
 										{#if flowModule.value['language'] === 'python3' || flowModule.value['language'] === 'deno'}
 											<Tab value="s3">S3</Tab>

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

@@ -28,7 +28,7 @@
 
 	export let noEditor: boolean
 
-	const { selectedId, flowStore, initialPath, previewArgs, pathStore } =
+	const { selectedId, flowStore, initialPath, previewArgs, pathStore, schedule } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR'
@@ -52,14 +52,20 @@
 			<Tabs bind:selected={$selectedId}>
 				<Tab value="settings-metadata">Metadata</Tab>
 				{#if !noEditor}
-					<Tab value="settings-schedule">Schedule</Tab>
+					<Tab value="settings-schedule" active={$schedule.enabled}>Schedule</Tab>
 				{/if}
-				<Tab value="settings-same-worker">Shared Directory</Tab>
-				<Tab value="settings-early-stop">Early Stop</Tab>
-				<Tab value="settings-early-return">Early Return</Tab>
+				<Tab value="settings-same-worker" active={$flowStore.value.same_worker}>
+					Shared Directory
+				</Tab>
+				<Tab value="settings-early-stop" active={Boolean($flowStore.value.skip_expr)}>
+					Early Stop
+				</Tab>
+				<Tab value="settings-early-return" active={Boolean($flowStore.value.early_return)}>
+					Early Return
+				</Tab>
 				<Tab value="settings-worker-group">Worker Group</Tab>
 				<Tab value="settings-concurrency">Concurrency</Tab>
-				<Tab value="settings-cache">Cache</Tab>
+				<Tab value="settings-cache" active={Boolean($flowStore.value.cache_ttl)}>Cache</Tab>
 
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full overflow-auto">

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

@@ -397,7 +397,7 @@
 			<div class="mt-10" />
 		{/if}
 		{#if !loading}
-			<div class="flex w-full flex-row-reverse gap-2">
+			<div class="flex w-full flex-row-reverse gap-2 mt-2">
 				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
 				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
 					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />