windmill-components 1.60.4 → 1.70.0

package/components/apps/editor/AppEditor.svelte

@@ -1,5 +1,6 @@
 <script>import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import { onMount, setContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
@@ -10,9 +11,9 @@ import TabContent from '../../common/tabs/TabContent.svelte';
 import { Alert, Button, Tab } from '../../common';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import Icon from 'svelte-awesome';
-import { faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
-import { classNames, encodeState } from '../../../utils';
+import { encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import { userStore, workspaceStore } from '../../../stores';
 import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
@@ -20,11 +21,14 @@ import SettingsPanel from './SettingsPanel.svelte';
 import { fly } from 'svelte/transition';
 import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { page } from '$app/stores';
+import CssSettings from './componentsPanel/CssSettings.svelte';
+import { findGridItem } from './appUtils';
 export let app;
 export let path;
 export let initialMode = 'dnd';
 export let policy;
 export let summary;
+export let fromHub = false;
 const appStore = writable(app);
 const worldStore = writable(undefined);
 const staticOutputs = writable({});
@@ -38,6 +42,8 @@ const connectingInput = writable({
     hoveredComponent: undefined
 });
 const runnableComponents = writable({});
+const errorByComponent = writable({});
+const focusedGrid = writable(undefined);
 setContext('AppEditorContext', {
     worldStore,
     staticOutputs,
@@ -55,7 +61,10 @@ setContext('AppEditorContext', {
     isEditor: true,
     jobs: writable([]),
     staticExporter: writable({}),
-    noBackend: false
+    noBackend: false,
+    errorByComponent,
+    openDebugRun: writable(undefined),
+    focusedGrid
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -99,21 +108,28 @@ else {
 {#if !$userStore?.operator}
 	<UnsavedConfirmationModal />
 	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} />
+		<AppEditorHeader {policy} {fromHub} />
 	{/if}
 
 	{#if previewing}
-		<AppPreview
-			workspace={$workspaceStore ?? ''}
-			summary={$summaryStore}
-			app={$appStore}
-			appPath={path}
-			{breakpoint}
-			{policy}
-			isEditor
-			{context}
-			noBackend={false}
-		/>
+		<SplitPanesWrapper>
+			<div
+				class={twMerge('bg-gray-100 h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+				style={$appStore.css?.['app']?.['viewer']?.style}
+			>
+				<AppPreview
+					workspace={$workspaceStore ?? ''}
+					summary={$summaryStore}
+					app={$appStore}
+					appPath={path}
+					{breakpoint}
+					{policy}
+					isEditor
+					{context}
+					noBackend={false}
+				/>
+			</div>
+		</SplitPanesWrapper>
 	{:else}
 		<SplitPanesWrapper>
 			<Splitpanes class="max-w-full overflow-hidden">
@@ -125,15 +141,23 @@ else {
 						<Splitpanes horizontal>
 							<Pane size={$connectingInput?.opened ? 100 : 70}>
 								<div
-									class="bg-gray-100 relative  w-full h-full overflow-auto {app.fullscreen
-										? ''
-										: 'max-w-6xl'}"
+									class={twMerge(
+										'bg-gray-100 h-full w-full',
+										$appStore.css?.['app']?.['viewer']?.class
+									)}
+									style={$appStore.css?.['app']?.['viewer']?.style}
 								>
-									{#if $appStore.grid}
-										<div class={classNames('p-4 mx-auto', width)}>
-											<GridEditor {policy} />
-										</div>
-									{/if}
+									<div
+										class="relative  mx-auto w-full h-full overflow-auto {app.fullscreen
+											? ''
+											: 'max-w-6xl'}"
+									>
+										{#if $appStore.grid}
+											<div class={width}>
+												<GridEditor {policy} />
+											</div>
+										{/if}
+									</div>
 								</div>
 							</Pane>
 							<Pane size={$connectingInput?.opened ? 0 : 30}>
@@ -146,31 +170,42 @@ else {
 				</Pane>
 				<Pane size={21} minSize={5} maxSize={33}>
 					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab}>
-							<Tab value="insert" size="xs">
-								<div class="m-1 flex flex-row gap-2">
+						<Tabs bind:selected={selectedTab} class="!border-b-2 !border-gray-200">
+							<Tab value="insert" size="xs" class="grow">
+								<div class="m-1 center-center gap-2">
 									<Icon data={faPlus} />
 									<span>Insert</span>
 								</div>
 							</Tab>
-							<Tab value="settings" size="xs">
-								<div class="m-1 flex flex-row gap-2">
+							<Tab value="settings" size="xs" class="grow">
+								<div class="m-1 center-center gap-2">
 									<Icon data={faSliders} />
 									<span>Settings</span>
 								</div>
 							</Tab>
-							<svelte:fragment slot="content">
+							<Tab value="css" size="xs" class="grow">
+								<div class="m-1 center-center gap-2">
+									<Icon data={faCode} />
+									<span>CSS</span>
+								</div>
+							</Tab>
+							<div slot="content" class="h-full overflow-y-auto pb-4">
 								<TabContent class="overflow-auto" value="settings">
 									{#if $selectedComponent !== undefined}
 										<SettingsPanel />
 									{:else}
-										<div class="p-2 min-w-[150px] text-sm">No component selected.</div>
+										<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+											Select a component to see the settings&nbsp;for&nbsp;it
+										</div>
 									{/if}
 								</TabContent>
 								<TabContent value="insert">
 									<ComponentList />
 								</TabContent>
-							</svelte:fragment>
+								<TabContent value="css">
+									<CssSettings />
+								</TabContent>
+							</div>
 						</Tabs>
 						{#if $connectingInput.opened}
 							<div

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         initialMode?: EditorMode | undefined;
         policy: Policy;
         summary: string;
+        fromHub?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/AppEditorHeader.svelte

@@ -19,13 +19,14 @@ import Tooltip from '../../Tooltip.svelte';
 import { AppService, Job, Policy } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { faBug, faClipboard, faExternalLink, faFileExport, faGlobe, faSave } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, Smartphone } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, SlidersHorizontal, Smartphone, X } from 'lucide-svelte';
 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 AppInputs from './AppInputs.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 async function hash(message) {
     const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -35,20 +36,38 @@ async function hash(message) {
     return hashHex;
 }
 export let policy;
-const { app, summary, mode, breakpoint, appPath, jobs, staticExporter } = getContext('AppEditorContext');
+export let fromHub = false;
+const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppEditorContext');
 const loading = {
     publish: false,
     save: false
 };
+$: if ($openDebugRun == undefined) {
+    $openDebugRun = (componentId) => {
+        jobsDrawerOpen = true;
+        const job = $jobs.find((job) => job.component === componentId);
+        if (job) {
+            selectedJobId = job.job;
+        }
+    };
+}
 let newPath = '';
 let pathError = undefined;
 let appExport;
 let saveDrawerOpen = false;
 let jobsDrawerOpen = false;
 let publishDrawerOpen = false;
+let inputsDrawerOpen = fromHub;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
+function collectStaticFields(fields) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'static')
+        .map(([k, v]) => {
+        return [k, v['value']];
+    }));
+}
 async function computeTriggerables() {
     const allTriggers = await Promise.all($app.grid
         .flatMap((x) => {
@@ -61,11 +80,7 @@ async function computeTriggerables() {
     })
         .map(async (input) => {
         if (input?.type == 'runnable') {
-            const staticInputs = Object.fromEntries(Object.entries(input.fields ?? {})
-                .filter(([k, v]) => v.type == 'static')
-                .map(([k, v]) => {
-                return [k, v['value']];
-            }));
+            const staticInputs = collectStaticFields(input.fields);
             if (input.runnable?.type == 'runnableByName') {
                 let hex = await hash(input.runnable.inlineScript?.content);
                 return [`rawscript/${hex}`, staticInputs];
@@ -76,8 +91,13 @@ async function computeTriggerables() {
             }
         }
         return [];
-    }));
-    policy.triggerables = Object.fromEntries(allTriggers);
+    })
+        .concat(Object.values($app.hiddenInlineScripts).map(async (v) => {
+        let hex = await hash(v.inlineScript?.content);
+        const staticInputs = collectStaticFields(v.fields);
+        return [`rawscript/${hex}`, staticInputs];
+    })));
+    policy.triggerables = Object.fromEntries(allTriggers.filter((x) => x.length > 0));
     policy.on_behalf_of = `u/${$userStore?.username}`;
     policy.on_behalf_of_email = $userStore?.email;
 }
@@ -146,6 +166,7 @@ let testJobLoader;
 let job = undefined;
 let testIsLoading = false;
 $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
+$: hasErrors = Object.keys($errorByComponent).length > 0;
 </script>
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
@@ -156,7 +177,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			bind:error={pathError}
 			bind:path={newPath}
 			initialPath=""
-			namePlaceholder="my_app"
+			namePlaceholder="app"
 			kind="app"
 		/>
 
@@ -170,6 +191,12 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:open={inputsDrawerOpen} size="600px">
+	<DrawerContent title="App inputs configuration" on:close={() => (inputsDrawerOpen = false)}>
+		<AppInputs />
+	</DrawerContent>
+</Drawer>
+
 <Drawer bind:open={jobsDrawerOpen} size="900px">
 	<DrawerContent noPadding title="Debug Runs" on:close={() => (jobsDrawerOpen = false)}>
 		<Splitpanes class="!overflow-visible">
@@ -181,10 +208,13 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 								{#each $jobs ?? [] as { job, component } (job)}
 									<!-- svelte-ignore a11y-click-events-have-key-events -->
 									<div
-										class="{classNames(
+										class={classNames(
 											'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-											selectedJobId == job ? 'bg-blue-100 text-blue-600' : ''
-										)},"
+											$errorByComponent[job] ? 'border border-red-500 bg-red-100' : '',
+											selectedJobId == job && !$errorByComponent[component]
+												? 'bg-blue-100 text-blue-600'
+												: ''
+										)}
 										on:click={() => (selectedJobId = job)}
 									>
 										<span class="text-xs truncate">{job}</span>
@@ -206,12 +236,14 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 						{:else}
 							<div class="flex flex-col h-full w-full gap-4 mb-4">
 								{#if job?.['running']}
-									<div class="flex flex-row-reverse w-full"
-										><Button
+									<div class="flex flex-row-reverse w-full">
+										<Button
 											color="red"
 											variant="border"
-											on:click={() => testJobLoader?.cancelJob()}>Cancel</Button
+											on:click={() => testJobLoader?.cancelJob()}
 										>
+											Cancel
+										</Button>
 									</div>
 								{/if}
 								<div class="p-2">
@@ -365,7 +397,23 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			</ToggleButtonGroup>
 		</div>
 	</div>
-	<div class="flex flex-row grow gap-2 justify-end items-center overflow-visible">
+	{#if $focusedGrid !== undefined}
+		<Badge color="indigo">
+			<div class="flex flex-row gap-2 justify-center items-center">
+				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+				<button
+					on:click={() => {
+						$selectedComponent = undefined
+						$focusedGrid = undefined
+					}}
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</Badge>
+	{/if}
+
+	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
 			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px] hidden lg:block"
@@ -396,10 +444,18 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 		>
 			<MoreVertical size={20} />
 		</Dropdown>
+		<span class="hidden md:inline">
+			<Button on:click={() => (inputsDrawerOpen = true)} color="light" size="xs" variant="border">
+				<span class="flex gap-2">
+					<SlidersHorizontal size={14} />
+					App inputs
+				</span>
+			</Button>
+		</span>
 		<span class="hidden md:inline">
 			<Button
 				on:click={() => (jobsDrawerOpen = true)}
-				color="light"
+				color={hasErrors ? 'red' : 'light'}
 				size="xs"
 				variant="border"
 				startIcon={{ icon: faBug }}

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

@@ -3,6 +3,7 @@ import { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         policy: Policy;
+        fromHub?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/AppInputs.svelte

@@ -0,0 +1,60 @@
+<script>import { Alert } from '../../common';
+import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
+import AppComponentInput from './AppComponentInput.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+const { app, lazyGrid } = getContext('AppEditorContext');
+let resourceOnly = true;
+</script>
+
+<Alert type="info" title="Configurations">
+	In order to properly configure the app, you need to fill in the inputs below.
+</Alert>
+<div class="mt-2 flex flex-row-reverse">
+	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
+</div>
+<div class="gap-4 flex flex-col pt-4">
+	{#each $lazyGrid as gridItem (gridItem.data.id)}
+		<div>
+			{#if gridItem.data.type === 'tablecomponent'}
+				<div>
+					<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+					<div class="ml-4 mt-4">
+						{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
+							<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+			{/if}
+		</div>
+	{/each}
+</div>
+
+{#if $app?.hiddenInlineScripts?.length > 0}
+	<div class="font-bold text-lg">Background script inputs</div>
+	<div class="gap-4 flex flex-col pt-4">
+		{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
+			<div class="border p-2">
+				<div class="text-sm font-bold">{script.name}</div>
+
+				{#if resourceOnly && Object.keys(script.fields).filter((fieldKey) => {
+						const fields = script.fields
+						const field = fields[fieldKey]
+						return field.fieldType === 'object' && field.format?.startsWith('resource-')
+					}).length === 0}
+					<span class="text-sm text-gray-600">No resource input</span>
+				{:else}
+					<InputsSpecsEditor
+						id={`bg_${index}`}
+						shouldCapitalize={false}
+						bind:inputSpecs={script.fields}
+						userInputEnabled={false}
+						{resourceOnly}
+					/>
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}

package/components/apps/editor/AppInputs.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 AppInputsProps = typeof __propDef.props;
+export type AppInputsEvents = typeof __propDef.events;
+export type AppInputsSlots = typeof __propDef.slots;
+export default class AppInputs extends SvelteComponentTyped<AppInputsProps, AppInputsEvents, AppInputsSlots> {
+}
+export {};

package/components/apps/editor/AppPreview.svelte

@@ -45,7 +45,10 @@ setContext('AppEditorContext', {
     isEditor,
     jobs: writable([]),
     staticExporter: writable({}),
-    noBackend
+    noBackend,
+    errorByComponent: writable({}),
+    openDebugRun: writable(undefined),
+    focusedGrid: writable(undefined)
 });
 let mounted = false;
 onMount(() => {
@@ -57,10 +60,12 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 </script>
 
 <div class="relative">
-	<div class="{$$props.class} {lockedClasses} h-full max-h-[calc(100%-41px)] overflow-auto 
-	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+	<div
+		class="{$$props.class} {lockedClasses} h-full 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
+	>
 		{#if $appStore.grid}
-			<div class={classNames('mx-auto pb-4', width)}>
+			<div class={classNames('mx-auto', width)}>
 				<GridEditor {policy} />
 			</div>
 		{/if}
@@ -69,10 +74,10 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
 			transition:fade|local={{ duration: 200, easing: cubicOut }}
-			on:click={() => isLocked = false}
+			on:click={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
 		>
-			<Button on:click={() => isLocked = false}>
+			<Button on:click={() => (isLocked = false)}>
 				Unlock preview
 				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
 			</Button>

package/components/apps/editor/ComponentHeader.svelte

@@ -1,12 +1,21 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Move } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { Anchor, Bug, Move } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import Popover from '../../Popover.svelte';
+import { Alert, Button } from '../../common';
 export let component;
 export let selected;
 export let locked = false;
 export let pointerdown = false;
 export let hover = false;
 const dispatch = createEventDispatcher();
+const { errorByComponent, openDebugRun, focusedGrid, worldStore } = getContext('AppEditorContext');
+$: error = Object.values($errorByComponent).find((e) => e.componentId === component.id);
+function openDebugRuns() {
+    if ($openDebugRun) {
+        $openDebugRun(component.id);
+    }
+}
 </script>
 
 <span
@@ -52,3 +61,32 @@ const dispatch = createEventDispatcher();
 		<Move size={14} />
 	</span>
 {/if}
+
+{#if error}
+	{@const json = JSON.parse(JSON.stringify(error.error))}
+	<span
+		title="Error"
+		class={classNames(
+			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+			'bg-red-100/80'
+		)}
+	>
+		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+			<Bug size={14} />
+			<span slot="text">
+				<div class="bg-white">
+					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
+						<div class="flex flex-col gap-2">
+							<div>
+								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
+									>{json?.stack ?? ''}
+									</pre>
+							</div>
+							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
+						</div>
+					</Alert>
+				</div>
+			</span>
+		</Popover>
+	</span>
+{/if}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../types';
+import type { AppComponent } from './component';
 declare const __propDef: {
     props: {
         component: AppComponent;