windmill-components 1.60.0 → 1.60.1

package/components/SchemaModal.svelte

@@ -35,6 +35,12 @@ export let oldArgName = undefined;
 let resource_type = undefined;
 const dispatch = createEventDispatcher();
 let drawer;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        dispatch('save');
+    }
+}
 export function openDrawer() {
     drawer.openDrawer();
     resource_type = property.format?.substring(5);
@@ -66,6 +72,8 @@ else {
 }
 </script>
 
+<svelte:window on:keyup={handleKeyUp} />
+
 <Drawer bind:this={drawer} placement="right">
 	<DrawerContent on:close={clearModal} title="Add an argument">
 		<div class="flex flex-col gap-6">

package/components/apps/components/table/AppTable.svelte

@@ -90,18 +90,18 @@ $: result && rerender();
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
 			{#if search !== 'Disabled'}
-				<div class="px-4 py-2">
+				<div class="px-2 py-1">
 					<div class="flex items-center">
-						<div>
+						<div class="grow max-w-[300px]">
 							<DebouncedInput placeholder="Search..." bind:value={searchValue} />
 						</div>
 					</div>
 				</div>
 			{/if}
 
-			<div class="overflow-auto flex-1 w-full">
-				<table class="divide-y divide-gray-300 w-full border-b border-b-gray-200">
-					<thead class="bg-gray-50 text-left">
+			<div class="overflow-x-auto flex-1 w-full">
+				<table class="relative w-full border-b border-b-gray-200">
+					<thead class="sticky top-0 bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -109,16 +109,22 @@ $: result && rerender();
 										{@const context = header?.getContext()}
 										{#if context}
 											{@const component = renderCell(header.column.columnDef.header, context)}
-											<th class="px-4 py-4 text-sm font-semibold">
-												{#if !header.isPlaceholder && component}
-													<svelte:component this={component} />
-												{/if}
+											<th class="!p-0">
+												<span class="block px-4 py-4 text-sm font-semibold border-b">
+													{#if !header.isPlaceholder && component}
+														<svelte:component this={component} />
+													{/if}
+												</span>
 											</th>
 										{/if}
 									{/if}
 								{/each}
 								{#if actionButtons.length > 0}
-									<th class="px-4 py-4 text-sm font-semibold">Actions</th>
+									<th class="!p-0">
+										<span class="block px-4 py-4 text-sm font-semibold border-b">
+											Actions
+										</span>
+									</th>
 								{/if}
 							</tr>
 						{/each}

package/components/apps/components/table/AppTableFooter.svelte

@@ -1,5 +1,6 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 import { tableOptions } from './tableOptions';
 export let result;
 export let paginationEnabled = false;
@@ -15,26 +16,30 @@ function downloadResultAsJSON() {
 }
 </script>
 
-<div class="px-4 py-2 text-xs flex flex-row gap-2 items-center justify-between">
+<div class="px-2 py-1 text-xs flex flex-row gap-2 items-center justify-between">
 	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"
 				variant="border"
 				color="light"
+				btnClasses="!py-1 !pl-1"
 				on:click={() => $table.previousPage()}
 				disabled={!$table.getCanPreviousPage()}
 			>
+				<ChevronLeft size={14} />
 				Previous
 			</Button>
 			<Button
 				size="xs"
 				variant="border"
 				color="light"
+				btnClasses="!py-1 !pr-1"
 				on:click={() => $table.nextPage()}
 				disabled={!$table.getCanNextPage()}
 			>
 				Next
+				<ChevronRight size={14} />
 			</Button>
 			{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
 		</div>
@@ -46,6 +51,7 @@ function downloadResultAsJSON() {
 			size="xs"
 			variant="border"
 			color="light"
+			btnClasses="!py-1"
 			on:click={downloadResultAsJSON}
 			startIcon={{ icon: faDownload }}
 		>

package/components/apps/editor/AppEditorHeader.svelte

@@ -24,6 +24,7 @@ import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils';
+import { toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 async function hash(message) {
@@ -48,16 +49,6 @@ let publishDrawerOpen = false;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
-function toStatic() {
-    const newApp = JSON.parse(JSON.stringify($app));
-    newApp.grid.forEach((x) => {
-        let c = x.data;
-        if (c.componentInput?.type == 'runnable') {
-            c.componentInput.value = $staticExporter[x.id]();
-        }
-    });
-    return { app: newApp, summary: $summary };
-}
 async function computeTriggerables() {
     const allTriggers = await Promise.all($app.grid
         .flatMap((x) => {
@@ -383,16 +374,23 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 					displayName: 'JSON',
 					icon: faFileExport,
 					action: () => {
-						appExport.open()
+						appExport.open($app)
 					}
 				},
 				{
 					displayName: 'Publish to Hub',
 					icon: faGlobe,
 					action: () => {
-						const url = appToHubUrl(toStatic())
+						const url = appToHubUrl(toStatic($app, $staticExporter, $summary))
 						window.open(url.toString(), '_blank')
 					}
+				},
+				{
+					displayName: 'Hub compatible JSON',
+					icon: faFileExport,
+					action: () => {
+						appExport.open(toStatic($app, $staticExporter, $summary).app)
+					}
 				}
 			]}
 		>
@@ -409,7 +407,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 				<span class="hidden md:inline">Debug Runs</span>
 			</Button>
 		</span>
-		<AppExportButton bind:this={appExport} app={$app} />
+		<AppExportButton bind:this={appExport} />
 		<Button
 			on:click={() => (publishDrawerOpen = true)}
 			color="light"

package/components/apps/editor/AppExportButton.svelte

@@ -6,10 +6,11 @@ import { Highlight } from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import { Button } from '../../common';
 let jsonViewerDrawer;
-export function open() {
+let app = undefined;
+export function open(app_l) {
+    app = app_l;
     jsonViewerDrawer?.toggleDrawer();
 }
-export let app;
 </script>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
@@ -25,7 +26,7 @@ export let app;
 			>
 				Copy content
 			</Button>
-			<Highlight language={json} code={JSON.stringify(app, null, 4)} />
+			<Highlight language={json} code={JSON.stringify(app ?? {}, null, 4)} />
 		</div>
 	</DrawerContent>
 </Drawer>

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

@@ -2,8 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { App } from '../types';
 declare const __propDef: {
     props: {
-        open?: (() => void) | undefined;
-        app: App;
+        open?: ((app_l: App) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +13,6 @@ export type AppExportButtonProps = typeof __propDef.props;
 export type AppExportButtonEvents = typeof __propDef.events;
 export type AppExportButtonSlots = typeof __propDef.slots;
 export default class AppExportButton extends SvelteComponentTyped<AppExportButtonProps, AppExportButtonEvents, AppExportButtonSlots> {
-    get open(): () => void;
+    get open(): (app_l: App) => void;
 }
 export {};

package/components/apps/editor/componentsPanel/data.js

@@ -220,10 +220,9 @@ const display = {
                 value: `<img
 	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
 >
-<div class="absolute top-4 left-2  text-white">
+<h1 class="absolute top-4 left-2 text-white">
 	Hello \${ctx.username}
-</div>			
-`,
+</h1>`,
             },
             configuration: {},
             card: false

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -68,7 +68,7 @@ $: {
 }
 </script>
 
-<div class="h-full flex flex-col gap-4">
+<div class="min-h-full flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
 			{#if runnablesByName.length > 0}

package/components/apps/editorUtils.js

@@ -1,16 +1,253 @@
 export function defaultCode(component, language) {
-    if (component === 'tablecomponent' && language === 'deno') {
-        return `export async function main(x: string) {
-  return [
-    { foo: x, bar: 42 },
-    { foo: "static", bar: 84 }]
-}`;
-    }
-    else if (component === 'tablecomponent' && language === 'python3') {
-        return `def main(x: str):
-  return [
-    { "foo": x, "bar": 42 },
-    { "foo": "static", "bar": 84 }]`;
-    }
-    return undefined;
+    return DEFAULT_CODES[component]?.[language];
 }
+const DEFAULT_CODES = {
+    tablecomponent: {
+        deno: `export async function main() {
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]
+}`,
+        python3: `def main():
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]`,
+    },
+    textcomponent: {
+        deno: `export async function main() {
+	return "foo"
+}`,
+        python3: `def main():
+	return "foo"`,
+    },
+    barchartcomponent: {
+        deno: `export async function main() {
+	return {
+		"data": [
+			25,
+			50,
+			25
+		],
+		"labels": [
+			"Bar",
+			"Charts",
+			"<3"
+		]
+	}
+}`,
+        python3: `def main():
+	return {
+		"data": [
+			25,
+			50,
+			25
+		],
+		"labels": [
+			"Bar",
+			"Charts",
+			"<3"
+		]
+	}`,
+    },
+    displaycomponent: {
+        deno: `export async function main() {
+	return {
+		"foo": 42
+	}
+}`,
+        python3: `def main():
+	return {
+		"foo": 42
+	}`,
+    },
+    htmlcomponent: {
+        deno: `export async function main() {
+	return \`<img
+	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
+>
+<h1 class="absolute top-4 left-2 text-white">
+	Hello world
+</h1>\`
+}`,
+        python3: `def main():
+	return '''<img
+	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
+>
+<h1 class="absolute top-4 left-2 text-white">
+	Hello world
+</h1>'''`,
+    },
+    piechartcomponent: {
+        deno: `export async function main() {
+	return {
+		"data": [
+			25,
+			50,
+			25
+		],
+		"labels": [
+			"Pie",
+			"Charts",
+			"<3"
+		]
+	}
+}`,
+        python3: `def main():
+	return {
+		"data": [
+			25,
+			50,
+			25
+		],
+		"labels": [
+			"Pie",
+			"Charts",
+			"<3"
+		]
+	}`,
+    },
+    scatterchartcomponent: {
+        deno: `export async function main() {
+	return [
+		{
+			"label": "foo",
+			"data": [
+				{ "x": 25, "y": 50 },
+				{ "x": 23, "y": 23 },
+				{ "x": 12, "y": 37 }
+			],
+			"backgroundColor": "rgb(255, 12, 137)"
+		},
+		{
+			"label": "bar",
+			"data": [
+				{ "x": 32, "y": 32 },
+				{ "x": 25, "y": 42 },
+				{ "x": 3, "y": 27 }
+			],
+			"backgroundColor": "orange"
+		}
+	]
+}`,
+        python3: `def main():
+	return [
+		{
+			"label": "foo",
+			"data": [
+				{ "x": 25, "y": 50 },
+				{ "x": 23, "y": 23 },
+				{ "x": 12, "y": 37 }
+			],
+			"backgroundColor": "rgb(255, 12, 137)"
+		},
+		{
+			"label": "bar",
+			"data": [
+				{ "x": 32, "y": 32 },
+				{ "x": 25, "y": 42 },
+				{ "x": 3, "y": 27 }
+			],
+			"backgroundColor": "orange"
+		}
+	]`,
+    },
+    timeseriescomponent: {
+        deno: `export async function main() {
+	return [
+		{
+			"label": "foo",
+			"data": [
+				{
+					"x": "2021-11-06 23:39:30",
+					"y": 50
+				},
+				{
+					"x": "2021-11-07 01:00:28",
+					"y": 60
+				},
+				{
+					"x": "2021-11-07 09:00:28",
+					"y": 20
+				}
+			],
+			"backgroundColor": "rgb(255, 12, 137)"
+		},
+		{
+			"label": "bar",
+			"data": [
+				{
+					"x": "2021-11-06 23:39:30",
+					"y": 20
+				},
+				{
+					"x": "2021-11-07 01:00:28",
+					"y": 13
+				},
+				{
+					"x": "2021-11-07 09:00:28",
+					"y": 45
+				}
+			],
+			"backgroundColor": "orange"
+		}
+	]
+}`,
+        python3: `def main():
+	return [
+		{
+			"label": "foo",
+			"data": [
+				{
+					"x": "2021-11-06 23:39:30",
+					"y": 50
+				},
+				{
+					"x": "2021-11-07 01:00:28",
+					"y": 60
+				},
+				{
+					"x": "2021-11-07 09:00:28",
+					"y": 20
+				}
+			],
+			"backgroundColor": "rgb(255, 12, 137)"
+		},
+		{
+			"label": "bar",
+			"data": [
+				{
+					"x": "2021-11-06 23:39:30",
+					"y": 20
+				},
+				{
+					"x": "2021-11-07 01:00:28",
+					"y": 13
+				},
+				{
+					"x": "2021-11-07 09:00:28",
+					"y": 45
+				}
+			],
+			"backgroundColor": "orange"
+		}
+	]`,
+    },
+};

package/components/apps/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Schema } from '../../common';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
-import type { AppComponent } from './types';
+import type { App, AppComponent } from './types';
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare const displayData: Record<AppComponent['type'], {
@@ -12,3 +12,7 @@ export declare function fieldTypeToTsType(inputType: InputType): string;
 export declare function isScriptByNameDefined(appInput: AppInput | undefined): boolean;
 export declare function isScriptByPathDefined(appInput: AppInput | undefined): boolean;
 export declare function clearResultAppInput(appInput: ResultAppInput): ResultAppInput;
+export declare function toStatic(app: App, staticExporter: Record<string, () => any>, summary: string): {
+    app: App;
+    summary: string;
+};

package/components/apps/utils.js

@@ -188,3 +188,13 @@ export function clearResultAppInput(appInput) {
     }
     return appInput;
 }
+export function toStatic(app, staticExporter, summary) {
+    const newApp = JSON.parse(JSON.stringify(app));
+    newApp.grid.forEach((x) => {
+        let c = x.data;
+        if (c.componentInput?.type == 'runnable') {
+            c.componentInput.value = staticExporter[x.id]();
+        }
+    });
+    return { app: newApp, summary };
+}

package/components/jobs/JobDetail.svelte

@@ -2,6 +2,7 @@
 import { page } from '$app/stores';
 import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
 import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { CalendarClock } from 'lucide-svelte';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
 import { Badge } from '../common';
@@ -122,55 +123,21 @@ let scheduleEditor;
 						>
 					</div>
 				{/if}
-				<div>
-					{#if job && job.parent_job}
-						{#if job.is_flow_step}
-							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
-								class="mx-2"
-							>
-								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
-								></span
-							>
-						{:else}
-							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
-								class="mx-2"
-							>
-								Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
-							>
-						{/if}
-					{:else if job && job.schedule_path}
-						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
-						<span class="mx-2"
-							>Triggered by the schedule: <button
-								class="break-words text-sm text-blue-600 font-normal"
-								on:click={() =>
-									scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
-								>{job.schedule_path}</button
-							></span
-						>
-					{/if}
-				</div>
 			</div>
 			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
-				<div>
-					<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
-						Created {displayDaysAgo(job.created_at ?? '')}</span
-					>
-				</div>
 				{#if 'started_at' in job && job.started_at}
 					<div>
 						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-							class="mx-2"
+							class="mx-1.5"
 						>
 							Started {displayDaysAgo(job.started_at ?? '')}</span
 						>
 					</div>
 				{/if}
 				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-					<div>
-						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} /><span
-							class="mx-2"
-						>
+					<div class="inline-flex gap-1">
+						<CalendarClock size={13} class="-ml-0.5" />
+						<span>
 							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 ">Scheduled</span>
 							for {displayDate(job.scheduled_for ?? '')}
 						</span>
@@ -186,6 +153,34 @@ let scheduleEditor;
 						</span>
 					</div>
 				{/if}
+				<div>
+					{#if job && job.parent_job}
+						{#if job.is_flow_step}
+							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
+								></span
+							>
+						{:else}
+							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+							>
+						{/if}
+					{:else if job && job.schedule_path}
+						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+						<span class="mx-1"
+							>Schedule <button
+								class="break-words text-blue-400 font-normal truncate text-xs"
+								on:click={() =>
+									scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+								>{job.schedule_path}</button
+							></span
+						>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>