windmill-components 1.70.0 → 1.75.0

package/components/common/fileInput/FileInput.svelte

@@ -1,12 +1,14 @@
-<script>import { createEventDispatcher } from "svelte";
-import { FileUp } from "lucide-svelte";
-import Button from "../../common/button/Button.svelte";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+<script>import { createEventDispatcher } from 'svelte';
+import { FileUp } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { twMerge } from 'tailwind-merge';
 let c = '';
 export { c as class };
+export let style = '';
 export let accept = '*';
 export let multiple = false;
-export let convertToBase64 = false;
+export let convertTo = undefined;
 export let hideIcon = false;
 export let iconSize = 36;
 const dispatch = createEventDispatcher();
@@ -26,18 +28,34 @@ async function onChange(fileList) {
         if (file)
             files.push(file);
     }
-    // Needs to be reset so the same file can be selected 
+    // Needs to be reset so the same file can be selected
     // multiple times in a row
     input.value = '';
     dispatchChange();
 }
-async function fileToBase64(file) {
+async function convertFile(file) {
     return new Promise((resolve) => {
+        if (!convertTo) {
+            return resolve(null);
+        }
         const reader = new FileReader();
         reader.onloadend = () => {
             resolve(reader.result);
         };
-        reader.readAsDataURL(file);
+        switch (convertTo) {
+            case 'buffer':
+                reader.readAsArrayBuffer(file);
+                break;
+            case 'binary':
+                reader.readAsBinaryString(file);
+                break;
+            case 'base64':
+                reader.readAsDataURL(file);
+                break;
+            case 'text':
+                reader.readAsText(file);
+                break;
+        }
     });
 }
 function removeFile(index) {
@@ -49,10 +67,10 @@ function removeFile(index) {
 }
 async function dispatchChange() {
     files = files;
-    if (convertToBase64 && files) {
-        const promises = files.map(fileToBase64);
-        const b64s = await Promise.all(promises);
-        dispatch('change', b64s);
+    if (convertTo && files) {
+        const promises = files.map(convertFile);
+        const converted = await Promise.all(promises);
+        dispatch('change', converted);
     }
     else {
         dispatch('change', files);
@@ -61,10 +79,14 @@ async function dispatchChange() {
 </script>
 
 <button
-	class="relative center-center flex-col text-center font-medium text-gray-600 
-	border-2 border-dashed border-gray-400 hover:border-blue-500 
-	focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
-	duration-200 rounded-lg p-1 {c ?? ''}"
+	class={twMerge(
+		`relative center-center flex-col text-center font-medium text-gray-600 
+		border-2 border-dashed border-gray-400 hover:border-blue-500 
+		focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
+		duration-200 rounded-lg p-1`,
+		c
+	)}
+	{style}
 >
 	{#if !hideIcon && !files}
 		<FileUp size={iconSize} class="mb-2" />
@@ -77,9 +99,11 @@ async function dispatchChange() {
 				</div>
 			</slot>
 			<ul class="relative z-20 max-w-[250px] bg-white rounded-lg overflow-hidden mx-auto">
-				{#each files as {name}, i}
-					<li class="flex justify-between items-center font-normal text-sm
-					hover:bg-gray-300/20 duration-200 py-1 px-2 cursor-default">
+				{#each files as { name }, i}
+					<li
+						class="flex justify-between items-center font-normal text-sm
+					hover:bg-gray-300/20 duration-200 py-1 px-2 cursor-default"
+					>
 						<span class="pr-2 ellipsize">{name}</span>
 						<Button
 							size="xs"
@@ -104,9 +128,11 @@ async function dispatchChange() {
 		type="file"
 		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
 		bind:this={input}
-		on:change={({currentTarget}) => {onChange(currentTarget.files)}}
+		on:change={({ currentTarget }) => {
+			onChange(currentTarget.files)
+		}}
 		{accept}
 		{multiple}
 		{...$$restProps}
 	/>
-</button>
+</button>

package/components/common/fileInput/FileInput.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ReadFileAs } from './model';
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        style?: string | undefined;
         accept?: string | undefined;
         multiple?: boolean | undefined;
-        convertToBase64?: boolean | undefined;
+        convertTo?: ReadFileAs | undefined;
         hideIcon?: boolean | undefined;
         iconSize?: number | undefined;
     };

package/components/common/fileInput/model.d.ts

@@ -0,0 +1 @@
+export type ReadFileAs = 'buffer' | 'binary' | 'base64' | 'text';

package/components/common/fileInput/model.js

@@ -0,0 +1 @@
+export {};

package/components/common/index.d.ts

@@ -4,6 +4,7 @@ export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
+export { default as UndoRedo } from './button/UndoRedo.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/index.js

@@ -4,6 +4,7 @@ export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
+export { default as UndoRedo } from './button/UndoRedo.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/menu/Menu.svelte

@@ -5,7 +5,7 @@ let current = undefined;
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
 export let noMinW = false;
-let show = false;
+export let show = false;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {
@@ -32,6 +32,7 @@ onMount(() => {
     };
 });
 const placementsClasses = {
+    'bottom-center': 'origin-top-left left-1/2 transform -translate-x-1/2',
     'bottom-start': 'origin-top-left left-0',
     'bottom-end': 'origin-top-right right-0',
     'top-start': 'origin-bottom-left left-0 bottom-0',
@@ -49,7 +50,7 @@ const placementsClasses = {
 			}
 			show = !show
 		}}
-		class="cursor-pointer hover:bg-gray-100/30"
+		class="relative cursor-pointer hover:bg-gray-100/30"
 	>
 		<slot class="triggerable" name="trigger" />
 	</div>

package/components/common/menu/Menu.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         noMinW?: boolean | undefined;
-        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        show?: boolean | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/modal/Modal.svelte

@@ -1,10 +1,13 @@
-<script>import { classNames } from '../../../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
 import Badge from '../badge/Badge.svelte';
+import { twMerge } from 'tailwind-merge';
 export let title;
 export let open = false;
+let c = '';
+export { c as class };
+export let style = '';
 const dispatch = createEventDispatcher();
 function onKeyDown(event) {
     if (open) {
@@ -36,7 +39,7 @@ function fadeFast(node) {
 		role="dialog"
 	>
 		<div
-			class={classNames(
+			class={twMerge(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
 				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
 			)}
@@ -45,12 +48,14 @@ function fadeFast(node) {
 		<div class="fixed inset-0 z-10 overflow-y-auto">
 			<div class="flex min-h-full items-center justify-center p-4">
 				<div
-					class={classNames(
+					class={twMerge(
 						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						c,
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
 							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
 					)}
+					{style}
 				>
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">

package/components/common/modal/Modal.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         title: string;
         open?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         canceled: CustomEvent<any>;

package/components/common/table/AppRow.svelte

@@ -12,6 +12,7 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
+export let deleteConfirmedCallback;
 let { summary, path, extra_perms, canWrite, workspace_id } = app;
 const dispatch = createEventDispatcher();
 </script>
@@ -81,7 +82,8 @@ const dispatch = createEventDispatcher();
 				{
 					displayName: 'Edit',
 					icon: faPen,
-					href: `/apps/edit/${path}?nodraft=true`
+					href: `/apps/edit/${path}?nodraft=true`,
+					disabled: !canWrite
 				},
 				{
 					displayName: 'Use as template',
@@ -106,9 +108,16 @@ const dispatch = createEventDispatcher();
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
-					action: async () => {
-						await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
-						dispatch('change')
+					action: async (event) => {
+						if (event?.shiftKey) {
+							await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+							dispatch('change')
+						} else {
+							deleteConfirmedCallback = async () => {
+								await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+								dispatch('change')
+							}
+						}
 					},
 					type: 'delete',
 					disabled: !canWrite

package/components/common/table/AppRow.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         starred: boolean;
         shareModal: ShareModal;
         moveDrawer: MoveDrawer;
+        deleteConfirmedCallback: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/table/FlowRow.svelte

@@ -8,6 +8,7 @@ import { sendUserToast } from '../../../utils';
 import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
+import Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 export let flow;
@@ -15,7 +16,8 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
-let { summary, path, extra_perms, canWrite, workspace_id } = flow;
+export let deleteConfirmedCallback;
+let { summary, path, extra_perms, canWrite, workspace_id, archived } = flow;
 const dispatch = createEventDispatcher();
 async function archiveFlow(path) {
     try {
@@ -53,11 +55,15 @@ let scheduleEditor;
 >
 	<svelte:fragment slot="badges">
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
+
+		{#if archived}
+			<Badge color="red" baseClass="border">archived</Badge>
+		{/if}
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if canWrite}
+				{#if canWrite && !archived}
 					<div>
 						<Button
 							color="light"
@@ -118,7 +124,7 @@ let scheduleEditor;
 					displayName: 'Edit',
 					icon: faEdit,
 					href: `/flows/edit/${path}?nodraft=true`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Use as template/Fork',
@@ -136,14 +142,15 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'flow')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Schedule',
 					icon: faCalendarAlt,
 					action: () => {
 						scheduleEditor.openNew(true, path)
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: canWrite ? 'Share' : 'See Permissions',
@@ -159,13 +166,19 @@ let scheduleEditor;
 						path ? archiveFlow(path) : null
 					},
 					type: 'delete',
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
-					action: () => {
-						path ? deleteFlow(path) : null
+					action: (event) => {
+						if (event?.shiftKey) {
+							deleteFlow(path)
+						} else {
+							deleteConfirmedCallback = () => {
+								deleteFlow(path)
+							}
+						}
 					},
 					type: 'delete',
 					disabled: !canWrite

package/components/common/table/FlowRow.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         starred: boolean;
         shareModal: ShareModal;
         moveDrawer: MoveDrawer;
+        deleteConfirmedCallback: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/table/ScriptRow.svelte

@@ -5,7 +5,7 @@ import SharedBadge from '../../SharedBadge.svelte';
 import { ScriptService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { capitalize, sendUserToast } from '../../../utils';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
@@ -17,14 +17,21 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
-let { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind, workspace_id } = script;
+export let deleteConfirmedCallback;
+let { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind, workspace_id, archived } = script;
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
     dispatch('change');
     sendUserToast(`Archived script ${path}`);
 }
+async function deleteScript(path) {
+    await ScriptService.deleteScriptByPath({ workspace: $workspaceStore, path });
+    dispatch('change');
+    sendUserToast(`Delete script ${path}`);
+}
 let scheduleEditor;
+const dlt = 'delete';
 </script>
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
@@ -48,13 +55,17 @@ let scheduleEditor;
 			<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
 		{/if}
 
+		{#if archived}
+			<Badge color="red" baseClass="border">archived</Badge>
+		{/if}
+
 		<LanguageBadge {language} />
 	</svelte:fragment>
 
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if canWrite}
+				{#if canWrite && !archived}
 					<div>
 						<Button
 							color="light"
@@ -115,13 +126,13 @@ let scheduleEditor;
 					displayName: 'Edit',
 					icon: faEdit,
 					href: `/scripts/edit/${hash}`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Edit code',
 					icon: faEdit,
 					href: `/scripts/edit/${hash}?step=2`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Use as template',
@@ -134,7 +145,7 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'script')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'View runs',
@@ -146,14 +157,16 @@ let scheduleEditor;
 					icon: faCalendarAlt,
 					action: () => {
 						scheduleEditor.openNew(false, path)
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: canWrite ? 'Share' : 'See Permissions',
 					icon: faShare,
 					action: () => {
 						shareModal.openDrawer && shareModal.openDrawer(path, 'script')
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: 'Archive',
@@ -162,8 +175,27 @@ let scheduleEditor;
 						path ? archiveScript(path) : null
 					},
 					type: 'delete',
-					disabled: !canWrite
-				}
+					disabled: !canWrite || archived
+				},
+				...($userStore?.is_admin || $userStore?.is_super_admin
+					? []
+					: [
+							{
+								displayName: 'Delete',
+								icon: faTrashAlt,
+								action: (event) => {
+									if (event?.shiftKey) {
+										deleteScript(path)
+									} else {
+										deleteConfirmedCallback = () => {
+											deleteScript(path)
+										}
+									}
+								},
+								type: dlt,
+								disabled: !canWrite
+							}
+					  ])
 			]}
 		>
 			<MoreVertical size={20} />

package/components/common/table/ScriptRow.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         starred: boolean;
         shareModal: ShareModal;
         moveDrawer: MoveDrawer;
+        deleteConfirmedCallback: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/tabs/Tab.svelte

@@ -1,7 +1,12 @@
-<script>import { classNames } from '../../../utils';
-import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let value;
 export let size = 'sm';
+let c = '';
+export { c as class };
+export let style = '';
+export let selectedClass = '';
+export let selectedStyle = '';
 const fontSizeClasses = {
     xs: 'text-xs',
     sm: 'text-sm',
@@ -14,14 +19,16 @@ const { selected, update } = getContext('Tabs');
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class={classNames(
+	class={twMerge(
+		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-medium',
 		$selected?.startsWith(value)
 			? 'border-gray-600 text-gray-800 '
 			: 'border-gray-300 border-opacity-0 hover:border-opacity-100 text-gray-600',
-		'border-b-2 py-1 px-4 cursor-pointer transition-all ease-linear font-medium',
 		fontSizeClasses[size],
-		$$props.class
+		c,
+		$selected?.startsWith(value) ? selectedClass : ''
 	)}
+	style={`${style} ${$selected?.startsWith(value) ? selectedStyle : ''}`}
 	on:click={() => update(value)}
 >
 	<slot />

package/components/common/tabs/Tab.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
         value: string;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        selectedClass?: string | undefined;
+        selectedStyle?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/tabs/Tabs.svelte

@@ -4,9 +4,13 @@
 <script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { createEventDispatcher } from 'svelte';
-import { classNames } from '../../../utils';
+import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
 export let selected;
+let c = '';
+export { c as class };
+export let wrapperClass = '';
+export let style = '';
 $: selected && updateSelected();
 const selectedStore = writable(selected);
 $: $selectedStore && dispatch('selected', $selectedStore);
@@ -22,12 +26,10 @@ function updateSelected() {
 }
 </script>
 
-<div class="overflow-x-auto">
+<div class="overflow-x-auto {wrapperClass}">
 	<div
-		class={classNames(
-			'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
-			$$props.class
-		)}
+		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
+		{style}
 	>
 		<slot {selected} />
 	</div>

package/components/common/tabs/Tabs.svelte.d.ts

@@ -6,8 +6,10 @@ export type TabsContext = {
 import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         selected: string;
+        class?: string | undefined;
+        wrapperClass?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         selected: CustomEvent<any>;

package/components/flows/FlowEditor.svelte

@@ -1,16 +1,18 @@
 <script>import { Pane, Splitpanes } from 'svelte-splitpanes';
 import FlowEditorPanel from './content/FlowEditorPanel.svelte';
 import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
-import { flowStore } from './flowStore';
 import WindmillIcon from '../icons/WindmillIcon.svelte';
 import { Skeleton } from '../common';
+import { getContext } from 'svelte';
 export let initialPath;
 export let loading;
+const { flowStore } = getContext('FlowEditorContext');
+let size = 50;
 </script>
 
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
-		<Pane size={20} minSize={15} class="h-full">
+		<Pane {size} minSize={15} class="h-full">
 			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
 				{#if loading}
 					<div class="p-2 pt-10">
@@ -19,11 +21,11 @@ export let loading;
 						{/each}
 					</div>
 				{:else if $flowStore.value.modules}
-					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
+					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} />
 				{/if}
 			</div>
 		</Pane>
-		<Pane size={80} minSize={40}>
+		<Pane class="drop-shadow-2xl" size={100 - size} minSize={40}>
 			{#if loading}
 				<div class="w-full h-full ">
 					<div class="block m-auto mt-40 w-10">