windmill-components 1.75.0 → 1.77.0

package/components/apps/components/layout/AppTabs.svelte

@@ -1,5 +1,6 @@
 <script>import { Tab, Tabs } from '../../../common';
 import { getContext, onMount } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { concatCustomCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
@@ -9,12 +10,17 @@ export let componentContainerHeight;
 export let tabs;
 export let customCss = undefined;
 export let render;
+export let initializing = configuration.tabsKind != undefined;
 export const staticOutputs = ['selectedTabIndex'];
-const { app, worldStore, focusedGrid, selectedComponent } = getContext('AppViewerContext');
-const { componentControl } = getContext('AppEditorContext');
+const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl } = getContext('AppViewerContext');
 let selected = tabs[0];
-let noPadding = undefined;
+let kind = undefined;
 let tabHeight = 0;
+$: outputs = $worldStore
+    ? initOutput($worldStore, id, {
+        selectedTabIndex: 0
+    })
+    : undefined;
 function handleTabSelection() {
     const selectedIndex = tabs?.indexOf(selected);
     outputs?.selectedTabIndex.set(selectedIndex, true);
@@ -54,46 +60,71 @@ $componentControl[id] = {
             return true;
         }
         return false;
+    },
+    setTab: (tab) => {
+        selected = tabs[tab];
     }
 };
 $: selected && handleTabSelection();
-$: outputs = $worldStore?.outputsById[id];
 $: selectedIndex = tabs?.indexOf(selected) ?? -1;
 $: css = concatCustomCss($app.css?.tabscomponent, customCss);
+let subgridWidth = undefined;
 </script>
 
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+<InputValue
+	on:done={() => initializing && (initializing = false)}
+	{id}
+	input={configuration.tabsKind}
+	bind:value={kind}
+/>
 
