windmill-components 1.122.0 → 1.138.2

package/package/components/DBSchemaExplorer.svelte

@@ -0,0 +1,160 @@
+<script>import { JobService, Preview } from '../gen';
+import { dbSchema, workspaceStore } from '../stores';
+import { sendUserToast } from '../toast';
+import { onDestroy } from 'svelte';
+import Button from './common/button/Button.svelte';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+export let resourceType;
+export let resourcePath = undefined;
+let drawer;
+const content = {
+    postgresql: `import { Client } from "https://deno.land/x/postgres@v0.17.0/mod.ts";
+export async function main(args: any) {
+  // Create a new client with the provided connection details
+  const u = new URL("postgres://")
+	u.hash = ''
+	u.search = '?sslmode=' + args.sslmode
+	u.pathname = args.dbname
+	u.host = args.host
+	u.port = args.port
+	u.password = args.password
+	u.username = args.user
+  const client = new Client(u.toString())
+  // Connect to the postgres database
+  await client.connect();
+  const result = await client.queryObject(\`SELECT 
+      table_name, 
+      column_name, 
+      udt_name,
+      column_default,
+      is_nullable,
+      table_schema
+    FROM 
+      information_schema.columns
+    WHERE table_schema != 'pg_catalog' AND 
+      table_schema != 'information_schema'\`);
+  const schemas = result.rows.reduce((acc, a) => {
+    const table_schema = a.table_schema;
+    delete a.table_schema;
+    acc[table_schema] = acc[table_schema] || [];
+    acc[table_schema].push(a);
+    return acc;
+  }, {});
+  const data = {};
+  for (const key in schemas) {
+    data[key] = schemas[key].reduce((acc, a) => {
+      const table_name = a.table_name;
+      delete a.table_name;
+      acc[table_name] = acc[table_name] || {};
+      const p = {
+        type: a.udt_name,
+        required: a.is_nullable === "NO",
+      }
+      if (a.column_default) {
+        p.default = a.column_default
+      }
+      acc[table_name][a.column_name] = p;
+      return acc;
+    }, {});
+  }
+  return data;
+}`,
+    mysql: `import { Client } from "https://deno.land/x/mysql@v2.11.0/mod.ts";
+export async function main(args: any) {
+  const conn = await new Client().connect({
+    hostname: args.host,
+    port: args.port,
+    username: args.user,
+    db: args.database,
+    password: args.password,
+  });
+  const result = await conn.execute(
+    "select TABLE_SCHEMA, TABLE_NAME, DATA_TYPE, COLUMN_NAME, COLUMN_DEFAULT from information_schema.columns where table_schema != 'information_schema'",
+  );
+  const schemas = result.rows.reduce((acc, a) => {
+    const table_schema = a.TABLE_SCHEMA;
+    delete a.TABLE_SCHEMA;
+    acc[table_schema] = acc[table_schema] || [];
+    acc[table_schema].push(a);
+    return acc;
+  }, {});
+  const data = {};
+  for (const key in schemas) {
+    data[key] = schemas[key].reduce((acc, a) => {
+      const table_name = a.TABLE_NAME;
+      delete a.TABLE_NAME;
+      acc[table_name] = acc[table_name] || {};
+      const p = {
+        type: a.DATA_TYPE,
+        required: a.is_nullable === "NO",
+      };
+      if (a.column_default) {
+        p.default = a.COLUMN_DEFAULT;
+      }
+      acc[table_name][a.COLUMN_NAME] = p;
+      return acc;
+    }, {});
+  }
+  return data;
+}`
+};
+async function getSchema() {
+    if (!resourceType || !resourcePath)
+        return;
+    dbSchema.set(undefined);
+    try {
+        const job = await JobService.runScriptPreview({
+            workspace: $workspaceStore,
+            requestBody: {
+                language: 'deno',
+                content: content[resourceType],
+                args: {
+                    args: '$res:' + resourcePath
+                }
+            }
+        });
+        await new Promise((r) => setTimeout(r, 3000));
+        const testResult = await JobService.getCompletedJob({
+            workspace: $workspaceStore,
+            id: job
+        });
+        if (testResult) {
+            if (!testResult.success) {
+                throw new Error('Could not query DB schema');
+            }
+            else {
+                dbSchema.set(testResult.result);
+            }
+        }
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast('Could not query DB schema', true);
+    }
+}
+$: resourcePath && resourceType && ['postgresql', 'mysql'].includes(resourceType) && getSchema();
+$: !resourcePath && $dbSchema && dbSchema.set(undefined);
+onDestroy(() => {
+    dbSchema.set(undefined);
+});
+</script>
+
+{#if $dbSchema && resourcePath}
+	<Button
+		size="xs"
+		variant="border"
+		color="blue"
+		spacingSize="xs2"
+		btnClasses="mt-1"
+		on:click={drawer.openDrawer}
+	>
+		Explore DB schema
+	</Button>
+	<Drawer bind:this={drawer} size="800px">
+		<DrawerContent title="DB Schema Explorer" on:close={drawer.closeDrawer}>
+			<ObjectViewer json={$dbSchema} pureViewer />
+		</DrawerContent>
+	</Drawer>
+{/if}

package/package/components/DBSchemaExplorer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        resourceType: string | undefined;
+        resourcePath?: String | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DbSchemaExplorerProps = typeof __propDef.props;
+export type DbSchemaExplorerEvents = typeof __propDef.events;
+export type DbSchemaExplorerSlots = typeof __propDef.slots;
+export default class DbSchemaExplorer extends SvelteComponentTyped<DbSchemaExplorerProps, DbSchemaExplorerEvents, DbSchemaExplorerSlots> {
+}
+export {};

package/package/components/DarkModeObserver.svelte

@@ -0,0 +1,18 @@
+<script>import { onMount, onDestroy } from 'svelte';
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+let observer;
+onMount(() => {
+    observer = new MutationObserver((mutationsList, observer) => {
+        for (let mutation of mutationsList) {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                dispatch('change', document.documentElement.classList.contains('dark'));
+            }
+        }
+    });
+    observer.observe(document.documentElement, { attributes: true });
+});
+onDestroy(() => {
+    observer.disconnect();
+});
+</script>

