windmill-components 1.60.3 → 1.83.1

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"
@@ -82,7 +93,7 @@ let scheduleEditor;
 			{/if}
 
 			<Button
-				href="/scripts/get/{hash}"
+				href="/scripts/get/{hash}?workspace_id={$workspaceStore}"
 				color="light"
 				variant="border"
 				size="xs"
@@ -103,25 +114,24 @@ let scheduleEditor;
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View script',
 					icon: faEye,
-					href: `/scripts/get/${hash}`
+					href: `/scripts/get/${hash}?workspace_id=${$workspaceStore}`
 				},
 
 				{
 					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 +144,7 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'script')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'View runs',
@@ -146,14 +156,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,11 +174,28 @@ 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} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>

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,15 +19,18 @@ 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)}
+	on:pointerdown|stopPropagation
 >
 	<slot />
 </div>

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

@@ -1,11 +1,16 @@
 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: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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,12 @@ function updateSelected() {
 }
 </script>
 
-<div
-	class={classNames(
-		'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
-		$$props.class
-	)}
->
-	<slot />
+<div class="overflow-x-auto {wrapperClass}">
+	<div
+		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
+		{style}
+	>
+		<slot {selected} />
+	</div>
 </div>
 <slot name="content" />

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>;
@@ -15,7 +17,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            selected: string;
+        };
         content: {};
     };
 };

package/components/flows/CreateActionsFlow.svelte

@@ -4,14 +4,13 @@ import { Button, ButtonPopup, ButtonPopupItem } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
-import { flowStore, initFlow } from './flowStore';
+import { importFlowStore } from './flowStore';
 import { Icon } from 'svelte-awesome';
 let drawer = undefined;
 let pendingJson;
 async function importJson() {
+    $importFlowStore = JSON.parse(pendingJson);
     await goto('/flows/add');
-    Object.assign($flowStore, JSON.parse(pendingJson));
-    initFlow($flowStore);
     drawer?.closeDrawer?.();
 }
 </script>

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">

package/components/flows/common/FlowCardHeader.svelte

@@ -28,7 +28,7 @@ $: $workspaceStore &&
 </script>
 
 <div
-	class="flex items-center justify-between py-2 px-4 border-b border-gray-300 space-x-2  h-full max-h-12 flex-nowrap"
+	class="overflow-x-auto scrollbar-hidden flex items-center justify-between py-2 px-4 border-b border-gray-300 space-x-2  h-full max-h-12 flex-nowrap"
 >
 	{#if flowModule}
 		<span class="text-sm w-full mr-4">
@@ -55,6 +55,9 @@ $: $workspaceStore &&
 						>
 					{/if}
 					<input bind:value={flowModule.summary} placeholder="Summary" class="w-full grow" />
+				{:else if flowModule?.value.type === 'flow'}
+					<Badge color="indigo" capitalize>flow</Badge>
+					<input bind:value={flowModule.summary} placeholder="Summary" class="w-full grow" />
 				{/if}
 			</div>
 		</span>

package/components/flows/content/BranchPredicateEditor.svelte

@@ -1,15 +1,13 @@
 <script>import { getContext } from 'svelte';
-import { flowStore } from '../flowStore';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
-import { flowStateStore } from '../flowState';
 import { getStepPropPicker } from '../previousResults';
 export let branch;
 export let parentModule;
 export let previousModule;
-const { previewArgs } = getContext('FlowEditorContext');
+const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 let editor = undefined;
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false, true);
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false);
 </script>
 
 <PropPickerWrapper
@@ -17,14 +15,17 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 	pickableProperties={stepPropPicker.pickableProperties}
 	on:select={({ detail }) => {
 		editor?.insertAtCursor(detail)
+		editor?.focus()
 	}}
 >
-	<SimpleEditor
-		bind:this={editor}
-		lang="javascript"
-		bind:code={branch.expr}
-		class="small-editor"
-		shouldBindKey={false}
-		extraLib={stepPropPicker.extraLib}
-	/>
+	<div class="border border-gray-400">
+		<SimpleEditor
+			bind:this={editor}
+			lang="javascript"
+			bind:code={branch.expr}
+			class="small-editor border "
+			shouldBindKey={false}
+			extraLib={stepPropPicker.extraLib}
+		/>
+	</div>
 </PropPickerWrapper>

package/components/flows/content/CapturePayload.svelte

