windmill-components 1.339.2 → 1.352.1

package/package/components/ResourceEditor.svelte

@@ -1,58 +1,66 @@
 <script>import { ResourceService } from '../gen';
 import { canWrite, emptyString, isOwner, urlize } from '../utils';
 import { createEventDispatcher } from 'svelte';
-import { Alert, Button, Drawer, Skeleton } from './common';
+import { Alert, Skeleton } from './common';
 import Path from './Path.svelte';
 import Required from './Required.svelte';
 import { userStore, workspaceStore } from '../stores';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
-import { Pen, Save } from 'lucide-svelte';
+import { Pen } from 'lucide-svelte';
 import Markdown from 'svelte-exmarkdown';
 import autosize from '../autosize';
 import GfmMarkdown from './GfmMarkdown.svelte';
-let path = '';
-let initialPath = '';
-let resourceToEdit;
+export let canSave = true;
+export let resource_type = undefined;
+export let path = '';
+export let newResource = false;
+export let hidePath = false;
+let isValid = true;
+let jsonError = '';
+let can_write = true;
+$: canSave = can_write && isValid && jsonError == '';
+let initialPath = path;
+let resourceToEdit = undefined;
 let description = '';
 let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`;
-let selectedResourceType;
-let resourceSchema;
+let resourceSchema = undefined;
 let args = {};
-let can_write = true;
-let loadingSchema = false;
+let loadingSchema = true;
 let linkedVars = [];
-let drawer;
 let resourceTypeInfo = undefined;
-let renderDescription = true;
+let editDescription = false;
+let viewJsonSchema = false;
 let rawCode = undefined;
 const dispatch = createEventDispatcher();
-export async function initEdit(p) {
-    initialPath = p;
-    path = p;
-    resourceToEdit = undefined;
-    resourceSchema = undefined;
-    viewJsonSchema = false;
-    loadingSchema = true;
-    drawer.openDrawer?.();
-    resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
+async function initEdit() {
+    resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path });
     description = resourceToEdit.description ?? '';
-    selectedResourceType = resourceToEdit.resource_type;
+    resource_type = resourceToEdit.resource_type;
+    args = resourceToEdit?.value ?? {};
     loadResourceType();
-    args = resourceToEdit.value;
     can_write =
         resourceToEdit.workspace_id == $workspaceStore &&
-            canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
+            canWrite(path, resourceToEdit.extra_perms ?? {}, $userStore);
     linkedVars = Object.entries(args)
         .filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
         .map(([k, _]) => k);
-    renderDescription = false;
 }
-async function editResource() {
+if (!newResource) {
+    initEdit();
+}
+else if (resource_type) {
+    loadResourceType();
+}
+else {
+    sendUserToast('Resource type cannot be undefined for new resource creation', true);
+}
+$: rawCode && parseJson();
+$: linkedVars.length > 0 && path && updateArgsFromLinkedVars();
+export async function editResource() {
     if (resourceToEdit) {
         await ResourceService.updateResource({
             workspace: $workspaceStore,
@@ -61,18 +69,25 @@ async function editResource() {
         });
         sendUserToast(`Updated resource at ${path}`);
         dispatch('refresh', path);
-        drawer.closeDrawer?.();
     }
     else {
         throw Error('Cannot edit undefined resourceToEdit');
     }
 }
+export async function createResource() {
+    await ResourceService.createResource({
+        workspace: $workspaceStore,
+        requestBody: { path, value: args, description, resource_type: resource_type }
+    });
+    sendUserToast(`Updated resource at ${path}`);
+    dispatch('refresh', path);
+}
 async function loadResourceType() {
-    if (selectedResourceType) {
+    if (resource_type) {
         try {
             const resourceType = await ResourceService.getResourceType({
                 workspace: $workspaceStore,
-                path: selectedResourceType
+                path: resource_type
             });
             resourceTypeInfo = resourceType;
             if (resourceType.schema) {
@@ -90,9 +105,6 @@ async function loadResourceType() {
     }
     loadingSchema = false;
 }
-let isValid = true;
-let jsonError = '';
-$: rawCode && parseJson();
 function parseJson() {
     try {
         args = JSON.parse(rawCode ?? '');
@@ -102,13 +114,11 @@ function parseJson() {
         jsonError = e.message;
     }
 }
-$: linkedVars.length > 0 && path && updateArgsFromLinkedVars();
 function updateArgsFromLinkedVars() {
     linkedVars.forEach((k) => {
         args[k] = `$var:${path}`;
     });
 }
-let viewJsonSchema = false;
 function switchTab(asJson) {
     viewJsonSchema = asJson;
     if (asJson) {
@@ -120,118 +130,105 @@ function switchTab(asJson) {
 }
 </script>
 
-<Drawer bind:this={drawer} size="800px">
-	<DrawerContent
-		title={resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}
-		on:close={drawer.closeDrawer}
-	>
-		<div>
-			<div class="flex flex-col gap-3 py-3">
-				<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>
-					{/if}
-					<Path
-						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
-						bind:path
-						{initialPath}
-						namePlaceholder="resource"
-						kind="resource"
-					/>
-				</div>
-				{#if !emptyString(resourceTypeInfo?.description)}
-					<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
-					<div class="text-sm">
-						<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+<div>
+	<div class="flex flex-col gap-3 py-3">
+		{#if !hidePath}
+			<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>
 				{/if}
-				<h4 class="mt-4 inline-flex items-center gap-4"
-					>Resource description <Required required={false} />
-					{#if can_write}
-						<div class="flex gap-1 items-center">
-							<Toggle size="xs" bind:checked={renderDescription} />
-							<Pen size={14} />
-						</div>
-					{/if}</h4
-				>
+				<Path
+					disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+					bind:path
+					{initialPath}
+					namePlaceholder="resource"
+					kind="resource"
+				/>
+			</div>
+		{/if}
 
-				{#if can_write && renderDescription}
-					<div>
-						<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-						<textarea
-							disabled={!can_write}
-							use:autosize
-							bind:value={description}
-							placeholder={DESCRIPTION_PLACEHOLDER}
-						/>
-					</div>
-				{:else if description == undefined || description == ''}
-					<div class="text-sm text-tertiary">No description provided</div>
-				{:else}
-					<div class="mt-2" />
+		{#if !emptyString(resourceTypeInfo?.description)}
+			<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
+			<div class="text-sm">
+				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+			</div>
+		{/if}
+		<h4 class="mt-4 inline-flex items-center gap-4"
+			>Resource description <Required required={false} />
+			{#if can_write}
+				<div class="flex gap-1 items-center">
+					<Toggle size="xs" bind:checked={editDescription} />
+					<Pen size={14} />
+				</div>
+			{/if}</h4
+		>
 
-					<GfmMarkdown md={description} />
+		{#if can_write && editDescription}
+			<div>
+				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
+				<textarea
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
+			</div>
+		{:else if description == undefined || description == ''}
+			<div class="text-sm text-tertiary">No description provided</div>
+		{:else}
+			<div class="mt-2" />
+
+			<GfmMarkdown md={description} />
+		{/if}
+		<div class="flex w-full justify-between max-w-lg items-center mt-4">
+			<Toggle
+				on:change={(e) => switchTab(e.detail)}
+				options={{
+					right: 'As JSON'
+				}}
+			/>
+			<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+		</div>
+		<div class="text-sm">
+			{#if loadingSchema}
+				<Skeleton layout={[[4]]} />
+			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+				<SchemaForm
+					onlyMaskPassword
+					noDelete
+					disabled={!can_write}
+					compact
+					schema={resourceSchema}
+					bind:args
+					bind:isValid
+				/>
+			{:else if !can_write}
+				<input type="text" disabled value={rawCode} />
+			{:else}
+				{#if !viewJsonSchema}
+					<p class="italic text-secondary text-xs mb-4">
+						No corresponding resource type found in your workspace for {resource_type}. Define the
+						value in JSON directly
+					</p>
 				{/if}
-				<div class="flex w-full justify-between max-w-lg items-center mt-4">
-					<Toggle
-						on:change={(e) => switchTab(e.detail)}
-						options={{
-							right: 'As JSON'
-						}}
-					/>
-					<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
-				</div>
-				<div class="text-sm">
-					{#if loadingSchema}
-						<Skeleton layout={[[4]]} />
-					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
-						<SchemaForm
-							onlyMaskPassword
-							noDelete
-							disabled={!can_write}
-							compact
-							schema={resourceSchema}
-							bind:args
-							bind:isValid
-						/>
-					{:else if !can_write}
-						<input type="text" disabled value={rawCode} />
-					{:else}
-						{#if !viewJsonSchema}
-							<p class="italic text-secondary text-xs mb-4">
-								No corresponding resource type found in your workspace for {selectedResourceType}.
-								Define the value in JSON directly
-							</p>
-						{/if}
 
-						{#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 border p-1 rounded">
-							<SimpleEditor
-								autoHeight
-								class="editor"
-								lang="json"
-								bind:code={rawCode}
-								fixedOverflowWidgets={false}
-							/>
-						</div>
-					{/if}
+				{#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 border p-1 rounded">
+					<SimpleEditor
+						autoHeight
+						class="editor"
+						lang="json"
+						bind:code={rawCode}
+						fixedOverflowWidgets={false}
+					/>
 				</div>
-			</div>
+			{/if}
 		</div>
-		<svelte:fragment slot="actions">
-			<Button
-				startIcon={{ icon: Save }}
-				on:click={editResource}
-				disabled={!can_write || !isValid || jsonError != ''}
-			>
-				Save
-			</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
+	</div>
+</div>

package/package/components/ResourceEditor.svelte.d.ts

@@ -1,7 +1,13 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        initEdit?: ((p: string) => Promise<void>) | undefined;
+        canSave?: boolean | undefined;
+        resource_type?: string | undefined;
+        path?: string | undefined;
+        newResource?: boolean | undefined;
+        hidePath?: boolean | undefined;
+        editResource?: (() => Promise<void>) | undefined;
+        createResource?: (() => Promise<void>) | undefined;
     };
     events: {
         refresh: CustomEvent<any>;
@@ -14,6 +20,7 @@ export type ResourceEditorProps = typeof __propDef.props;
 export type ResourceEditorEvents = typeof __propDef.events;
 export type ResourceEditorSlots = typeof __propDef.slots;
 export default class ResourceEditor extends SvelteComponent<ResourceEditorProps, ResourceEditorEvents, ResourceEditorSlots> {
-    get initEdit(): (p: string) => Promise<void>;
+    get editResource(): () => Promise<void>;
+    get createResource(): () => Promise<void>;
 }
 export {};

package/package/components/ResourceEditorDrawer.svelte

@@ -0,0 +1,45 @@
+<script>import ResourceEditor from './ResourceEditor.svelte';
+import { Button, Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { Save } from 'lucide-svelte';
+let drawer;
+let canSave = true;
+let resource_type = undefined;
+let resourceEditor = undefined;
+let path = undefined;
+export async function initEdit(p) {
+    resource_type = undefined;
+    path = p;
+    drawer.openDrawer?.();
+}
+export async function initNew(resourceType) {
+    path = undefined;
+    resource_type = resourceType;
+    drawer.openDrawer?.();
+}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
+		<ResourceEditor
+			newResource
+			{path}
+			{resource_type}
+			on:refresh
+			bind:this={resourceEditor}
+			bind:canSave
+		/>
+		<svelte:fragment slot="actions">
+			<Button
+				startIcon={{ icon: Save }}
+				on:click={() => {
+					resourceEditor?.editResource()
+					drawer.closeDrawer()
+				}}
+				disabled={!canSave}
+			>
+				Save
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/package/components/ResourceEditorDrawer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        initEdit?: ((p: string) => Promise<void>) | undefined;
+        initNew?: ((resourceType: string) => Promise<void>) | undefined;
+    };
+    events: {
+        refresh: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResourceEditorDrawerProps = typeof __propDef.props;
+export type ResourceEditorDrawerEvents = typeof __propDef.events;
+export type ResourceEditorDrawerSlots = typeof __propDef.slots;
+export default class ResourceEditorDrawer extends SvelteComponent<ResourceEditorDrawerProps, ResourceEditorDrawerEvents, ResourceEditorDrawerSlots> {
+    get initEdit(): (p: string) => Promise<void>;
+    get initNew(): (resourceType: string) => Promise<void>;
+}
+export {};

package/package/components/ResourcePicker.svelte

@@ -5,10 +5,10 @@ import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import AppConnect from './AppConnectDrawer.svelte';
 import { Button } from './common';
-import ResourceEditor from './ResourceEditor.svelte';
 import DBSchemaExplorer from './DBSchemaExplorer.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Pen, Plus, RotateCw } from 'lucide-svelte';
+import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
 export let value = initialValue;
@@ -24,6 +24,9 @@ let valueSelect = initialValue || value
         type: valueType
     }
     : undefined;
+$: if (value === undefined && initialValue) {
+    value = initialValue;
+}
 let collection = valueSelect ? [valueSelect] : [];
 async function loadResources(resourceType) {
     const nc = (await ResourceService.listResource({
@@ -70,7 +73,7 @@ let darkMode = false;
 	bind:this={appConnect}
 />
 
-<ResourceEditor
+<ResourceEditorDrawer
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)

package/package/components/ResourceTypePicker.svelte

@@ -2,11 +2,15 @@
 import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import IconedResourceType from './IconedResourceType.svelte';
-import { Button, ClearableInput } from './common';
-let resources = [];
+import { Button, ClearableInput, Popup } from './common';
+import { offset, flip, shift } from 'svelte-floating-ui/dom';
+import Label from './Label.svelte';
+import Tooltip from './Tooltip.svelte';
+import Badge from './common/badge/Badge.svelte';
 export let value;
 export let notPickable = false;
 export let nonePickable = false;
+let resources = [];
 async function loadResources() {
     resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
 }
@@ -22,38 +26,86 @@ let search = '';
 $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.toLowerCase()));
 </script>
 
-<div class="mb-2">
-	<ClearableInput bind:value={search} placeholder="Search resource..." />
-</div>
-<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
-	{#if nonePickable && search === ''}
-		{@const isPicked = value === undefined}
-		<Button
-			size="sm"
-			variant="border"
-			color={isPicked ? 'blue' : 'dark'}
-			btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
-			disabled={notPickable}
-			on:click={() => onClick(undefined)}
-		>
-			None
-		</Button>
-	{/if}
-	{#each filteredResources as r}
-		{@const isPicked = value === r}
-		<Button
-			size="sm"
-			variant="border"
-			color={isPicked ? 'blue' : 'light'}
-			btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
-			disabled={notPickable}
-			on:click={() => onClick(r)}
-		>
-			<IconedResourceType name={r} after={true} width="20px" height="20px" />
-		</Button>
-	{/each}
+<Label label="Resource type" class="w-full col-span-2">
+	<svelte:fragment slot="header">
+		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
+	</svelte:fragment>
+
+	<svelte:fragment slot="action">
+		<div class="flex flex-row gap-1">
+			<Button
+				size="xs"
+				color="light"
+				on:click={() => onClick(undefined)}
+				disabled={notPickable || value === undefined}
+			>
+				Clear
+			</Button>
+			<Popup
+				floatingConfig={{
+					strategy: 'fixed',
+					placement: 'left-end',
+					middleware: [offset(8), flip(), shift()]
+				}}
+				containerClasses="border rounded-lg shadow-lg bg-surface p-4 w-[500px] h-[500px] "
+				let:close
+			>
+				<svelte:fragment slot="button">
+					<Button nonCaptureEvent size="xs" color="dark">Select resource type</Button>
+				</svelte:fragment>
+
+				<div class="flex flex-col gap-2 h-full">
+					<ClearableInput bind:value={search} placeholder="Search resource..." />
+
+					<div class="overflow-y-scroll h-full">
+						<div
+							class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center overflow-x-hidden"
+						>
+							{#if nonePickable && search === ''}
+								{@const isPicked = value === undefined}
+								<Button
+									size="sm"
+									variant="border"
+									color={isPicked ? 'blue' : 'dark'}
+									btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+									disabled={notPickable}
+									on:click={() => {
+										onClick(undefined)
+										close(null)
+									}}
+								>
+									None
+								</Button>
+							{/if}
+							{#each filteredResources as r}
+								{@const isPicked = value === r}
+								<Button
+									size="sm"
+									variant="border"
+									color={isPicked ? 'blue' : 'light'}
+									btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+									disabled={notPickable}
+									on:click={() => {
+										onClick(r)
+										close(null)
+									}}
+								>
+									<IconedResourceType name={r} after={true} width="20px" height="20px" />
+								</Button>
+							{/each}
 
-	{#if filteredResources.length === 0 && search !== ''}
-		<div class="text-tertiary text-sm">No resources found</div>
-	{/if}
-</div>
+							{#if filteredResources.length === 0 && search !== ''}
+								<div class="text-tertiary text-sm">No resources found</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</Popup>
+		</div>
+	</svelte:fragment>
+	<div class="flex flex-row items-center w-full justify-between">
+		<Badge color={!value ? 'gray' : 'blue'}>
+			{value ?? 'None'}
+		</Badge>
+	</div>
+</Label>