windmill-components 1.352.8 → 1.362.0

package/package/assets/app.css

@@ -28,6 +28,7 @@
 		list-style-type: '- ';
 		padding-left: 3rem;
 	}
+
 	.autocomplete-list-item-create {
 		@apply !text-primary-inverse !bg-surface-inverse;
 	}
@@ -47,32 +48,8 @@
 	.autocomplete-list {
 		@apply !bg-surface;
 	}
-
-	.ol-overlaycontainer-stopevent {
-		@apply flex flex-col justify-start items-end;
-	}
-	.ol-control button {
-		@apply w-7 h-7 center-center bg-surface border text-secondary 
-		rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
-	}
-
-	/* Components */
-	.component-wrapper {
-		@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
-	}
-
-	.app-editor-input {
-		@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
-		@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
-	}
 }
 
-@layer components {
-	/* Flow graph viewer -> Svelvet library internal class overwrite */
-	.Node {
-		display: flex !important;
-	}
-}
 @layer utilities {
 	@variants responsive {
 		/* Hide scrollbar for Chrome, Safari and Opera */
@@ -104,14 +81,6 @@
 	z-index: 10001 !important;
 }
 
-.z5000 {
-	z-index: 5000 !important;
-}
-
-.foo {
-	color: red !important;
-}
-
 svelte-virtual-list-row {
 	overflow: visible !important;
 }
@@ -125,19 +94,13 @@ svelte-virtual-list-contents > * + * {
 	box-shadow: none !important;
 }
 
-.Template-editor span.mtk20 {
-	color: black !important;
-}
-
-.grid-cell-centered {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.grid-cell-centered .svelte-select {
-	height: 32px !important;
+.component-wrapper {
+	@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
 }
 
-.grid-cell-centered .selected-item {
-	margin-top: -4px;
+.app-editor-input {
+	@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
+	@apply placeholder:text-gray-400 dark:placeholder:text-gray-200;
+	@apply bg-surface;
+	@apply disabled:placeholder:text-gray-200 disabled:placeholder:dark:text-gray-500 disabled:text-gray-200 disabled:dark:text-gray-500 disabled:border-gray-200 disabled:dark:border-gray-600;
 }

package/package/components/ApiConnectForm.svelte

@@ -28,6 +28,7 @@ async function loadSchema() {
     viewJsonSchema = false;
     try {
         schema = resourceTypeInfo.schema;
+        schema.order = schema.order ?? Object.keys(schema.properties).sort();
         notFound = false;
     }
     catch (e) {

package/package/components/ArgInput.svelte

@@ -683,7 +683,11 @@ $: shouldDispatchChanges && debounced(value);
 						multiple={false}
 					/>
 					{#if value?.length}
-						<div class="text-2xs text-tertiary mt-1">File length: {value.length} base64 chars</div>
+						<div class="text-2xs text-tertiary mt-1"
+							>File length: {value.length} base64 chars ({(value.length / 1024 / 1024).toFixed(
+								2
+							)}MB)</div
+						>
 					{/if}
 				</div>
 			{:else if inputCat == 'resource-string'}

package/package/components/ChangeInstanceUsername.svelte

@@ -7,6 +7,7 @@ import { createEventDispatcher } from 'svelte';
 export let email;
 export let username;
 export let isConflict = false;
+let loading = false;
 let usernameInfo = undefined;
 function handleKeyUp(event) {
     const key = event.key;
@@ -26,19 +27,25 @@ async function getUsernameInfo() {
 getUsernameInfo();
 const dispatch = createEventDispatcher();
 async function renameUser() {
-    const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
-    if (!automateUsernameCreation) {
-        sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
-        return;
-    }
-    await UserService.globalUserRename({
-        email,
-        requestBody: {
-            new_username: username
+    loading = true;
+    try {
+        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        if (!automateUsernameCreation) {
+            sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
+            return;
         }
-    });
-    sendUserToast(`Rename user ${email} to ${username}`);
-    dispatch('renamed');
+        await UserService.globalUserRename({
+            email,
+            requestBody: {
+                new_username: username
+            }
+        });
+        sendUserToast(`Renamed user ${email} to ${username}`);
+        dispatch('renamed');
+    }
+    finally {
+        loading = false;
+    }
 }
 </script>
 
@@ -116,6 +123,7 @@ async function renameUser() {
 				})
 			}}
 			disabled={email === undefined || !username}
+			{loading}
 		>
 			Confirm username change
 		</Button>

package/package/components/ContentSearchInner.svelte

@@ -0,0 +1,359 @@
+<script>import { AppService, FlowService, ResourceService, ScriptService } from '../gen';
+import { enterpriseLicense, workspaceStore } from '../stores';
+import { Boxes, Code2, Edit, LayoutDashboard, Loader2 } from 'lucide-svelte';
+import SearchItems from './SearchItems.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import FlowIcon from './home/FlowIcon.svelte';
+import { Alert, Button } from './common';
+import YAML from 'yaml';
+export let search = '';
+export let classNameInner = 'max-h-[80vh]';
+export async function open(nsearch) {
+    await Promise.all([loadScripts(), loadResources(), loadApps(), loadFlows()]);
+    if (nsearch) {
+        search = nsearch;
+    }
+}
+export async function loadScripts() {
+    scripts = await ScriptService.listSearchScript({ workspace: $workspaceStore ?? '' });
+}
+export async function loadResources() {
+    resources = await ResourceService.listSearchResource({ workspace: $workspaceStore ?? '' });
+}
+export async function loadApps() {
+    apps = await AppService.listSearchApp({ workspace: $workspaceStore ?? '' });
+}
+export async function loadFlows() {
+    flows = await FlowService.listSearchFlow({ workspace: $workspaceStore ?? '' });
+}
+let searchKind = 'all';
+let scripts = undefined;
+let filteredScriptItems = [];
+let resources = undefined;
+let filteredResourceItems = [];
+let flows = undefined;
+let filteredFlowItems = [];
+let apps = undefined;
+let filteredAppItems = [];
+function getCounts(n) {
+    return ` (${n})`;
+}
+function escape(htmlStr) {
+    return htmlStr
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+$: counts =
+    search == '' ||
+        !scripts ||
+        !resources ||
+        !flows ||
+        !apps ||
+        !filteredAppItems ||
+        !filteredFlowItems ||
+        !filteredResourceItems ||
+        !filteredScriptItems
+        ? {
+            all: '',
+            apps: '',
+            flows: '',
+            resources: '',
+            scripts: ''
+        }
+        : {
+            all: getCounts(filteredAppItems.length +
+                filteredFlowItems.length +
+                filteredResourceItems.length +
+                filteredScriptItems.length),
+            apps: getCounts(filteredAppItems.length),
+            resources: getCounts(filteredResourceItems.length),
+            flows: getCounts(filteredFlowItems.length),
+            scripts: getCounts(filteredScriptItems.length)
+        };
+let showNbScripts = 10;
+let showNbApps = 10;
+let showNbResources = 10;
+let showNbFlows = 10;
+$: search && resetShows();
+function resetShows() {
+    showNbScripts = 10;
+    showNbApps = 10;
+    showNbResources = 10;
+    showNbFlows = 10;
+}
+</script>
+
+<SearchItems
+	filter={search}
+	items={scripts}
+	f={(s) => {
+		return escape(s.content)
+	}}
+	bind:filteredItems={filteredScriptItems}
+/>
+
+<SearchItems
+	filter={search}
+	items={resources}
+	f={(s) => {
+		return escape(YAML.stringify(s.value))
+	}}
+	bind:filteredItems={filteredResourceItems}
+/>
+
+<SearchItems
+	filter={search}
+	items={flows}
+	f={(s) => {
+		return escape(YAML.stringify(s.value, null, 4))
+	}}
+	bind:filteredItems={filteredFlowItems}
+/>
+
+<SearchItems
+	filter={search}
+	items={apps}
+	f={(s) => {
+		return escape(YAML.stringify(s.value, null, 4))
+	}}
+	bind:filteredItems={filteredAppItems}
+/>
+
+<div class="px-2 py-2 overflow-auto">
+	<div class="flex gap-2 flex-wrap">
+		<div class="flex justify-start">
+			<ToggleButtonGroup bind:selected={searchKind} class="h-10">
+				<ToggleButton small light value="all" label={'All' + counts.all} />
+				<ToggleButton small light value="scripts" icon={Code2} label={'Scripts' + counts.scripts} />
+				<ToggleButton
+					small
+					light
+					value="resources"
+					icon={Boxes}
+					label={'Resources' + counts.resources}
+				/>
+				<ToggleButton
+					small
+					light
+					value="flows"
+					label={'Flows' + counts.flows}
+					icon={FlowIcon}
+					selectedColor="#14b8a6"
+				/>
+				<ToggleButton
+					small
+					light
+					value="apps"
+					label={'Apps' + counts.apps}
+					icon={LayoutDashboard}
+					selectedColor="#fb923c"
+				/>
+			</ToggleButtonGroup>
+		</div>
+		<div class="relative text-tertiary grow min-w-[100px]">
+			<slot name="input-slot" />
+			<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+				<svg
+					class="h-4 w-4 fill-current"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					version="1.1"
+					id="Capa_1"
+					x="0px"
+					y="0px"
+					viewBox="0 0 56.966 56.966"
+					style="enable-background:new 0 0 56.966 56.966;"
+					xml:space="preserve"
+					width="512px"
+					height="512px"
+				>
+					<path
+						d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+	<div class="mt-1">
+		<div class="text-xs text-secondary"
+			>Searching among <div class="inline-flex"
+				>{#if scripts}{scripts?.length}{:else}
+					<Loader2 size={10} class="animate-spin " />
+				{/if}</div
+			>
+			scripts,
+			<div class="inline-flex"
+				>{#if resources}{resources?.length}{:else}
+					<Loader2 size={10} class="animate-spin " />
+				{/if}</div
+			>
+			resources,
+			<div class="inline-flex"
+				>{#if flows}{flows?.length}{:else}
+					<Loader2 size={10} class="animate-spin " />
+				{/if}</div
+			>
+			flows,
+			<div class="inline-flex"
+				>{#if apps}{apps?.length}{:else}
+					<Loader2 size={10} class="animate-spin " />
+				{/if}</div
+			>
+			apps</div
+		>
+	</div>
+
+	<div class="mt-1 overflow-auto {classNameInner}">
+		{#if !$enterpriseLicense}
+			<div class="py-1" />
+
+			<Alert title="Content Search is an EE feature" type="warning">
+				Without EE, content search will only search among 10 scripts, 3 flows, 3 apps and 3
+				resources.
+			</Alert>
+			<div class="py-1" />
+		{/if}
+
+		{#if search.trim().length > 0}
+			<div class="flex flex-col gap-4">
+				{#if (searchKind == 'all' || searchKind == 'scripts') && filteredScriptItems?.length > 0}
+					{#each filteredScriptItems.slice(0, showNbScripts) ?? [] as item}
+						<div>
+							<div class="text-sm font-semibold"
+								><a href="/scripts/get/{item.path}">Script: {item.path}</a></div
+							>
+							<div class="flex gap-2 justify-between">
+								<pre class="text-xs border p-2 overflow-auto max-h-40 w-full max-w-2xl"
+									><code>{@html item.marked}</code></pre
+								>
+								<div>
+									<div class="flex gap-2">
+										<Button
+											on:click|once={() => {
+												window.open(`/scripts/edit/${item.path}?no_draft=true`, '_blank')?.focus()
+											}}
+											color="light"
+											size="sm"
+											startIcon={{ icon: Edit }}
+										>
+											Edit
+										</Button>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/each}
+					{#if filteredScriptItems.length > showNbScripts}
+						<a
+							href="#"
+							class="text-center font-semibold cursor-pointer pb-40"
+							on:click={() => {
+								showNbScripts += 30
+							}}
+						>
+							({showNbScripts} of {filteredScriptItems.length}) Show more scripts
+						</a>
+					{/if}
+				{/if}
+				{#if (searchKind == 'all' || searchKind == 'resources') && filteredResourceItems?.length > 0}
+					{#each filteredResourceItems.slice(0, showNbResources) ?? [] as item}
+						<div>
+							<div class="text-sm font-semibold">Resource: {item.path}</div>
+							<div class="flex gap-2 justify-between">
+								<pre class="text-xs border p-2 overflow-auto max-h-40 w-full max-w-2xl"
+									><code>{@html item.marked}</code></pre
+								>
+							</div>
+						</div>
+					{/each}
+					{#if filteredResourceItems.length > showNbResources}
+						<a
+							href="#"
+							class="text-center font-semibold cursor-pointer pb-40"
+							on:click={() => {
+								showNbResources += 30
+							}}
+						>
+							({showNbResources} of {filteredResourceItems.length}) Show more resources
+						</a>
+					{/if}
+				{/if}
+				{#if (searchKind == 'all' || searchKind == 'flows') && filteredFlowItems?.length > 0}
+					{#each filteredFlowItems.slice(0, showNbFlows) ?? [] as item}
+						<div>
+							<div class="text-sm font-semibold"
+								><a href="/flows/get/{item.path}">Flow: {item.path}</a></div
+							>
+							<div class="flex gap-2 justify-between">
+								<pre class="text-xs border p-2 overflow-auto max-h-40 w-full max-w-2xl"
+									><code>{@html item.marked}</code></pre
+								>
+								<div>
+									<div class="flex gap-2">
+										<Button
+											on:click|once={() => {
+												window.open(`/flows/edit/${item.path}?no_draft=true`, '_blank')?.focus()
+											}}
+											color="light"
+											size="sm"
+											startIcon={{ icon: Edit }}>Edit</Button
+										>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/each}
+					{#if filteredFlowItems.length > showNbFlows}
+						<a
+							href="#"
+							class="text-center font-semibold cursor-pointer pb-40"
+							on:click={() => {
+								showNbScripts += 30
+							}}
+						>
+							({showNbFlows} of {filteredFlowItems.length}) Show more flows
+						</a>
+					{/if}
+				{/if}
+				{#if (searchKind == 'all' || searchKind == 'apps') && filteredAppItems?.length > 0}
+					{#each filteredAppItems.slice(0, showNbApps) ?? [] as item}
+						<div>
+							<div class="text-sm font-semibold"
+								><a href="/apps/get/{item.path}">App: {item.path}</a></div
+							>
+							<div class="flex gap-2 justify-between">
+								<pre class="text-xs border p-2 overflow-auto max-h-40 w-full max-w-2xl"
+									><code>{@html item.marked}</code></pre
+								>
+							</div>
+						</div>
+					{/each}
+					{#if filteredAppItems.length > showNbApps}
+						<a
+							href="#"
+							class="text-center font-semibold cursor-pointer pb-40"
+							on:click={() => {
+								showNbApps += 30
+							}}
+						>
+							({showNbApps} of {filteredAppItems.length}) Show more apps
+						</a>
+					{/if}
+				{/if}
+			</div>
+		{:else}
+			<div class="flex justify-center items-center h-48">
+				<div class="text-tertiary text-center">
+					<div class="text-2xl font-bold">Empty Search Filter</div>
+					<div class="text-sm"
+						>Start writing, search everywhere a path is referenced for instance</div
+					>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

package/package/components/{ContentSearch.svelte.d.ts → ContentSearchInner.svelte.d.ts}

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        search?: string | undefined;
+        classNameInner?: string | undefined;
         open?: ((nsearch?: string) => Promise<void>) | undefined;
         loadScripts?: (() => Promise<void>) | undefined;
         loadResources?: (() => Promise<void>) | undefined;
@@ -10,12 +12,14 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        'input-slot': {};
+    };
 };
-export type ContentSearchProps = typeof __propDef.props;
-export type ContentSearchEvents = typeof __propDef.events;
-export type ContentSearchSlots = typeof __propDef.slots;
-export default class ContentSearch extends SvelteComponent<ContentSearchProps, ContentSearchEvents, ContentSearchSlots> {
+export type ContentSearchInnerProps = typeof __propDef.props;
+export type ContentSearchInnerEvents = typeof __propDef.events;
+export type ContentSearchInnerSlots = typeof __propDef.slots;
+export default class ContentSearchInner extends SvelteComponent<ContentSearchInnerProps, ContentSearchInnerEvents, ContentSearchInnerSlots> {
     get open(): (nsearch?: string | undefined) => Promise<void>;
     get loadScripts(): () => Promise<void>;
     get loadResources(): () => Promise<void>;

package/package/components/CustomPopover.svelte

@@ -0,0 +1,73 @@
+<script>import { createPopperActions } from 'svelte-popperjs';
+import Portal from 'svelte-portal';
+export let placement = 'bottom-end';
+export let notClickable = false;
+export let disablePopup = false;
+export let disappearTimeout = 100;
+export let appearTimeout = 300;
+export let style = undefined;
+export let focusEl = undefined;
+const [popperRef, popperContent] = createPopperActions({ placement });
+const popperOptions = {
+    placement,
+    strategy: 'fixed',
+    modifiers: [
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10
+            }
+        }
+    ]
+};
+let showTooltip = false;
+let timeout = undefined;
+let inTimeout = undefined;
+function open() {
+    clearTimeout(timeout);
+    if (appearTimeout == 0) {
+        showTooltip = true;
+    }
+    else {
+        inTimeout = setTimeout(() => (showTooltip = true), appearTimeout);
+    }
+}
+function close() {
+    inTimeout && clearTimeout(inTimeout);
+    inTimeout = undefined;
+    timeout = setTimeout(() => (showTooltip = false), disappearTimeout);
+}
+$: focusEl && focusEl?.focus();
+</script>
+
+{#if notClickable}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<span {style} use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
+		<slot />
+	</span>
+{:else}
+	<button
+		{style}
+		use:popperRef
+		on:mouseenter={open}
+		on:mouseleave={close}
+		on:click
+		class={$$props.class}
+	>
+		<slot />
+	</button>
+{/if}
+{#if showTooltip && !disablePopup}
+	<Portal>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			use:popperContent={popperOptions}
+			on:mouseenter={open}
+			on:mouseleave={close}
+			class="z-[5001] border rounded-lg shadow-lg p-4 bg-surface"
+		>
+			<slot name="overlay" />
+		</div>
+	</Portal>
+{/if}

package/package/components/CustomPopover.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { PopoverPlacement } from './Popover.model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placement?: PopoverPlacement | undefined;
+        notClickable?: boolean | undefined;
+        disablePopup?: boolean | undefined;
+        disappearTimeout?: number | undefined;
+        appearTimeout?: number | undefined;
+        style?: string | undefined;
+        focusEl?: HTMLElement | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        overlay: {};
+    };
+};
+export type CustomPopoverProps = typeof __propDef.props;
+export type CustomPopoverEvents = typeof __propDef.events;
+export type CustomPopoverSlots = typeof __propDef.slots;
+export default class CustomPopover extends SvelteComponent<CustomPopoverProps, CustomPopoverEvents, CustomPopoverSlots> {
+}
+export {};