windmill-components 1.558.4 → 1.596.0

package/package/components/NextcloudSetting.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
+import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
-import Tooltip from './Tooltip.svelte';
 let { value = $bindable(), baseUrl } = $props();
 function changeDomain(domain) {
     if (value && domain) {
@@ -37,7 +37,7 @@ $effect(() => {
 
 <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="nextcloud" after={true} /></div><Toggle
 			checked={enabled}
 			on:change={(e) => {
@@ -50,37 +50,49 @@ $effect(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-2 rounded border">
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Nextcloud Instance Domain</span>
-				<input type="text" placeholder="example.nextcloud.com" bind:value={value['domain']} />
+		<div class="p-4 rounded-md border flex flex-col gap-6">
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Nextcloud Instance Domain</span>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'example.nextcloud.com' }}
+					bind:value={value['domain']}
+				/>
 			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Custom Name</span>
-				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Custom Name</span>
+				<TextInput
+					inputProps={{ 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 ID from your Nextcloud OAuth2 app 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 ID from your Nextcloud OAuth2 app configuration</span
 				>
-				<input type="text" placeholder="Client Id" bind:value={value['id']} />
+				<TextInput
+					inputProps={{ 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
-						>Client Secret from your Nextcloud OAuth2 app 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"
+					>Client Secret from your Nextcloud OAuth2 app configuration</span
 				>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
+					bind:value={value['secret']}
+				/>
 			</label>
 			<CollapseLink text="Instructions">
-				<div class="text-sm text-secondary border p-2">
+				<div class="text-xs text-primary border rounded-md p-4">
 					1. Go to your Nextcloud instance as an administrator<br />
-					2. Navigate to <strong>Administration settings → Security → OAuth 2.0 clients</strong><br />
+					2. Navigate to <strong>Administration settings → Security → OAuth 2.0 clients</strong><br
+					/>
 					3. Click "Add client" to create a new OAuth2 application<br />
-					4. Set the redirect URI to your Windmill instance's <code>{baseUrl || 'BASE_URL'}/user/login_callback/nextcloud</code><br />
+					4. Set the redirect URI to your Windmill instance's
+					<code>{baseUrl || 'BASE_URL'}/user/login_callback/nextcloud</code><br />
 					5. Copy the Client ID and Client Secret to the fields above<br />
 				</div>
 			</CollapseLink>

package/package/components/NumberTypeNarrowing.svelte

@@ -66,7 +66,7 @@ let maxChecked = $state(max != undefined);
 		</Label>
 	</div>
 	<div class="flex gap-2">
-		<Label label="Currency" class=" col-span-2">
+		<Label label="Currency">
 			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select

package/package/components/NumberTypeNarrowing.svelte.d.ts

@@ -4,6 +4,6 @@ interface Props {
     currency: string | undefined;
     currencyLocale: string | undefined;
 }
-declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "currency" | "min" | "max" | "currencyLocale">;
+declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "max" | "min" | "currency" | "currencyLocale">;
 type NumberTypeNarrowing = ReturnType<typeof NumberTypeNarrowing>;
 export default NumberTypeNarrowing;

package/package/components/OAuthSetting.svelte

@@ -1,16 +1,13 @@
-<script lang="ts">import { X } from 'lucide-svelte';
+<script lang="ts">import { ExternalLink, Plus, X } from 'lucide-svelte';
 import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 import { enterpriseLicense } from '../stores';
-export let name;
-export let value;
-export let login = true;
-export let eeOnly = false;
-$: enabled = value != undefined && !(eeOnly && !$enterpriseLicense);
-let tenant = '';
-$: (name == 'microsoft' || name == 'teams') && changeTenantId(tenant);
+import Button from './common/button/Button.svelte';
+import TextInput from './text_input/TextInput.svelte';
+let { name, value = $bindable(), login = true, eeOnly = false } = $props();
+let tenant = $state('');
 onMount(() => {
     try {
         if (name == 'microsoft' &&
@@ -55,13 +52,20 @@ function changeTenantId(tenant) {
         }
     }
 }
+let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense));
+$effect(() => {
+    if (name == 'microsoft' || name == 'teams') {
+        untrack(() => changeTenantId(tenant));
+    }
+});
 </script>
 
-<div class="flex flex-col">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+<div class="flex flex-col gap-2">
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label
-		class="text-sm flex gap-4 items-center font-medium text-primary {enabled ? 'rounded py-2' : ''}"
-		><div class="w-[120px]"><IconedResourceType {name} after={true} /></div><Toggle
+		class="text-xs flex gap-4 items-center font-semibold text-emphasis {enabled ? 'rounded' : ''}"
+		><div class="w-[120px]"><IconedResourceType {name} after={true} /></div>
+		<Toggle
 			checked={enabled}
 			disabled={eeOnly && !$enterpriseLicense}
 			on:change={(e) => {
@@ -81,29 +85,38 @@ function changeTenantId(tenant) {
 		{/if}
 	</label>
 	{#if enabled}
-		<div class="p-2 rounded border mb-4">
+		<div class="p-4 rounded border mb-4 flex flex-col gap-6">
 			{#if name != 'slack' && name != 'teams'}
-				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Custom Name</span>
-					<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+				<label class="flex flex-col gap-1">
+					<span class="text-emphasis font-semibold text-xs">Custom Name</span>
+					<TextInput
+						inputProps={{ type: 'text', placeholder: 'Custom Name' }}
+						bind:value={value['display_name']}
+					/>
 				</label>
 			{/if}
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Client Id</span>
-				<input type="text" placeholder="Client Id" bind:value={value['id']} />
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Client Id</span>
+				<TextInput
+					inputProps={{ 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</span>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Client Secret</span>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
+					bind:value={value['secret']}
+				/>
 			</label>
 			{#if name == 'microsoft' || name == 'teams'}
-				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Tenant Id</span>
-					<input type="text" placeholder="Tenant Id" bind:value={tenant} />
+				<label class="flex flex-col gap-1">
+					<span class="text-emphasis font-semibold text-xs">Tenant Id</span>
+					<TextInput inputProps={{ type: 'text', placeholder: 'Tenant Id' }} bind:value={tenant} />
 				</label>
 			{:else if login}
-				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Allowed domains</span>
+				<label class="flex flex-col gap-1">
+					<span class="text-emphasis font-semibold text-xs">Allowed domains</span>
 					<div class="flex flex-col gap-1">
 						{#each value?.['allowed_domains'] ?? [] as domain, idx}
 							<div class="flex gap-2">
@@ -111,7 +124,7 @@ function changeTenantId(tenant) {
 									class="max-w-96 w-full"
 									type="text"
 									bind:value={value['allowed_domains'][idx]}
-									on:keyup={(e) => {
+									onkeyup={(e) => {
 										if (domain == '') {
 											value['allowed_domains'] = value['allowed_domains']?.filter(
 												(d) => d != domain
@@ -121,7 +134,7 @@ function changeTenantId(tenant) {
 								/>
 								<button
 									class="text-primary text-xs rounded hover:bg-surface-hover"
-									on:click={() => {
+									onclick={() => {
 										value['allowed_domains'] = value['allowed_domains']?.filter((d) => d != domain)
 										if (value['allowed_domains'].length == 0) {
 											value['allowed_domains'] = undefined
@@ -133,19 +146,22 @@ function changeTenantId(tenant) {
 							</div>
 						{/each}
 						<div class="flex gap-2">
-							<button
-								class="text-primary text-sm border rounded p-1"
-								on:click={() => {
+							<Button
+								variant="default"
+								unifiedSize="md"
+								startIcon={{ icon: Plus }}
+								onclick={() => {
 									value['allowed_domains'] = [...(value['allowed_domains'] ?? []), 'mydomain.com']
-								}}>+ Add domain</button
-							>
+								}}
+								>Add domain
+							</Button>
 						</div>
 					</div>
 				</label>
 			{/if}
 			{#if name == 'google'}
 				<CollapseLink text="Instructions">
-					<div class="text-sm text-secondary border p-2">
+					<div class="helper">
 						Create a new OAuth 2.0 Client <a
 							href="https://console.cloud.google.com/apis/credentials"
 							target="_blank">in Google console</a
@@ -155,35 +171,87 @@ function changeTenantId(tenant) {
 					</div>
 				</CollapseLink>
 			{:else if name == 'slack'}
-				<CollapseLink text="Instructions">
-					<div class="text-sm text-secondary border p-2">
-						Create a new App <a href="https://api.slack.com/apps?new_app=1" target="_blank"
-							>in Slack API Console</a
-						>. Pick "From an app manifest", then YAML and paste manifest template found on
+				<CollapseLink text="Set up slack">
+					<div class="helper">
+						To use Slack OAuth, create a new Slack app <a
+							href="https://api.slack.com/apps?new_app=1"
+							target="_blank"
+							>in slack API console
+							<ExternalLink size={12} class="inline-block" />
+						</a>. Pick "From a manifest", then YAML and paste manifest template found on
 						<a href="https://www.windmill.dev/docs/misc/setup_oauth#slack" target="_blank"
-							>Windmill Docs</a
+							>Windmill docs <ExternalLink size={12} class="inline-block" /></a
 						> and then paste Client ID and Client Secret here.
 					</div>
 				</CollapseLink>
 			{:else if name == 'microsoft'}
 				<CollapseLink text="Instructions">
-					<div class="text-sm text-secondary border p-2">
-						Create a new OAuth 2.0 Client <a
-							href="https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade"
-							target="_blank">in Microsoft portal</a
-						>
-						"Add" {'->'} "App Registration" -> "Accounts in this organizational directory only (Default
-						Directory only - Single tenant)", and in the "Authentication" tab, set the redirect URI to
-						Web and
-						<code>BASE_URL/user/login_callback/microsoft</code>. Then copy the "Directory (tenant
-						ID)" in the tenant ID field. Then copy the Client ID from "Application (client) ID" and
-						create a secret in "Client credentials". Last, include "Sign in" and "read user profile"
-						under "Delegated Permissions".
+					<div class="text-xs text-primary border rounded-md p-4 space-y-3">
+						<div>
+							<strong>1. Create App Registration</strong>
+							<div class="ml-4 mt-1">
+								Create a new OAuth 2.0 Client <a
+									href="https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade"
+									target="_blank"
+									class="inline-flex items-center gap-1 whitespace-nowrap">in Microsoft portal</a
+								>:
+								<ul class="list-disc ml-4 mt-1 space-y-1">
+									<li>Click <strong>"Add"</strong> → <strong>"App Registration"</strong></li>
+									<li
+										>Select <strong
+											>"Accounts in this organizational directory only (Default Directory only -
+											Single tenant)"</strong
+										></li
+									>
+								</ul>
+							</div>
+						</div>
+
+						<div>
+							<strong>2. Authentication Configuration</strong>
+							<div class="ml-4 mt-1">
+								In the <strong>"Authentication"</strong> tab:
+								<ul class="list-disc ml-4 mt-1 space-y-1">
+									<li>Set the redirect URI to <strong>Web</strong></li>
+									<li
+										>Add redirect URI: <code class="bg-surface px-1 rounded text-xs"
+											>BASE_URL/user/login_callback/microsoft</code
+										></li
+									>
+								</ul>
+							</div>
+						</div>
+
+						<div>
+							<strong>3. Copy Credentials</strong>
+							<div class="ml-4 mt-1">
+								Copy the following values to Windmill:
+								<ul class="list-disc ml-4 mt-1 space-y-1">
+									<li>Copy <strong>"Directory (tenant ID)"</strong> to the tenant ID field</li>
+									<li>Copy <strong>"Application (client) ID"</strong> to the Client ID field</li>
+									<li
+										>Create a secret in <strong>"Client credentials"</strong> and copy to Client Secret
+										field</li
+									>
+								</ul>
+							</div>
+						</div>
+
+						<div>
+							<strong>4. API Permissions</strong>
+							<div class="ml-4 mt-1">
+								Under <strong>"Delegated Permissions"</strong>, include:
+								<ul class="list-disc ml-4 mt-1 space-y-1">
+									<li>Sign in</li>
+									<li>Read user profile</li>
+								</ul>
+							</div>
+						</div>
 					</div>
 				</CollapseLink>
 			{:else if name == 'teams'}
 				<CollapseLink text="Instructions">
-					<div class="text-sm text-secondary border p-2">
+					<div class="helper">
 						Follow this guide on <a
 							href="https://www.windmill.dev/docs/misc/setup_oauth#microsoft-teams"
 							target="_blank">Windmill Docs</a
@@ -195,3 +263,12 @@ function changeTenantId(tenant) {
 		</div>
 	{/if}
 </div>
+
+<style>
+	.helper {
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    --tw-text-opacity: 1;
+    color: rgb(var(--color-text-primary) / var(--tw-text-opacity, 1))
+}</style>

package/package/components/OAuthSetting.svelte.d.ts

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const OAuthSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     name: string;
     value: any;
     login?: boolean;
     eeOnly?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type OAuthSetting = InstanceType<typeof OAuthSetting>;
+}
+declare const OAuthSetting: import("svelte").Component<Props, {}, "value">;
+type OAuthSetting = ReturnType<typeof OAuthSetting>;
 export default OAuthSetting;

package/package/components/OauthExtraParams.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Button } from './common';
-import { Minus, Plus } from 'lucide-svelte';
+import { X, Plus } from 'lucide-svelte';
 export let extra_params = {};
 let extra_params_vec = Object.entries(extra_params);
 function sync() {
@@ -8,27 +8,25 @@ function sync() {
 </script>
 
 {#each extra_params_vec as o}
-	<div class="flex flex-row max-w-md mb-2">
+	<div class="flex flex-row max-w-md mb-2 gap-2">
 		<input type="text" on:keyup={sync} bind:value={o[0]} />
 		<input type="text" on:keyup={sync} bind:value={o[1]} />
 		<Button
-			variant="border"
-			color="red"
-			size="xs"
-			btnClasses="mx-6"
+			variant="subtle"
+			destructive
+			unifiedSize="md"
 			on:click={() => {
 				extra_params_vec = extra_params_vec.filter((e) => e[0] != o[0])
 				sync()
 			}}
-			startIcon={{ icon: Minus }}
+			startIcon={{ icon: X }}
 			iconOnly
 		/>
 	</div>
 {/each}
 <div class="flex items-center mt-1">
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		hover="yo"
 		size="sm"
 		endIcon={{ icon: Plus }}
@@ -39,7 +37,9 @@ function sync() {
 	>
 		Add item
 	</Button>
-	<span class="ml-2 text-sm text-tertiary">
-		({(extra_params_vec ?? []).length} item{(extra_params_vec ?? []).length > 1 ? 's' : ''})
-	</span>
+	{#if (extra_params_vec ?? []).length > 0}
+		<span class="ml-2 text-2xs text-secondary">
+			({(extra_params_vec ?? []).length} item{(extra_params_vec ?? []).length > 1 ? 's' : ''})
+		</span>
+	{/if}
 </div>

package/package/components/OauthScopes.svelte

@@ -8,8 +8,7 @@ export let scopes = [];
 		<div class="flex flex-row max-w-md mb-2">
 			<input type="text" bind:value={v} />
 			<Button
-				variant="border"
-				color="light"
+				variant="default"
 				size="xs"
 				btnClasses="mx-6"
 				on:click={() => {
@@ -24,18 +23,17 @@ export let scopes = [];
 
 <div class="flex items-center mt-1">
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		hover="yo"
-		size="sm"
-		endIcon={{ icon: Plus }}
+		size="xs"
+		startIcon={{ icon: Plus }}
 		on:click={() => {
 			scopes = (scopes ?? []).concat('')
 		}}
 	>
 		Add item
 	</Button>
-	<span class="ml-2 text-sm text-tertiary">
+	<span class="ml-2 text-xs text-primary font-normal">
 		({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
 	</span>
 </div>