windmill-components 1.352.9 → 1.362.0

package/package/components/apps/editor/settingsPanel/DocLink.svelte

@@ -0,0 +1,33 @@
+<script>import Popover from '../../../Popover.svelte';
+import { ButtonType } from '../../../common';
+import Button from '../../../common/button/Button.svelte';
+import { BookText, ExternalLink } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let docLink;
+export let btnClasses = undefined;
+export let size = 'xs';
+</script>
+
+<Popover>
+	<svelte:fragment slot="text">
+		<div class="flex flex-row gap-1">
+			Open documentation in a new tab
+
+			<ExternalLink size={16} />
+		</div>
+	</svelte:fragment>
+	<Button
+		iconOnly
+		startIcon={{
+			icon: BookText
+		}}
+		{size}
+		btnClasses={twMerge(
+			'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent',
+			btnClasses
+		)}
+		href={docLink}
+		target="_blank"
+		color="light"
+	/>
+</Popover>

package/package/components/apps/editor/settingsPanel/DocLink.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { ButtonType } from '../../../common';
+declare const __propDef: {
+    props: {
+        docLink: string;
+        btnClasses?: string | undefined;
+        size?: ButtonType.Size | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocLinkProps = typeof __propDef.props;
+export type DocLinkEvents = typeof __propDef.events;
+export type DocLinkSlots = typeof __propDef.slots;
+export default class DocLink extends SvelteComponent<DocLinkProps, DocLinkEvents, DocLinkSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/GridNavbar.svelte

@@ -0,0 +1,192 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import CloseButton from '../../../common/CloseButton.svelte';
+import PanelSection from './common/PanelSection.svelte';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import { generateRandomString } from '../../../../utils';
+import { GripVertical, Plus, Settings } from 'lucide-svelte';
+import NavbarWizard from '../../../wizards/NavbarWizard.svelte';
+import Badge from '../../../common/badge/Badge.svelte';
+import ResolveConfig from '../../components/helpers/ResolveConfig.svelte';
+import { getContext } from 'svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import ResolveNavbarItemPath from '../../components/display/ResolveNavbarItemPath.svelte';
+export let navbarItems = [];
+export let id;
+const { appPath } = getContext('AppViewerContext');
+let items = navbarItems.map((tab, index) => {
+    return { value: tab, id: generateRandomString(), originalIndex: index };
+});
+$: navbarItems = items.map((item) => item.value);
+function addPath() {
+    const emptyAppPath = {
+        disabled: {
+            type: 'static',
+            value: false,
+            fieldType: 'boolean'
+        },
+        label: {
+            type: 'static',
+            value: undefined,
+            fieldType: 'text'
+        },
+        path: {
+            type: 'oneOf',
+            selected: 'app',
+            labels: {
+                href: 'Navigate to an external URL',
+                app: 'Navigate to an app'
+            },
+            configuration: {
+                href: {
+                    href: {
+                        type: 'static',
+                        value: undefined,
+                        fieldType: 'text',
+                        tooltip: "The URL to navigate to when the item is clicked. Will be opened in a new tab. If you want to navigate to an other app, use the 'App' option."
+                    }
+                },
+                app: {
+                    path: {
+                        type: 'static',
+                        value: '',
+                        fieldType: 'app-path',
+                        allowTypeChange: false,
+                        tooltip: 'The app to navigate to when the item is clicked. Will be opened in the same tab. If you want to navigate to an external URL, use the "Href" option.'
+                    },
+                    queryParamsOrHash: {
+                        type: 'static',
+                        value: undefined,
+                        fieldType: 'text',
+                        tooltip: 'Query parameters or hash to append to the URL. For example, `?key=value` or `#hash`.',
+                        placeholder: '?key=value#hash'
+                    }
+                }
+            }
+        },
+        hidden: {
+            type: 'static',
+            value: false,
+            fieldType: 'boolean'
+        }
+    };
+    items = [
+        ...items,
+        {
+            value: emptyAppPath,
+            id: generateRandomString(),
+            originalIndex: items.length
+        }
+    ];
+}
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+let resolvedPaths = [];
+let resolvedLabels = [];
+</script>
+
+<PanelSection
+	title={`Items ${navbarItems && navbarItems.length > 0 ? `(${navbarItems.length})` : ''}`}
+>
+	{#if !navbarItems || navbarItems.length == 0}
+		<span class="text-xs text-tertiary">No items</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		<section
+			use:dragHandleZone={{
+				items,
+				flipDurationMs: 200,
+				dropTargetStyle: {}
+			}}
+			on:consider={handleConsider}
+			on:finalize={handleFinalize}
+		>
+			{#each items as item, index (item.id)}
+				{#key item.id}
+					<div class="border rounded-md p-2 mb-2 bg-surface">
+						<ResolveConfig
+							{id}
+							key={'label'}
+							extraKey={item.id}
+							bind:resolvedConfig={resolvedLabels[item.originalIndex]}
+							configuration={item.value.label}
+						/>
+
+						<div class="w-full flex flex-row gap-2 items-center relative my-1">
+							<div
+								class="text-xs px-2 border-y flex flex-row items-center border rounded-md h-8 w-full"
+							>
+								{resolvedLabels[item.originalIndex] ?? 'No label'}
+							</div>
+
+							<div class="absolute right-[4.5rem]">
+								<CloseButton
+									noBg
+									small
+									on:close={() => {
+										items = items.filter((_, i) => i !== index)
+									}}
+								/>
+							</div>
+							<NavbarWizard bind:value={items[index].value}>
+								<svelte:fragment slot="trigger">
+									<Button color="light" size="xs2" nonCaptureEvent={true}>
+										<div class="flex flex-row items-center gap-2 text-xs font-normal">
+											<Settings size={16} />
+										</div>
+									</Button>
+								</svelte:fragment>
+							</NavbarWizard>
+
+							<div class="flex flex-col justify-center gap-2">
+								<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
+								<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
+									<GripVertical size={16} />
+								</div>
+							</div>
+						</div>
+
+						<ResolveNavbarItemPath
+							navbarItem={item.value}
+							{id}
+							{index}
+							bind:resolvedPath={resolvedPaths[item.originalIndex]}
+						/>
+
+						{#if resolvedPaths[item.originalIndex]}
+							<div class="text-xs text-tertiary flex gap-2 flex-row flex-wrap">
+								Path: <Badge small>{resolvedPaths[item.originalIndex]}</Badge>
+								{#if appPath && resolvedPaths[item.originalIndex]?.includes(appPath)}
+									<Badge small color="blue"
+										>Current app
+
+										<Tooltip class="ml-2 !text-blue-900">
+											Clicking on those items will keep you in the current tab and change the output
+											of the component.
+										</Tooltip>
+									</Badge>
+								{/if}
+							</div>
+						{:else}
+							<div class="text-xs text-red-500">No app path or url selected</div>
+						{/if}
+					</div>
+				{/key}
+			{/each}
+		</section>
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: Plus }}
+			on:click={addPath}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

package/package/components/apps/editor/settingsPanel/GridNavbar.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { NavbarItem } from '../component';
+declare const __propDef: {
+    props: {
+        navbarItems?: NavbarItem[] | undefined;
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridNavbarProps = typeof __propDef.props;
+export type GridNavbarEvents = typeof __propDef.events;
+export type GridNavbarSlots = typeof __propDef.slots;
+export default class GridNavbar extends SvelteComponent<GridNavbarProps, GridNavbarEvents, GridNavbarSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -129,8 +129,8 @@ function handleFinalize(e) {
 							type="text"
 							bind:value={items[index].value}
 						/>
-						<div class="absolute right-6">
-							<CloseButton noBg on:close={() => deleteSubgrid(index)} />
+						<div class="absolute right-8">
+							<CloseButton noBg small on:close={() => deleteSubgrid(index)} />
 						</div>
 
 						<div class="flex flex-col justify-center gap-2">

package/package/components/apps/editor/settingsPanel/RefreshDatabaseStudioTable.svelte

@@ -0,0 +1,17 @@
+<script>import { Button } from '../../../common';
+import { RotateCcw } from 'lucide-svelte';
+import { getContext } from 'svelte';
+export let id = undefined;
+const { componentControl } = getContext('AppViewerContext');
+function onRefresh() {
+    if (!id)
+        return;
+    $componentControl[id]?.recompute?.();
+}
+</script>
+
+{#if id}
+	<Button size="xs2" color="light" startIcon={{ icon: RotateCcw }} on:click={() => onRefresh()}>
+		Force refresh
+	</Button>
+{/if}

package/package/components/apps/editor/settingsPanel/RefreshDatabaseStudioTable.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RefreshDatabaseStudioTableProps = typeof __propDef.props;
+export type RefreshDatabaseStudioTableEvents = typeof __propDef.events;
+export type RefreshDatabaseStudioTableSlots = typeof __propDef.slots;
+export default class RefreshDatabaseStudioTable extends SvelteComponent<RefreshDatabaseStudioTableProps, RefreshDatabaseStudioTableEvents, RefreshDatabaseStudioTableSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -1,11 +1,14 @@
 <script>import { Badge } from '../../../common';
 import Button from '../../../common/button/Button.svelte';
 import { getNextId } from '../../../flows/idUtils';
-import { classNames } from '../../../../utils';
+import { classNames, generateRandomString } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
 import { appComponentFromType } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
-import { Inspect, List, ToggleRightIcon, Trash } from 'lucide-svelte';
+import { GripVertical, Inspect, List, ToggleRightIcon } from 'lucide-svelte';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import CloseButton from '../../../common/CloseButton.svelte';
+import { flip } from 'svelte/animate';
 export let components;
 // Migration code:
 onMount(() => {
@@ -13,8 +16,12 @@ onMount(() => {
         components = [];
     }
 });
+let items = components?.map((tab, index) => {
+    return { value: tab, id: generateRandomString(), originalIndex: index };
+}) ?? [];
+$: components = items.map((item) => item.value);
 export let id;
-const { selectedComponent, app, errorByComponent } = getContext('AppViewerContext');
+const { selectedComponent, app, errorByComponent, hoverStore } = getContext('AppViewerContext');
 function addComponent(typ) {
     if (!components) {
         return;
@@ -24,10 +31,18 @@ function addComponent(typ) {
         ...appComponentFromType(typ)(`${id}_${actionId}`),
         recomputeIds: []
     };
+    items = [
+        ...items,
+        {
+            value: newComponent,
+            id: generateRandomString(),
+            originalIndex: items.length
+        }
+    ];
     components = [...components, newComponent];
     $app = $app;
 }
-function deleteComponent(cid) {
+function deleteComponent(cid, index) {
     if (!components) {
         return;
     }
@@ -35,6 +50,16 @@ function deleteComponent(cid) {
     delete $errorByComponent[cid];
     $selectedComponent = [id];
     $app = $app;
+    // Remove the corresponding item from the items array
+    items = items.filter((item) => item.originalIndex !== index);
+}
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
 }
 </script>
 
@@ -43,43 +68,61 @@ function deleteComponent(cid) {
 		{#if components.length == 0}
 			<span class="text-xs text-tertiary">No action buttons</span>
 		{/if}
-		{#each components as component}
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				class={classNames(
-					'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-					'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
-					$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
-				)}
-				on:click={() => {
-					$selectedComponent = [component.id]
+		<div class="w-full flex gap-2 flex-col mt-2">
+			<section
+				use:dragHandleZone={{
+					items,
+					flipDurationMs: 200,
+					dropTargetStyle: {}
 				}}
-				on:keypress
+				on:consider={handleConsider}
+				on:finalize={handleFinalize}
 			>
-				<Badge color="dark-indigo">
-					{component.id}
-				</Badge>
+				{#each items as item, index (item.id)}
+					{@const component = items[index].value}
 
-				<div>
-					{#if component.type == 'buttoncomponent'}
-						Button
-					{:else if component.type == 'selectcomponent'}
-						Select
-					{:else if component.type == 'checkboxcomponent'}
-						Toggle
-					{/if}
-				</div>
-				<div>
-					<Button
-						variant="border"
-						color="red"
-						on:click={() => deleteComponent(component.id)}
-						startIcon={{ icon: Trash }}
-						iconOnly
-					/>
-				</div>
-			</div>
-		{/each}
+					<div animate:flip={{ duration: 200 }} class="flex flex-row gap-2 items-center mb-2">
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+						<div
+							class={classNames(
+								'w-full text-xs text-semibold truncate py-1.5 px-2 cursor-pointer justify-between flex items-center border rounded-md',
+								'bg-surface hover:bg-surface-hover focus:border-primary text-secondary'
+							)}
+							on:click={() => {
+								$selectedComponent = [component.id]
+							}}
+							on:mouseover={() => {
+								$hoverStore = component.id
+							}}
+							on:keypress
+						>
+							<div class="flex flex-row gap-2 items-center">
+								<Badge color="dark-indigo">
+									{component.id}
+								</Badge>
+
+								<div>
+									{#if component.type == 'buttoncomponent'}
+										Button
+									{:else if component.type == 'selectcomponent'}
+										Select
+									{:else if component.type == 'checkboxcomponent'}
+										Toggle
+									{/if}
+								</div>
+							</div>
+							<div class="flex flex-row items-center gap-1">
+								<CloseButton small on:close={() => deleteComponent(component.id, index)} />
+							</div>
+						</div>
+						<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
+							<GripVertical size={16} />
+						</div>
+					</div>
+				{/each}
+			</section>
+		</div>
 		<div class="w-full flex gap-2">
 			<Button
 				btnClasses="gap-1 flex items-center text-sm text-tertiary"

package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte

@@ -8,6 +8,7 @@ import DecisionTreeGraphHeader from '../DecisionTreeGraphHeader.svelte';
 import { addNewBranch, addNode, getFirstNode, getParents, insertNode, removeBranch, removeNode } from './utils';
 import { createEdge, createNode } from './nodeHelpers';
 import { deleteGridItem } from '../../appUtils';
+import DarkModeObserver from '../../../../DarkModeObserver.svelte';
 export let nodes;
 export let rebuildOnChange = undefined;
 export let paneWidth = 0;
@@ -16,6 +17,7 @@ export let component;
 let displayedNodes = [];
 let edges = [];
 let scroll = false;
+let darkMode = false;
 const dispatch = createEventDispatcher();
 const { selectedNodeId } = getContext('DecisionTreeEditor');
 $: rebuildOnChange && triggerRebuild();
@@ -166,11 +168,12 @@ function nodeCallbackHandler(event, detail, graphNode, parentIds, branchInsert =
             break;
         }
         case 'delete': {
-            const graphhNodeIndex = nodes.findIndex((node) => node.id == graphNode?.id);
-            if (graphhNodeIndex > -1) {
-                deleteSubgrid(graphhNodeIndex);
+            const graphNodeIndex = nodes.findIndex((node) => node.id == graphNode?.id);
+            if (graphNodeIndex > -1) {
+                deleteSubgrid(graphNodeIndex);
             }
             nodes = removeNode(nodes, graphNode);
+            $debuggingComponents = Object.fromEntries(Object.entries($debuggingComponents).filter(([key]) => key !== component.id));
             break;
         }
         case 'addBranch': {
@@ -230,7 +233,8 @@ function buildGraphNodes() {
                             node: graphNode,
                             canDelete: !(graphNode.next.length > 1 && parentIds.length > 1),
                             canAddBranch: !cannotAddBranch,
-                            index
+                            index,
+                            darkMode
                         },
                         cb: (e, detail) => nodeCallbackHandler(e, detail, graphNode, parentIds, false)
                     }
@@ -279,7 +283,8 @@ function buildGraphNodes() {
                             canDelete: !cannotAddBranch &&
                                 (graphNode.next.length == 1 || !parentIds.includes('start')),
                             canAddBranch: !cannotAddBranch,
-                            index
+                            index,
+                            darkMode
                         },
                         cb: (e, detail) => nodeCallbackHandler(e, detail, graphNode, parentIds, false)
                     }
@@ -372,6 +377,8 @@ $: if (nodes.length > 0 && !$selectedNodeId) {
 }
 </script>
 
+<DarkModeObserver bind:darkMode />
+
 {#if mounted}
 	<Svelvet
 		download={false}

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -1,7 +1,7 @@
 <script>import { Loader2 } from 'lucide-svelte';
 import { ClearableInput, Popup } from '../../../../common';
 import { AllIcons } from './icons';
-export let componentInput;
+export let value = '';
 let loading = false;
 let items;
 let filteredItems;
@@ -21,27 +21,26 @@ async function getData() {
     loading = false;
 }
 function select(label) {
-    componentInput.value = label;
+    value = label;
     const elem = document.activeElement;
     if (elem.blur) {
         elem.blur();
     }
 }
+export let floatingConfig = {
+    strategy: 'absolute',
+    placement: 'bottom-end'
+};
+export let shouldUsePortal = true;
 </script>
 
-<Popup
-	let:close
-	floatingConfig={{
-		strategy: 'absolute',
-		placement: 'bottom-end'
-	}}
->
+<Popup let:close {floatingConfig} {shouldUsePortal}>
 	<svelte:fragment slot="button">
 		<div class="relative">
 			<ClearableInput
 				readonly
-				value={componentInput.value}
-				on:change={({ detail }) => (componentInput.value = detail)}
+				{value}
+				on:change={({ detail }) => (value = detail)}
 				on:focus={getData}
 				class="!pr-6"
 			/>
@@ -77,7 +76,7 @@ function select(label) {
 							}}
 							class="w-full center-center flex-col font-normal p-1
 									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 dark:hover:bg-frost-900 dark:focus:bg-frost-900
-									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
+									{label === value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
 						>
 							<img
 								class="dark:invert"

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { StaticInput } from '../../../inputType';
+import type { ComputeConfig } from 'svelte-floating-ui';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string>;
+        value?: string | undefined;
+        floatingConfig?: ComputeConfig | undefined;
+        shouldUsePortal?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -19,6 +19,7 @@ import Label from '../../../../Label.svelte';
 import DateTimeInput from '../../../../DateTimeInput.svelte';
 import DBTableSelect from './DBTableSelect.svelte';
 import EditableSchemaDrawer from '../../../../schema/EditableSchemaDrawer.svelte';
+import AppPicker from '../../../../wizards/AppPicker.svelte';
 export let componentInput;
 export let fieldType = undefined;
 export let subFieldType = undefined;
@@ -63,7 +64,7 @@ $: componentInput && onchange?.();
 				</select>
 			{/if}
 		{:else if fieldType === 'icon-select'}
-			<IconSelectInput bind:componentInput />
+			<IconSelectInput bind:value={componentInput.value} />
 		{:else if fieldType === 'tab-select'}
 			<TabSelectInput bind:componentInput />
 		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'bigquery'].includes(subFieldType)}
@@ -307,6 +308,8 @@ $: componentInput && onchange?.();
 					</Label>
 				</div>
 			</div>
+		{:else if fieldType === 'app-path'}
+			<AppPicker bind:value={componentInput.value} />
 		{:else}
 			<div class="flex gap-1 relative w-full">
 				<textarea

package/package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -3,6 +3,7 @@ import { secondaryMenuLeft, secondaryMenuRight } from './';
 import { getContext } from 'svelte';
 import CloseButton from '../../../../common/CloseButton.svelte';
 import { zIndexes } from '../../../../../zIndexes';
+import DocLink from '../DocLink.svelte';
 const { selectedComponent } = getContext('AppViewerContext');
 export let right;
 let secondaryMenu = right ? secondaryMenuRight : secondaryMenuLeft;
@@ -30,7 +31,12 @@ $: if (right && lastSelected !== $selectedComponent) {
 			>
 				<CloseButton on:close={() => secondaryMenu?.close()} />
 				{#if $secondaryMenu?.props?.type === 'style'}
-					<div class="text-xs font-bold"> Style Panel</div>
+					<div class="flex flex-row items-center gap-1">
+						<div class="text-xs font-bold"> Style Panel</div>
+						<DocLink
+							docLink="https://www.windmill.dev/docs/apps/app_configuration_settings/app_styling"
+						/>
+					</div>
 				{/if}
 			</div>
 			<div class="relative h-full overflow-y-auto">