windmill-components 1.306.10 → 1.309.2

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

@@ -10,7 +10,7 @@ import LogViewer from '../../LogViewer.svelte';
 import Path from '../../Path.svelte';
 import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
-import { AppService, DraftService, Job, Policy } from '../../../gen';
+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';
@@ -112,7 +112,9 @@ async function computeTriggerables() {
         if (c.type === 'tablecomponent') {
             r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })));
         }
-        if ((c.type === 'aggridcomponent' || c.type === 'aggridcomponentee') &&
+        if ((c.type === 'aggridcomponent' ||
+            c.type === 'aggridcomponentee' ||
+            c.type === 'dbexplorercomponent') &&
             Array.isArray(c.actions)) {
             r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
         }
@@ -789,9 +791,7 @@ export function openTroubleshootPanel() {
 				}}
 				checked={policy.execution_mode == 'anonymous'}
 				on:change={(e) => {
-					policy.execution_mode = e.detail
-						? Policy.execution_mode.ANONYMOUS
-						: Policy.execution_mode.PUBLISHER
+					policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
 					setPublishState()
 				}}
 			/>
@@ -1089,54 +1089,67 @@ export function openTroubleshootPanel() {
 <div
 	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto"
 >
-	<div class="min-w-64 w-64">
-		<input
-			type="text"
-			placeholder="App summary"
-			class="text-sm w-full font-semibold"
-			bind:value={$summary}
-			on:keydown|stopPropagation
-		/>
-	</div>
-	<div class="flex gap-4 items-center justify-center">
-		<UndoRedo
-			undoProps={{ disabled: $history?.index === 0 }}
-			redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
-			on:undo={() => {
-				$app = undo(history, $app)
-			}}
-			on:redo={() => {
-				$app = redo(history)
-			}}
-		/>
+	<div class="flex flex-row gap-2 items-center">
+		<div class="min-w-64 w-64">
+			<input
+				type="text"
+				placeholder="App summary"
+				class="text-sm w-full font-semibold"
+				bind:value={$summary}
+				on:keydown|stopPropagation
+			/>
+		</div>
+		<div class="flex gap-2">
+			<UndoRedo
+				undoProps={{ disabled: $history?.index === 0 }}
+				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
+				on:undo={() => {
+					$app = undo(history, $app)
+				}}
+				on:redo={() => {
+					$app = redo(history)
+				}}
+			/>
 
-		<div>
-			<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
-				<ToggleButton tooltip="Mobile View" icon={Smartphone} value="sm" />
-				<ToggleButton tooltip="Computer View" icon={Laptop2} value="lg" />
-			</ToggleButtonGroup>
+			{#if $app}
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$app.fullscreen}>
+					<ToggleButton
+						icon={AlignHorizontalSpaceAround}
+						value={false}
+						tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
+						iconProps={{ size: 16 }}
+					/>
+					<ToggleButton
+						tooltip="The width is of the app if the full width of its container"
+						icon={Expand}
+						value={true}
+						iconProps={{ size: 16 }}
+					/>
+				</ToggleButtonGroup>
+			{/if}
+			<div>
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+					<ToggleButton
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value="sm"
+						iconProps={{ size: 16 }}
+					/>
+					<ToggleButton
+						tooltip="Computer View"
+						icon={Laptop2}
+						value="lg"
+						iconProps={{ size: 16 }}
+					/>
+				</ToggleButtonGroup>
+			</div>
 		</div>
-		{#if $app}
-			<ToggleButtonGroup class="h-[30px]" bind:selected={$app.fullscreen}>
-				<ToggleButton
-					icon={AlignHorizontalSpaceAround}
-					value={false}
-					tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
-				/>
-				<ToggleButton
-					tooltip="The width is of the app if the full width of its container"
-					icon={Expand}
-					value={true}
-				/>
-			</ToggleButtonGroup>
-		{/if}
 	</div>
 
 	{#if $enterpriseLicense && appPath != ''}
 		<Awareness />
 	{/if}
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
-		<AppEditorTutorial bind:this={appEditorTutorial} />
 		<ButtonDropdown hasPadding={false}>
 			<svelte:fragment slot="buttonReplacement">
 				<Button nonCaptureEvent size="xs" color="light">
@@ -1164,6 +1177,8 @@ export function openTroubleshootPanel() {
 				{/each}
 			</svelte:fragment>
 		</ButtonDropdown>
+		<AppEditorTutorial bind:this={appEditorTutorial} />
+
 		<div class="hidden md:inline relative overflow-visible">
 			{#if hasErrors}
 				<span

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { Policy } from '../../../gen';
+import { type Policy } from '../../../gen';
 import type { App } from '../types';
 import type DiffDrawer from '../../DiffDrawer.svelte';
 declare const __propDef: {

package/package/components/apps/editor/AppEditorTutorial.svelte

@@ -37,12 +37,16 @@ export function toggleTutorial() {
 
 <ButtonDropdown hasPadding={false}>
 	<svelte:fragment slot="buttonReplacement">
-		<Button nonCaptureEvent size="xs" color="light" variant="border">
-			<div class="flex flex-row items-center gap-2">
-				<BookOpen size={16} />
-				Tutorials
-			</div>
-		</Button>
+		<Button
+			nonCaptureEvent
+			size="xs"
+			color="light"
+			variant="border"
+			iconOnly
+			startIcon={{
+				icon: BookOpen
+			}}
+		/>
 	</svelte:fragment>
 	<svelte:fragment slot="items">
 		<TutorialItem

package/package/components/apps/editor/AppInputs.svelte

@@ -25,7 +25,7 @@ let resourceOnly = true;
 					{/each}
 				</div>
 			</div>
-		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'}
+		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent'}
 			<div>
 				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 				<div class="ml-4 mt-4">

package/package/components/apps/editor/AppReportsDrawer.svelte

@@ -7,7 +7,7 @@ import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
-import { FlowService, JobService, RawScript, ScheduleService, SettingService, WorkspaceService } from '../../../gen';
+import { FlowService, JobService, ScheduleService, SettingService, WorkspaceService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { emptyString, formatCron, sendUserToast, tryEvery } from '../../../utils';
 import SchemaForm from '../../SchemaForm.svelte';
@@ -70,7 +70,8 @@ async function getAppReportingInfo() {
             cron: schedule.schedule,
             timezone: schedule.timezone
         };
-        appReportingStartupDuration = schedule.args?.startup_duration ?? appReportingStartupDuration;
+        appReportingStartupDuration =
+            schedule.args?.startup_duration ?? appReportingStartupDuration;
         screenshotKind = schedule.args?.kind ?? screenshotKind;
         args = schedule.args
             ? Object.fromEntries(Object.entries(schedule.args).filter(([key, _]) => key !== 'app_path' && key !== 'startup_duration' && key !== 'kind'))
@@ -257,7 +258,7 @@ function getFlowValue() {
                     type: 'rawscript',
                     tag: 'chromium',
                     content: appPreviewScript,
-                    language: RawScript.language.BUN,
+                    language: 'bun',
                     input_transforms: {
                         app_path: {
                             expr: 'flow_input.app_path',
@@ -437,7 +438,8 @@ $: disabled =
 </script>
 
 <Drawer bind:open size="800px">
-	<DrawerContent on:close={() => (open = false)}
+	<DrawerContent
+		on:close={() => (open = false)}
 		title="Schedule Reports"
 		tooltip="Send a PDF or PNG preview of any app at a given schedule"
 		documentationLink="https://www.windmill.dev/docs/apps/schedule_reports"

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

@@ -1,7 +1,7 @@
 <script>import { Pane, Splitpanes } from 'svelte-splitpanes';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import { classNames, displayDate, emptyString } from '../../../utils';
-import { AppService, AppWithLastVersion } from '../../../gen';
+import { AppService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import AppPreview from './AppPreview.svelte';
 import { Skeleton } from '../../common';

package/package/components/apps/editor/PreviewToggle.svelte

@@ -14,7 +14,14 @@ const { mode, jobs, jobsById } = getContext('AppViewerContext');
 		jobs.set([])
 	}}
 >
-	<ToggleButton label="Editor" value="dnd" icon={Pen} disabled={loading} />
+	<ToggleButton
+		label="Editor"
+		value="dnd"
+		icon={Pen}
+		disabled={loading}
+		iconProps={{ size: 16 }}
+		class="gap-2"
+	/>
 	<ToggleButton
 		label="Preview"
 		value="preview"
@@ -22,5 +29,7 @@ const { mode, jobs, jobsById } = getContext('AppViewerContext');
 		tooltip="Preview mode"
 		disabled={loading}
 		id="app-editor-preview-toggle"
+		iconProps={{ size: 16 }}
+		class="gap-2"
 	/>
 </ToggleButtonGroup>

package/package/components/apps/editor/SettingsPanel.svelte

@@ -26,7 +26,9 @@ function findTableActionSettings(app, id) {
                 }
             }
         }
-        else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') {
+        else if (x?.data?.type === 'aggridcomponent' ||
+            x?.data?.type === 'aggridcomponentee' ||
+            x?.data?.type === 'dbexplorercomponent') {
             if (x?.data?.actions) {
                 const tableAction = x.data.actions.find((x) => x.id === id);
                 if (tableAction) {
@@ -81,7 +83,9 @@ const dispatch = createEventDispatcher();
 					}
 
 					if (
-						(parent.data.type === 'aggridcomponent' || parent.data.type === 'aggridcomponentee') &&
+						(parent.data.type === 'aggridcomponent' ||
+							parent.data.type === 'aggridcomponentee' ||
+							parent.data.type === 'dbexplorercomponent') &&
 						Array.isArray(parent.data.actions)
 					) {
 						parent.data.actions = parent.data.actions.filter(

package/package/components/apps/editor/appUtils.js

@@ -41,7 +41,9 @@ export function dfs(grid, id, subgrids) {
         else if (item.data.type == 'menucomponent' && item.data.menuItems.find((x) => id == x.id)) {
             return [item.id, id];
         }
-        else if ((item.data.type == 'aggridcomponent' || item.data.type == 'aggridcomponentee') &&
+        else if ((item.data.type == 'aggridcomponent' ||
+            item.data.type == 'aggridcomponentee' ||
+            item.data.type == 'dbexplorercomponent') &&
             item.data.actions?.find((x) => id == x.id)) {
             return [item.id, id];
         }
@@ -124,8 +126,10 @@ export function allsubIds(app, parentId) {
             if (item.data.type === 'tablecomponent') {
                 subIds.push(...item.data.actionButtons?.map((x) => x.id));
             }
-            if (item.data.type === 'aggridcomponent' ||
-                (item.data.type === 'aggridcomponentee' && Array.isArray(item.data.actions))) {
+            if ((item.data.type === 'aggridcomponent' ||
+                item.data.type === 'aggridcomponentee' ||
+                item.data.type === 'dbexplorercomponent') &&
+                Array.isArray(item.data.actions)) {
                 subIds.push(...item.data.actions?.map((x) => x.id));
             }
             if (item.data.type === 'menucomponent') {
@@ -144,7 +148,9 @@ export function getNextGridItemId(app) {
         if (x.data.type === 'tablecomponent') {
             return [x.id, ...x.data.actionButtons.map((x) => x.id)];
         }
-        else if ((x.data.type === 'aggridcomponent' || x.data.type === 'aggridcomponentee') &&
+        else if ((x.data.type === 'aggridcomponent' ||
+            x.data.type === 'aggridcomponentee' ||
+            x.data.type === 'dbexplorercomponent') &&
             Array.isArray(x.data.actions)) {
             return [x.id, ...x.data.actions.map((x) => x.id)];
         }
@@ -325,7 +331,9 @@ export function copyComponent(app, item, parentGrid, subgrids, alreadyVisited) {
                 })) ?? []
             };
         }
-        else if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') {
+        else if (item.data.type === 'aggridcomponent' ||
+            item.data.type === 'aggridcomponentee' ||
+            item.data.type === 'dbexplorercomponent') {
             return {
                 ...item.data,
                 id,
@@ -362,7 +370,9 @@ export function getAllSubgridsAndComponentIds(app, component) {
     if (component.type === 'tablecomponent') {
         components.push(...component.actionButtons?.map((x) => x.id));
     }
-    if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') {
+    if (component.type === 'aggridcomponent' ||
+        component.type === 'aggridcomponentee' ||
+        component.type === 'dbexplorercomponent') {
         components.push(...(component.actions?.map((x) => x.id) ?? []));
     }
     if (component.type === 'menucomponent') {
@@ -391,7 +401,9 @@ export function getAllGridItems(app) {
         if (x?.data?.type === 'tablecomponent') {
             return [x, ...x?.data?.actionButtons?.map((x) => ({ data: x, id: x.id }))];
         }
-        else if ((x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') &&
+        else if ((x?.data?.type === 'aggridcomponent' ||
+            x?.data?.type === 'aggridcomponentee' ||
+            x?.data?.type === 'dbexplorercomponent') &&
             Array.isArray(x?.data?.actions)) {
             return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))];
         }

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

@@ -296,6 +296,7 @@ function mouseOut() {
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				actions={component.actions ?? []}
 				bind:initializing
 				{render}
 			/>

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

@@ -35,7 +35,10 @@ export function left(event) {
             if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
                 $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id];
             }
-            else if ((left.data.type === 'aggridcomponent' || left.data.type === 'aggridcomponentee') && Array.isArray(left.data.actions) &&
+            else if ((left.data.type === 'aggridcomponent' ||
+                left.data.type === 'aggridcomponentee' ||
+                left.data.type === 'dbexplorercomponent') &&
+                Array.isArray(left.data.actions) &&
                 left.data.actions.length >= 1) {
                 $selectedComponent = [left.data.actions[left.data.actions.length - 1].id];
             }