settings refactor

frontend/src/lib/components/InstanceSettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Setting, SettingStorage } from './instanceSettings'
+	import { settings, settingsKeys, type SettingStorage } from './instanceSettings'
 	import { Button, Tab, TabContent, Tabs } from '$lib/components/common'
 	import { ConfigService, SettingService } from '$lib/gen'
 	import Toggle from '$lib/components/Toggle.svelte'
@@ -19,149 +19,8 @@
 	import CustomOauth from './CustomOauth.svelte'
 	import { AlertTriangle } from 'lucide-svelte'
 
-	export const settings: Record<string, Setting[]> = {
-		Core: [
-			{
-				label: 'Base Url',
-				description: 'Public base url of the instance',
-				key: 'base_url',
-				fieldType: 'text',
-				placeholder: 'https://windmill.com',
-				storage: 'setting',
-				isValid: (value: string | undefined) =>
-					value ? value?.startsWith('http') && !value?.endsWith('/') : true
-			},
-			{
-				label: 'Request Size Limit In MB',
-				description: 'Maximum size of HTTP requests in MB.',
-				cloudonly: true,
-				key: 'request_size_limit_mb',
-				fieldType: 'number',
-				placeholder: '50',
-				storage: 'setting'
-			},
-			{
-				label: 'Retention Period in secs',
-				key: 'retention_period_secs',
-				description: 'How long to keep the jobs data in the database.',
-				fieldType: 'seconds',
-				placeholder: '60',
-				storage: 'setting',
-				cloudonly: false
-			},
-			{
-				label: 'Max Timeout for sync endpoints',
-				key: 'timeout_wait_result',
-				cloudonly: true,
-				fieldType: 'seconds',
-				placeholder: '60',
-				storage: 'config'
-			},
-			{
-				label: 'License Key',
-				description: 'License Key required to use the EE (switch image for windmill-ee)',
-				key: 'license_key',
-				fieldType: 'license_key',
-				placeholder: 'only needed to prepare upgrade to EE',
-				storage: 'setting'
-			},
-			{
-				label: 'Pip Extra Index Url',
-				description: 'Add private PIP registry',
-				key: 'pip_extra_index_url',
-				fieldType: 'text',
-				placeholder: 'https://username:password@pypi.company.com/simple',
-				storage: 'setting',
-				ee_only:
-					'You can still set this setting by using PIP_EXTRA_INDEX_URL as env variable to the worker containers'
-			},
-			{
-				label: 'Npm Config Registry',
-				description: 'Add private NPM registry',
-				key: 'npm_config_registry',
-				fieldType: 'text',
-				placeholder: 'https://yourregistry',
-				storage: 'setting',
-				ee_only:
-					'You can still set this setting by using NPM_CONFIG_REGISTRY as env variable to the worker containers'
-			},
-			{
-				label: 'Expose metrics',
-				description: 'Expose prometheus metrics for workers and servers on port 8001 at /metrics',
-				key: 'expose_metrics',
-				fieldType: 'boolean',
-				storage: 'setting',
-				ee_only: 'No workaround around this'
-			}
-		],
-		SMTP: [
-			{
-				label: 'Host',
-				key: 'smtp_host',
-				fieldType: 'text',
-				placeholder: 'smtp.gmail.com',
-				storage: 'config'
-			},
-			{
-				label: 'Port',
-				key: 'smtp_port',
-				fieldType: 'number',
-				placeholder: '587',
-				storage: 'config'
-			},
-			{
-				label: 'Username',
-				key: 'smtp_username',
-				fieldType: 'text',
-				placeholder: 'ruben@windmill.dev',
-				storage: 'config'
-			},
-			{
-				label: 'Password',
-				key: 'smtp_password',
-				fieldType: 'password',
-				storage: 'config'
-			},
-			{
-				label: 'From Address',
-				key: 'smtp_from',
-				placeholder: 'noreply@windmill.dev',
-				fieldType: 'email',
-				storage: 'config'
-			},
-			{
-				label: 'Implicit TLS',
-				key: 'smtp_tls_implicit',
-				fieldType: 'boolean',
-				storage: 'config'
-			}
-		],
-		'SSO/OAuth': [],
-		Debug: [
-			{
-				label: 'Keep Job Directories',
-				key: 'keep_job_dir',
-				fieldType: 'boolean',
-				tooltip: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
-				storage: 'setting'
-			},
-			{
-				label: 'Expose Debug Metrics',
-				key: 'expose_debug_metrics',
-				fieldType: 'boolean',
-				tooltip: 'Expose additional metrics (require metrics to be enabled)',
-				storage: 'setting'
-			}
-		],
-		Telemetry: [
-			{
-				label: 'Disable telemetry',
-				key: 'disable_stats',
-				fieldType: 'boolean',
-				storage: 'setting'
-			}
-		]
-	}
+	export let tab: string = 'Core'
+	export let hideTabs: boolean = false
 
 	let values: Record<string, any> = {}
 	let initialOauths: Record<string, any> = {}
