windmill-components 1.46.3 → 1.55.0

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

@@ -1,7 +1,7 @@
 <script>import { pathToMeta } from '../common';
 import { FlowService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
 import { GroupService } from '../gen';
-import { userStore, workspaceStore } from '../stores';
+import { superadmin, userStore, workspaceStore } from '../stores';
 import { sleep } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Required from './Required.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') {
@@ -174,13 +176,13 @@ $: {
 					type="text"
 					bind:value={meta.owner}
 					placeholder={$userStore?.username ?? ''}
-					disabled={!($userStore?.is_admin ?? false)}
+					disabled={!($superadmin || ($userStore?.is_admin ?? false))}
 				/>
 			</label>
 		{: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: "flow" | "script" | "resource" | "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

@@ -1,4 +1,5 @@
 <script>import { createPopperActions } from 'svelte-popperjs';
+export let notClickable = false;
 const [popperRef, popperContent] = createPopperActions({
     placement: 'auto'
 });
@@ -33,7 +34,12 @@ function close() {
 }
 </script>
 
-<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
+<button
+	class:cursor-default={notClickable}
+	use:popperRef
+	on:mouseenter={open}
+	on:mouseleave={close}
+>
 	<slot />
 </button>
 {#if showTooltip}

package/components/Popover.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        notClickable?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -9,9 +11,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,63 +1,43 @@
 <script>import { ResourceService, VariableService } from '../gen';
-import { allTrue, emptySchema, sendUserToast } from '../utils';
+import { canWrite, emptyString, 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, Skeleton } 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`;
+let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`;
 let selectedResourceType;
-let resourceType;
 let resourceSchema;
 let args = {};
-let error;
-let pickForField;
-let itemPicker;
-let variableEditor;
+let can_write = true;
+let loadingSchema = false;
 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 = undefined;
+    resourceSchema = undefined;
+    loadingSchema = true;
+    drawer.openDrawer?.();
     resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
     description = resourceToEdit.description ?? '';
     selectedResourceType = resourceToEdit.resource_type;
-    await loadResourceType();
+    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);
 }
 async function editResource() {
     try {
@@ -67,9 +47,9 @@ async function editResource() {
                 path: resourceToEdit.path,
                 requestBody: { path, value: args, description }
             });
-            sendUserToast(`Successfully updated resource at ${path}`);
+            sendUserToast(`Updated resource at ${path}`);
             dispatch('refresh');
-            drawer.closeDrawer();
+            drawer.closeDrawer?.();
         }
         else {
             throw Error('Cannot edit undefined resourceToEdit');
@@ -81,23 +61,38 @@ async function editResource() {
 }
 async function loadResourceType() {
     if (selectedResourceType) {
-        resourceType = await ResourceService.getResourceType({
-            workspace: $workspaceStore,
-            path: selectedResourceType
-        });
-        if (resourceType.schema) {
-            resourceSchema = resourceType.schema;
+        try {
+            const resourceType = await ResourceService.getResourceType({
+                workspace: $workspaceStore,
+                path: selectedResourceType
+            });
+            if (resourceType.schema) {
+                resourceSchema = resourceType.schema;
+            }
+        }
+        catch (err) {
+            resourceSchema = undefined;
+            loadingSchema = false;
+            rawCode = JSON.stringify(args, null, 2);
         }
     }
     else {
         sendUserToast(`ResourceType cannot be undefined.`, true);
     }
+    loadingSchema = false;
 }
-function resourceAction() {
-    return resourceToEdit ? editResource() : createResource();
+let isValid = true;
+let jsonError = '';
+$: rawCode && parseJson();
+function parseJson() {
+    try {
+        args = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
 }
-let inputCheck = {};
-$: isValid = allTrue(inputCheck) ?? false;
 </script>
 
 <Drawer bind:this={drawer} size="800px">
@@ -106,131 +101,74 @@ $: 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}
+					<Path
+						disabled={!can_write}
+						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}
+					{#if loadingSchema}
+						<Skeleton layout={[[4]]} />
+					{:else if resourceSchema && resourceSchema?.properties}
+						<SchemaForm
+							disabled={!can_write}
+							compact
+							schema={resourceSchema}
+							bind:args
+							bind:isValid
+						/>
+					{:else if !can_write}
+						<input type="text" disabled value={rawCode} />
 					{:else}
-						<div>Invalid schema</div>
+						<p class="italic text-gray-500 text-xs mb-4"
+							>No corresponding resource type found in your workspace for {selectedResourceType}.
+							Define the value in JSON directly</p
+						>
+						{#if !emptyString(jsonError)}<span
+								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
+							>{:else}<div class="py-2" />{/if}
+						<div class="h-full w-full">
+							<SimpleEditor
+								class="editor"
+								lang="json"
+								bind:code={rawCode}
+								fixedOverflowWidgets={false}
+							/>
+						</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>
+		<svelte:fragment slot="actions">
+			<Button
+				startIcon={{ icon: faSave }}
+				on:click={editResource}
+				disabled={!can_write || !isValid || jsonError != ''}
+			>
+				Save
+			</Button>
+		</svelte:fragment>
 	</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 {};

package/components/ResourcePicker.svelte

@@ -1,13 +1,17 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
+import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { Button } from './common';
+import Select from 'svelte-select';
+import AppConnect from './AppConnect.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
 const dispatch = createEventDispatcher();
 let resources = [];
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
-let resourceEditor;
 async function loadResources(resourceType) {
     const v = value;
     resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
@@ -19,38 +23,47 @@ $: {
     }
 }
 $: dispatch('change', value);
+$: collection = resources.map((x) => ({
+    value: x.path,
+    label: `${x.path}${x.description ? ' | ' + x.description : ''}`
+}));
+let appConnect;
+let resourceEditor;
 </script>
 
+<AppConnect
+	on:refresh={async (e) => {
+		await loadResources(resourceType)
+		value = e.detail
+	}}
+	newPageOAuth
+	bind:this={appConnect}
+/>
+
 <ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
-<select bind:value placeholder="Pick a resource {resourceType}">
-	<option value={undefined} />
-	{#each resources as r}
-		<option value={r.path}>{r.path}{r.description ? ' | ' + r.description : ''}</option>
-	{/each}
-</select>
-<div class="flex flex-row gap-2">
-	<a
-		class="text-xs hover:underline"
-		rel="noreferrer"
-		target="_blank"
-		href="/resources?connect_app={resourceType}">Connect {resourceType} with OAuth</a
+
+<div class="flex flex-row gap-x-1 w-full">
+	<Select
+		value={collection.find((x) => x.value == value)}
+		bind:justValue={value}
+		items={collection}
+		class="text-clip grow min-w-0"
+		placeholder="Pick a {resourceType} resource"
+	/>
+	{#if value && value != ''}
+		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>
+			<Icon scale={0.8} data={faPen} /></Button
+		>
+	{/if}
+
+	<Button variant="border" size="xs" on:click={() => appConnect?.open?.(resourceType)}>
+		<Icon scale={0.8} data={faPlus} /></Button
 	>
-	<button
-		class="text-xs text-blue-500 font-normal"
-		type="button"
+	<Button
+		variant="border"
+		size="xs"
 		on:click={() => {
 			loadResources(resourceType)
-		}}
-	>
-		refresh
-	</button>
-	<button
-		class="text-xs text-blue-500 font-normal"
-		type="button"
-		on:click={() => {
-			resourceEditor.initNew(resourceType)
-		}}
+		}}><Icon scale={0.8} data={faRotateRight} /></Button
 	>
-		+Create a new {resourceType}
-	</button>
 </div>

package/components/ResourcePicker.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ResourcePickerProps = typeof __propDef.props;
-export declare type ResourcePickerEvents = typeof __propDef.events;
-export declare type ResourcePickerSlots = typeof __propDef.slots;
+export type ResourcePickerProps = typeof __propDef.props;
+export type ResourcePickerEvents = typeof __propDef.events;
+export type ResourcePickerSlots = typeof __propDef.slots;
 export default class ResourcePicker extends SvelteComponentTyped<ResourcePickerProps, ResourcePickerEvents, ResourcePickerSlots> {
 }
 export {};

package/components/ResourceTypePicker.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ResourceTypePickerProps = typeof __propDef.props;
-export declare type ResourceTypePickerEvents = typeof __propDef.events;
-export declare type ResourceTypePickerSlots = typeof __propDef.slots;
+export type ResourceTypePickerProps = typeof __propDef.props;
+export type ResourceTypePickerEvents = typeof __propDef.events;
+export type ResourceTypePickerSlots = typeof __propDef.slots;
 export default class ResourceTypePicker extends SvelteComponentTyped<ResourceTypePickerProps, ResourceTypePickerEvents, ResourceTypePickerSlots> {
 }
 export {};

package/components/RunChart.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RunChartProps = typeof __propDef.props;
-export declare type RunChartEvents = typeof __propDef.events;
-export declare type RunChartSlots = typeof __propDef.slots;
+export type RunChartProps = typeof __propDef.props;
+export type RunChartEvents = typeof __propDef.events;
+export type RunChartSlots = typeof __propDef.slots;
 export default class RunChart extends SvelteComponentTyped<RunChartProps, RunChartEvents, RunChartSlots> {
 }
 export {};