windmill-components 1.339.2 → 1.352.0

package/package/components/GroupEditor.svelte

@@ -2,7 +2,6 @@
 import { userStore, workspaceStore } from '../stores';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { createEventDispatcher } from 'svelte';
-import autosize from '../autosize';
 import { Button } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
@@ -10,6 +9,8 @@ import { sendUserToast } from '../toast';
 import { canWrite } from '../utils';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import Section from './Section.svelte';
+import Label from './Label.svelte';
 export let name;
 let can_write = false;
 let group;
@@ -17,6 +18,7 @@ let instance_group;
 let members = undefined;
 let usernames = [];
 let username = '';
+let summary = '';
 const dispatch = createEventDispatcher();
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
@@ -58,10 +60,12 @@ async function loadGroup() {
                 role: getRole(x)
             };
         });
+        summary = group.summary ?? '';
     }
     catch (e) {
         can_write = false;
         members = [];
+        summary = '';
         group = {
             name
         };
@@ -82,37 +86,28 @@ function getRole(x) {
 }
 </script>
 
-<div class="flex flex-col gap-6">
-	<h1>{name}</h1>
-	{#if group}
-		<div class="flex flex-col gap-1">
-			<textarea
-				disabled={!can_write}
-				rows="2"
-				use:autosize
-				bind:value={group.summary}
-				placeholder="Summary of the group"
-			/>
-			<div class="flex justify-end">
-				<Button
-					disabled={!can_write}
-					size="xs"
-					on:click={async () => {
-						await GroupService.updateGroup({
-							workspace: $workspaceStore ?? '',
-							name,
-							requestBody: { summary: group?.summary }
-						})
-						dispatch('update')
-						sendUserToast('New summary saved')
-					}}>Save Summary</Button
-				>
-			</div>
+<Section label="Metadata" class="mb-4">
+	<Label label="Summary">
+		<div class="flex flex-row gap-2">
+			<input placeholder="Short summary to be displayed when listed" bind:value={summary} />
+			<Button
+				size="sm"
+				on:click={async () => {
+					await GroupService.updateGroup({
+						workspace: $workspaceStore ?? '',
+						name,
+						requestBody: { summary }
+					})
+					dispatch('update')
+					sendUserToast('Group summary updated')
+					loadGroup()
+				}}>Save</Button
+			>
 		</div>
-	{:else}
-		<Skeleton layout={[[4]]} />
-	{/if}
-	<h2>Members ({members?.length ?? 0})</h2>
+	</Label>
+</Section>
+
+<Section label={`Members (${members?.length ?? 0})`}>
 	{#if can_write}
 		<div class="flex items-start">
 			<AutoComplete required noInputStyles items={usernames} bind:selectedItem={username} />
@@ -202,13 +197,6 @@ function getRole(x) {
 											label="Member"
 											tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
 										/>
-
-										<!-- <ToggleButton position="center" value="manager" size="xs"
-											>Manager <Tooltip
-												>A manager of a group can manage the group, adding and removing users and
-												change their roles. Being a manager does not make you a member.</Tooltip
-											></ToggleButton
-										> -->
 										<ToggleButton
 											position="right"
 											value="admin"
@@ -216,6 +204,15 @@ function getRole(x) {
 											label="Admin"
 											tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
 										/>
+										{#if role === 'manager'}
+											<ToggleButton
+												value="manager"
+												size="xs"
+												label="Manager"
+												tooltip="A manager of a group can manage the group, adding and removing users and
+												change their roles. Being a manager does not make you a member"
+											/>
+										{/if}
 									</ToggleButtonGroup>
 								</div>
 							{:else}
@@ -262,58 +259,6 @@ function getRole(x) {
 				</tbody>
 			</TableCustom>
 		{/if}
-
-		<!-- <h2 class="mt-10"
-			>Groups managing this group <Tooltip>Any member of those groups can manage this group</Tooltip
-			></h2
-		>
-		{#if can_write}
-			<div class="flex items-start">
-				<AutoComplete items={groups} bind:selectedItem={new_managing_group} />
-				<Button
-					variant="contained"
-					color="blue"
-					size="sm"
-					btnClasses="!ml-4"
-					on:click={addToManagingGroup}
-				>
-					Add group managing this group
-				</Button>
-			</div>
-		{/if}
-		{#if managing_groups.length == 0}
-			<p class="text-tertiary text-sm">No group is managing this group</p>
-		{:else}
-			<TableCustom>
-				<tr slot="header-row">
-					<th>group</th>
-					<th />
-				</tr>
-				<tbody slot="body">
-					{#each managing_groups as managing_group}<tr>
-							<td>{managing_group.split('/')[1]}</td>
-							<td>
-								{#if can_write}
-									<button
-										class="ml-2 text-red-500"
-										on:click={async () => {
-											await GranularAclService.removeGranularAcls({
-												workspace: $workspaceStore ?? '',
-												path: name,
-												kind: 'group_',
-												requestBody: {
-													owner: managing_group
-												}
-											})
-											loadGroup()
-										}}>remove</button
-									>
-								{/if}</td
-							>
-						</tr>{/each}
-				</tbody>
-			</TableCustom>
-		{/if} -->
 	{:else}
 		<div class="flex flex-col">
 			{#each new Array(6) as _}
@@ -321,4 +266,4 @@ function getRole(x) {
 			{/each}
 		</div>
 	{/if}
-</div>
+</Section>

package/package/components/GroupInfo.svelte

@@ -12,7 +12,7 @@ async function loadMembers() {
 {#if members}
 	<Popover
 		><div class="inline-flex gap-1 items-end"
-			><span class="text-tertiary text-xs mb-0.5">({members.length})</span>
+			><span class="text-tertiary text-xs">({members.length})</span>
 			<div class="max-w-xs truncate"
 				><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
 			></div

package/package/components/InputTransformForm.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script>import { createEventDispatcher, getContext } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
@@ -28,6 +28,7 @@ export let enableAi = false;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
+const dispatch = createEventDispatcher();
 $: inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 const { shouldUpdatePropertyType, exprsToSet } = getContext('FlowCopilotContext') || {};
@@ -325,6 +326,9 @@ loadResourceTypes();
 							}}
 							bind:code={arg.value}
 							fontSize={14}
+							on:change={() => {
+								dispatch('change', { argName })
+							}}
 						/>
 					{/if}
 				</div>
@@ -338,11 +342,16 @@ loadResourceTypes();
 					on:blur={() => {
 						focused = false
 					}}
+					shouldDispatchChanges
+					on:change={() => {
+						dispatch('change', { argName })
+					}}
 					label={argName}
 					bind:editor={monaco}
 					bind:description={schema.properties[argName].description}
 					bind:value={arg.value}
 					type={schema.properties[argName].type}
+					oneOf={schema.properties[argName].oneOf}
 					required={schema.required.includes(argName)}
 					bind:pattern={schema.properties[argName].pattern}
 					bind:valid={inputCheck}
@@ -368,6 +377,9 @@ loadResourceTypes();
 					<SimpleEditor
 						bind:this={monaco}
 						bind:code={arg.expr}
+						on:change={() => {
+							dispatch('change', { argName })
+						}}
 						{extraLib}
 						lang="javascript"
 						shouldBindKey={false}
@@ -378,6 +390,9 @@ loadResourceTypes();
 								return false
 							})
 						}}
+						on:change={() => {
+							dispatch('change', { argName })
+						}}
 						on:blur={() => {
 							focused = false
 						}}

package/package/components/InputTransformForm.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
         enableAi?: boolean | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/InputTransformSchemaForm.svelte

@@ -1,6 +1,7 @@
 <script>import { VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
+import { createEventDispatcher } from 'svelte';
 import { Button } from './common';
 import StepInputsGen from './copilot/StepInputsGen.svelte';
 import InputTransformForm from './InputTransformForm.svelte';
@@ -19,6 +20,7 @@ export let enableAi = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
+const dispatch = createEventDispatcher();
 $: isValid = allTrue(inputCheck) ?? false;
 $: if (args == undefined || typeof args !== 'object') {
     args = {};
@@ -81,6 +83,10 @@ $: {
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
+						on:change={(e) => {
+							const { argName } = e.detail
+							dispatch('changeArg', { argName })
+						}}
 					/>
 				</div>
 			{/if}

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         setArgs?: ((nargs: Record<string, InputTransform | any>) => void) | undefined;
     };
     events: {
+        changeArg: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/InstanceSettings.svelte

@@ -156,7 +156,9 @@ async function sendStats() {
 }
 let clientName = '';
 let licenseKeyChanged = false;
+let renewing = false;
 export async function renewLicenseKey() {
+    renewing = true;
     try {
         await SettingService.renewLicenseKey();
         sendUserToast('Key renewal successful');
@@ -166,6 +168,20 @@ export async function renewLicenseKey() {
         latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
         throw err;
     }
+    finally {
+        renewing = false;
+    }
+}
+let opening = false;
+export async function openCustomerPortal() {
+    opening = true;
+    try {
+        const url = await SettingService.createCustomerPortalSession();
+        window.open(url, '_blank');
+    }
+    finally {
+        opening = false;
+    }
 }
 </script>
 
@@ -468,9 +484,6 @@ export async function renewLicenseKey() {
 													>
 														Test Key
 													</Button>
-													{#if $enterpriseLicense}
-														<Button on:click={renewLicenseKey} size="xs">Renew key</Button>
-													{/if}
 												</div>
 												<div class="mt-1 flex flex-col gap-1 items-start">
 													{#if values[setting.key]?.length > 0}
@@ -538,6 +551,26 @@ export async function renewLicenseKey() {
 															</span>
 														</div>
 													{/if}
+
+													{#if $enterpriseLicense}
+														<div class="flex flex-row gap-2 mt-1">
+															<Button
+																on:click={renewLicenseKey}
+																loading={renewing}
+																size="xs"
+																color="dark"
+																>Renew key
+															</Button>
+															<Button
+																color="dark"
+																size="xs"
+																loading={opening}
+																on:click={openCustomerPortal}
+															>
+																Open customer portal
+															</Button>
+														</div>
+													{/if}
 												</div>
 											{:else if setting.fieldType == 'email'}
 												<input

package/package/components/InstanceSettings.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         hideSave?: boolean | undefined;
         saveSettings?: (() => Promise<void>) | undefined;
         renewLicenseKey?: (() => Promise<void>) | undefined;
+        openCustomerPortal?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,5 +19,6 @@ export type InstanceSettingsSlots = typeof __propDef.slots;
 export default class InstanceSettings extends SvelteComponent<InstanceSettingsProps, InstanceSettingsEvents, InstanceSettingsSlots> {
     get saveSettings(): () => Promise<void>;
     get renewLicenseKey(): () => Promise<void>;
+    get openCustomerPortal(): () => Promise<void>;
 }
 export {};

package/package/components/JobStatus.svelte

@@ -13,12 +13,12 @@ export let job;
 		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
 			Success {job.is_skipped ? '(Skipped)' : ''}
 		</Badge>
-		<DurationMs duration_ms={job.duration_ms} />
+		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
 	</div>
 {:else if job && 'success' in job}
 	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
 		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
-		<DurationMs duration_ms={job.duration_ms} />
+		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
 	</div>
 {:else if job && 'running' in job && job.running}
 	<div>

package/package/components/LightweightArgInput.svelte

@@ -1,6 +1,6 @@
 <script>import { setInputCat as computeInputCat, emptyString } from '../utils';
-import { Badge, Button } from './common';
-import { createEventDispatcher } from 'svelte';
+import { Button } from './common';
+import { createEventDispatcher, tick } from 'svelte';
 import FieldHeader from './FieldHeader.svelte';
 import autosize from '../autosize';
 import Toggle from './Toggle.svelte';
@@ -16,6 +16,8 @@ import DateInput from './DateInput.svelte';
 import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
 import Multiselect from 'svelte-multiselect';
 import Password from './Password.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 export let css = undefined;
 export let label = '';
 export let value;
@@ -24,6 +26,7 @@ export let description = '';
 export let format = '';
 export let contentEncoding = undefined;
 export let type = undefined;
+export let oneOf = undefined;
 export let required = false;
 export let pattern = undefined;
 export let valid = required ? false : true;
@@ -38,6 +41,29 @@ export let customErrorMessage = undefined;
 export let render = true;
 export let title = undefined;
 export let placeholder = undefined;
+let oneOfSelected = undefined;
+async function updateOneOfSelected(oneOf) {
+    if (oneOf &&
+        oneOf.length >= 2 &&
+        (!oneOfSelected || !oneOf.some((o) => o.title === oneOfSelected))) {
+        if (value && value['label'] && oneOf.some((o) => o.title === value['label'])) {
+            const existingValue = JSON.parse(JSON.stringify(value));
+            oneOfSelected = value['label'];
+            await tick();
+            value = existingValue;
+        }
+        else {
+            oneOfSelected = oneOf[0]['title'];
+        }
+    }
+}
+$: updateOneOfSelected(oneOf);
+function updateOneOfSelectedValue(oneOfSelected) {
+    if (oneOfSelected) {
+        value = { label: oneOfSelected };
+    }
+}
+$: updateOneOfSelectedValue(oneOfSelected);
 const dispatch = createEventDispatcher();
 export let error = '';
 let el = undefined;
@@ -176,14 +202,7 @@ function onRenderFalse() {
 			<div class="flex space-x-1">
 				{#if inputCat == 'number'}
 					{#if extra['min'] != undefined && extra['max'] != undefined}
-						<div class="flex w-full gap-1">
-							<span>{extra['min']}</span>
-							<div class="grow">
-								<Range bind:value min={extra['min']} max={extra['max']} />
-							</div>
-							<span>{extra['max']}</span>
-							<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
-						</div>
+						<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} />
 					{:else if extra?.currency}
 						<CurrencyInput
 							inputClasses={{
@@ -218,9 +237,12 @@ function onRenderFalse() {
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
 						}}
-						class={valid && error == ''
-							? ''
-							: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
+						class={twMerge(
+							valid && error == ''
+								? ''
+								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30',
+							'w-full'
+						)}
 						bind:checked={value}
 					/>
 					{#if type == 'boolean' && value == undefined}
@@ -327,6 +349,36 @@ function onRenderFalse() {
 					</div>
 				{:else if inputCat == 'resource-object'}
 					<LightweightObjectResourceInput {format} bind:value />
+				{:else if inputCat == 'object' && oneOf && oneOf.length >= 2}
+					<div class="flex flex-col gap-2 w-full">
+						{#if oneOf && oneOf.length >= 2}
+							<ToggleButtonGroup bind:selected={oneOfSelected}>
+								{#each oneOf as obj}
+									<ToggleButton value={obj.title} label={obj.title} />
+								{/each}
+							</ToggleButtonGroup>
+
+							{#if oneOfSelected}
+								{@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)}
+								{@const obj = oneOf[objIdx]}
+								{#if obj && obj.properties && Object.keys(obj.properties).length > 0}
+									<div class="p-4 pl-8 border rounded w-full">
+										<LightweightSchemaForm
+											schema={{
+												properties: Object.fromEntries(
+													Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
+												),
+												$schema: '',
+												required: obj.required ?? [],
+												type: 'object'
+											}}
+											bind:args={value}
+										/>
+									</div>
+								{/if}
+							{/if}
+						{/if}
+					</div>
 				{:else if inputCat == 'object'}
 					{#if properties && Object.keys(properties).length > 0}
 						<div class="p-4 pl-8 border rounded w-full">
@@ -364,7 +416,7 @@ function onRenderFalse() {
 						bind:value
 					>
 						{#each enum_ ?? [] as e}
-							<option>{e}</option>
+							<option value={e}>{extra?.['enumLabels']?.[e] ?? e}</option>
 						{/each}
 					</select>
 				{:else if inputCat == 'date'}

package/package/components/LightweightArgInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SchemaProperty } from '../common';
+import type { EnumType, SchemaProperty } from '../common';
 import type { ComponentCustomCSS } from './apps/types';
 declare const __propDef: {
     props: {
@@ -11,10 +11,11 @@ declare const __propDef: {
         format?: string | undefined;
         contentEncoding?: 'base64' | 'binary' | undefined;
         type?: string | undefined;
+        oneOf?: SchemaProperty[] | undefined;
         required?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
-        enum_?: string[] | undefined;
+        enum_?: EnumType;
         itemsType?: {
             type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;

package/package/components/LightweightSchemaForm.svelte

@@ -1,6 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 import LightweightArgInput from './LightweightArgInput.svelte';
 import { allTrue, computeShow } from '../utils';
+import { deepEqual } from 'fast-equals';
 export let css = undefined;
 export let schema;
 export let args = undefined;
@@ -15,7 +16,6 @@ $: isValid = allTrue(inputCheck) ?? false;
 $: if (args === undefined) {
     args = {};
 }
-reorder();
 export function invalidate(key, error) {
     inputCheck[key] = false;
     errors[key] = error;
@@ -28,27 +28,35 @@ export function validateAll() {
     inputCheck = Object.fromEntries(Object.entries(inputCheck).map((x) => [x[0], true]));
     errors = Object.fromEntries(Object.entries(errors).map((x) => [x[0], '']));
 }
+let keys = Array.isArray(schema?.order)
+    ? schema?.order
+    : Object.keys(schema?.properties ?? {});
+$: schema && reorder();
 function reorder() {
-    console.log('reorder');
-    if (schema?.order && Array.isArray(schema.order)) {
-        const n = {};
-        schema.order.forEach((x) => {
-            if (schema.properties && schema.properties[x] != undefined) {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (!deepEqual(schema?.order, lkeys) || !deepEqual(keys, lkeys)) {
+        console.debug('reorder');
+        if (schema?.order && Array.isArray(schema.order)) {
+            const n = {};
+            schema.order.forEach((x) => {
+                if (schema.properties && schema.properties[x] != undefined) {
+                    n[x] = schema.properties[x];
+                }
+            });
+            Object.keys(schema.properties ?? {})
+                .filter((x) => !schema.order?.includes(x))
+                .forEach((x) => {
                 n[x] = schema.properties[x];
-            }
-        });
-        Object.keys(schema.properties ?? {})
-            .filter((x) => !schema.order?.includes(x))
-            .forEach((x) => {
-            n[x] = schema.properties[x];
-        });
-        schema.properties = n;
+            });
+            schema.properties = n;
+        }
+        keys = Object.keys(schema.properties ?? {});
     }
 }
 </script>
 
 <div class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}>
-	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
+	{#each keys as argName (argName)}
 		{#if typeof args == 'object' && schema?.properties[argName] && args}
 			<LightweightArgInput
 				render={computeShow(argName, schema?.properties[argName].showExpr, args)}
@@ -58,6 +66,7 @@ function reorder() {
 				bind:valid={inputCheck[argName]}
 				bind:error={errors[argName]}
 				type={schema.properties[argName].type}
+				oneOf={schema.properties[argName].oneOf}
 				required={schema.required?.includes(argName) ?? false}
 				pattern={schema.properties[argName].pattern}
 				defaultValue={defaultValues?.[argName] ?? schema.properties[argName].default}

package/package/components/ModulePreviewForm.svelte

@@ -65,6 +65,7 @@ loadResourceTypes();
 							description={schema.properties[argName].description}
 							bind:value={args[argName]}
 							type={schema.properties[argName].type}
+							oneOf={schema.properties[argName].oneOf}
 							required={schema.required.includes(argName)}
 							pattern={schema.properties[argName].pattern}
 							bind:editor={editor[argName]}