package/package/components/DarkModeObserver.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DarkModeObserverProps = typeof __propDef.props;
+export type DarkModeObserverEvents = typeof __propDef.events;
+export type DarkModeObserverSlots = typeof __propDef.slots;
+export default class DarkModeObserver extends SvelteComponentTyped<DarkModeObserverProps, DarkModeObserverEvents, DarkModeObserverSlots> {
+}
+export {};

package/package/components/DeployWorkspace.svelte

@@ -487,7 +487,7 @@ async function showDiff(kind, path) {
 		<div class="grid grid-cols-9 justify-center max-w-3xl gap-2">
 			{#each dependencies ?? [] as { kind, path, include }}
 				{@const statusPath = computeStatusPath(kind, path)}
-				<div class="col-span-1 truncate text-gray-700 text-sm">{kind}</div><div
+				<div class="col-span-1 truncate text-secondary text-sm">{kind}</div><div
 					class="col-span-5 truncate font-semibold">{path}</div
 				><div class="col-span-1"><Toggle size="xs" bind:checked={include} /></div><div
 					class="col-span-1"

package/package/components/DiffDrawer.svelte

@@ -39,7 +39,9 @@ export function setDiff(local, remote) {
 		{#if diffContent == undefined}
 			<Loader2 class="animate-spin" />
 		{:else}
-			<pre class="border bg-white p-2"><code>{@html diffContent}</code></pre>
+			<pre class="border bg-surface-secondary p-2 whitespace-pre-wrap"
+				><code>{@html diffContent}</code></pre
+			>
 			<div class="flex flex-row-reverse gap-2">
 				<div class="text-red-600">Removed</div>
 				<div class="text-green-600">Added</div></div

package/package/components/DiffEditor.svelte

@@ -0,0 +1,69 @@
+<script>import { BROWSER } from 'esm-env';
+import { onMount } from 'svelte';
+import 'monaco-editor/esm/vs/editor/edcore.main';
+import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+const SIDE_BY_SIDE_MIN_WIDTH = 650;
+export let automaticLayout = true;
+export let fixedOverflowWidgets = true;
+let diffEditor;
+let diffDivEl = null;
+let editorWidth = SIDE_BY_SIDE_MIN_WIDTH;
+function loadDiffEditor() {
+    diffEditor = meditor.createDiffEditor(diffDivEl, {
+        automaticLayout,
+        renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH,
+        domReadOnly: true,
+        readOnly: true,
+        minimap: {
+            enabled: false
+        },
+        fixedOverflowWidgets,
+        scrollBeyondLastLine: false,
+        lineDecorationsWidth: 15,
+        lineNumbersMinChars: 2,
+        autoDetectHighContrast: true,
+        scrollbar: { alwaysConsumeMouseWheel: false }
+    });
+}
+export function setDiff(original, modified, lang) {
+    diffEditor?.setModel({
+        original: meditor.createModel(original, lang),
+        modified: meditor.createModel(modified, lang)
+    });
+    if (lang !== 'shell') {
+        diffEditor?.getModifiedEditor().getAction('editor.action.formatDocument')?.run();
+    }
+}
+export function getOriginal() {
+    return diffEditor?.getModel()?.original.getValue() ?? '';
+}
+export function getModified() {
+    return diffEditor?.getModel()?.modified.getValue() ?? '';
+}
+export function show() {
+    diffDivEl?.classList.remove('hidden');
+}
+export function hide() {
+    diffDivEl?.classList.add('hidden');
+}
+function onWidthChange(editorWidth) {
+    diffEditor?.updateOptions({ renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH });
+}
+$: onWidthChange(editorWidth);
+onMount(() => {
+    if (BROWSER) {
+        loadDiffEditor();
+        return () => {
+            diffEditor?.dispose();
+        };
+    }
+});
+</script>
+
+<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />

package/package/components/DiffEditor.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import 'monaco-editor/esm/vs/editor/edcore.main';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        automaticLayout?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
+        setDiff?: ((original: string, modified: string, lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'javascript') => void) | undefined;
+        getOriginal?: (() => string) | undefined;
+        getModified?: (() => string) | undefined;
+        show?: (() => void) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DiffEditorProps = typeof __propDef.props;
+export type DiffEditorEvents = typeof __propDef.events;
+export type DiffEditorSlots = typeof __propDef.slots;
+export default class DiffEditor extends SvelteComponentTyped<DiffEditorProps, DiffEditorEvents, DiffEditorSlots> {
+    get setDiff(): (original: string, modified: string, lang: "javascript" | "graphql" | "go" | "sql" | "typescript" | "python" | "shell") => void;
+    get getOriginal(): () => string;
+    get getModified(): () => string;
+    get show(): () => void;
+    get hide(): () => void;
+}
+export {};

package/package/components/DisplayResult.svelte

@@ -6,10 +6,16 @@ import { Button, Drawer, DrawerContent } from './common';
 import { ClipboardCopy, Download, Expand } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import ScriptFix from './codeGen/ScriptFix.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
 export let disableExpand = false;
+export let jobId = undefined;
+export let workspaceId = undefined;
+export let editor = undefined;
+export let diffEditor = undefined;
+export let lang = undefined;
 let resultKind;
 $: resultKind = inferResultKind(result);
 let forceJson = false;
@@ -31,6 +37,9 @@ function isRectangularArray(obj) {
 function asListOfList(obj) {
     return obj;
 }
+function isObjectOfArray(result, keys) {
+    return keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b);
+}
 function inferResultKind(result) {
     if (result) {
         try {
@@ -38,7 +47,7 @@ function inferResultKind(result) {
             if (isRectangularArray(result)) {
                 return 'table-row';
             }
-            else if (keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b)) {
+            else if (isObjectOfArray(result, keys)) {
                 return 'table-col';
             }
             else if (keys.length == 1 && keys[0] == 'html') {
@@ -93,13 +102,13 @@ $: jsonStr = JSON.stringify(result, null, 4);
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
-			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
+			<div class="mb-2 text-tertiary text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 w-full text-sm relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				{#if !disableExpand}
-					<div class="text-gray-500 text-xs absolute top-5.5 right-0">
+					<div class="text-tertiary text-xs absolute top-5.5 right-0">
 						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
 					</div>
 				{/if}
@@ -113,7 +122,7 @@ $: jsonStr = JSON.stringify(result, null, 4);
 						</div>
 						{#if Array.isArray(result[col])}
 							{#each result[col] as item}
-								<div class="px-12 text-left text-xs whitespace-nowrap">
+								<div class="px-12 text-left text-xs whitespace-nowrap overflow-auto pb-2">
 									{typeof item === 'string' ? item : JSON.stringify(item)}
 								</div>
 							{/each}
@@ -147,7 +156,7 @@ $: jsonStr = JSON.stringify(result, null, 4);
 								Warning
 							</div>
 							<p
-								class="text-gray-600 mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+								class="text-tertiary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
 								>Rendering HTML can expose you to <a
 									href="https://owasp.org/www-community/attacks/xss/"
 									target="_blank"
@@ -192,12 +201,15 @@ $: jsonStr = JSON.stringify(result, null, 4);
 					href="data:application/octet-stream;base64,{result.file}">Download</a
 				>
 			</div>
-		{:else if !forceJson && resultKind == 'error'}<div>
+		{:else if !forceJson && resultKind == 'error'}<div class="flex flex-col items-start">
 				<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
 					>{#if result.error.name || result.error.message}{result.error.name}: {result.error
 							.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
 				>
-				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
+				<pre class="text-sm whitespace-pre-wrap text-primary">{result.error.stack ?? ''}</pre>
+				{#if lang && editor && diffEditor}
+					<ScriptFix error={JSON.stringify(result.error)} {lang} {editor} {diffEditor} />
+				{/if}
 			</div>
 		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-3 mt-8 mx-4">
 				<Button
@@ -220,10 +232,12 @@ $: jsonStr = JSON.stringify(result, null, 4);
 			</div>
 		{:else}
 			{#if jsonStr.length > 10000}
-				<div class="text-sm mb-2 text-gray-600">
+				<div class="text-sm mb-2 text-tertiary">
 					<a
 						download="{filename ?? 'result'}.json"
-						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+						href={workspaceId && jobId
+							? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+							: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}>Download</a
 					>
 					JSON is too large to be displayed in full.
 				</div>
@@ -233,7 +247,7 @@ $: jsonStr = JSON.stringify(result, null, 4);
 			{/if}
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result: {jsonStr}</div>
+		<div class="text-tertiary text-sm">No result: {jsonStr}</div>
 	{/if}
 </div>
 
@@ -243,9 +257,11 @@ $: jsonStr = JSON.stringify(result, null, 4);
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 				<svelte:fragment slot="actions">
 					<a
-						class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+						class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
 						download="{filename ?? 'result'}.json"
-						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
+						href={workspaceId && jobId
+							? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+							: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
 						>Download <Download size={14} /></a
 					>
 					<Button on:click={() => copyToClipboard(jsonStr)} color="light" size="xs">
@@ -253,7 +269,7 @@ $: jsonStr = JSON.stringify(result, null, 4);
 					</Button>
 				</svelte:fragment>
 				{#if jsonStr.length > 100000}
-					<div class="text-sm mb-2 text-gray-600">
+					<div class="text-sm mb-2 text-tertiary">
 						<a
 							download="{filename ?? 'result'}.json"
 							href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a

package/package/components/DisplayResult.svelte.d.ts

@@ -1,10 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Preview } from '../gen';
+import type Editor from './Editor.svelte';
+import type DiffEditor from './DiffEditor.svelte';
 declare const __propDef: {
     props: {
         result: any;
         requireHtmlApproval?: boolean | undefined;
         filename?: string | undefined;
         disableExpand?: boolean | undefined;
+        jobId?: string | undefined;
+        workspaceId?: string | undefined;
+        editor?: Editor | undefined;
+        diffEditor?: DiffEditor | undefined;
+        lang?: Preview.language | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Dropdown.svelte

@@ -46,9 +46,9 @@ function computeDropdowns() {
 							dispatch('click', { item: item?.eventName })
 						}
 					}}
-					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
-					 px-4 py-2 text-sm text-gray-700 text-left
-					 {item.disabled ? 'bg-gray-200' : ''}
+					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-surface-hover hover:bg-opacity-30
+					 px-4 py-2 text-sm text-primary text-left
+					 {item.disabled ? 'bg-surface-disabled' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
 						? 'text-red-500'
@@ -62,7 +62,7 @@ function computeDropdowns() {
 						<Icon
 							data={item.icon}
 							scale={0.6}
-							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-primary'}"
 						/>
 					{/if}
 					{item.displayName}
@@ -70,7 +70,7 @@ function computeDropdowns() {
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					class="block w-full px-4 font-semibold text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					class="block w-full px-4 font-semibold text-left py-2 text-sm text-secondary hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
@@ -81,7 +81,7 @@ function computeDropdowns() {
 						<Icon
 							data={item.icon}
 							scale={0.6}
-							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-secondary'}"
 						/>
 					{/if}
 					{item.displayName}
@@ -90,7 +90,7 @@ function computeDropdowns() {
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class:bg-gray-200={item.disabled}
-					class="block font-semibold text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block font-semibold text-left px-4 py-2 text-sm text-secondary cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
@@ -100,7 +100,7 @@ function computeDropdowns() {
 						<Icon
 							data={item.icon}
 							scale={0.6}
-							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-secondary'}"
 						/>
 					{/if}
 					{item.displayName}