-<div>
-	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
-		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+<div class={kind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>
+	{#if !kind || kind == 'tabs' || (kind == 'invisibleOnView' && $mode == 'dnd')}
+		<div bind:clientHeight={tabHeight}>
+			<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+				{#each tabs ?? [] as res}
+					<Tab
+						value={res}
+						class={css?.tabs?.class}
+						style={css?.tabs?.style}
+						selectedClass={css?.selectedTab?.class}
+						selectedStyle={css?.selectedTab?.style}
+					>
+						<span class="font-semibold">{res}</span>
+					</Tab>
+				{/each}
+			</Tabs>
+		</div>
+	{:else if kind == 'sidebar'}
+		<div
+			class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-white text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
+		>
 			{#each tabs ?? [] as res}
-				<Tab
-					value={res}
-					class={css?.tabs?.class}
-					style={css?.tabs?.style}
-					selectedClass={css?.selectedTab?.class}
-					selectedStyle={css?.selectedTab?.style}
+				<button
+					class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border hover:text-black px-1 py-2 {selected ==
+					res
+						? 'outline outline-gray-500 outline-1 bg-white text-black'
+						: ''}"
+					on:pointerdown|stopPropagation
+					on:click={() => (selected = res)}>{res}</button
 				>
-					<span class="font-semibold">{res}</span>
-				</Tab>
 			{/each}
-		</Tabs>
-	</div>
-	{#if $app.subgrids}
-		{#each tabs ?? [] as res, i}
-			<SubGridEditor
-				{id}
-				visible={render && i === selectedIndex}
-				bind:subGrid={$app.subgrids[`${id}-${i}`]}
-				{noPadding}
-				class={css?.container?.class}
-				style={css?.container?.style}
-				containerHeight={componentContainerHeight - tabHeight}
-				on:focus={() => {
-					$selectedComponent = id
-				}}
-			/>
-		{/each}
+		</div>
 	{/if}
+
+	<div bind:clientWidth={subgridWidth} class="w-full">
+		{#if $app.subgrids}
+			{#each tabs ?? [] as res, i}<SubGridEditor
+					{id}
+					visible={render && i === selectedIndex}
+					bind:subGrid={$app.subgrids[`${id}-${i}`]}
+					class={css?.container?.class}
+					style={css?.container?.style}
+					containerHeight={componentContainerHeight - tabHeight}
+					on:focus={() => {
+						$selectedComponent = id
+					}}
+				/>{/each}
+		{/if}
+	</div>
 </div>

package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         tabs: string[];
         customCss?: ComponentCustomCSS<'tabRow' | 'tabs' | 'selectedTab' | 'container'> | undefined;
         render: boolean;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/editor/AppEditor.svelte

@@ -70,11 +70,12 @@ setContext('AppViewerContext', {
     openDebugRun: writable(undefined),
     focusedGrid,
     stateId: writable(0),
-    parentWidth: writable(0)
+    parentWidth: writable(0),
+    state: writable({}),
+    componentControl: writable({})
 });
 setContext('AppEditorContext', {
     history,
-    componentControl: writable({}),
     pickVariableCallback
 });
 let timeout = undefined;
@@ -129,144 +130,148 @@ let variableEditor = undefined;
 	/>
 {/if}
 {#if !$userStore?.operator}
-	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} {fromHub} />
-	{/if}
+	{#if $appStore}
+		{#if initialMode !== 'preview'}
+			<AppEditorHeader {policy} {fromHub} />
+		{/if}
 
-	{#if previewing}
-		<SplitPanesWrapper>
-			<div
-				class={twMerge('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">
-				<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
-					<ContextPanel />
-				</Pane>
-				<Pane size={64}>
-					<SplitPanesWrapper>
-						<Splitpanes horizontal>
-							<Pane size={$connectingInput?.opened ? 100 : 70}>
-								<div
-									on:pointerdown={(e) => {
-										$selectedComponent = undefined
-										$focusedGrid = undefined
-									}}
-									class={twMerge(
-										'bg-gray-100 h-full w-full',
-										$appStore.css?.['app']?.['viewer']?.class
-									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
-								>
+		{#if previewing}
+			<SplitPanesWrapper>
+				<div
+					class={twMerge('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">
+					<Pane size={15} minSize={5} maxSize={33}>
+						<ContextPanel />
+					</Pane>
+					<Pane size={64}>
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
+								<Pane size={70}>
 									<div
-										class={classNames(
-											'relative mx-auto w-full h-full overflow-auto',
-											app.fullscreen ? '' : 'max-w-6xl'
+										on:pointerdown={(e) => {
+											$selectedComponent = undefined
+											$focusedGrid = undefined
+										}}
+										class={twMerge(
+											'bg-gray-100 h-full w-full',
+											$appStore.css?.['app']?.['viewer']?.class
 										)}
+										style={$appStore.css?.['app']?.['viewer']?.style}
 									>
-										{#if $appStore.grid}
-											<ComponentNavigation />
+										<div
+											class={classNames(
+												'relative mx-auto w-full h-full overflow-auto',
+												app.fullscreen ? '' : 'max-w-6xl'
+											)}
+										>
+											{#if $appStore.grid}
+												<ComponentNavigation />
 
-											<div on:pointerdown|stopPropagation class={width}>
-												<GridEditor {policy} />
-											</div>
+												<div on:pointerdown|stopPropagation class={width}>
+													<GridEditor {policy} />
+												</div>
 
-											<div id="app-editor-top-level-drawer" />
-										{/if}
+												<div id="app-editor-top-level-drawer" />
+											{/if}
+										</div>
 									</div>
+								</Pane>
+								<Pane size={$connectingInput?.opened ? 0 : 30}>
+									<div class="relative h-full w-full">
+										<InlineScriptsPanel />
+									</div>
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					</Pane>
+					<Pane size={21} minSize={5} maxSize={33}>
+						<div class="relative flex flex-col h-full">
+							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
+								<Tab value="insert" size="xs">
+									<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 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
+									</div>
+								</Tab>
+								<Tab value="css" size="xs">
+									<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 h-full" value="settings">
+										{#if $selectedComponent !== undefined}
+											<SettingsPanel />
+										{:else}
+											<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>
+									<TabContent value="css">
+										<CssSettings />
+									</TabContent>
 								</div>
-							</Pane>
-							<Pane size={$connectingInput?.opened ? 0 : 30}>
-								<div class="relative h-full w-full">
-									<InlineScriptsPanel />
-								</div>
-							</Pane>
-						</Splitpanes>
-					</SplitPanesWrapper>
-				</Pane>
-				<Pane size={21} minSize={5} maxSize={33}>
-					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
-							<Tab value="insert" size="xs">
-								<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 center-center gap-2">
-									<Icon data={faSliders} />
-									<span>Settings</span>
-								</div>
-							</Tab>
-							<Tab value="css" size="xs">
-								<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="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>
-								<TabContent value="css">
-									<CssSettings />
-								</TabContent>
-							</div>
-						</Tabs>
-						{#if $connectingInput.opened}
-							<div
-								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly|local={{ duration: 100, y: -100 }}
-							>
-								<Alert title="Connecting" type="info">
-									<div class="flex gap-2 flex-col">
-										Click on the output of the component you want to connect to on the left panel.
-										<div>
-											<Button
-												color="blue"
-												variant="border"
-												size="xs"
-												on:click={() => {
-													$connectingInput.opened = false
-													$connectingInput.input = undefined
-												}}
-											>
-												Stop connecting
-											</Button>
+							</Tabs>
+							{#if $connectingInput.opened}
+								<div
+									class="fixed top-32  p-2 z-50 flex justify-center items-center"
+									transition:fly|local={{ duration: 100, y: -100 }}
+								>
+									<Alert title="Connecting" type="info">
+										<div class="flex gap-2 flex-col">
+											Click on the output of the component you want to connect to on the left panel.
+											<div>
+												<Button
+													color="blue"
+													variant="border"
+													size="xs"
+													on:click={() => {
+														$connectingInput.opened = false
+														$connectingInput.input = undefined
+													}}
+												>
+													Stop connecting
+												</Button>
+											</div>
 										</div>
-									</div>
-								</Alert>
-							</div>
-						{/if}
-					</div>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
+									</Alert>
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		{/if}
+	{:else}
+		App is null
 	{/if}
 {:else}
 	App editor not available to operators

package/components/apps/editor/AppEditorHeader.svelte

@@ -9,6 +9,7 @@ import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelt
 import DisplayResult from '../../DisplayResult.svelte';
 import Dropdown from '../../Dropdown.svelte';
 import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
+import { idMutex } from '../../flows/flowStateUtils';
 import FlowStatusViewer from '../../FlowStatusViewer.svelte';
 import JobArgs from '../../JobArgs.svelte';
 import LogViewer from '../../LogViewer.svelte';
@@ -173,7 +174,11 @@ let job = undefined;
 let testIsLoading = false;
 $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 $: hasErrors = Object.keys($errorByComponent).length > 0;
+let lock = false;
 function onKeyDown(event) {
+    if (lock)
+        return;
+    lock = true;
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey) {
@@ -212,6 +217,7 @@ function onKeyDown(event) {
         // 	break
         // }
     }
+    lock = false;
 }
 </script>
 
@@ -417,12 +423,12 @@ function onKeyDown(event) {
 				<ToggleButton position="left" value="dnd" size="xs">
 					<div class="inline-flex gap-1 items-center">
 						<Pencil size={14} />
-						<span class="hidden md:inline">Editor</span>
+						<span class="hidden lg:inline">Editor</span>
 					</div>
 				</ToggleButton>
 				<ToggleButton position="right" value="preview" size="xs">
 					<div class="inline-flex gap-1 items-center">
-						<Eye size={14} /> <span class="hidden md:inline">Preview</span>
+						<Eye size={14} /> <span class="hidden lg:inline">Preview</span>
 					</div>
 				</ToggleButton>
 			</ToggleButtonGroup>
@@ -439,42 +445,46 @@ function onKeyDown(event) {
 		</div>
 
 		<div class="hidden lg:block">
-			<ToggleButtonGroup bind:selected={$app.fullscreen}>
-				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start items-center">
-						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light class="mb-0.5">
-							The max width is 1168px and the content stay centered instead of taking the full page
-							width
-						</Tooltip>
-					</div>
-				</ToggleButton>
-				<ToggleButton position="right" value={true} size="xs">
-					<Expand size={14} />
-				</ToggleButton>
-			</ToggleButtonGroup>
+			{#if $app}
+				<ToggleButtonGroup bind:selected={$app.fullscreen}>
+					<ToggleButton position="left" value={false} size="xs">
+						<div class="flex gap-1 justify-start items-center">
+							<AlignHorizontalSpaceAround size={14} />
+							<Tooltip light class="mb-0.5">
+								The max width is 1168px and the content stay centered instead of taking the full
+								page width
+							</Tooltip>
+						</div>
+					</ToggleButton>
+					<ToggleButton position="right" value={true} size="xs">
+						<Expand size={14} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			{/if}
 		</div>
 	</div>
 	{#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>
+		<div class="hidden lg:block">
+			<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>
+		</div>
 	{/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"
+			btnClasses="hidden lg:block"
 			dropdownItems={[
 				{
 					displayName: 'JSON',
@@ -499,9 +509,7 @@ function onKeyDown(event) {
 					}
 				}
 			]}
-		>
-			<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">
@@ -518,7 +526,7 @@ function onKeyDown(event) {
 				variant="border"
 				startIcon={{ icon: faBug }}
 			>
-				<span class="hidden md:inline">Debug Runs</span>
+				<span class="hidden xl:inline">Debug Runs</span>
 			</Button>
 		</span>
 		<AppExportButton bind:this={appExport} />
@@ -529,7 +537,7 @@ function onKeyDown(event) {
 			variant="border"
 			startIcon={{ icon: faExternalLink }}
 		>
-			<span class="hidden md:inline">Publish</span>
+			<span class="hidden xl:inline">Publish</span>
 		</Button>
 		{#if appPath == ''}
 			<Button

package/components/apps/editor/AppPreview.svelte

@@ -47,11 +47,12 @@ setContext('AppViewerContext', {
     openDebugRun: writable(undefined),
     focusedGrid: writable(undefined),
     stateId: writable(0),
-    parentWidth: writable(0)
+    parentWidth: writable(0),
+    state: writable({}),
+    componentControl: writable({})
 });
 setContext('AppEditorContext', {
     history: undefined,
-    componentControl: writable({}),
     pickVariableCallback: writable(undefined)
 });
 let mounted = false;

package/components/apps/editor/ComponentHeader.svelte

@@ -33,13 +33,14 @@ function openDebugRuns() {
 
 {#if pointerdown || selected || hover}
 	<button
-		title="Position locking"
+		title="Lock Position"
 		class={classNames(
 			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[2.5rem] z-50 cursor-pointer',
 			' hover:bg-gray-300',
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('lock')}
+		on:pointerdown|stopPropagation
 	>
 		{#if locked}
 			<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
@@ -55,6 +56,7 @@ function openDebugRuns() {
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('expand')}
+		on:pointerdown|stopPropagation
 	>
 		<Expand aria-label="Expand position" size={14} />
 	</button>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         hover?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         mousedown: MouseEvent;
         lock: CustomEvent<any>;
         expand: CustomEvent<any>;