windmill-components 1.448.50 → 1.472.2

package/package/components/ArgInput.svelte

@@ -1,15 +1,13 @@
 <script>import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
-import { DollarSign, Pipette, Plus, X, Check } from 'lucide-svelte';
+import { DollarSign, Pipette, Plus, X, Check, Loader2 } from 'lucide-svelte';
 import { createEventDispatcher, onMount, tick } from 'svelte';
 import Multiselect from 'svelte-multiselect';
 import { fade } from 'svelte/transition';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
 import { Button, SecondsInput } from './common';
 import FieldHeader from './FieldHeader.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import Range from './Range.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 import { twMerge } from 'tailwind-merge';
 import ArgEnum from './ArgEnum.svelte';
@@ -75,6 +73,11 @@ export let diffStatus = undefined;
 export let hideNested = false;
 export let nestedParent = undefined;
 export let nestedClasses = '';
+export let displayType = true;
+export let css = undefined;
+export let appPath = undefined;
+export let computeS3ForceViewerPolicies = undefined;
+export let workspace = undefined;
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let oneOfSelected = undefined;
 async function updateOneOfSelected(oneOf) {
@@ -173,7 +176,9 @@ $: !isListJson &&
 $: defaultValue != undefined && handleDefaultValueChange();
 let oldDefaultValue = structuredClone(defaultValue);
 function handleDefaultValueChange() {
-    if (deepEqual(value, oldDefaultValue)) {
+    if (deepEqual(value, oldDefaultValue) &&
+        !deepEqual(value, defaultValue) &&
+        !deepEqual(defaultValue, oldDefaultValue)) {
         value = defaultValue;
     }
     oldDefaultValue = structuredClone(defaultValue);
@@ -303,8 +308,9 @@ $: shouldDispatchChanges && debounced(value);
 <!-- svelte-ignore a11y-autofocus -->
 <div
 	class={twMerge(
-		'flex flex-col w-full rounded-md px-2 relative',
+		'flex flex-col w-full rounded-md relative',
 		minW ? 'min-w-[250px]' : '',
+		diffStatus?.diff ? 'px-2' : '',
 		diffStatus?.diff == 'added'
 			? 'bg-green-300 dark:bg-green-800'
 			: diffStatus?.diff === 'removed'
@@ -315,11 +321,11 @@ $: shouldDispatchChanges && debounced(value);
 			? 'border-2 border-green-500 bg-surface'
 			: ''
 	)}
+	data-schema-picker
 >
 	{#if diffStatus && typeof diffStatus === 'object' && diffStatus.diff !== 'same'}
 		<div
 			class="absolute top-0 right-2 rounded-md rounded-t-none flex flex-row overflow-hidden bg-surface"
-			data-schema-picker
 		>
 			<button
 				class="p-1 bg-green-500 text-white hover:bg-green-600"
@@ -350,11 +356,13 @@ $: shouldDispatchChanges && debounced(value);
 			{format}
 			{simpleTooltip}
 			{lightHeader}
+			{displayType}
+			labelClass={css?.label?.class}
 		/>
 	{/if}
 
 	{#if description}
-		<div class="text-xs italic pb-1 text-secondary">
+		<div class={twMerge('text-xs italic pb-1 text-secondary', css?.description?.class)}>
 			<pre class="font-main whitespace-normal">{description}</pre>
 		</div>
 	{/if}
@@ -376,6 +384,7 @@ $: shouldDispatchChanges && debounced(value);
 					bind:value
 					currency={extra?.currency}
 					locale={extra?.currencyLocale ?? 'en-US'}
+					{disabled}
 				/>
 			{:else}
 				<div class="relative w-full">
@@ -421,6 +430,7 @@ $: shouldDispatchChanges && debounced(value);
 						<div class="items-start">
 							<Multiselect
 								ulOptionsClass={'p-2 !bg-surface-secondary'}
+								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
 								{disabled}
 								bind:selected={value}
 								options={itemsType?.multiselect ?? []}
@@ -434,6 +444,7 @@ $: shouldDispatchChanges && debounced(value);
 						<div class="items-start">
 							<Multiselect
 								ulOptionsClass={'p-2 !bg-surface-secondary'}
+								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
 								{disabled}
 								bind:selected={value}
 								options={itemsType?.enum ?? []}
@@ -460,7 +471,11 @@ $: shouldDispatchChanges && debounced(value);
 														multiple={false}
 													/>
 												{:else if itemsType?.type == 'object' && itemsType?.resourceType === undefined && itemsType?.properties === undefined}
-													<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+													{#await import('./JsonEditor.svelte')}
+														<Loader2 class="animate-spin" />
+													{:then Module}
+														<Module.default code={JSON.stringify(v, null, 2)} bind:value={v} />
+													{/await}
 												{:else if Array.isArray(itemsType?.enum)}
 													<ArgEnum
 														required
@@ -487,17 +502,21 @@ $: shouldDispatchChanges && debounced(value);
 														defaultValue={undefined}
 													/>
 												{:else if itemsType?.type == 'resource'}
-													<JsonEditor
-														bind:editor
-														on:focus={(e) => {
-															dispatch('focus')
-														}}
-														on:blur={(e) => {
-															dispatch('blur')
-														}}
-														code={JSON.stringify(v, null, 2)}
-														bind:value={v}
-													/>
+													{#await import('./JsonEditor.svelte')}
+														<Loader2 class="animate-spin" />
+													{:then Module}
+														<Module.default
+															bind:editor
+															on:focus={(e) => {
+																dispatch('focus')
+															}}
+															on:blur={(e) => {
+																dispatch('blur')
+															}}
+															code={JSON.stringify(v, null, 2)}
+															bind:value={v}
+														/>
+													{/await}
 												{:else if itemsType?.type === 'object' && itemsType?.properties}
 													<div class="p-8 border rounded-md w-full">
 														<SchemaForm
@@ -618,17 +637,21 @@ $: shouldDispatchChanges && debounced(value);
 					options={{ left: 'Raw S3 object input' }}
 				/>
 				{#if s3FileUploadRawMode}
-					<JsonEditor
-						bind:editor
-						on:focus={(e) => {
-							dispatch('focus')
-						}}
-						on:blur={(e) => {
-							dispatch('blur')
-						}}
-						code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)}
-						bind:value
-					/>
+					{#await import('./JsonEditor.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default
+							bind:editor
+							on:focus={(e) => {
+								dispatch('focus')
+							}}
+							on:blur={(e) => {
+								dispatch('blur')
+							}}
+							code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)}
+							bind:value
+						/>
+					{/await}
 					<Button
 						variant="border"
 						color="light"
@@ -643,6 +666,9 @@ $: shouldDispatchChanges && debounced(value);
 					</Button>
 				{:else}
 					<FileUpload
+						{appPath}
+						computeForceViewerPolicies={computeS3ForceViewerPolicies}
+						{workspace}
 						allowMultiple={false}
 						randomFileKey={true}
 						on:addition={(evt) => {
@@ -657,6 +683,7 @@ $: shouldDispatchChanges && debounced(value);
 							}
 						}}
 						defaultValue={defaultValue?.s3}
+						initialValue={value}
 					/>
 				{/if}
 			</div>
@@ -665,14 +692,16 @@ $: shouldDispatchChanges && debounced(value);
 				<div class="flex flex-col gap-2 w-full">
 					{#if oneOf && oneOf.length >= 2}
 						<ToggleButtonGroup
-							bind:selected={oneOfSelected}
-							on:selected={() => {
-								value = { label: oneOfSelected }
+							selected={oneOfSelected}
+							on:selected={({ detail }) => {
+								oneOfSelected = detail
+								value = { label: detail }
 								redraw += 1
 							}}
+							let:item
 						>
 							{#each oneOf as obj}
-								<ToggleButton value={obj.title} label={obj.title} />
+								<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
 							{/each}
 						</ToggleButtonGroup>
 						{#if oneOfSelected}
@@ -736,33 +765,41 @@ $: shouldDispatchChanges && debounced(value);
 							{:else if disabled}
 								<textarea disabled />
 							{:else}
-								<JsonEditor
-									bind:editor
-									on:focus={(e) => {
-										dispatch('focus')
-									}}
-									on:blur={(e) => {
-										dispatch('blur')
-									}}
-									code={rawValue}
-									bind:value
-								/>
+								{#await import('./JsonEditor.svelte')}
+									<Loader2 class="animate-spin" />
+								{:then Module}
+									<Module.default
+										bind:editor
+										on:focus={(e) => {
+											dispatch('focus')
+										}}
+										on:blur={(e) => {
+											dispatch('blur')
+										}}
+										code={rawValue}
+										bind:value
+									/>
+								{/await}
 							{/if}
 						{/if}
 					{:else if disabled}
 						<textarea disabled />
 					{:else}
-						<JsonEditor
-							bind:editor
-							on:focus={(e) => {
-								dispatch('focus')
-							}}
-							on:blur={(e) => {
-								dispatch('blur')
-							}}
-							code={rawValue}
-							bind:value
-						/>
+						{#await import('./JsonEditor.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default
+								bind:editor
+								on:focus={(e) => {
+									dispatch('focus')
+								}}
+								on:blur={(e) => {
+									dispatch('blur')
+								}}
+								code={rawValue}
+								bind:value
+							/>
+						{/await}
 					{/if}
 				</div>
 			{:else if properties && Object.keys(properties).length > 0 && inputCat !== 'list'}
@@ -833,17 +870,21 @@ $: shouldDispatchChanges && debounced(value);
 			{:else if disabled}
 				<textarea disabled />
 			{:else}
-				<JsonEditor
-					bind:editor
-					on:focus={(e) => {
-						dispatch('focus')
-					}}
-					on:blur={(e) => {
-						dispatch('blur')
-					}}
-					code={rawValue}
-					bind:value
-				/>
+				{#await import('./JsonEditor.svelte')}
+					<Loader2 class="animate-spin" />
+				{:then Module}
+					<Module.default
+						bind:editor
+						on:focus={(e) => {
+							dispatch('focus')
+						}}
+						on:blur={(e) => {
+							dispatch('blur')
+						}}
+						code={rawValue}
+						bind:value
+					/>
+				{/await}
 			{/if}
 			{#if inputCat == 'list'}
 				<div class="block">
@@ -880,25 +921,33 @@ $: shouldDispatchChanges && debounced(value);
 			</div>
 		{:else if inputCat == 'date'}
 			{#if format === 'date'}
-				<DateInput {autofocus} bind:value dateFormat={extra?.['dateFormat']} />
+				<DateInput {disabled} {autofocus} bind:value dateFormat={extra?.['dateFormat']} />
 			{:else}
-				<DateTimeInput useDropdown {autofocus} bind:value />
+				<DateTimeInput {disabled} useDropdown {autofocus} bind:value />
 			{/if}
 		{:else if inputCat == 'sql' || inputCat == 'yaml'}
-			<div class="border my-1 mb-4 w-full border-primary">
-				<SimpleEditor
-					on:focus={(e) => {
-						dispatch('focus')
-					}}
-					on:blur={(e) => {
-						dispatch('blur')
-					}}
-					bind:this={editor}
-					lang={inputCat}
-					bind:code={value}
-					autoHeight
-				/>
-			</div>
+			{#if disabled}
+				<textarea disabled />
+			{:else}
+				<div class="border my-1 mb-4 w-full border-secondary">
+					{#await import('./SimpleEditor.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default
+							on:focus={(e) => {
+								dispatch('focus')
+							}}
+							on:blur={(e) => {
+								dispatch('blur')
+							}}
+							bind:this={editor}
+							lang={inputCat}
+							bind:code={value}
+							autoHeight
+						/>
+					{/await}
+				</div>
+			{/if}
 		{:else if inputCat == 'base64'}
 			<div class="flex flex-col my-6 w-full">
 				<input

package/package/components/ArgInput.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
 import type { EnumType, SchemaProperty } from '../common';
 import type ItemPicker from './ItemPicker.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
+import type SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type { Script } from '../gen';
 import type { SchemaDiff } from './schema/schemaUtils';
+import type { ComponentCustomCSS } from './apps/types';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -77,6 +78,16 @@ declare const __propDef: {
             nestedParent: any | undefined;
         } | undefined;
         nestedClasses?: string | undefined;
+        displayType?: boolean | undefined;
+        css?: ComponentCustomCSS<'schemaformcomponent'> | undefined;
+        appPath?: string | undefined;
+        computeS3ForceViewerPolicies?: (() => {
+            allowed_resources: string[];
+            allow_user_resources: boolean;
+            allow_workspace_resource: boolean;
+            file_key_regex: string;
+        } | undefined) | undefined;
+        workspace?: string | undefined;
         focus?: (() => void) | undefined;
     };
     events: {

package/package/components/ArrayTypeNarrowing.svelte

@@ -7,6 +7,7 @@ import Badge from './common/badge/Badge.svelte';
 import Alert from './common/alert/Alert.svelte';
 import EditableSchemaDrawer from './schema/EditableSchemaDrawer.svelte';
 export let canEditResourceType = false;
+export let originalType = undefined;
 export let itemsType;
 let selected = itemsType?.type != 'string'
     ? itemsType?.type
@@ -27,7 +28,7 @@ function updateItemsType() {
 }
 </script>
 
-{#if canEditResourceType}
+{#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
 	<Label label="Items type">
 		<select
 			bind:value={selected}
@@ -52,10 +53,12 @@ function updateItemsType() {
 		>
 			<option value="string"> Items are strings</option>
 			<option value="enum">Items are strings from an enum</option>
-			<option value="object"> Items are objects (JSON)</option>
-			<option value="resource"> Items are resources</option>
-			<option value="number">Items are numbers</option>
-			<option value="bytes">Items are bytes</option>
+			{#if originalType != 'string[]'}
+				<option value="object"> Items are objects (JSON)</option>
+				<option value="resource"> Items are resources</option>
+				<option value="number">Items are numbers</option>
+				<option value="bytes">Items are bytes</option>
+			{/if}
 		</select>
 	</Label>
 {:else if itemsType?.resourceType}
@@ -106,31 +109,33 @@ function updateItemsType() {
 				</div>
 			{/each}
 		</div>
-		<div class="flex flex-row mb-1 mt-2">
-			<Button
-				color="light"
-				variant="border"
-				size="sm"
-				on:click={() => {
-					if (itemsType?.enum) {
-						let enum_ = itemsType.enum
-						let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`
-						itemsType.enum = itemsType.enum ? itemsType.enum.concat(choice) : [choice]
-					}
-				}}
-			>
-				<Plus size={14} />
-			</Button>
-			<Button
-				color="light"
-				variant="border"
-				size="sm"
-				btnClasses="ml-2"
-				on:click={() => itemsType?.enum && (itemsType.enum = undefined)}
-			>
-				Clear
-			</Button>
-		</div>
+		{#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
+			<div class="flex flex-row mb-1 mt-2">
+				<Button
+					color="light"
+					variant="border"
+					size="sm"
+					on:click={() => {
+						if (itemsType?.enum) {
+							let enum_ = itemsType.enum
+							let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`
+							itemsType.enum = itemsType.enum ? itemsType.enum.concat(choice) : [choice]
+						}
+					}}
+				>
+					<Plus size={14} />
+				</Button>
+				<Button
+					color="light"
+					variant="border"
+					size="sm"
+					btnClasses="ml-2"
+					on:click={() => itemsType?.enum && (itemsType.enum = undefined)}
+				>
+					Clear
+				</Button>
+			</div>
+		{/if}
 	</label>
 {/if}
 

package/package/components/ArrayTypeNarrowing.svelte.d.ts

@@ -3,6 +3,7 @@ import type { SchemaProperty } from '../common';
 declare const __propDef: {
     props: {
         canEditResourceType?: boolean | undefined;
+        originalType?: string | undefined;
         itemsType: {
             type?: "string" | "number" | "object" | "bytes" | "resource" | undefined;
             contentEncoding?: "base64" | undefined;

package/package/components/AssignableTags.svelte

@@ -1,5 +1,6 @@
-<script>import { Button, Popup } from './common';
+<script>import { Button } from './common';
 import { Pen } from 'lucide-svelte';
+import Popover from './meltComponents/Popover.svelte';
 import Tooltip from './Tooltip.svelte';
 import AssignableTagsInner from './AssignableTagsInner.svelte';
 export let placement = 'bottom-end';
@@ -8,12 +9,13 @@ export let disabled = false;
 export let showWorkspaceRestriction = false;
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{ strategy: 'absolute', placement: placement }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 	{disabled}
+	closeButton
+	usePointerDownOutside
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
@@ -25,5 +27,7 @@ export let showWorkspaceRestriction = false;
 			>
 		</Button>
 	</svelte:fragment>
-	<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
-</Popup>
+	<svelte:fragment slot="content">
+		<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
+	</svelte:fragment>
+</Popover>

package/package/components/AssignableTagsInner.svelte

@@ -25,7 +25,7 @@ const dispatch = createEventDispatcher();
 loadCustomTags();
 </script>
 
-<div class="flex flex-col w-72 p-2 gap-2">
+<div class="flex flex-col w-72 p-4 gap-2">
 	{#if customTags == undefined}
 		<Loader2 class="animate-spin" />
 	{:else}

package/package/components/Auth0Setting.svelte

@@ -0,0 +1,103 @@
+<script>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';
+export let value;
+$: enabled = value != undefined;
+$: changeDomain(value?.['domain'], value?.['custom']);
+function changeDomain(domain, custom) {
+    if (value) {
+        let baseUrl = custom ? `https://${domain}` : `https://${domain}.auth0.com`;
+        value = {
+            ...value,
+            login_config: {
+                auth_url: `${baseUrl}/authorize`,
+                token_url: `${baseUrl}/oauth/token`,
+                userinfo_url: `${baseUrl}/userinfo`,
+                scopes: ['openid', 'profile', 'email']
+            },
+            connect_config: {
+                auth_url: `${baseUrl}/authorize`,
+                token_url: `${baseUrl}/oauth/token`,
+                scopes: ['openid', 'profile', 'email']
+            }
+        };
+    }
+}
+</script>
+
+<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"
+		><div class="w-[120px]"><IconedResourceType name="auth0" after={true} /></div><Toggle
+			checked={enabled}
+			on:change={(e) => {
+				if (e.detail) {
+					value = { id: '', secret: '', domain: '', custom: false }
+				} else {
+					value = undefined
+				}
+			}}
+		/></label
+	>
+	{#if enabled}
+		<div class="p-2 rounded border">
+			<label class="block pb-2">
+				<div class="flex gap-2 items-end">
+					<div>
+						<ToggleButtonGroup
+							selected={value['custom'] ? 'custom' : 'org'}
+							on:selected={({ detail }) => {
+								value['custom'] = detail === 'custom'
+							}}
+							let:item
+						>
+							<ToggleButton value="org" label={'Org'} {item} />
+							<ToggleButton value="custom" label="Custom" {item} />
+						</ToggleButtonGroup>
+					</div>
+					<div class="grow">
+						<span class="text-primary font-semibold text-sm"
+							>{#if value['custom']}Custom ({'https://<domain>'}){:else}
+								Org ({'https://<your org>.auth0.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>
+				<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 ID credential of the auth0 service configuration</Tooltip
+					></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>Client Secret of the auth0 service configuration</Tooltip></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 a Windmill application<br />
+					Create a new application<br />
+					For "application type" select "Regular Web Application"<br />
+					Copy down the "Client ID" and "Client Secret" and paste them into the fields above <br />
+					Under "Application URIs", set the following:<br />
+					a. Application Login URI: `BASE_URL/user/login`<br />
+					b. Allowed Callback URLs: `BASE_URL/user/login_callback/auth0`<br />
+					c. Allowed Logout URLs: `BASE_URL/auth/logout`<br />
+					d. Allowed Web Origins: `BASE_URL`<br />
+					e. Allowed Origins (CORS): `BASE_URL`<br />
+				</div>
+			</CollapseLink>
+		</div>
+	{/if}
+</div>

package/package/components/Auth0Setting.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type Auth0SettingProps = typeof __propDef.props;
+export type Auth0SettingEvents = typeof __propDef.events;
+export type Auth0SettingSlots = typeof __propDef.slots;
+export default class Auth0Setting extends SvelteComponent<Auth0SettingProps, Auth0SettingEvents, Auth0SettingSlots> {
+}
+export {};