windmill-components 1.383.9 → 1.389.2

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>

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -1,14 +1,13 @@
-<script>import DisplayResult from '../../DisplayResult.svelte';
-import LogViewer from '../../LogViewer.svelte';
-import { getContext } from 'svelte';
-import { Splitpanes, Pane } from 'svelte-splitpanes';
+<script>import { getContext } from 'svelte';
 import TestJobLoader from '../../TestJobLoader.svelte';
-import { Loader2 } from 'lucide-svelte';
+import RunnalbeJobPanelInner from './RunnalbeJobPanelInner.svelte';
+export let float = true;
+export let hidden = false;
+export let testJob = undefined;
+export let jobToWatch = undefined;
 const { runnableJobEditorPanel, selectedComponentInEditor } = getContext('AppEditorContext');
-let testJob = undefined;
 let testIsLoading = false;
 let testJobLoader;
-let jobToWatch = undefined;
 $: $runnableJobEditorPanel.focused &&
     $selectedComponentInEditor &&
     $runnableJobEditorPanel.jobs &&
@@ -39,57 +38,25 @@ let resultDrawerOpen = false;
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
-{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen}
+{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen || !float}
 	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor ?? '']}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		class="absolute z-[100] top-0 right-0 border-t h-full"
-		style="width: {$runnableJobEditorPanel.width}px; transform: translateX({$runnableJobEditorPanel.width}px);"
-	>
-		<Splitpanes horizontal>
-			<Pane size={frontendJob ? 30 : 50} minSize={10}>
-				{#if frontendJob}
-					<div class="p-2 bg-surface-secondary h-full w-full">
-						<div class="text-sm text-tertiary pb-4">Frontend Job</div>
-						<div class="text-2xs text-tertiary">Check your browser console to see the logs</div>
-					</div>
-				{:else}
-					<LogViewer
-						bind:drawerOpen={logDrawerOpen}
-						small
-						jobId={testJob?.id}
-						duration={testJob?.['duration_ms']}
-						mem={testJob?.['mem_peak']}
-						content={testJob?.logs}
-						isLoading={testIsLoading && testJob?.['running'] == false}
-						tag={testJob?.tag}
-					/>
-				{/if}
-			</Pane>
-			<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
-				{#if frontendJob}
-					<div class="break-words relative h-full px-1">
-						<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
-					</div>
-				{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<div class="break-words relative h-full px-1">
-						<DisplayResult
-							bind:drawerOpen={resultDrawerOpen}
-							workspaceId={testJob?.workspace_id}
-							jobId={testJob?.id}
-							result={testJob.result}
-						/></div
-					>
-				{:else}
-					<div class="px-1 pt-1">
-						{#if testIsLoading}
-							<Loader2 class="animate-spin" />
-						{:else}
-							Test to see the result here
-						{/if}
-					</div>
-				{/if}
-			</Pane>
-		</Splitpanes>
-	</div>
+	{#if float}
+		<div
+			class="absolute z-[100] top-0 right-0 border-t h-full"
+			style="width: {$runnableJobEditorPanel.width}px; transform: translateX({$runnableJobEditorPanel.width}px);"
+		>
+			<RunnalbeJobPanelInner {frontendJob} {testJob} />
+		</div>
+	{:else}
+		<div class="flex flex-col w-full">
+			{#if $selectedComponentInEditor}
+				<RunnalbeJobPanelInner {frontendJob} {testJob} />
+			{:else if !hidden}
+				<div class="text-sm text-secondary text-center py-8 px-2 border-l h-full">
+					Logs and results will be displayed here
+				</div>
+			{/if}
+		</div>
+	{/if}
 {/if}

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

@@ -1,6 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { Job } from '../../../gen';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        float?: boolean | undefined;
+        hidden?: boolean | undefined;
+        testJob?: Job | undefined;
+        jobToWatch?: {
+            componentId: string;
+            job: string;
+        } | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/editor/RunnalbeJobPanelInner.svelte

@@ -0,0 +1,56 @@
+<script>import DisplayResult from '../../DisplayResult.svelte';
+import LogViewer from '../../LogViewer.svelte';
+import { Splitpanes, Pane } from 'svelte-splitpanes';
+import { Loader2 } from 'lucide-svelte';
+export let frontendJob = false;
+export let testJob = undefined;
+let testIsLoading = false;
+let logDrawerOpen = false;
+let resultDrawerOpen = false;
+</script>
+
+<Splitpanes horizontal>
+	<Pane size={frontendJob ? 30 : 50} minSize={10}>
+		{#if frontendJob}
+			<div class="p-2 bg-surface-secondary h-full w-full">
+				<div class="text-sm text-tertiary pb-4">Frontend Job</div>
+				<div class="text-2xs text-tertiary">Check your browser console to see the logs</div>
+			</div>
+		{:else}
+			<LogViewer
+				bind:drawerOpen={logDrawerOpen}
+				small
+				jobId={testJob?.id}
+				duration={testJob?.['duration_ms']}
+				mem={testJob?.['mem_peak']}
+				content={testJob?.logs}
+				isLoading={testIsLoading && testJob?.['running'] == false}
+				tag={testJob?.tag}
+			/>
+		{/if}
+	</Pane>
+	<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
+		{#if frontendJob}
+			<div class="break-words relative h-full px-1">
+				<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
+			</div>
+		{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+			<div class="break-words relative h-full px-1">
+				<DisplayResult
+					bind:drawerOpen={resultDrawerOpen}
+					workspaceId={testJob?.workspace_id}
+					jobId={testJob?.id}
+					result={testJob.result}
+				/></div
+			>
+		{:else}
+			<div class="px-1 pt-1">
+				{#if testIsLoading}
+					<Loader2 class="animate-spin" />
+				{:else}
+					Test to see the result here
+				{/if}
+			</div>
+		{/if}
+	</Pane>
+</Splitpanes>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Job } from '../../../gen';
+declare const __propDef: {
+    props: {
+        frontendJob?: boolean | any;
+        testJob?: Job | any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunnalbeJobPanelInnerProps = typeof __propDef.props;
+export type RunnalbeJobPanelInnerEvents = typeof __propDef.events;
+export type RunnalbeJobPanelInnerSlots = typeof __propDef.slots;
+export default class RunnalbeJobPanelInner extends SvelteComponent<RunnalbeJobPanelInnerProps, RunnalbeJobPanelInnerEvents, RunnalbeJobPanelInnerSlots> {
+}
+export {};

package/package/components/apps/editor/SubGridEditor.svelte

@@ -70,7 +70,7 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 					? `animate-border border-dashed border-2 min-h-full ${
 							isActive && !$selectedComponent?.includes(id)
 								? 'border-orange-600'
-								: 'border-gray-600'
+								: 'dark:border-gray-600 border-gray-400'
 					  }`
 					: ''}
 			>
@@ -86,6 +86,7 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 					selectedIds={$selectedComponent}
 					let:dataItem
 					let:hidden
+					let:overlapped
 					cols={columnConfiguration}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
@@ -103,6 +104,7 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 						<GridEditorMenu id={dataItem.id}>
 							<Component
 								{hidden}
+								{overlapped}
 								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 								render={visible}
 								component={dataItem.data}

package/package/components/apps/editor/component/Component.svelte

@@ -76,14 +76,17 @@ import AppDateSelect from '../../components/inputs/AppDateSelect.svelte';
 import AppDisplayComponentByJobId from '../../components/display/AppRecomputeAll.svelte';
 import AppRecomputeAll from '../../components/display/AppRecomputeAll.svelte';
 import AppUserResource from '../../components/inputs/AppUserResource.svelte';
+import { Anchor } from 'lucide-svelte';
 export let component;
 export let selected;
 export let locked = false;
 export let render;
 export let hidden;
 export let fullHeight;
-const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext');
+export let overlapped = false;
+const { mode, app, hoverStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
+const componentActive = editorContext?.componentActive;
 const movingcomponents = editorContext?.movingcomponents;
 $: ismoving =
     movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
@@ -117,10 +120,25 @@ function mouseOut() {
 		}
 	}}
 	on:mouseout|stopPropagation={mouseOut}
-	class="h-full flex flex-col w-full component {initializing
-		? 'overflow-hidden h-0'
-		: ''} {hidden && $mode === 'preview' ? 'hidden' : ''} "
+	class={twMerge(
+		'h-full flex flex-col w-full component relative',
+		initializing ? 'overflow-hidden h-0' : '',
+		hidden && $mode === 'preview' ? 'hidden' : ''
+	)}
 >
+	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id && overlapped}
+		<div
+			class={twMerge(
+				'absolute inset-0 bg-locked center-center flex-col z-50',
+				overlapped ? 'bg-locked-hover' : ''
+			)}
+		>
+			<div class="bg-surface p-2 shadow-sm rounded-md flex center-center flex-col gap-2">
+				<Anchor size={24} class="text-primary " />
+				<div class="text-xs">Anchored: The component cannot be moved</div>
+			</div>
+		</div>
+	{/if}
 	{#if $mode !== 'preview'}
 		<ComponentHeader
 			on:mouseover={() => {
@@ -349,6 +367,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponentee'}
@@ -360,6 +379,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'aggridinfinitecomponent'}
@@ -370,6 +390,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'aggridinfinitecomponentee'}
@@ -381,6 +402,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'textcomponent'}

package/package/components/apps/editor/component/Component.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         render: boolean;
         hidden: boolean;
         fullHeight: boolean;
+        overlapped?: boolean | undefined;
     };
     events: {
         lock: CustomEvent<any>;

package/package/components/apps/editor/component/components.d.ts

@@ -70,17 +70,21 @@ export type TableComponent = BaseComponent<'tablecomponent'> & {
 };
 export type AggridComponent = BaseComponent<'aggridcomponent'> & {
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type AggridComponentEe = BaseComponent<'aggridcomponentee'> & {
     license: string;
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type AggridInfiniteComponent = BaseComponent<'aggridinfinitecomponent'> & {
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type AggridInfiniteComponentEe = BaseComponent<'aggridinfinitecomponentee'> & {
     actions: TableAction[];
     license: string;
+    actionsOrder: RichConfiguration | undefined;
 };
 export type DisplayComponent = BaseComponent<'displaycomponent'>;
 export type JobIdDisplayComponent = BaseComponent<'jobiddisplaycomponent'>;
@@ -156,6 +160,7 @@ export type MenuComponent = BaseComponent<'menucomponent'> & {
 export type DBExplorerComponent = BaseComponent<'dbexplorercomponent'> & {
     columns: RichConfiguration;
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type S3FileInputComponent = BaseComponent<'s3fileinputcomponent'> & {
     onFileChange?: string[];

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

@@ -14,6 +14,7 @@ import SimpleEditor from '../../../SimpleEditor.svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 import Popover from '../../../Popover.svelte';
+import { tailwindClasses } from './tailwindUtils';
 export let name;
 export let value = {};
 export let forceStyle = false;
@@ -191,6 +192,7 @@ let render = 0;
 						<SimpleEditor
 							class="h-24 border !rounded-none"
 							lang="tailwindcss"
+							{tailwindClasses}
 							bind:code={value.class}
 							fixedOverflowWidgets={true}
 							small