windmill-components 1.46.3 → 1.52.0

package/components/ObjectResourceInput.svelte

@@ -1,10 +1,13 @@
 <script>import { ResourceService } from '../gen';
+import { logout } from '../logout';
 import { workspaceStore } from '../stores';
-import RadioButton from './RadioButton.svelte';
+import { ToggleButton, ToggleButtonGroup } from './common';
 import ResourcePicker from './ResourcePicker.svelte';
 import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let format;
 export let value;
+export let compact;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -17,7 +20,15 @@ let option = isString(value) || value == undefined ? 'resource' : 'raw';
 $: format.startsWith('resource-') && loadSchema(format);
 async function loadSchema(format) {
     resourceTypeName = format.substring('resource-'.length);
-    schema = (await ResourceService.getResourceType({ workspace: $workspaceStore, path: resourceTypeName })).schema;
+    try {
+        schema = (await ResourceService.getResourceType({
+            workspace: $workspaceStore,
+            path: resourceTypeName
+        })).schema;
+    }
+    catch (e) {
+        schema = undefined;
+    }
 }
 function argToValue() {
     value = args;
@@ -42,18 +53,23 @@ function valueToPath() {
 $: value && valueToPath();
 </script>
 
-<div class="flex flex-row w-full flex-wrap gap-x-2">
-	<div class="shrink">
-		<RadioButton
-			options={[
-				[`Resource (${resourceTypeName})`, 'resource'],
-				[`Raw object value`, 'raw']
-			]}
-			on:change={argToValue}
-			bind:value={option}
-		/>
-	</div>
-	<div class="grow">
+<div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
+	<ToggleButtonGroup
+		col
+		bind:selected={option}
+		on:selected={(e) => {
+			if (e.detail === 'resource') {
+				resourceToValue()
+			} else {
+				argToValue()
+			}
+		}}
+	>
+		<ToggleButton light position="center" value="resource" size="xs">Resource</ToggleButton>
+		<ToggleButton light position="center" value="raw" size="xs">Raw</ToggleButton>
+	</ToggleButtonGroup>
+
+	<div class="grow flex items-center">
 		{#if option == 'resource'}
 			<ResourcePicker
 				on:refresh={() => loadSchema(format)}
@@ -67,13 +83,13 @@ $: value && valueToPath();
 					: undefined}
 			/>
 		{:else}
-			<div class="border rounded p-5 w-full">
-				<h2 class="mb-5">
-					Object of <a target="_blank" href="/resources">resource type</a>
-					{resourceTypeName}
-				</h2>
-				{#if !isString(args)}
-					<SchemaForm {schema} bind:isValid bind:args />
+			<div class="border rounded p-2 w-full">
+				{#if schema != undefined}
+					{#if !isString(args)}
+						<SchemaForm {compact} {schema} bind:isValid bind:args />
+					{/if}
+				{:else}
+					<SimpleEditor autoHeight lang="json" bind:value={args} />
 				{/if}
 			</div>
 		{/if}

package/components/ObjectResourceInput.svelte.d.ts

@@ -3,15 +3,16 @@ declare const __propDef: {
     props: {
         format: string;
         value: any;
+        compact: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ObjectResourceInputProps = typeof __propDef.props;
-export declare type ObjectResourceInputEvents = typeof __propDef.events;
-export declare type ObjectResourceInputSlots = typeof __propDef.slots;
+export type ObjectResourceInputProps = typeof __propDef.props;
+export type ObjectResourceInputEvents = typeof __propDef.events;
+export type ObjectResourceInputSlots = typeof __propDef.slots;
 export default class ObjectResourceInput extends SvelteComponentTyped<ObjectResourceInputProps, ObjectResourceInputEvents, ObjectResourceInputSlots> {
 }
 export {};

package/components/ObjectTypeNarrowing.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ObjectTypeNarrowingProps = typeof __propDef.props;
-export declare type ObjectTypeNarrowingEvents = typeof __propDef.events;
-export declare type ObjectTypeNarrowingSlots = typeof __propDef.slots;
+export type ObjectTypeNarrowingProps = typeof __propDef.props;
+export type ObjectTypeNarrowingEvents = typeof __propDef.events;
+export type ObjectTypeNarrowingSlots = typeof __propDef.slots;
 export default class ObjectTypeNarrowing extends SvelteComponentTyped<ObjectTypeNarrowingProps, ObjectTypeNarrowingEvents, ObjectTypeNarrowingSlots> {
 }
 export {};

package/components/PageHeader.svelte

@@ -7,14 +7,14 @@ export let primary = true;
 <div class="flex flex-row flex-wrap justify-between mt-4 mb-2 min-h-[48px]">
 	{#if primary}
 		<span class="flex items-center space-x-2">
-			<h1 class="mr-0.5">{title}</h1>
+			<h1>{title}</h1>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}
 		<span class="flex items-center space-x-2">
-			<h2 class="mr-0.5">{title}</h2>
+			<h2>{title}</h2>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}

package/components/PageHeader.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PageHeaderProps = typeof __propDef.props;
-export declare type PageHeaderEvents = typeof __propDef.events;
-export declare type PageHeaderSlots = typeof __propDef.slots;
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
 export default class PageHeader extends SvelteComponentTyped<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
 }
 export {};

package/components/Password.svelte

@@ -1,8 +1,8 @@
 <script>// @ts-nocheck
 import { onMount } from 'svelte';
 export let password;
-export let label = 'password';
 export let placeholder = '******';
+export let disabled = false;
 onMount(() => {
     const passwordToggle = document.querySelector('.js-password-toggle');
     if (passwordToggle) {
@@ -25,7 +25,6 @@ onMount(() => {
 });
 </script>
 
-<label class="block text-gray-700" for="password"> {@html label} </label>
 <div class="relative w-full">
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
 		<input class="hidden js-password-toggle" id="toggle" type="checkbox" />
@@ -41,5 +40,6 @@ onMount(() => {
 		bind:value={password}
 		autocomplete="off"
 		{placeholder}
+		{disabled}
 	/>
 </div>

package/components/Password.svelte.d.ts

@@ -2,17 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         password: string;
-        label?: string | undefined;
         placeholder?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type PasswordProps = typeof __propDef.props;
-export declare type PasswordEvents = typeof __propDef.events;
-export declare type PasswordSlots = typeof __propDef.slots;
+export type PasswordProps = typeof __propDef.props;
+export type PasswordEvents = typeof __propDef.events;
+export type PasswordSlots = typeof __propDef.slots;
 export default class Password extends SvelteComponentTyped<PasswordProps, PasswordEvents, PasswordSlots> {
 }
 export {};

package/components/Path.svelte

@@ -15,6 +15,7 @@ export let namePlaceholder = '';
 export let initialPath;
 export let path = '';
 export let error = '';
+export let disabled = false;
 export let kind;
 let inputP = undefined;
 const dispatch = createEventDispatcher();
@@ -154,6 +155,7 @@ $: {
 			</span>
 
 			<select
+				{disabled}
 				bind:value={meta.ownerKind}
 				on:change={() => {
 					if (meta.ownerKind === 'group') {
@@ -180,7 +182,7 @@ $: {
 		{:else}
 			<label class="block">
 				<span class="text-gray-700 text-sm">Owner</span>
-				<select bind:value={meta.owner}>
+				<select {disabled} bind:value={meta.owner}>
 					{#each groups as g}
 						<option>{g.name}</option>
 					{/each}
@@ -193,6 +195,7 @@ $: {
 				<Required required={true} />
 			</span>
 			<input
+				{disabled}
 				type="text"
 				id="path"
 				autofocus

package/components/Path.svelte.d.ts

@@ -7,7 +7,8 @@ declare const __propDef: {
         initialPath: string;
         path?: string | undefined;
         error?: string | undefined;
-        kind: "script" | "resource" | "schedule" | "variable" | "flow";
+        disabled?: boolean | undefined;
+        kind: "script" | "resource" | "flow" | "app" | "schedule" | "variable";
         getPath?: (() => string) | undefined;
         focus?: (() => void) | undefined;
         reset?: (() => Promise<void>) | undefined;
@@ -19,9 +20,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PathProps = typeof __propDef.props;
-export declare type PathEvents = typeof __propDef.events;
-export declare type PathSlots = typeof __propDef.slots;
+export type PathProps = typeof __propDef.props;
+export type PathEvents = typeof __propDef.events;
+export type PathSlots = typeof __propDef.slots;
 export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
     get getPath(): () => string;
     get focus(): () => void;

package/components/Popover.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
         text: {};
     };
 };
-export declare type PopoverProps = typeof __propDef.props;
-export declare type PopoverEvents = typeof __propDef.events;
-export declare type PopoverSlots = typeof __propDef.slots;
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
 export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
 }
 export {};

package/components/RadioButton.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RadioButtonProps = typeof __propDef.props;
-export declare type RadioButtonEvents = typeof __propDef.events;
-export declare type RadioButtonSlots = typeof __propDef.slots;
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
 export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }
 export {};

package/components/Required.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RequiredProps = typeof __propDef.props;
-export declare type RequiredEvents = typeof __propDef.events;
-export declare type RequiredSlots = typeof __propDef.slots;
+export type RequiredProps = typeof __propDef.props;
+export type RequiredEvents = typeof __propDef.events;
+export type RequiredSlots = typeof __propDef.slots;
 export default class Required extends SvelteComponentTyped<RequiredProps, RequiredEvents, RequiredSlots> {
 }
 export {};

package/components/ResourceEditor.svelte

@@ -1,20 +1,18 @@
 <script>import { ResourceService, VariableService } from '../gen';
-import { allTrue, emptySchema, sendUserToast } from '../utils';
+import { canWrite, sendUserToast } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Path from './Path.svelte';
-import ArgInput from './ArgInput.svelte';
-import ItemPicker from './ItemPicker.svelte';
-import VariableEditor from './VariableEditor.svelte';
 import Required from './Required.svelte';
-import { Button, Drawer } from './common';
-import { workspaceStore } from '../stores';
-import ResourceTypePicker from './ResourceTypePicker.svelte';
+import { Alert, Button, Drawer } from './common';
+import { userStore, workspaceStore } from '../stores';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import autosize from 'svelte-autosize';
+import SimpleEditor from './SimpleEditor.svelte';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import SchemaForm from './SchemaForm.svelte';
 let path = '';
 let initialPath = '';
 let pathError = '';
-let step = 1;
 let resourceToEdit;
 let description = '';
 let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description`;
@@ -22,46 +20,36 @@ let selectedResourceType;
 let resourceType;
 let resourceSchema;
 let args = {};
+let can_write = true;
 let error;
-let pickForField;
-let itemPicker;
-let variableEditor;
 let drawer;
+let rawCode = undefined;
 const dispatch = createEventDispatcher();
-export async function initNew(rt) {
-    step = 1;
-    args = {};
-    path = '';
-    description = '';
-    initialPath = '';
-    resourceSchema = emptySchema();
-    resourceToEdit = undefined;
-    selectedResourceType = rt;
-    drawer.openDrawer();
-}
 export async function initEdit(p) {
     initialPath = p;
     path = p;
-    step = 2;
     resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
     description = resourceToEdit.description ?? '';
     selectedResourceType = resourceToEdit.resource_type;
-    await loadResourceType();
     args = resourceToEdit.value;
-    drawer.openDrawer();
-}
-async function createResource() {
-    await ResourceService.createResource({
-        workspace: $workspaceStore,
-        requestBody: { path, value: args, description, resource_type: resourceType.name }
-    });
-    sendUserToast(`Successfully created resource at ${path}`);
-    dispatch('refresh');
-    drawer.closeDrawer();
+    can_write =
+        resourceToEdit.workspace_id == $workspaceStore &&
+            canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
+    await loadResourceType();
+    drawer.openDrawer?.();
 }
 async function editResource() {
     try {
         if (resourceToEdit) {
+            if (rawCode != undefined) {
+                try {
+                    args = JSON.parse(rawCode);
+                }
+                catch (e) {
+                    sendUserToast("Couldn't parse the content as JSON", true);
+                    return;
+                }
+            }
             await ResourceService.updateResource({
                 workspace: $workspaceStore,
                 path: resourceToEdit.path,
@@ -69,7 +57,7 @@ async function editResource() {
             });
             sendUserToast(`Successfully updated resource at ${path}`);
             dispatch('refresh');
-            drawer.closeDrawer();
+            drawer.closeDrawer?.();
         }
         else {
             throw Error('Cannot edit undefined resourceToEdit');
@@ -81,23 +69,25 @@ async function editResource() {
 }
 async function loadResourceType() {
     if (selectedResourceType) {
-        resourceType = await ResourceService.getResourceType({
-            workspace: $workspaceStore,
-            path: selectedResourceType
-        });
-        if (resourceType.schema) {
-            resourceSchema = resourceType.schema;
+        try {
+            resourceType = await ResourceService.getResourceType({
+                workspace: $workspaceStore,
+                path: selectedResourceType
+            });
+            if (resourceType.schema) {
+                resourceSchema = resourceType.schema;
+            }
+        }
+        catch (err) {
+            resourceSchema = undefined;
+            rawCode = JSON.stringify(args, null, 2);
         }
     }
     else {
         sendUserToast(`ResourceType cannot be undefined.`, true);
     }
 }
-function resourceAction() {
-    return resourceToEdit ? editResource() : createResource();
-}
-let inputCheck = {};
-$: isValid = allTrue(inputCheck) ?? false;
+let isValid = true;
 </script>
 
 <Drawer bind:this={drawer} size="800px">
@@ -106,131 +96,51 @@ $: isValid = allTrue(inputCheck) ?? false;
 		on:close={drawer.closeDrawer}
 	>
 		<div>
-			<!-- content -->
-			{#if step === 1}
-				<div class="flex flex-col gap-3 py-3  text-gray-700">
-					<div>
-						<span class="text-red-600 text-2xs grow">{error ?? ''}</span>
-						<span class="mb-1 font-semibold text-gray-700">Path</span>
-						<Path
-							bind:error={pathError}
-							bind:path
-							{initialPath}
-							namePlaceholder="my_resource"
-							kind="resource"
-						/>
-					</div>
-					<span class=" mt-3 font-semibold text-gray-700 "
-						>Description <Required required={false} />
-					</span>
-					<textarea
-						type="text"
-						use:autosize
-						bind:value={description}
-						placeholder={DESCRIPTION_PLACEHOLDER}
-					/>
-					<div>
-						<div class="mb-2 font-semibold text-gray-700">
-							Resource type<Required required={true} />
+			<div class="flex flex-col gap-3 py-3  text-gray-700">
+				<div>
+					{#if !can_write}
+						<div class="m-2">
+							<Alert type="warning" title="Only read access"
+								>You only have read access to this resource and cannot edit it</Alert
+							>
 						</div>
-						<ResourceTypePicker
-							bind:value={selectedResourceType}
-							notPickable={resourceToEdit != undefined}
-							on:click={() => {
-								args = {}
-							}}
-						/>
-					</div>
+					{/if}
+
+					<span class="text-red-600 text-2xs grow">{error ?? ''}</span>
+					<Path
+						disabled={!can_write}
+						bind:error={pathError}
+						bind:path
+						{initialPath}
+						namePlaceholder="my_resource"
+						kind="resource"
+					/>
 				</div>
-			{:else}
+				<h3>Description <Required required={false} /> </h3>
+				<textarea
+					type="text"
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
+
+				<h3 class="mt-4">Value</h3>
 				<div class="text-sm">
 					{#if resourceSchema && resourceSchema?.properties}
-						{#each Object.keys(resourceSchema.properties) as fieldName}
-							<div class="flex flex-row w-full items-end justify-between">
-								<ArgInput
-									label={fieldName}
-									description={resourceSchema.properties[fieldName]?.description}
-									bind:value={args[fieldName]}
-									type={resourceSchema.properties[fieldName]?.type}
-									required={resourceSchema.required.includes(fieldName)}
-									pattern={resourceSchema.properties[fieldName]?.pattern}
-									bind:valid={inputCheck[fieldName]}
-									defaultValue={resourceSchema.properties[fieldName]?.default}
-									enum_={resourceSchema.properties[fieldName]?.enum}
-									contentEncoding={resourceSchema.properties[fieldName]?.contentEncoding}
-									itemsType={resourceSchema.properties[fieldName]?.items}
-									properties={resourceSchema.properties[fieldName]?.properties}
-									format={resourceSchema.properties[fieldName]?.format}
-								/>
-								<div class="pb-6 ml-2 relative">
-									<Button
-										variant="border"
-										color="blue"
-										size="sm"
-										btnClasses="min-w-min items-center leading-4 py-0"
-										on:click={() => {
-											pickForField = fieldName
-											itemPicker.openDrawer()
-										}}>Insert variable</Button
-									>
-								</div>
-							</div>
-						{/each}
+						<SchemaForm compact schema={resourceSchema} bind:args bind:isValid />
 					{:else}
-						<div>Invalid schema</div>
+						<div class="h-full w-full">
+							<SimpleEditor class="editor" lang="json" bind:code={rawCode} />
+						</div>
 					{/if}
 				</div>
-			{/if}
+			</div>
 		</div>
-		<span slot="submission" class="flex gap-4">
-			{#if step === 1}
-				<Button
-					on:click={async () => {
-						await loadResourceType()
-						step = 2
-					}}
-					disabled={selectedResourceType == undefined || pathError != ''}
-				>
-					Next
-				</Button>
-			{:else}
-				<Button variant="border" on:click={() => (step = 1)}>Back</Button>
-				<Button on:click={resourceAction} disabled={!isValid}>Save</Button>
-			{/if}
+		<span slot="submission" class="flex gap-4 mr-2">
+			<Button startIcon={{ icon: faSave }} on:click={editResource} disabled={!can_write || !isValid}
+				>Save</Button
+			>
 		</span>
 	</DrawerContent>
 </Drawer>
-
-<ItemPicker
-	bind:this={itemPicker}
-	pickCallback={(path, _) => {
-		if (pickForField) {
-			args[pickForField] = '$var:' + path
-		}
-	}}
-	itemName="Variable"
-	extraField="name"
-	loadItems={async () =>
-		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
-			name: x.path,
-			...x
-		}))}
->
-	<div
-		slot="submission"
-		class="flex flex-row-reverse w-full p-5 bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
-	>
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			on:click={() => {
-				variableEditor.initNew()
-			}}
-		>
-			Create a new variable
-		</Button>
-	</div>
-</ItemPicker>
-
-<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />

package/components/ResourceEditor.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        initNew?: ((rt?: string) => Promise<void>) | undefined;
         initEdit?: ((p: string) => Promise<void>) | undefined;
     };
     events: {
@@ -11,11 +10,10 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ResourceEditorProps = typeof __propDef.props;
-export declare type ResourceEditorEvents = typeof __propDef.events;
-export declare type ResourceEditorSlots = typeof __propDef.slots;
+export type ResourceEditorProps = typeof __propDef.props;
+export type ResourceEditorEvents = typeof __propDef.events;
+export type ResourceEditorSlots = typeof __propDef.slots;
 export default class ResourceEditor extends SvelteComponentTyped<ResourceEditorProps, ResourceEditorEvents, ResourceEditorSlots> {
-    get initNew(): (rt?: string | undefined) => Promise<void>;
     get initEdit(): (p: string) => Promise<void>;
 }
 export {};