windmill-components 1.352.4 → 1.352.6

package/package/components/EditableSchemaForm.svelte

@@ -231,48 +231,50 @@ let editor = undefined;
 									<div class="flex flex-row gap-2">
 										{argName}
 										{#if !uiOnly}
-											<Popup
-												floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-												containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-												let:close
-											>
-												<svelte:fragment slot="button">
-													<Button
-														color="light"
-														size="xs2"
-														nonCaptureEvent
-														startIcon={{ icon: Pen }}
-														iconOnly
-													/>
-												</svelte:fragment>
-												<Label label="Name">
-													<div class="flex flex-col gap-2">
-														<input
-															type="text"
-															class="w-full !bg-surface"
-															value={argName}
-															id={argName + i}
-															on:keydown={(event) => {
-																if (event.key === 'Enter') {
-																	renameProperty(argName, argName + i)
-																	close(null)
-																}
-															}}
-														/>
+											<div on:click|stopPropagation|preventDefault>
+												<Popup
+													floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+													containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+													let:close
+												>
+													<svelte:fragment slot="button">
 														<Button
-															variant="border"
 															color="light"
-															size="xs"
-															on:click={() => {
-																renameProperty(argName, argName + i)
-																close(null)
-															}}
-														>
-															Rename
-														</Button>
-													</div>
-												</Label>
-											</Popup>
+															size="xs2"
+															nonCaptureEvent
+															startIcon={{ icon: Pen }}
+															iconOnly
+														/>
+													</svelte:fragment>
+													<Label label="Name">
+														<div class="flex flex-col gap-2">
+															<input
+																type="text"
+																class="w-full !bg-surface"
+																value={argName}
+																id={argName + i}
+																on:keydown={(event) => {
+																	if (event.key === 'Enter') {
+																		renameProperty(argName, argName + i)
+																		close(null)
+																	}
+																}}
+															/>
+															<Button
+																variant="border"
+																color="light"
+																size="xs"
+																on:click={() => {
+																	renameProperty(argName, argName + i)
+																	close(null)
+																}}
+															>
+																Rename
+															</Button>
+														</div>
+													</Label>
+												</Popup>
+											</div>
 										{/if}
 									</div>
 

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -23,6 +23,7 @@ declare const __propDef: {
         deleteField?: ((key: string) => void) | undefined;
     };
     events: {
+        click: MouseEvent;
         change: CustomEvent<any>;
         delete: CustomEvent<any>;
     } & {

package/package/components/EditorBar.svelte

@@ -4,7 +4,6 @@
 <script>import { ResourceService, VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
@@ -27,6 +26,7 @@ import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './Popover.svelte';
+import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -470,7 +470,7 @@ $res = json_decode(curl_exec($ch));`)
 			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
 	/>
 {/if}
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">

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;
@@ -73,7 +73,7 @@ let darkMode = false;
 	bind:this={appConnect}
 />
 
-<ResourceEditor
+<ResourceEditorDrawer
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.352.4",
+	"version": "1.352.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -244,11 +244,26 @@
 			"svelte": "./package/components/SchemaForm.svelte",
 			"default": "./package/components/SchemaForm.svelte"
 		},
+		"./components/EditableSchemaWrapper.svelte": {
+			"types": "./package/components/schema/EditableSchemaWrapper.svelte.d.ts",
+			"svelte": "./package/components/schema/EditableSchemaWrapper.svelte",
+			"default": "./package/components/schema/EditableSchemaWrapper.svelte"
+		},
+		"./components/ResourceEditor.svelte": {
+			"types": "./package/components/ResourceEditor.svelte.d.ts",
+			"svelte": "./package/components/ResourceEditor.svelte",
+			"default": "./package/components/ResourceEditor.svelte"
+		},
 		"./components/SchemaEditor.svelte": {
 			"types": "./package/components/EditableSchemaForm.svelte.d.ts",
 			"svelte": "./package/components/EditableSchemaForm.svelte",
 			"default": "./package/components/EditableSchemaForm.svelte"
 		},
+		"./components/ScriptEditor.svelte": {
+			"types": "./package/components/ScriptEditor.svelte.d.ts",
+			"svelte": "./package/components/ScriptEditor.svelte",
+			"default": "./package/components/ScriptEditor.svelte"
+		},
 		"./components/scriptEditor/LogPanel.svelte": {
 			"types": "./package/components/scriptEditor/LogPanel.svelte.d.ts",
 			"svelte": "./package/components/scriptEditor/LogPanel.svelte",
@@ -328,6 +343,9 @@
 			"components/scriptEditor/LogPanel.svelte": [
 				"./package/components/scriptEditor/LogPanel.svelte.d.ts"
 			],
+			"components/ScriptEditor.svelte": [
+				"./package/components/ScriptEditor.svelte.d.ts"
+			],
 			"components/common/kbd/Kbd.svelte": [
 				"./package/components/common/kbd/Kbd.svelte.d.ts"
 			],
@@ -376,6 +394,9 @@
 			"components/SchemaEditor.svelte": [
 				"./package/components/SchemaEditor.svelte.d.ts"
 			],
+			"components/EditableSchemaWrapper.svelte": [
+				"./package/components/schema/EditableSchemaWrapper.svelte.d.ts"
+			],
 			"utils": [
 				"./package/utils.d.ts"
 			],