@@ -6,7 +6,6 @@ import WindmillIcon from '../../icons/WindmillIcon.svelte';
 import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import { CaptureService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
-import { flowStore } from '../flowStore';
 import { convert } from '@redocly/json-to-json-schema';
 import SchemaViewer from '../../SchemaViewer.svelte';
 import { getContext } from 'svelte';
@@ -14,7 +13,7 @@ import { copyToClipboard, sendUserToast } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 import SchemaForm from '../../SchemaForm.svelte';
-const { previewArgs } = getContext('FlowEditorContext');
+const { previewArgs, flowStore } = getContext('FlowEditorContext');
 let drawer;
 let interval = undefined;
 let captureInput = undefined;
@@ -106,11 +105,11 @@ async function getCaptureInput() {
 				Copy as flow inputs and test args
 			</Button>
 		</svelte:fragment>
-		<h3 class="my-2">Derived schema</h3>
+		<h3 class="my-2 mt-8">Derived schema</h3>
 		<div class="box p-2">
 			<SchemaViewer schema={jsonSchema} />
 		</div>
-		<h3 class="mt-2">Test args</h3>
-		<SchemaForm class="h-full pt-4" schema={$flowStore.schema} args={$previewArgs} />
+		<h3 class="mt-8">Test args</h3>
+		<SchemaForm class="pt-4" schema={$flowStore.schema} args={$previewArgs} />
 	</DrawerContent>
 </Drawer>

package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -27,7 +27,7 @@ let selected = 'early-stop';
 					>
 					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
 						{#each value.branches as branch, i}
-							<div class="flex flex-row gap-x-4 w-full">
+							<div class="flex flex-row gap-x-4 w-full items-center">
 								<div class="grow">
 									<input type="text" bind:value={branch.summary} placeholder="Summary" />
 								</div>

package/components/flows/content/FlowConstants.svelte

@@ -1,13 +1,12 @@
-<script>import { dfs, flowStore } from '../flowStore';
+<script>import { dfs } from '../flowStore';
 import FlowCard from '../common/FlowCard.svelte';
 import { Alert, Badge } from '../../common';
-import SchemaForm from '../../SchemaForm.svelte';
-import { flowStateStore } from '../flowState';
-import { setContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
-import { slide } from 'svelte/transition';
 import Toggle from '../../Toggle.svelte';
+import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 let hideOptional = false;
+const { flowStateStore, flowStore } = getContext('FlowEditorContext');
 $: steps = dfs($flowStore.value.modules, (x) => x)
     .map((x) => [x.value, x])
     .filter((x) => x[0].type == 'script' || x[0].type == 'rawscript')
@@ -33,11 +32,7 @@ setContext('PropPickerWrapper', {
 
 <div class="min-h-full">
 	<FlowCard title="All Static Inputs">
-		<Toggle
-			slot="header"
-			bind:checked={hideOptional}
-			options={{left: 'Hide optional inputs'}}
-		/>
+		<Toggle slot="header" bind:checked={hideOptional} options={{ left: 'Hide optional inputs' }} />
 		<div class="min-h-full flex-1">
 			<Alert type="info" title="Static Inputs" class="m-4"
 				>This page centralizes the static inputs of every steps. It is akin to a file containing all
@@ -60,15 +55,14 @@ setContext('PropPickerWrapper', {
 			{/if}
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
-					<div transition:slide class="relative h-full border-t p-4">
+					<div class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
 							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>
 						</h2>
 
-						<SchemaForm
+						<InputTransformSchemaForm
 							noDynamicToggle
-							inputTransform
 							{filter}
 							class="mt-2"
 							schema={$flowStateStore[m.id]?.schema ?? {}}

package/components/flows/content/FlowEditorPanel.svelte

@@ -3,16 +3,17 @@ import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
-import { flowStore } from '../flowStore';
 import FlowConstants from './FlowConstants.svelte';
 export let initialPath;
-const { selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStore } = getContext('FlowEditorContext');
 </script>
 
 {#if $selectedId?.startsWith('settings')}
 	<FlowSettings {initialPath} />
-{:else if $selectedId === 'inputs'}
+{:else if $selectedId === 'Input'}
 	<FlowInput />
+{:else if $selectedId === 'Result'}
+	<p class="p-4 text-gray-600">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}
 	<FlowConstants />
 {:else if $selectedId === 'failure'}

package/components/flows/content/FlowFailureModule.svelte

@@ -1,5 +1,6 @@
-<script>import { flowStore } from '../flowStore';
+<script>import { getContext } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
+const { flowStore } = getContext('FlowEditorContext');
 </script>
 
 {#if $flowStore.value.failure_module}

package/components/flows/content/FlowInput.svelte

@@ -1,9 +1,11 @@
 <script>import { Button } from '../../common';
 import SchemaEditor from '../../SchemaEditor.svelte';
 import SchemaForm from '../../SchemaForm.svelte';
+import { getContext } from 'svelte';
 import FlowCard from '../common/FlowCard.svelte';
-import { copyFirstStepSchema, flowStore } from '../flowStore';
+import { copyFirstStepSchema } from '../flowStore';
 import CapturePayload from './CapturePayload.svelte';
+const { flowStore, flowStateStore } = getContext('FlowEditorContext');
 let capturePayload;
 </script>
 
@@ -26,7 +28,7 @@ let capturePayload;
 				size="sm"
 				disabled={$flowStore.value.modules.length === 0 ||
 					$flowStore.value.modules[0].value.type == 'identity'}
-				on:click={copyFirstStepSchema}
+				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
 			>
 				First step's inputs
 			</Button>