windmill-components 1.558.3 → 1.596.0

package/package/components/ObjectStoreConfigSettings.svelte

@@ -58,8 +58,7 @@ async function testConnection() {
 				spacingSize="sm"
 				size="xs"
 				btnClasses="h-8"
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={testConnection}
 			>
 				{#if loading}
@@ -115,36 +114,36 @@ async function testConnection() {
 				}
 			}}
 		>
-			<Tab size="sm" value="S3">S3</Tab>
-			<Tab size="sm" value="Azure">Azure Blob</Tab>
-			<Tab size="sm" value="AwsOidc">AWS OIDC</Tab>
-			<Tab size="sm" value="Gcs">Google Cloud Storage</Tab>
+			<Tab value="S3" label="S3" />
+			<Tab value="Azure" label="Azure Blob" />
+			<Tab value="AwsOidc" label="AWS OIDC" />
+			<Tab value="Gcs" label="Google Cloud Storage" />
 		</Tabs>
 		<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
 			{#if bucket_config.type === 'S3'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<span class="text-xs font-semibold text-emphasis">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
 
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Region</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Region</span>
+					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_REGION</span
 					>
 					<input type="text" bind:value={bucket_config.region} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Access key ID</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Access key ID</span>
+					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2
 						profile</span
 					>
 					<input type="text" bind:value={bucket_config.access_key} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Secret key</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Secret key</span>
+					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
 					>
 					<input
@@ -154,25 +153,25 @@ async function testConnection() {
 					/>
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Endpoint</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Endpoint</span>
+					<span class="text-primary text-2xs"
 						>Only needed for non AWS S3 providers like R2 or MinIo</span
 					>
 					<input type="text" bind:value={bucket_config.endpoint} />
 				</label>
 				<div class="block pb-2">
-					<span class="text-tertiary text-2xs">Disable if using https only policy</span>
+					<span class="text-primary text-2xs">Disable if using https only policy</span>
 					<div>
 						<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
 					</div>
 				</div>
 			{:else if bucket_config.type === 'Azure'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Account name</span>
+					<span class="text-xs font-semibold text-emphasis">Account name</span>
 					<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Container name</span>
+					<span class="text-xs font-semibold text-emphasis">Container name</span>
 					<input
 						type="text"
 						placeholder="container-name"
@@ -180,41 +179,41 @@ async function testConnection() {
 					/>
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Access key</span>
+					<span class="text-xs font-semibold text-emphasis">Access key</span>
 					<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm"
-						>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
+					<span class="text-xs font-semibold text-emphasis"
+						>Tenant ID <span class="text-2xs text-primary">(optional)</span></span
 					>
 					<input type="text" bind:value={bucket_config.tenantId} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm"
-						>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
+					<span class="text-xs font-semibold text-emphasis"
+						>Client ID <span class="text-2xs text-primary">(optional)</span></span
 					>
 					<input type="text" bind:value={bucket_config.clientId} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm"
-						>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
+					<span class="text-xs font-semibold text-emphasis"
+						>Endpoint <span class="text-2xs text-primary">(optional)</span></span
 					>
-					<span class="text-tertiary text-2xs"
+					<span class="text-primary text-2xs"
 						>Only needed for non Azure Blob providers like Azurite</span
 					>
 					<input type="text" bind:value={bucket_config.endpoint} />
 				</label>
 			{:else if bucket_config.type === 'AwsOidc'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<span class="text-xs font-semibold text-emphasis">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Region</span>
+					<span class="text-xs font-semibold text-emphasis">Region</span>
 					<input type="text" placeholder="region" bind:value={bucket_config.region} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Role ARN</span>
+					<span class="text-xs font-semibold text-emphasis">Role ARN</span>
 					<input
 						type="text"
 						placeholder="arn:aws:iam::123456789012:role/test"
@@ -223,42 +222,34 @@ async function testConnection() {
 				</label>
 			{:else if bucket_config.type === 'Gcs'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<span class="text-xs font-semibold text-emphasis">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Service Account Key</span>
-					<span class="text-tertiary text-2xs">JSON content of the service account key file</span>
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						onclick={(ev) => {
-							ev.stopPropagation() // this is to prevent wrapping label interference
-						}}
-					>
-						<SimpleEditor
-							lang="json"
-							bind:code={
-								() => {
-									if (bucket_config?.type === 'Gcs') {
-										return JSON.stringify(bucket_config.serviceAccountKey)
-									} else {
-										return '{}'
-									}
-								},
-								(v) => {
-									if (bucket_config?.type === 'Gcs') {
-										try {
-											bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
-										} catch (_) {
-											bucket_config.serviceAccountKey = {}
-										}
+					<span class="text-xs font-semibold text-emphasis">Service Account Key</span>
+					<span class="text-primary text-2xs">JSON content of the service account key file</span>
+					<SimpleEditor
+						lang="json"
+						bind:code={
+							() => {
+								if (bucket_config?.type === 'Gcs') {
+									return JSON.stringify(bucket_config.serviceAccountKey)
+								} else {
+									return '{}'
+								}
+							},
+							(v) => {
+								if (bucket_config?.type === 'Gcs') {
+									try {
+										bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
+									} catch (_) {
+										bucket_config.serviceAccountKey = {}
 									}
 								}
 							}
-							class="h-80"
-						/>
-					</div>
+						}
+						class="h-80"
+					/>
 				</label>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>

package/package/components/OccupancyBars.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import MeltTooltip from './meltComponents/Tooltip.svelte';
+let { rate_15s, rate_5m, rate_30m, rate_ever } = $props();
+function displayOccupancyRate(occupancy_rate) {
+    if (occupancy_rate == undefined) {
+        return '--';
+    }
+    return Math.ceil(occupancy_rate * 100) + '%';
+}
+const rates = $derived([
+    { value: rate_15s, label: '15s' },
+    { value: rate_5m, label: '5m' },
+    { value: rate_30m, label: '30m' },
+    { value: rate_ever, label: 'ever' }
+]);
+</script>
+
+<div class="flex gap-1 items-end py-1">
+	{#each rates as rate}
+		<MeltTooltip>
+			<div class="relative w-4 h-8 bg-surface-secondary rounded-sm border shadow-sm">
+				{#if rate.value !== undefined && rate.value > 0}
+					{@const heightPercent = Math.min(rate.value * 100, 100)}
+					{@const minHeight = heightPercent > 0 && heightPercent < 3 ? 1 : heightPercent}
+					<div
+						class="absolute bottom-0 left-0 right-0 bg-surface-accent-primary rounded-sm transition-all duration-200"
+						style="height: {minHeight < 3 ? `${minHeight}px` : `${heightPercent}%`}"
+					></div>
+				{/if}
+			</div>
+			{#snippet text()}
+				{rate.label}: {rate.value ? displayOccupancyRate(rate.value) : '--'}
+			{/snippet}
+		</MeltTooltip>
+	{/each}
+</div>

package/package/components/OccupancyBars.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    rate_15s?: number;
+    rate_5m?: number;
+    rate_30m?: number;
+    rate_ever?: number;
+}
+declare const OccupancyBars: import("svelte").Component<Props, {}, "">;
+type OccupancyBars = ReturnType<typeof OccupancyBars>;
+export default OccupancyBars;

package/package/components/OktaSetting.svelte

@@ -2,7 +2,6 @@
 import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
-import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 let { value = $bindable() } = $props();
@@ -37,7 +36,7 @@ $effect.pre(() => {
 
 <div class="flex flex-col gap-1">
 	<!-- svelte-ignore a11y_label_has_associated_control -->
-	<label class="text-sm font-medium text-primary flex gap-4 items-center"
+	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="okta" after={true} /></div><Toggle
 			checked={enabled}
 			on:change={(e) => {
@@ -50,9 +49,9 @@ $effect.pre(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-2 rounded border">
-			<label class="block pb-2">
-				<div class="flex gap-2 items-end">
+		<div class="p-4 rounded border flex flex-col gap-6">
+			<label>
+				<div class="flex gap-2 items-start">
 					<div>
 						<ToggleButtonGroup
 							selected={value['custom'] ? 'custom' : 'org'}
@@ -66,49 +65,86 @@ $effect.pre(() => {
 							{/snippet}
 						</ToggleButtonGroup>
 					</div>
-					<div class="grow">
-						<span class="text-primary font-semibold text-sm"
+					<div class="grow flex flex-col gap-1">
+						<input type="text" placeholder="yourorg" bind:value={value['domain']} />
+						<span class="text-hint font-normal text-2xs"
 							>{#if value['custom']}Custom ({'https://<domain>'}){:else}
 								Org ({'https://<your org>.okta.com'}){/if}</span
 						>
-						<input type="text" placeholder="yourorg" bind:value={value['domain']} />
 					</div>
 				</div>
 			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Custom Name</span>
+			<label>
+				<span class="text-emphasis font-semibold text-xs">Custom Name</span>
 				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
 			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm"
-					>Client Id <Tooltip
-						>Client credential from the client ID section of the okta service configuration</Tooltip
-					></span
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Client Id </span>
+				<span class="text-secondary font-normal text-xs"
+					>Client credential from the client ID section of the okta service configuration</span
 				>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
 			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm"
-					>Client Secret <Tooltip
-						>from the CLIENT SECRETS section of the okta service configuration</Tooltip
-					></span
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
+				<span class="text-secondary font-normal text-xs"
+					>from the CLIENT SECRETS section of the okta service configuration</span
 				>
 				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
 			</label>
 			<CollapseLink text="Instructions">
-				<div class="text-sm text-secondary border p-2">
-					From your Admin page, setup windmill using the service flow <br />Create a new app
-					integration <br />a. For "sign-in method" select "OIDC - Open ID Connect" <br />
-					b. For "application type" select "Web Appliction" <br />
-					Select all of the following options for Grant type of "Client acting on behalf of a user":
-					<br /> Authorization Code Refresh Token Implicit (hybrid) <br />
-					Allow ID Token with implicit grant type <br />
-					Allow Access Token with implicit grant type <br />
-					For Refresh Token, select "Rotate token after every use" <br />
-					Under "LOGIN", set the following: <br />"Sign-in redirect URIs"
-					`BASE_URL/user/login_callback/okta`<br />
-					"Sign-out redirect URIs" `BASE_URL/auth/logout` <br />"Login initiated by" App Only <br />
-					"Initiate login URI" `BASE_URL/user/login`
+				<div class="text-xs text-primary border rounded-md p-4 space-y-3">
+					<div>
+						<strong>1. Create App Integration</strong>
+						<div class="ml-4 mt-1">
+							From your Admin page, setup windmill using the service flow and create a new app
+							integration:
+							<ul class="list-disc ml-4 mt-1 space-y-1">
+								<li>For "sign-in method" select <strong>OIDC - Open ID Connect</strong></li>
+								<li>For "application type" select <strong>Web Application</strong></li>
+							</ul>
+						</div>
+					</div>
+
+					<div>
+						<strong>2. Grant Type Configuration</strong>
+						<div class="ml-4 mt-1">
+							Select all of the following options for Grant type of "Client acting on behalf of a
+							user":
+							<ul class="list-disc ml-4 mt-1 space-y-1">
+								<li>Authorization Code</li>
+								<li>Refresh Token</li>
+								<li>Implicit (hybrid)</li>
+								<li>Allow ID Token with implicit grant type</li>
+								<li>Allow Access Token with implicit grant type</li>
+							</ul>
+							For Refresh Token, select <strong>"Rotate token after every use"</strong>
+						</div>
+					</div>
+
+					<div>
+						<strong>3. Login Configuration</strong>
+						<div class="ml-4 mt-1">
+							Under "LOGIN", set the following:
+							<ul class="list-disc ml-4 mt-1 space-y-1">
+								<li
+									><strong>Sign-in redirect URIs:</strong>
+									<code class="bg-surface px-1 rounded text-xs"
+										>BASE_URL/user/login_callback/okta</code
+									></li
+								>
+								<li
+									><strong>Sign-out redirect URIs:</strong>
+									<code class="bg-surface px-1 rounded text-xs">BASE_URL/auth/logout</code></li
+								>
+								<li><strong>Login initiated by:</strong> App Only</li>
+								<li
+									><strong>Initiate login URI:</strong>
+									<code class="bg-surface px-1 rounded text-xs">BASE_URL/user/login</code></li
+								>
+							</ul>
+						</div>
+					</div>
 				</div>
 			</CollapseLink>
 		</div>

package/package/components/PageHeader.svelte

@@ -3,12 +3,15 @@ export let title;
 export let tooltip = '';
 export let documentationLink = undefined;
 export let primary = true;
+export let childrenWrapperDivClasses = '';
 </script>
 
 <div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
 	{#if primary}
 		<span class="flex items-center gap-2">
-			<h1 class="!text-2xl font-semibold whitespace-nowrap leading-6 tracking-tight">{title}</h1>
+			<h1 class="text-2xl font-semibold text-emphasis whitespace-nowrap leading-6 tracking-tight"
+				>{title}</h1
+			>
 			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink}>
 					{tooltip}
@@ -17,7 +20,7 @@ export let primary = true;
 		</span>
 	{:else}
 		<span class="flex items-center gap-2">
-			<h2 class="!text-sm font-semibold">{title}</h2>
+			<h2 class="text-sm font-semibold text-emphasis">{title}</h2>
 			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink} wrapperClass="mb-0.5">
 					{tooltip}
@@ -27,7 +30,7 @@ export let primary = true;
 	{/if}
 
 	{#if $$slots.default}
-		<div class="my-2">
+		<div class="my-2 {childrenWrapperDivClasses}">
 			<slot />
 		</div>
 	{/if}

package/package/components/PageHeader.svelte.d.ts

@@ -21,6 +21,7 @@ declare const PageHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Prop
     tooltip?: string;
     documentationLink?: string | undefined;
     primary?: boolean;
+    childrenWrapperDivClasses?: string;
 }, {
     default: {};
 }>, {

package/package/components/Password.svelte

@@ -1,44 +1,42 @@
 <script lang="ts">import { createBubbler } from 'svelte/legacy';
+import Button from './common/button/Button.svelte';
+import TextInput from './text_input/TextInput.svelte';
+import { Eye, EyeClosed } from 'lucide-svelte';
 const bubble = createBubbler();
-let { password = $bindable(), placeholder = '******', disabled = false, required = false, small = false, onKeyDown } = $props();
+let { password = $bindable(), placeholder = '******', disabled = false, required = false, small = false, id, onKeyDown, onBlur } = $props();
 let red = $derived(required && (password == '' || password == undefined));
 let hideValue = $state(true);
-let randomId = (Math.random() * 10e15).toString(16);
 </script>
 
 <div class="relative w-full {small ? 'max-w-lg' : ''}">
-	<div class="absolute inset-y-0 right-0 flex items-center px-2">
-		<input bind:checked={hideValue} class="!hidden" id={randomId} type="checkbox" />
-		<label
-			class="bg-surface-secondary hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer"
-			for={randomId}>{hideValue ? 'show' : 'hide'}</label
-		>
-	</div>
-	{#if hideValue}
-		<input
-			class="block {small ? '!text-2xs' : 'w-full'} px-2 py-1 {red
-				? '!border-red-500'
-				: ''} text-sm h-9"
-			type="password"
-			bind:value={password}
-			onkeydown={onKeyDown}
-			autocomplete="new-password"
-			{placeholder}
-			{disabled}
-		/>
-	{:else}
-		<input
-			class="block {small ? '!text-2xs' : 'w-full'} px-2 py-1 {red
-				? '!border-red-500'
-				: ''} text-sm h-9"
-			type="text"
-			bind:value={password}
-			onkeydown={bubble('keydown')}
-			autocomplete="new-password"
-			{placeholder}
-			{disabled}
+	<div class="absolute inset-y-0 right-1 flex items-center">
+		<Button
+			unifiedSize="sm"
+			onClick={() => (hideValue = !hideValue)}
+			iconOnly
+			startIcon={{ icon: hideValue ? Eye : EyeClosed }}
+			variant="subtle"
+			wrapperClasses="bg-surface-input"
 		/>
-	{/if}
+	</div>
+	<TextInput
+		size="md"
+		error={red}
+		bind:value={password}
+		inputProps={{
+			id,
+			disabled,
+			placeholder,
+			autocomplete: 'new-password',
+			onblur: (e) => onBlur?.(e),
+			onkeydown: (e) => {
+				onKeyDown?.(e)
+				bubble('keydown')(e)
+			},
+			type: hideValue ? 'password' : 'text'
+		}}
+		class="pr-8"
+	/>
 </div>
 {#if red}
 	<div class="text-red-600 text-2xs grow">This field is required</div>

package/package/components/Password.svelte.d.ts

@@ -4,7 +4,9 @@ interface Props {
     disabled?: boolean;
     required?: boolean;
     small?: boolean;
+    id?: string;
     onKeyDown?: (event: KeyboardEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
 }
 declare const Password: import("svelte").Component<Props, {}, "password">;
 type Password = ReturnType<typeof Password>;

package/package/components/PasswordArgInput.svelte

@@ -67,12 +67,11 @@ $effect(() => {
 </script>
 
 {#if value?.startsWith('$var:') && !value.startsWith('$var:' + userPrefix)}
-	<div class="flex items-center gap-2 text-sm text-tertiary">
+	<div class="flex items-center gap-2 text-sm text-primary">
 		Linked to static variable
 		<Button
-			color="light"
 			size="xs"
-			variant="border"
+			variant="default"
 			onclick={() => {
 				value = ''
 			}}