windmill-components 1.352.2 → 1.352.4

package/package/components/EditorBar.svelte

@@ -4,6 +4,7 @@
 <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';
@@ -26,7 +27,6 @@ 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}
-<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<ResourceEditor 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,66 +1,58 @@
 <script>import { ResourceService } from '../gen';
 import { canWrite, emptyString, isOwner, urlize } from '../utils';
 import { createEventDispatcher } from 'svelte';
-import { Alert, Skeleton } from './common';
+import { Alert, Button, Drawer, 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 } from 'lucide-svelte';
+import { Pen, Save } from 'lucide-svelte';
 import Markdown from 'svelte-exmarkdown';
 import autosize from '../autosize';
 import GfmMarkdown from './GfmMarkdown.svelte';
-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 path = '';
+let initialPath = '';
+let resourceToEdit;
 let description = '';
 let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`;
-let resourceSchema = undefined;
+let selectedResourceType;
+let resourceSchema;
 let args = {};
-let loadingSchema = true;
+let can_write = true;
+let loadingSchema = false;
 let linkedVars = [];
+let drawer;
 let resourceTypeInfo = undefined;
-let editDescription = false;
-let viewJsonSchema = false;
+let renderDescription = true;
 let rawCode = undefined;
 const dispatch = createEventDispatcher();
-async function initEdit() {
-    resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path });
+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 });
     description = resourceToEdit.description ?? '';
-    resource_type = resourceToEdit.resource_type;
-    args = resourceToEdit?.value ?? {};
+    selectedResourceType = resourceToEdit.resource_type;
     loadResourceType();
+    args = resourceToEdit.value;
     can_write =
         resourceToEdit.workspace_id == $workspaceStore &&
-            canWrite(path, resourceToEdit.extra_perms ?? {}, $userStore);
+            canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
     linkedVars = Object.entries(args)
         .filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
         .map(([k, _]) => k);
+    renderDescription = false;
 }
-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() {
+async function editResource() {
     if (resourceToEdit) {
         await ResourceService.updateResource({
             workspace: $workspaceStore,
@@ -69,25 +61,18 @@ export 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 (resource_type) {
+    if (selectedResourceType) {
         try {
             const resourceType = await ResourceService.getResourceType({
                 workspace: $workspaceStore,
-                path: resource_type
+                path: selectedResourceType
             });
             resourceTypeInfo = resourceType;
             if (resourceType.schema) {
@@ -105,6 +90,9 @@ async function loadResourceType() {
     }
     loadingSchema = false;
 }
+let isValid = true;
+let jsonError = '';
+$: rawCode && parseJson();
 function parseJson() {
     try {
         args = JSON.parse(rawCode ?? '');
@@ -114,11 +102,13 @@ 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) {
@@ -130,105 +120,118 @@ function switchTab(asJson) {
 }
 </script>
 
-<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>
+<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>
 				{/if}
-				<Path
-					disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
-					bind:path
-					{initialPath}
-					namePlaceholder="resource"
-					kind="resource"
-				/>
-			</div>
-		{/if}
-
-		{#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
-		>
+				<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
+				>
 
-		{#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" />
+				{#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" />
 
-			<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>
+					<GfmMarkdown md={description} />
 				{/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 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>
-			{/if}
+				<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}
+				</div>
+			</div>
 		</div>
-	</div>
-</div>
+		<svelte:fragment slot="actions">
+			<Button
+				startIcon={{ icon: Save }}
+				on:click={editResource}
+				disabled={!can_write || !isValid || jsonError != ''}
+			>
+				Save
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

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

@@ -1,13 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        canSave?: boolean | undefined;
-        resource_type?: string | undefined;
-        path?: string | undefined;
-        newResource?: boolean | undefined;
-        hidePath?: boolean | undefined;
-        editResource?: (() => Promise<void>) | undefined;
-        createResource?: (() => Promise<void>) | undefined;
+        initEdit?: ((p: string) => Promise<void>) | undefined;
     };
     events: {
         refresh: CustomEvent<any>;
@@ -20,7 +14,6 @@ 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 editResource(): () => Promise<void>;
-    get createResource(): () => Promise<void>;
+    get initEdit(): (p: 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}
 />
 
-<ResourceEditorDrawer
+<ResourceEditor
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)

package/package/components/build_workers.js

@@ -1,3 +1,14 @@
+// inline to make it a library component easy to be imported until this if fixed: https://github.com/vitejs/vite/pull/16418
+// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker&inline'
+// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker&inline'
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&inline'
+// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker&inline'
+// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker&inline'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
     const monWin = self;
     const workerOverrideGlobals = {
@@ -18,30 +29,22 @@ export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
     const monEnv = monWin.MonacoEnvironment;
     monEnv.workerOverrideGlobals = workerOverrideGlobals;
     const getWorker = (_, label) => {
-        const buildWorker = (globals, label, workerName, editorType) => {
-            globals.workerOptions.name = label;
-            const workerFilename = globals.workerOptions.type === 'module' ? `${workerName}-es.js` : `${workerName}-iife.js`;
-            const workerPathLocal = `${globals.workerPath}/${workerFilename}`;
-            const workerUrl = new URL(workerPathLocal, globals.basePath);
-            console.log(`${editorType}: url: ${workerUrl.href} created from basePath: ${globals.basePath} and file: ${workerPathLocal}`);
-            return new Worker(workerUrl.href, globals.workerOptions);
-        };
         console.log('getWorker: workerId: ' + _ + ' label: ' + label);
         switch (label) {
             case 'template':
             case 'typescript':
             case 'javascript':
-                return buildWorker(workerOverrideGlobals, label, 'tsWorker', 'TS Worker');
+                return new tsWorker();
             case 'html':
             case 'handlebars':
             case 'razor':
-                return buildWorker(workerOverrideGlobals, label, 'htmlWorker', 'HTML Worker');
+                return new htmlWorker();
             case 'css':
             case 'scss':
             case 'less':
-                return buildWorker(workerOverrideGlobals, label, 'cssWorker', 'CSS Worker');
+                return new cssWorker();
             case 'json':
-                return buildWorker(workerOverrideGlobals, label, 'jsonWorker', 'JSON Worker');
+                return new jsonWorker();
             case 'graphql':
                 const workerFilename = `graphql.worker.bundle.js`;
                 const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`;