@@ -253,7 +112,6 @@
 	let oauths: Record<string, any> = {}
 
 	let resourceName = ''
-	let tab: 'Core' | 'SMTP' | 'OAuth' = 'Core'
 
 	function parseDate(license_key: string): string | undefined {
 		let splitted = license_key.split('.')
@@ -288,10 +146,11 @@
 </script>
 
 <div class="pb-8">
-	<Tabs bind:selected={tab}>
-		{#each Object.keys(settings) as category}
+	<Tabs {hideTabs} bind:selected={tab}>
+		{#each settingsKeys as category}
 			<Tab value={category}>{category}</Tab>
 		{/each}
+
 		<svelte:fragment slot="content">
 			<div class="pt-4" />
 			{#each Object.keys(settings) as category}

frontend/src/lib/components/SuperadminSettings.svelte

@@ -16,6 +16,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { userStore } from '$lib/stores'
 	import { ExternalLink } from 'lucide-svelte'
+	import { settingsKeys } from './instanceSettings'
 
 	let drawer: Drawer
 	let filter = ''
@@ -44,7 +45,7 @@
 		users = await UserService.listUsersAsSuperAdmin({ perPage: 100000 })
 	}
 
-	let tab: 'users' | 'settings' = 'users'
+	let tab: 'users' | string = 'users'
 
 	let nbDisplayed = 50
 </script>
@@ -75,7 +76,9 @@
 			<div class="pt-4 h-full">
 				<Tabs bind:selected={tab}>
 					<Tab value="users">Global Users</Tab>
-					<Tab value="settings">Instance Settings</Tab>
+					{#each settingsKeys as category}
+						<Tab value={category}>{category}</Tab>
+					{/each}
 					<svelte:fragment slot="content">
 						<div class="pt-4" />
 						<TabContent value="users">
@@ -155,8 +158,8 @@
 								{/if}
 							</div>
 						</TabContent>
-						<TabContent value="settings">
-							<div class="h-full"> <InstanceSettings /> </div>
+						<TabContent value="" values={settingsKeys}>
+							<div class="h-full"> <InstanceSettings hideTabs {tab} /> </div>
 						</TabContent>
 					</svelte:fragment>
 				</Tabs>

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

@@ -6,13 +6,18 @@
 	export let alwaysMounted: boolean = false
 	export let style = ''
 
+	export let values: string[] | undefined = undefined
+
 	let clazz: string = ''
 	export { clazz as class }
 	const { selected } = getContext<TabsContext>('Tabs')
 </script>
 
-{#if value === $selected || alwaysMounted}
-	<div class={`${clazz} ${value === $selected ? 'visible' : 'hidden'}`} {style}>
+{#if value === $selected || alwaysMounted || values?.includes($selected)}
+	<div
+		class={`${clazz} ${value === $selected || values?.includes($selected) ? 'visible' : 'hidden'}`}
+		{style}
+	>
 		<slot />
 	</div>
 {/if}

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

@@ -15,6 +15,8 @@
 	const dispatch = createEventDispatcher()
 
 	export let selected: string
+	export let hideTabs = false
+
 	let c = ''
 	export { c as class }
 	export let wrapperClass = ''
@@ -55,10 +57,11 @@
 </script>
 
 <svelte:window on:hashchange={hashChange} />
-
-<div class="overflow-x-auto {wrapperClass}">
-	<div class={twMerge('border-b flex flex-row whitespace-nowrap scrollbar-hidden', c)} {style}>
-		<slot {selected} />
+{#if !hideTabs}
+	<div class="overflow-x-auto {wrapperClass}">
+		<div class={twMerge('border-b flex flex-row whitespace-nowrap scrollbar-hidden', c)} {style}>
+			<slot {selected} />
+		</div>
 	</div>
-</div>
+{/if}
 <slot name="content" />

frontend/src/lib/components/instanceSettings.ts

@@ -21,3 +21,149 @@ export interface Setting {
 }
 
 export type SettingStorage = 'setting' | 'config'
+
+export const settings: Record<string, Setting[]> = {
+	Core: [
+		{
+			label: 'Base Url',
+			description: 'Public base url of the instance',
+			key: 'base_url',
+			fieldType: 'text',
+			placeholder: 'https://windmill.com',
+			storage: 'setting',
+			isValid: (value: string | undefined) =>
+				value ? value?.startsWith('http') && !value?.endsWith('/') : true
+		},
+		{
+			label: 'Request Size Limit In MB',
+			description: 'Maximum size of HTTP requests in MB.',
+			cloudonly: true,
+			key: 'request_size_limit_mb',
+			fieldType: 'number',
+			placeholder: '50',
+			storage: 'setting'
+		},
+		{
+			label: 'Retention Period in secs',
+			key: 'retention_period_secs',
+			description: 'How long to keep the jobs data in the database.',
+			fieldType: 'seconds',
+			placeholder: '60',
+			storage: 'setting',
+			cloudonly: false
+		},
+		{
+			label: 'Max Timeout for sync endpoints',
+			key: 'timeout_wait_result',
+			cloudonly: true,
+			fieldType: 'seconds',
+			placeholder: '60',
+			storage: 'config'
+		},
+		{
+			label: 'License Key',
+			description: 'License Key required to use the EE (switch image for windmill-ee)',
+			key: 'license_key',
+			fieldType: 'license_key',
+			placeholder: 'only needed to prepare upgrade to EE',
+			storage: 'setting'
+		},
+		{
+			label: 'Pip Extra Index Url',
+			description: 'Add private PIP registry',
+			key: 'pip_extra_index_url',
+			fieldType: 'text',
+			placeholder: 'https://username:password@pypi.company.com/simple',
+			storage: 'setting',
+			ee_only:
+				'You can still set this setting by using PIP_EXTRA_INDEX_URL as env variable to the worker containers'
+		},
+		{
+			label: 'Npm Config Registry',
+			description: 'Add private NPM registry',
+			key: 'npm_config_registry',
+			fieldType: 'text',
+			placeholder: 'https://yourregistry',
+			storage: 'setting',
+			ee_only:
+				'You can still set this setting by using NPM_CONFIG_REGISTRY as env variable to the worker containers'
+		},
+		{
+			label: 'Expose metrics',
+			description: 'Expose prometheus metrics for workers and servers on port 8001 at /metrics',
+			key: 'expose_metrics',
+			fieldType: 'boolean',
+			storage: 'setting',
+			ee_only: 'No workaround around this'
+		}
+	],
+	SMTP: [
+		{
+			label: 'Host',
+			key: 'smtp_host',
+			fieldType: 'text',
+			placeholder: 'smtp.gmail.com',
+			storage: 'config'
+		},
+		{
+			label: 'Port',
+			key: 'smtp_port',
+			fieldType: 'number',
+			placeholder: '587',
+			storage: 'config'
+		},
+		{
+			label: 'Username',
+			key: 'smtp_username',
+			fieldType: 'text',
+			placeholder: 'ruben@windmill.dev',
+			storage: 'config'
+		},
+		{
+			label: 'Password',
+			key: 'smtp_password',
+			fieldType: 'password',
+			storage: 'config'
+		},
+		{
+			label: 'From Address',
+			key: 'smtp_from',
+			placeholder: 'noreply@windmill.dev',
+			fieldType: 'email',
+			storage: 'config'
+		},
+		{
+			label: 'Implicit TLS',
+			key: 'smtp_tls_implicit',
+			fieldType: 'boolean',
+			storage: 'config'
+		}
+	],
+	'SSO/OAuth': [],
+	Debug: [
+		{
+			label: 'Keep Job Directories',
+			key: 'keep_job_dir',
+			fieldType: 'boolean',
+			tooltip: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
+			storage: 'setting'
+		},
+		{
+			label: 'Expose Debug Metrics',
+			key: 'expose_debug_metrics',
+			fieldType: 'boolean',
+			tooltip: 'Expose additional metrics (require metrics to be enabled)',
+			storage: 'setting'
+		}
+	],
+	Telemetry: [
+		{
+			label: 'Disable telemetry',
+			key: 'disable_stats',
+			fieldType: 'boolean',
+			storage: 'setting'
+		}
+	]
+}
+
+export const settingsKeys = Object.keys(settings)

frontend/src/lib/components/sidebar/SidebarContent.svelte

@@ -51,7 +51,7 @@
 			subItems: [
 				{
 					label: 'Account',
-					href: '#account-settings',
+					href: '#user-settings',
 					icon: UserCog,
 					faIcon: undefined
 				},

frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte

@@ -8,8 +8,8 @@
 <CenteredModal title="Instance Settings">
 	<InstanceSettings />
 	<p class="text-secondary text-sm px-2 py-4">
-		You can change these settings later in the superadmins settings but finishing setup will leave
-		this page.
+		You can change these settings later in the instance settings but finishing setup will leave this
+		page.
 	</p>
 	<Button
 		on:click={() => {