windmill-components 1.352.5 → 1.352.7

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/components/RunChart.svelte

@@ -70,9 +70,13 @@ const zoomOptions = {
         }
     }
 };
+function isDark() {
+    return document.documentElement.classList.contains('dark');
+}
+ChartJS.defaults.color = isDark() ? '#ccc' : '#666';
+ChartJS.defaults.borderColor = isDark() ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 function getBackgorundColor() {
-    const isDark = document.documentElement.classList.contains('dark');
-    return isDark ? '#2e3440' : '#ffffff';
+    return isDark() ? '#2e3440' : '#ffffff';
 }
 function hexToRgb(hexColor) {
     hexColor = hexColor.replace(/^#/, '');

package/package/components/SchemaViewer.svelte

@@ -6,6 +6,7 @@ import Tab from './common/tabs/Tab.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { Badge } from './common';
+import HighlightTheme from './HighlightTheme.svelte';
 export let schema = emptySchema();
 function getProperties(schema) {
     if (schema.properties) {
@@ -15,6 +16,8 @@ function getProperties(schema) {
 }
 </script>
 
+<HighlightTheme />
+
 <div class="w-full">
 	<Tabs selected="arguments">
 		<Tab value="arguments">Arguments</Tab>

package/package/components/SupabaseConnect.svelte

@@ -10,6 +10,7 @@ import { ResourceService, VariableService } from '../gen';
 import { oauthStore, workspaceStore } from '../stores';
 import Password from './Password.svelte';
 import { createEventDispatcher } from 'svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 let drawer;
 let token = undefined;
 export async function open() {
@@ -81,6 +82,8 @@ async function save() {
 }
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="Add a Supabase Database" on:close={drawer.closeDrawer}>
 		{#if step === 'init' || selectedDatabase == undefined}

package/package/components/apps/editor/AppExportButton.svelte

@@ -9,6 +9,7 @@ import { yaml } from 'svelte-highlight/languages';
 import YAML from 'yaml';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
+import HighlightTheme from '../../HighlightTheme.svelte';
 let jsonViewerDrawer;
 let app = undefined;
 let rawType = 'yaml';
@@ -18,6 +19,8 @@ export function open(app_l) {
 }
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={jsonViewerDrawer} size="800px">
 	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		<div>

package/package/components/apps/editor/componentsPanel/ThemeDrawer.svelte

@@ -3,6 +3,7 @@ import { Highlight } from 'svelte-highlight';
 import css from 'svelte-highlight/languages/css';
 import { resolveTheme } from './themeUtils';
 import { workspaceStore } from '../../../../stores';
+import HighlightTheme from '../../../HighlightTheme.svelte';
 export let theme;
 let code = undefined;
 let codeDrawer;
@@ -12,6 +13,8 @@ export async function openDrawer() {
 }
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={codeDrawer}>
 	<DrawerContent title="Theme viewer" on:close={codeDrawer.closeDrawer}>
 		<div class="p-2 border rounded-sm">

package/package/components/apps/editor/settingsPanel/CSSMigrationModal.svelte

@@ -10,6 +10,7 @@ import { MoveRight } from 'lucide-svelte';
 import { customisationByComponent } from '../componentsPanel/cssUtils';
 import { sendUserToast } from '../../../../toast';
 import CloseButton from '../../../common/CloseButton.svelte';
+import HighlightTheme from '../../../HighlightTheme.svelte';
 export let component;
 const { app } = getContext('AppViewerContext');
 function fadeFast(node) {
@@ -94,6 +95,8 @@ function hasStyles(customCss) {
 let type = component?.type;
 </script>
 
+<HighlightTheme />
+
 {#if migrationModalOpen}
 	<div
 		transition:fadeFast|local

package/package/components/apps/editor/settingsPanel/ComponentControl.svelte

@@ -4,11 +4,14 @@ import { getComponentControl } from '../componentsPanel/componentControlUtils';
 import { Highlight } from 'svelte-highlight';
 import typescript from 'svelte-highlight/languages/typescript';
 import { Button } from '../../../common';
+import HighlightTheme from '../../../HighlightTheme.svelte';
 export let type;
 const componentControls = getComponentControl(type);
 let collapsed = true;
 </script>
 
+<HighlightTheme />
+
 {#if componentControls?.length > 0}
 	<PanelSection title="Controls">
 		<div slot="action" class="flex justify-end flex-wrap gap-1">

package/package/components/details/DetailPageDetailPanel.svelte

@@ -6,6 +6,7 @@ import { yaml } from 'svelte-highlight/languages';
 import json from 'svelte-highlight/languages/json';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import YAML from 'yaml';
+import HighlightTheme from '../HighlightTheme.svelte';
 export let triggerSelected = 'webhooks';
 export let flow_json = undefined;
 export let hasStepDetails = false;
@@ -19,6 +20,8 @@ $: if (hasStepDetails) {
 $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 </script>
 
+<HighlightTheme />
+
 <Splitpanes horizontal class="h-full">
 	<Pane size={100}>
 		<Tabs bind:selected>

package/package/components/details/WebhooksPanel.svelte

@@ -12,6 +12,7 @@ import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from './ClipboardPanel.svelte';
 import { copyToClipboard, generateRandomString } from '../../utils';
+import HighlightTheme from '../HighlightTheme.svelte';
 let userSettings;
 export let webhooks;
 export let token;
@@ -138,6 +139,8 @@ done`}`;
 }
 </script>
 
+<HighlightTheme />
+
 <UserSettings
 	bind:this={userSettings}
 	on:tokenCreated={(e) => {