windmill-components 1.383.8 → 1.389.1

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

@@ -14,7 +14,6 @@ import { classNames, encodeState, sendUserToast } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
-import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import { page } from '$app/stores';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
@@ -34,6 +33,8 @@ import { getTheme } from './componentsPanel/themeUtils';
 import StylePanel from './settingsPanel/StylePanel.svelte';
 import RunnableJobPanel from './RunnableJobPanel.svelte';
 import { goto, replaceState } from '$app/navigation';
+import HideButton from './settingsPanel/HideButton.svelte';
+import AppEditorBottomPanel from './AppEditorBottomPanel.svelte';
 export let app;
 export let path;
 export let policy;
@@ -238,7 +239,7 @@ function onThemeChange() {
 let runnablePanelSize = 30;
 let gridPanelSize = 70;
 let leftPanelSize = 22;
-let centerPanelSize = 63;
+let centerPanelSize = 56;
 let rightPanelSize = 22;
 let tmpRunnablePanelSize = -1;
 let tmpGridPanelSize = -1;
@@ -407,11 +408,96 @@ function setGridPanelSize(x) {
 }
 let runnableJobEnterTimeout = undefined;
 let stillInJobEnter = false;
+let storedLeftPanelSize = 0;
+let storedRightPanelSize = 0;
+let storedBottomPanelSize = 0;
+let centerPanelWidth = 0;
+function hideLeftPanel() {
+    storedLeftPanelSize = leftPanelSize;
+    leftPanelSize = 0;
+    centerPanelSize = centerPanelSize + storedLeftPanelSize;
+}
+function hideRightPanel() {
+    storedRightPanelSize = rightPanelSize;
+    rightPanelSize = 0;
+    centerPanelSize = centerPanelSize + storedRightPanelSize;
+}
+function hideBottomPanel() {
+    storedBottomPanelSize = runnablePanelSize;
+    gridPanelSize = 99;
+    runnablePanelSize = 0;
+}
+function showLeftPanel() {
+    leftPanelSize = storedLeftPanelSize;
+    centerPanelSize = centerPanelSize - storedLeftPanelSize;
+    storedLeftPanelSize = 0;
+}
+function showRightPanel() {
+    rightPanelSize = storedRightPanelSize;
+    centerPanelSize = centerPanelSize - storedRightPanelSize;
+    storedRightPanelSize = 0;
+}
+function showBottomPanel() {
+    runnablePanelSize = storedBottomPanelSize;
+    gridPanelSize = gridPanelSize - storedBottomPanelSize;
+    storedBottomPanelSize = 0;
+}
+function keydown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    switch (event.key) {
+        case 'b': {
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                if (leftPanelSize !== 0) {
+                    hideLeftPanel();
+                }
+                else {
+                    showLeftPanel();
+                }
+            }
+            break;
+        }
+        case 'u': {
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                if (rightPanelSize !== 0) {
+                    hideRightPanel();
+                }
+                else {
+                    showRightPanel();
+                }
+            }
+            break;
+        }
+        case 'l': {
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                if (runnablePanelSize !== 0) {
+                    hideBottomPanel();
+                }
+                else {
+                    showBottomPanel();
+                }
+            }
+            break;
+        }
+    }
+}
+let testJob = undefined;
+let jobToWatch = undefined;
 </script>
 
+<svelte:head>
+	<link rel="stylesheet" href="/tailwind_full.css" />
+</svelte:head>
+
 <DarkModeObserver on:change={onThemeChange} />
 
