windmill-components 1.60.3 → 1.70.0

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

@@ -0,0 +1,141 @@
+<script>import { onMount, getContext } from 'svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces } from 'lucide-svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { emptyString } from '../../../../utils';
+import { Tab, TabContent, Tabs } from '../../../common';
+import ListItem from './ListItem.svelte';
+import { isOpenStore } from './store';
+import CssProperty from './CssProperty.svelte';
+import { components } from '../component';
+const TITLE_PREFIX = 'Css.';
+const { app } = getContext('AppEditorContext');
+let rawCode = '';
+let viewJsonSchema = false;
+$: rawCode && parseJson();
+let jsonError = '';
+function parseJson() {
+    try {
+        $app.css = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify($app.css, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+const entries = [
+    {
+        type: 'app',
+        name: 'App',
+        icon: LayoutDashboardIcon,
+        ids: ['viewer', 'grid', 'component']
+    },
+    ...Object.values(components).map(({ name, icon, data: { type, customCss } }) => ({
+        type,
+        name,
+        icon,
+        ids: Object.keys(customCss ?? {}) ?? []
+    }))
+];
+let isCustom = Object.fromEntries(Object.keys(entries).map((k) => [k, false]));
+let newCss = $app.css ?? {};
+entries.forEach((e) => {
+    if (!newCss[e.type]) {
+        isCustom[e.type] = true;
+        newCss[e.type] = {};
+    }
+    e.ids.forEach((id) => {
+        if (!newCss[e.type][id]) {
+            newCss[e.type][id] = { style: '', class: '' };
+        }
+    });
+    e.ids
+        .map((id) => newCss[e.type][id].class != '' || newCss[e.type][id].style != '')
+        .forEach((c) => {
+        if (c) {
+            isCustom[e.type] = true;
+        }
+    });
+});
+//@ts-ignore
+$app.css = newCss;
+onMount(() => {
+    isOpenStore.addItems([{ name: 'App' }, ...Object.values(components)].map(component => {
+        return { [TITLE_PREFIX + component.name]: false };
+    }));
+});
+</script>
+
+<Tabs
+	selected="ui"
+	on:selected={(e) => switchTab(e.detail === 'json')}
+	class="relative"
+>
+	<Tab value="ui" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<MousePointer2 size={16} />
+			<span class="pl-1">UI</span>
+		</div>
+	</Tab>
+	<Tab value="json" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<CurlyBraces size={16} />
+			<span class="pl-1">JSON</span>
+		</div>
+	</Tab>
+	<div slot="content" class="h-full overflow-y-auto">
+		<TabContent value="ui">
+			{#each entries as { type, name, icon, ids }}
+				{#if ids.length > 0}
+					<ListItem title={name} prefix={TITLE_PREFIX}>
+						<div slot="title" class="flex items-center">
+							<svelte:component this={icon} size={18} />
+							<span class="ml-1">
+								{name}
+							</span>
+						</div>
+						<div class="pb-2">
+							{#each ids as id}
+								<div class="mb-3">
+									{#if $app?.css?.[type][id]}
+										<CssProperty
+											name={id}
+											bind:value={$app.css[type][id]}
+											on:focus={() => (isCustom[type] = true)}
+										/>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</ListItem>
+				{/if}
+			{/each}
+		</TabContent>
+		<TabContent value="json">
+			{#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 py-1">
+				<SimpleEditor
+					autoHeight
+					class="editor"
+					lang="json"
+					bind:code={rawCode}
+					fixedOverflowWidgets={false}
+				/>
+			</div>
+		</TabContent>
+	</div>
+</Tabs>

package/components/apps/editor/componentsPanel/CssSettings.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CssSettingsProps = typeof __propDef.props;
+export type CssSettingsEvents = typeof __propDef.events;
+export type CssSettingsSlots = typeof __propDef.slots;
+export default class CssSettings extends SvelteComponentTyped<CssSettingsProps, CssSettingsEvents, CssSettingsSlots> {
+}
+export {};

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

@@ -0,0 +1,28 @@
+<script>import { slide } from 'svelte/transition';
+import { ChevronDown } from 'lucide-svelte';
+import { isOpenStore } from './store';
+export let title;
+export let prefix = '';
+$: storeTitle = prefix + title;
+$: isOpen = $isOpenStore[storeTitle];
+</script>
+
+<section class="mt-1 mb-2 px-1">
+	<button
+		on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
+		class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+			rounded-sm duration-200 hover:bg-gray-100"
+	>
+		<h1 class="text-sm font-semibold text-left">
+			<slot name="title">
+				{title}
+			</slot>
+		</h1>
+		<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
+	</button>
+	{#if isOpen}
+		<div transition:slide|local={{ duration: 300 }} class="px-2">
+			<slot />
+		</div>
+	{/if}
+</section>

package/components/apps/editor/componentsPanel/ListItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        prefix?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/components/apps/editor/componentsPanel/componentStaticValues.d.ts

@@ -1,7 +1,10 @@
 export declare const staticValues: {
-    readonly buttonColorOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light")[];
+    readonly buttonColorOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
     readonly buttonSizeOptions: readonly ["xs", "sm", "md", "lg", "xl"];
     readonly tableSearchOptions: readonly ["By Component", "By Runnable", "Disabled"];
     readonly chartThemeOptions: readonly ["theme1", "theme2", "theme3"];
     readonly textStyleOptions: readonly ["Title", "Subtitle", "Body", "Label", "Caption"];
+    readonly currencyOptions: readonly ["USD", "EUR", "GBP", "CAD", "AUD", "JPY", "CNY", "INR", "BRL"];
+    readonly localeOptions: readonly ["en-US", "en-GB", "en-IE", "de-DE", "fr-FR", "br-FR", "ja-JP", "pt-TL", "fr-CA", "en-CA"];
+    readonly objectFitOptions: readonly ["contain", "cover", "fill"];
 };

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

@@ -5,5 +5,8 @@ export const staticValues = {
     buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
     tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
     chartThemeOptions: ['theme1', 'theme2', 'theme3'],
-    textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption']
+    textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
+    currencyOptions: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY', 'INR', 'BRL'],
+    localeOptions: ['en-US', 'en-GB', 'en-IE', 'de-DE', 'fr-FR', 'br-FR', 'ja-JP', 'pt-TL', 'fr-CA', 'en-CA'],
+    objectFitOptions: ['contain', 'cover', 'fill']
 };

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,8 +1,7 @@
-<script>import { page } from '$app/stores';
-import { classNames } from '../../../../utils';
+<script>import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
-import { key } from 'svelte-awesome/icons';
-import { displayData } from '../../utils';
+import { findGridItem } from '../appUtils';
+import { components } from '../component';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppEditorContext');
@@ -22,13 +21,16 @@ function connectInput(componentId, path) {
     }
 }
 function getComponentNameById(componentId) {
-    const component = $app.grid.find((c) => c?.data?.id === componentId);
+    const component = findGridItem($app, componentId);
     if (component?.data.type) {
-        return displayData[component?.data.type].name;
+        return components[component?.data.type].name;
     }
     else if (componentId == 'ctx') {
         return 'Context';
     }
+    else if (componentId.startsWith('bg_')) {
+        return 'Background';
+    }
     else {
         return 'Table action';
     }

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

@@ -1,13 +1,22 @@
-<script>import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+<script>import { Button, Drawer, DrawerContent, Tab, Tabs } from '../../../common';
+import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+import PickHubScript from '../../../flows/pickers/PickHubScript.svelte';
 import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
-import { emptySchema } from '../../../../utils';
+import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
-import { defaultCode } from '../../editorUtils';
+import { defaultCode } from '../component';
+import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
+import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 export let name;
 export let id;
+let tab = 'inlinescripts';
+let filter = '';
+let picker;
 const { appPath, app } = getContext('AppEditorContext');
 const dispatch = createEventDispatcher();
 async function inferInlineScriptSchema(language, content, schema) {
@@ -21,9 +30,12 @@ async function inferInlineScriptSchema(language, content, schema) {
 }
 async function createInlineScriptByLanguage(language, path, subkind = undefined) {
     const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type;
-    const fullPath = `${appPath}/inline-script/${path}`;
     const content = defaultCode(componentType, language) ??
         initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
+    return newInlineScript(content, language, path);
+}
+async function newInlineScript(content, language, path) {
+    const fullPath = `${appPath}/inline-script/${path}`;
     let schema = emptySchema();
     schema = await inferInlineScriptSchema(language, content, schema);
     const newInlineScript = {
@@ -34,15 +46,80 @@ async function createInlineScriptByLanguage(language, path, subkind = undefined)
     };
     dispatch('new', newInlineScript);
 }
+async function pickScript(path) {
+    const script = await getScriptByPath(path);
+    newInlineScript(script.content, script.language, path);
+}
+async function pickHubScript(path) {
+    const script = await getScriptByPath(path);
+    newInlineScript(script.content, script.language, path);
+}
+function pickInlineScript(name) {
+    const unusedInlineScriptIndex = $app.unusedInlineScripts?.findIndex((script) => script.name === name);
+    const unusedInlineScript = $app.unusedInlineScripts?.[unusedInlineScriptIndex];
+    $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
+    $app = $app;
+    dispatch('new', unusedInlineScript.inlineScript);
+}
 const langs = ['deno', 'python3', 'go', 'bash'];
+function loadSchemaFromTriggerable(path, arg1) {
+    throw new Error('Function not implemented.');
+}
 </script>
 
-<div class="flex flex-col p-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
-	Please choose a language:
+<Drawer bind:this={picker} size="1000px">
+	<DrawerContent title="Script/Flow Picker" on:close={picker.closeDrawer}>
+		<div>
+			<div class="max-w-6xl">
+				<Tabs bind:selected={tab}>
+					<Tab size="sm" value="inlinescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Detached Inline Scripts
+						</div>
+					</Tab>
+					<Tab size="sm" value="workspacescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Workspace Scripts
+						</div>
+					</Tab>
+
+					<Tab size="sm" value="hubscripts">
+						<div class="flex gap-2 items-center my-1">
+							<Globe2 size={18} />
+							Hub Scripts
+						</div>
+					</Tab>
+				</Tabs>
+				<div class="my-2" />
+				<div class="flex flex-col gap-y-16">
+					<div class="flex flex-col">
+						{#if tab == 'inlinescripts'}
+							<InlineScriptList
+								on:pick={(e) => pickInlineScript(e.detail)}
+								inlineScripts={$app.unusedInlineScripts
+									? $app.unusedInlineScripts.map((uis) => uis.name)
+									: []}
+							/>
+						{:else if tab == 'workspacescripts'}
+							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
+						{:else if tab == 'hubscripts'}
+							<PickHubScript bind:filter on:pick={(e) => pickHubScript(e.detail.path)} />
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<div class="flex flex-col px-4 py-2 gap-2 text-sm" in:fly={{ duration: 50 }}>
+	<div>Choose a language:</div>
 	<div class="flex gap-2 flex-row flex-wrap">
 		{#each langs as lang}
 			<FlowScriptPicker
-				label={lang}
+				label={capitalize(lang)}
 				{lang}
 				on:click={() => {
 					createInlineScriptByLanguage(lang, name)
@@ -57,12 +134,24 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
 			}}
 		/>
-		<FlowScriptPicker
+		<!-- <FlowScriptPicker
 			label={`MySQL`}
 			lang="mysql"
 			on:click={() => {
 				createInlineScriptByLanguage(Script.language.DENO, name, 'mysql')
 			}}
-		/>
+		/> -->
+	</div>
+
+	<div class="mt-4">
+		<Button
+			on:click={() => picker?.openDrawer()}
+			size="sm"
+			color="blue"
+			startIcon={{ icon: faCodeBranch }}
+			btnClasses="truncate"
+		>
+			or fork a detached/Workspace/Hub script
+		</Button>
 	</div>
 </div>

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

@@ -1,7 +1,7 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, getContext, onMount } from 'svelte';
-import { CheckCircle, Code2, X } from 'lucide-svelte';
+import { CheckCircle, Code2, Maximize2, Trash2, X } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
@@ -9,6 +9,7 @@ import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
 import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
 import Tooltip from '../../../Tooltip.svelte';
+import Popover from '../../../Popover.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
@@ -39,21 +40,51 @@ let runLoading = false;
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
 <div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
-	<div class="flex justify-between w-full gap-1 px-2 pt-1 flex-row items-center">
+	<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
 		{/if}
 		<div class="flex w-full flex-row gap-2 items-center justify-end">
 			{#if validCode}
-				<Badge color="green">
+				<Badge color="green" baseClass="!p-0 !h-[30px] aspect-square center-center">
 					<CheckCircle size={16} />
 				</Badge>
 			{:else}
-				<Badge color="red">
+				<Badge color="red" baseClass="!p-0 !h-[30px] aspect-square center-center">
 					<X size={16} />
 				</Badge>
 			{/if}
 
+			{#if id.startsWith('unused-') || id.startsWith('bg_')}
+				<Popover notClickable placement="bottom">
+					<Button
+						size="xs"
+						color="red"
+						variant="border"
+						btnClasses="!px-1.5"
+						aria-label="Delete"
+						on:click={() => dispatch('delete')}
+					>
+						<Trash2 size={16} />
+					</Button>
+					<svelte:fragment slot="text">Delete</svelte:fragment>
+				</Popover>
+			{/if}
+			<Popover notClickable placement="bottom">
+				<Button
+					size="xs"
+					color="blue"
+					variant="border"
+					btnClasses="!px-1.5"
+					aria-label="Open full editor"
+					on:click={() => {
+						inlineScriptEditorDrawer?.openDrawer()
+					}}
+				>
+					<Maximize2 size={16} />
+				</Button>
+				<svelte:fragment slot="text">Open full editor</svelte:fragment>
+			</Popover>
 			<Button
 				variant="border"
 				size="xs"
@@ -62,18 +93,9 @@ let runLoading = false;
 					editor.format()
 				}}
 			>
-				Format&nbsp;<Tooltip>Ctrl+S</Tooltip>
+				Format&nbsp;<Tooltip placement="bottom">Ctrl+S</Tooltip>
 			</Button>
-			{#if id.startsWith('unused-')}
-				<Button
-					size="xs"
-					color="light"
-					variant="border"
-					iconOnly
-					startIcon={{ icon: faTrash }}
-					on:click={() => dispatch('delete')}
-				/>
-			{:else if $runnableComponents[id] != undefined}
+			{#if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
@@ -85,22 +107,9 @@ let runLoading = false;
 					}}
 				>
 					Run&nbsp;
-					<Tooltip light>Ctrl+Enter</Tooltip>
+					<Tooltip light placement="bottom">Ctrl+Enter</Tooltip>
 				</Button>
 			{/if}
-
-			<Button
-				size="xs"
-				color="blue"
-				on:click={() => {
-					inlineScriptEditorDrawer?.openDrawer()
-				}}
-			>
-				<div class="flex gap-1 items-center">
-					<Code2 size={16} />
-					Open full editor
-				</div>
-			</Button>
 		</div>
 	</div>
 

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

@@ -3,11 +3,14 @@ import Button from '../../../common/button/Button.svelte';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
 import { inferArgs } from '../../../../infer';
+import { workspaceStore } from '../../../../stores';
 import { emptySchema, getScriptByPath } from '../../../../utils';
 import { faCodeBranch, faExternalLinkAlt, faEye, faPen } from '@fortawesome/free-solid-svg-icons';
 import { clearResultAppInput } from '../../utils';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
 export let componentInput;
 export let id;
 async function fork(path) {
@@ -34,6 +37,22 @@ async function fork(path) {
 }
 let drawerFlowViewer;
 let flowPath = '';
+async function refreshScript(x) {
+    let { schema } = await getScriptByPath(x.path);
+    if (!deepEqual(x.schema, schema)) {
+        x.schema = schema;
+        if (componentInput?.type == 'runnable') {
+            componentInput.fields = computeFields(schema, false, componentInput.fields);
+        }
+        componentInput = componentInput;
+    }
+}
+$: if (componentInput &&
+    componentInput.type == 'runnable' &&
+    componentInput?.runnable?.type === 'runnableByPath' &&
+    componentInput.runnable.runType == 'script') {
+    refreshScript(componentInput.runnable);
+}
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
@@ -116,7 +135,8 @@ let flowPath = '';
 							startIcon={{ icon: faEye }}
 							endIcon={{ icon: faExternalLinkAlt }}
 							target="_blank"
-							href="/flows/get/{componentInput?.['runnable']?.path}">Details page</Button
+							href="/flows/get/{componentInput?.['runnable']?.path}?workspace_id={$workspaceStore}"
+							>Details page</Button
 						>
 					</div>
 					<FlowPathViewer path={componentInput.runnable.path} />