@@ -50,7 +53,7 @@ export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
                     name: label
                 });
             default:
-                return buildWorker(workerOverrideGlobals, label, 'editorWorker', 'Editor Worker');
+                return new editorWorker();
         }
     };
     monWin.MonacoEnvironment.getWorker = getWorker;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.352.2",
+	"version": "1.352.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -115,7 +115,6 @@
 		"highlight.js": "^11.8.0",
 		"lucide-svelte": "^0.293.0",
 		"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
-		"monaco-editor-workers": "^0.44.0",
 		"monaco-graphql": "^1.5.1",
 		"monaco-languageclient": "~7.0.1",
 		"ol": "^7.4.0",
@@ -245,16 +244,6 @@
 			"svelte": "./package/components/SchemaForm.svelte",
 			"default": "./package/components/SchemaForm.svelte"
 		},
-		"./components/EditableSchemaWrapper.svelte": {
-			"types": "./package/components/EditableSchemaWrapper.svelte.d.ts",
-			"svelte": "./package/components/EditableSchemaWrapper.svelte",
-			"default": "./package/components/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",
@@ -387,9 +376,6 @@
 			"components/SchemaEditor.svelte": [
 				"./package/components/SchemaEditor.svelte.d.ts"
 			],
-			"components/EditableSchemaWrapper.svelte": [
-				"./package/components/EditableSchemaWrapper.svelte.d.ts"
-			],
 			"utils": [
 				"./package/utils.d.ts"
 			],

package/package/components/ResourceEditorDrawer.svelte

@@ -1,45 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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 {};