-<svelte:window on:hashchange={hashchange} />
+<svelte:window on:hashchange={hashchange} on:keydown={keydown} />
 
 {#if !$userStore?.operator}
 	{#if $appStore}
@@ -423,6 +509,15 @@ let stillInJobEnter = false;
 			{diffDrawer}
 			bind:savedApp
 			{version}
+			leftPanelHidden={leftPanelSize === 0}
+			rightPanelHidden={rightPanelSize === 0}
+			bottomPanelHidden={runnablePanelSize === 0}
+			on:showLeftPanel={() => showLeftPanel()}
+			on:showRightPanel={() => showRightPanel()}
+			on:hideLeftPanel={() => hideLeftPanel()}
+			on:hideRightPanel={() => hideRightPanel()}
+			on:hideBottomPanel={() => hideBottomPanel()}
+			on:showBottomPanel={() => showBottomPanel()}
 		/>
 		{#if $mode === 'preview'}
 			<SplitPanesWrapper>
@@ -468,7 +563,7 @@ let stillInJobEnter = false;
 							<!-- {yTop} -->
 
 							<SecondaryMenu right={false} />
-							<ContextPanel />
+							<ContextPanel on:hidePanel={() => hideLeftPanel()} />
 						</div>
 					</Pane>
 					<Pane bind:size={centerPanelSize}>
@@ -485,7 +580,39 @@ let stillInJobEnter = false;
 										'wm-app-viewer h-full overflow-visible'
 									)}
 									style={$appStore.css?.['app']?.['viewer']?.style}
+									bind:clientWidth={centerPanelWidth}
 								>
+									{#if leftPanelSize === 0}
+										<div class="absolute top-0.5 left-0.5 z-50">
+											<HideButton
+												on:click={() => showLeftPanel()}
+												direction="right"
+												hidden
+												btnClasses="border bg-surface"
+											/>
+										</div>
+									{/if}
+									{#if rightPanelSize === 0}
+										<div class="absolute top-0.5 right-0.5 z-50">
+											<HideButton
+												on:click={() => showRightPanel()}
+												direction="left"
+												hidden
+												btnClasses="border bg-surface"
+											/>
+										</div>
+									{/if}
+									{#if runnablePanelSize === 0}
+										<div class="absolute bottom-0.5 right-0.5 z-50">
+											<HideButton
+												on:click={() => showBottomPanel()}
+												direction="bottom"
+												hidden
+												btnClasses="border bg-surface"
+											/>
+										</div>
+									{/if}
+
 									<div class="absolute bottom-2 left-2 z-50 border bg-surface">
 										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
 											<Button
@@ -573,9 +700,7 @@ let stillInJobEnter = false;
 							</Pane>
 							{#if $connectingInput?.opened == false && !$componentActive}
 								<Pane bind:size={runnablePanelSize}>
-									<!-- svelte-ignore a11y-no-static-element-interactions -->
-									<div
-										class="relative h-full w-full overflow-x-visible"
+									<AppEditorBottomPanel
 										on:mouseenter={() => {
 											runnableJobEnterTimeout && clearTimeout(runnableJobEnterTimeout)
 											stillInJobEnter = true
@@ -585,6 +710,7 @@ let stillInJobEnter = false;
 												}
 											}, 200)
 										}}
+										on:hidePanel={() => hideBottomPanel()}
 										on:mouseleave={() => {
 											stillInJobEnter = false
 											runnableJobEnterTimeout = setTimeout(
@@ -592,98 +718,119 @@ let stillInJobEnter = false;
 												200
 											)
 										}}
+										{rightPanelSize}
+										{centerPanelWidth}
+										{runnablePanelSize}
 									>
-										<InlineScriptsPanel />
-										<RunnableJobPanel />
-									</div>
+										<RunnableJobPanel
+											float={rightPanelSize !== 0}
+											hidden={runnablePanelSize === 0}
+											bind:testJob
+											bind:jobToWatch
+										/>
+									</AppEditorBottomPanel>
 								</Pane>
 							{/if}
 						</Splitpanes>
 					</Pane>
-					<Pane bind:size={rightPanelSize} minSize={15} maxSize={33}>
-						<div bind:clientWidth={$runnableJob.width} class="relative flex flex-col h-full">
-							<Tabs bind:selected={selectedTab} wrapperClass="!min-h-[42px]" class="!h-full">
-								<Popover disappearTimeout={0} notClickable placement="bottom">
-									<svelte:fragment slot="text">Component library</svelte:fragment>
-									<Tab
-										value="insert"
-										size="xs"
-										class="h-full"
-										on:pointerdown={() => {
-											if ($cssEditorOpen) {
-												$cssEditorOpen = false
-												selectedTab = 'insert'
-											}
-										}}
-										id="app-editor-component-library-tab"
-									>
-										<div class="m-1 center-center">
-											<Plus size={18} />
-										</div>
-									</Tab>
-								</Popover>
-								<Popover disappearTimeout={0} notClickable placement="bottom">
-									<svelte:fragment slot="text">Component settings</svelte:fragment>
-									<Tab
-										value="settings"
-										size="xs"
-										class="h-full"
-										on:pointerdown={() => {
-											if ($cssEditorOpen) {
-												$cssEditorOpen = false
-												selectedTab = 'settings'
-											}
-										}}
-									>
-										<div class="m-1 center-center">
-											<Component size={18} />
-										</div>
-									</Tab>
-								</Popover>
-								<Popover disappearTimeout={0} notClickable placement="bottom">
-									<svelte:fragment slot="text">Global styling</svelte:fragment>
-									<Tab
-										value="css"
-										size="xs"
-										class="h-full"
-										on:pointerdown={() => {
-											if (!$cssEditorOpen) {
-												$cssEditorOpen = true
-												selectedTab = 'css'
-											}
-										}}
-									>
-										<div class="m-1 center-center">
-											<Paintbrush size={18} />
-										</div>
-									</Tab>
-								</Popover>
-								<div slot="content" class="h-full overflow-y-auto">
-									<TabContent class="overflow-auto h-full" value="settings">
-										{#if $selectedComponent !== undefined}
-											<SettingsPanel
-												on:delete={() => {
-													befSelected = undefined
+					{#if rightPanelSize === 0}
+						<div class="relative flex flex-col h-full" />
+					{:else}
+						<Pane bind:size={rightPanelSize} minSize={15} maxSize={33}>
+							<div bind:clientWidth={$runnableJob.width} class="relative flex flex-col h-full">
+								<Tabs bind:selected={selectedTab} wrapperClass="!min-h-[42px]" class="!h-full">
+									<Popover disappearTimeout={0} notClickable placement="bottom">
+										<svelte:fragment slot="text">Component library</svelte:fragment>
+										<Tab
+											value="insert"
+											size="xs"
+											class="h-full"
+											on:pointerdown={() => {
+												if ($cssEditorOpen) {
+													$cssEditorOpen = false
 													selectedTab = 'insert'
-												}}
-											/>
-											<SecondaryMenu right />
-										{:else}
-											<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
-												Select a component to see the settings&nbsp;for&nbsp;it
+												}
+											}}
+											id="app-editor-component-library-tab"
+										>
+											<div class="m-1 center-center">
+												<Plus size={18} />
 											</div>
-										{/if}
-									</TabContent>
-									<TabContent value="insert">
-										<ComponentList />
-									</TabContent>
-									<TabContent value="css" class="h-full">
-										<CssSettings />
-									</TabContent>
-								</div>
-							</Tabs>
-						</div>
-					</Pane>
+										</Tab>
+									</Popover>
+									<Popover disappearTimeout={0} notClickable placement="bottom">
+										<svelte:fragment slot="text">Component settings</svelte:fragment>
+										<Tab
+											value="settings"
+											size="xs"
+											class="h-full"
+											on:pointerdown={() => {
+												if ($cssEditorOpen) {
+													$cssEditorOpen = false
+													selectedTab = 'settings'
+												}
+											}}
+										>
+											<div class="m-1 center-center">
+												<Component size={18} />
+											</div>
+										</Tab>
+									</Popover>
+									<Popover disappearTimeout={0} notClickable placement="bottom">
+										<svelte:fragment slot="text">Global styling</svelte:fragment>
+										<Tab
+											value="css"
+											size="xs"
+											class="h-full"
+											on:pointerdown={() => {
+												if (!$cssEditorOpen) {
+													$cssEditorOpen = true
+													selectedTab = 'css'
+												}
+											}}
+										>
+											<div class="m-1 center-center">
+												<Paintbrush size={18} />
+											</div>
+										</Tab>
+									</Popover>
+									<div class="h-full w-full flex justify-end px-1">
+										<HideButton
+											on:click={() => {
+												storedRightPanelSize = rightPanelSize
+												rightPanelSize = 0
+												centerPanelSize = centerPanelSize + storedRightPanelSize
+											}}
+											direction="right"
+										/>
+									</div>
+									<div slot="content" class="h-full overflow-y-auto">
+										<TabContent class="overflow-auto h-full" value="settings">
+											{#if $selectedComponent !== undefined}
+												<SettingsPanel
+													on:delete={() => {
+														befSelected = undefined
+														selectedTab = 'insert'
+													}}
+												/>
+												<SecondaryMenu right />
+											{:else}
+												<div class="min-w-[150px] text-sm !text-secondary 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>
+										<TabContent value="css" class="h-full">
+											<CssSettings />
+										</TabContent>
+									</div>
+								</Tabs>
+							</div>
+						</Pane>
+					{/if}
 				</Splitpanes>
 			</SplitPanesWrapper>
 		{/if}

package/package/components/apps/editor/AppEditorBottomPanel.svelte

@@ -0,0 +1,22 @@
+<script>import { twMerge } from 'tailwind-merge';
+import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
+import RunnableJobPanel from './RunnableJobPanel.svelte';
+export let rightPanelSize = 0;
+export let centerPanelWidth = 0;
+export let runnablePanelSize = 0;
+</script>
+
+{#if rightPanelSize !== 0}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class={twMerge('relative h-full w-full overflow-x-visible')} on:mouseenter on:mouseleave>
+		<InlineScriptsPanel on:hidePanel />
+		<RunnableJobPanel hidden={runnablePanelSize === 0} />
+		<slot />
+	</div>
+{:else}
+	<div class="flex flex-row relative w-full h-full">
+		<InlineScriptsPanel width={centerPanelWidth - 400} on:hidePanel />
+
+		<slot />
+	</div>
+{/if}

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        rightPanelSize?: number | undefined;
+        centerPanelWidth?: number | undefined;
+        runnablePanelSize?: number | undefined;
+    };
+    events: {
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        hidePanel: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AppEditorBottomPanelProps = typeof __propDef.props;
+export type AppEditorBottomPanelEvents = typeof __propDef.events;
+export type AppEditorBottomPanelSlots = typeof __propDef.slots;
+export default class AppEditorBottomPanel extends SvelteComponent<AppEditorBottomPanelProps, AppEditorBottomPanelEvents, AppEditorBottomPanelSlots> {
+}
+export {};

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

@@ -14,7 +14,7 @@ import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { enterpriseLicense, workspaceStore } from '../../../stores';
 import { AlignHorizontalSpaceAround, BellOff, Bug, Clipboard, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, MoreVertical, RefreshCw, Save, Smartphone, FileClock } from 'lucide-svelte';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { classNames, cleanValueProperties, copyToClipboard, truncateRev, orderedJsonStringify } from '../../../utils';
 import { BG_PREFIX, allItems, toStatic } from '../utils';
@@ -47,6 +47,7 @@ import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
 import ToggleEnable from '../../common/toggleButton-v2/ToggleEnable.svelte';
+import HideButton from './settingsPanel/HideButton.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -69,7 +70,10 @@ export let fromHub = false;
 export let diffDrawer = undefined;
 export let savedApp = undefined;
 export let version = undefined;
-const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun } = getContext('AppViewerContext');
+export let leftPanelHidden = false;
+export let rightPanelHidden = false;
+export let bottomPanelHidden = false;
+const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun, mode } = getContext('AppViewerContext');
 const { history, jobsDrawerOpen, refreshComponents } = getContext('AppEditorContext');
 const loading = {
     publish: false,
@@ -612,6 +616,7 @@ let appReportingDrawerOpen = false;
 export function openTroubleshootPanel() {
     debugAppDrawerOpen = true;
 }
+const dispatch = createEventDispatcher();
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -1191,6 +1196,43 @@ export function openTroubleshootPanel() {
 		</div>
 	</div>
 
+	{#if $mode !== 'preview'}
+		<div class="flex gap-1">
+			<HideButton
+				direction="left"
+				hidden={leftPanelHidden}
+				on:click={() => {
+					if (leftPanelHidden) {
+						dispatch('showLeftPanel')
+					} else {
+						dispatch('hideLeftPanel')
+					}
+				}}
+			/>
+			<HideButton
+				hidden={bottomPanelHidden}
+				direction="bottom"
+				on:click={() => {
+					if (bottomPanelHidden) {
+						dispatch('showBottomPanel')
+					} else {
+						dispatch('hideBottomPanel')
+					}
+				}}
+			/>
+			<HideButton
+				hidden={rightPanelHidden}
+				direction="right"
+				on:click={() => {
+					if (rightPanelHidden) {
+						dispatch('showRightPanel')
+					} else {
+						dispatch('hideRightPanel')
+					}
+				}}
+			/>
+		</div>
+	{/if}
 	{#if $enterpriseLicense && appPath != ''}
 		<Awareness />
 	{/if}

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

@@ -16,12 +16,21 @@ declare const __propDef: {
             draft_only?: boolean | undefined;
         } | undefined;
         version?: number | undefined;
+        leftPanelHidden?: boolean | undefined;
+        rightPanelHidden?: boolean | undefined;
+        bottomPanelHidden?: boolean | undefined;
         toggleTutorial?: (() => void) | undefined;
         openTroubleshootPanel?: (() => void) | undefined;
     };
     events: {
         keydown: KeyboardEvent;
         restore: CustomEvent<any>;
+        showLeftPanel: CustomEvent<any>;
+        hideLeftPanel: CustomEvent<any>;
+        showBottomPanel: CustomEvent<any>;
+        hideBottomPanel: CustomEvent<any>;
+        showRightPanel: CustomEvent<any>;
+        hideRightPanel: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -40,7 +40,7 @@ export function open(app_l) {
 							variant="border"
 							size="sm"
 							startIcon={{ icon: Clipboard }}
-							btnClasses="absolute top-2 right-2 w-min"
+							btnClasses="absolute top-2 right-2 w-min z-20"
 						>
 							Copy content
 						</Button>

package/package/components/apps/editor/AppPreview.svelte

@@ -177,6 +177,10 @@ let appHeight = 0;
 $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 </script>
 
+<svelte:head>
+	<link rel="stylesheet" href="/tailwind_full.css" />
+</svelte:head>
+
 <DarkModeObserver on:change={onThemeChange} />
 
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -3,11 +3,10 @@ import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import { classNames, displayDate, emptyString } from '../../../utils';
 import { AppService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
-import AppPreview from './AppPreview.svelte';
 import { Skeleton } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { createEventDispatcher } from 'svelte';
-import { Pencil, ArrowRight, X } from 'lucide-svelte';
+import { Pencil, ArrowRight, X, Loader2 } from 'lucide-svelte';
 export let appPath;
 let loading = false;
 let versions = [];
@@ -165,7 +164,12 @@ loadVersions();
 							</Button>
 						</div>
 					</div>
-					<AppPreview noBackend app={selected.value} context={{}} />
+
+					{#await import('./AppPreview.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default noBackend app={selected.value} context={{}} />
+					{/await}
 				{:else}
 					<Skeleton layout={[[40]]} />
 				{/if}

package/package/components/apps/editor/GridEditor.svelte

@@ -17,7 +17,7 @@ import Tooltip from '../../Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath, bgRuns } = getContext('AppViewerContext');
+const { selectedComponent, app, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath, bgRuns } = getContext('AppViewerContext');
 const { history, scale, componentActive } = getContext('AppEditorContext');
 let previousSelectedIds = undefined;
 $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
@@ -105,14 +105,7 @@ function handleFillHeight(id) {
 		}}
 		bind:clientWidth={$parentWidth}
 	>
-		<div
-			class={twMerge(
-				!$focusedGrid && $mode !== 'preview' ? 'outline-dashed' : '',
-				'subgrid  overflow-visible  z-100',
-				'outline-[#999999] dark:outline-[#aaaaaa] outline-dotted outline-offset-2 outline-1 '
-			)}
-			style={`transform: scale(${$scale / 100});`}
-		>
+		<div class="subgrid overflow-visible z-100" style={`transform: scale(${$scale / 100});`}>
 			<Grid
 				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
@@ -123,6 +116,7 @@ function handleFillHeight(id) {
 				}}
 				let:dataItem
 				let:hidden
+				let:overlapped
 				cols={columnConfiguration}
 			>
 				<ComponentWrapper
@@ -163,6 +157,7 @@ function handleFillHeight(id) {
 							on:fillHeight={() => {
 								handleFillHeight(dataItem.id)
 							}}
+							overlapped={overlapped !== undefined}
 						/>
 					</GridEditorMenu>
 				</ComponentWrapper>
@@ -180,10 +175,6 @@ function handleFillHeight(id) {
 {/if}
 
 <style global>
-	:global(.svlt-grid-shadow) {
-		/* Back shadow */
-		background: #93c4fdd0 !important;
-	}
 	:global(.svlt-grid-active) {
 		opacity: 1 !important;
 	}</style>