From 91f5e55f410beea32ce4f946978b85dd895f093a Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Fri, 13 Jun 2025 08:47:27 +0200 Subject: [PATCH] more svelte 5 migrations --- .../src/lib/components/AllFlowLogs.svelte | 6 +- ...AppConnectLightweightResourcePicker.svelte | 20 +- .../lib/components/ArrayTypeNarrowing.svelte | 41 +- .../src/lib/components/AssignableTags.svelte | 25 +- .../lib/components/AssignableTagsInner.svelte | 34 +- .../src/lib/components/AuthSettings.svelte | 392 ++++++++++-------- .../src/lib/components/InstanceSetting.svelte | 100 ++--- .../lib/components/InstanceSettings.svelte | 33 +- 8 files changed, 369 insertions(+), 282 deletions(-) diff --git a/frontend/src/lib/components/AllFlowLogs.svelte b/frontend/src/lib/components/AllFlowLogs.svelte index 270ba2bffa..8be5872278 100644 --- a/frontend/src/lib/components/AllFlowLogs.svelte +++ b/frontend/src/lib/components/AllFlowLogs.svelte @@ -6,7 +6,11 @@ import type { DurationStatus } from './graph' import type { Writable } from 'svelte/store' - export let states: Writable> | undefined + interface Props { + states: Writable> | undefined + } + + let { states }: Props = $props()
diff --git a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte index 7a67f560f0..8e151ee83d 100644 --- a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte +++ b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte @@ -5,17 +5,21 @@ import { workspaceStore } from '$lib/stores' import { onMount } from 'svelte' - export let resourceType: string | undefined = undefined - export let workspace: string - export let express = false + interface Props { + resourceType?: string | undefined + workspace: string + express?: boolean + } - let step = 1 - let disabled = false - let manual = true + let { resourceType = $bindable(undefined), workspace, express = false }: Props = $props() - let appConnect: AppConnectInner | undefined = undefined + let step = $state(1) + let disabled = $state(false) + let manual = $state(true) - let darkMode: boolean = false + let appConnect: AppConnectInner | undefined = $state(undefined) + + let darkMode: boolean = $state(false) if (workspace) { $workspaceStore = workspace diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte index 3694b021b7..865aadc8ca 100644 --- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte +++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte @@ -9,17 +9,25 @@ import EditableSchemaDrawer from './schema/EditableSchemaDrawer.svelte' import type { SchemaProperty } from '$lib/common' - export let canEditResourceType: boolean = false - export let originalType: string | undefined = undefined - export let itemsType: - | { - type?: 'string' | 'number' | 'bytes' | 'object' | 'resource' - contentEncoding?: 'base64' - enum?: string[] - resourceType?: string - properties?: { [name: string]: SchemaProperty } - } - | undefined + interface Props { + canEditResourceType?: boolean + originalType?: string | undefined + itemsType: + | { + type?: 'string' | 'number' | 'bytes' | 'object' | 'resource' + contentEncoding?: 'base64' + enum?: string[] + resourceType?: string + properties?: { [name: string]: SchemaProperty } + } + | undefined + } + + let { + canEditResourceType = false, + originalType = undefined, + itemsType = $bindable() + }: Props = $props() let selected: | 'string' @@ -29,7 +37,7 @@ | 'enum' | 'resource' | 's3object' - | undefined = + | undefined = $state( itemsType?.type != 'string' ? itemsType?.type == 'object' && itemsType?.resourceType == 's3object' ? 's3object' @@ -39,12 +47,13 @@ : itemsType?.contentEncoding == 'base64' ? 'bytes' : 'string' + ) - let schema = { + let schema = $state({ properties: itemsType?.properties || {}, order: Object.keys(itemsType?.properties || {}), required: Object.values(itemsType?.properties || {}).map((p) => p.required) - } + }) function updateItemsType() { itemsType = { @@ -59,7 +68,7 @@ + + + {#if !windmillBuiltins.includes(k) && k != 'slack'} + + {/if} +
+ + {/if} + {/if} + {/each} + +
+ + +
+
+ +
+ {:else if tab === 'oauth'} +
+ When one of the below options is set, you will be able to create a specific resource + containing a token automatically generated by the third-party provider. +
+ To test it after setting an oauth client, go to the Resources menu and create a new one of + the type of your oauth client (i.e. a 'github' resource if you set Github OAuth). +
Learn more +
+
+ +
+ +
-
-
- When at least one of the below options is set, users will be able to login to Windmill via - their third-party account. -
To test SSO, the recommended workflow is to to save the settings and try to login in - an incognito window. - Learn more -
-
- - - - - - - - - - - - {#each Object.keys(oauths) as k} - {#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]} - {#if oauths[k]} + {#if oauths[k] && !('login_config' in oauths[k])} + {#if !['slack', 'teams'].includes(k) && oauths[k]}
- + { - delete oauths[k] - oauths = { ...oauths } + if (oauths) { + delete oauths[k] + oauths = { ...oauths } + } }} />
- - {#if !windmillBuiltins.includes(k) && k != 'slack'} - + {#if k === 'azure_oauth'} + + {:else if !windmillBuiltins.includes(k) && k != 'slack'} + + {/if} + {#if k == 'snowflake_oauth'} + {/if}
{/if} {/if} {/each} -
-
- - -
-
- -
- {:else if tab === 'oauth'} -
- When one of the below options is set, you will be able to create a specific resource - containing a token automatically generated by the third-party provider. -
- To test it after setting an oauth client, go to the Resources menu and create a new one of the - type of your oauth client (i.e. a 'github' resource if you set Github OAuth). -
Learn more -
-
- -
- -
- {#each Object.keys(oauths) as k} - {#if oauths[k] && !('login_config' in oauths[k])} - {#if !['slack', 'teams'].includes(k) && oauths[k]} -
-
- - - { - delete oauths[k] - oauths = { ...oauths } - }} - /> -
-
- - - {#if k === 'azure_oauth'} - - {:else if !windmillBuiltins.includes(k) && k != 'slack'} - - {/if} - {#if k == 'snowflake_oauth'} - - {/if} -
-
+
+ + {#if oauth_name == 'custom'} + + {:else} + {/if} - {/if} - {/each} - -
- - {#if oauth_name == 'custom'} - - {:else} - - {/if} - -
- {:else if tab == 'scim'} - + +
+ {:else if tab == 'scim'} + {@render scim?.()} + {/if} {/if} diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte index e1b929ae26..58bdee82c3 100644 --- a/frontend/src/lib/components/InstanceSetting.svelte +++ b/frontend/src/lib/components/InstanceSetting.svelte @@ -41,10 +41,14 @@ import TeamSelector from './TeamSelector.svelte' import ChannelSelector from './ChannelSelector.svelte' - export let setting: Setting - export let version: string - export let values: Writable> - export let loading = true + interface Props { + setting: Setting + version: string + values: Writable> + loading?: boolean + } + + let { setting, version, values, loading = true }: Props = $props() const dispatch = createEventDispatcher() if ( @@ -57,9 +61,9 @@ let latestKeyRenewalAttempt: { result: string attempted_at: string - } | null + } | null = $state(null) - let isFetching = false + let isFetching = $state(false) function showSetting(setting: string, values: Record) { if (setting == 'dev_instance') { @@ -70,11 +74,11 @@ return true } - let licenseKeyChanged = false - let renewing = false - let opening = false + let licenseKeyChanged = $state(false) + let renewing = $state(false) + let opening = $state(false) - let to: string = '' + let to: string = $state('') async function reloadKeyrenewalAttemptInfo() { latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt() @@ -135,9 +139,9 @@ } } - let pythonAvailableVersions: ListAvailablePythonVersionsResponse = [] + let pythonAvailableVersions: ListAvailablePythonVersionsResponse = $state([]) - let isPyFetching = false + let isPyFetching = $state(false) async function fetch_available_python_versions() { if (isPyFetching) return isPyFetching = true @@ -209,7 +213,7 @@ {/if} {#if setting.fieldType == 'select'}
- +
{:else if setting.fieldType == 'select_python'}
- +
-
- {#if latestKeyRenewalAttempt.result === 'success'} - - Latest key renewal succeeded on {attemptedAt} - - {:else if isTrial} - - License key cannot be renewed during trial ({attemptedAt}) - - {:else} - - Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt.result.replace( - 'error: ', - '' - )} - - {/if} -
- As long as invoices are paid and usage corresponds to the subscription, the key is - renewed daily with a validity of 35 days (grace period). -
+ {#snippet text()} +
+ {#if latestKeyRenewalAttempt?.result === 'success'} + + Latest key renewal succeeded on {attemptedAt} + + {:else if isTrial} + + License key cannot be renewed during trial ({attemptedAt}) + + {:else} + + Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt?.result.replace( + 'error: ', + '' + )} + + {/if} +
+ As long as invoices are paid and usage corresponds to the subscription, the key + is renewed daily with a validity of 35 days (grace period). +
+ {/snippet} {/if} @@ -520,7 +526,7 @@
{ + oninput={(e) => { if (e.target?.['value']) { $values[setting.key][i] = { slack_channel: e.target['value'] @@ -603,7 +609,7 @@ /> {/if}
-
@@ -612,7 +618,7 @@ { + oninput={(e) => { if (e.target?.['value']) { $values[setting.key][i] = { email: e.target['value'] @@ -626,7 +632,7 @@ transition:fade|local={{ duration: 100 }} class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover" aria-label="Clear" - on:click={() => { + onclick={() => { $values[setting.key] = $values[setting.key].filter( (_, index) => index !== i ) @@ -723,7 +729,7 @@ type="number" id="writer_memory_budget" placeholder="300" - on:input={(e) => { + oninput={(e) => { if (e.target instanceof HTMLInputElement) { if (e.target.valueAsNumber) { $values[setting.key].writer_memory_budget = @@ -781,7 +787,7 @@ type="number" id="max_indexed_job_log_size" placeholder="1024" - on:input={(e) => { + oninput={(e) => { if (e.target instanceof HTMLInputElement) { if (e.target.valueAsNumber) { $values[setting.key].max_indexed_job_log_size = diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte index 524f44d813..7e14651945 100644 --- a/frontend/src/lib/components/InstanceSettings.svelte +++ b/frontend/src/lib/components/InstanceSettings.svelte @@ -16,20 +16,29 @@ import InstanceSetting from './InstanceSetting.svelte' import { writable, type Writable } from 'svelte/store' - export let tab: string = 'Core' - export let hideTabs: boolean = false - export let hideSave: boolean = false - export let closeDrawer: (() => void) | undefined = () => {} + interface Props { + tab?: string + hideTabs?: boolean + hideSave?: boolean + closeDrawer?: (() => void) | undefined + } + + let { + tab = $bindable('Core'), + hideTabs = false, + hideSave = false, + closeDrawer = () => {} + }: Props = $props() let values: Writable> = writable({}) let initialOauths: Record = {} let initialRequirePreexistingUserForOauth: boolean = false - let requirePreexistingUserForOauth: boolean = false + let requirePreexistingUserForOauth: boolean = $state(false) let initialValues: Record = {} - let snowflakeAccountIdentifier = '' - let version: string = '' - let loading = true + let snowflakeAccountIdentifier = $state('') + let version: string = $state('') + let loading = $state(true) loadSettings() loadVersion() @@ -39,7 +48,7 @@ async function loadVersion() { version = await SettingsService.backendVersion() } - let oauths: Record = {} + let oauths: Record = $state({}) async function loadSettings() { loading = true @@ -240,7 +249,7 @@
- + {#each settingsKeys as category} {category} @@ -332,7 +341,7 @@ bind:snowflakeAccountIdentifier bind:requirePreexistingUserForOauth > - + {#snippet scim()}
{#each scimSamlSetting as setting} {/each}
- + {/snippet} {/if}