windmill-components 1.21.0 → 1.22.0

package/components/ArgInput.svelte

@@ -274,9 +274,7 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 						{disabled}
 						class="default-button-secondary items-center leading-4 py-0 my-px px-1 float-right"
 						on:click={() => (value = undefined)}
-						>Reset<Tooltip class="pl-1" position={'above'} direction={'left'}
-							>Reset to default value
-						</Tooltip></button
+						>Reset<Tooltip>Reset to default value</Tooltip></button
 					>
 				</div>
 			{/if}

package/components/FlowBuilder.svelte

@@ -3,7 +3,9 @@ import { page } from '$app/stores';
 import { FlowService, ScriptService } from '../gen';
 import { clearPreviewResults, hubScripts, workspaceStore } from '../stores';
 import { sendUserToast, setQueryWithoutLoad } from '../utils';
+import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons';
 import { onMount } from 'svelte';
+import Icon from 'svelte-awesome';
 import FlowEditor from './FlowEditor.svelte';
 import { flowStore } from './flows/flowStore';
 import { flowToMode } from './flows/utils';

package/components/FlowEditor.svelte

@@ -1,5 +1,5 @@
 <script>import { FlowModuleValue } from '../gen';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faFileExport, faFileImport, faGlobe, faPlus } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import FlowPreview from './FlowPreview.svelte';
 import CopyFirstStepSchema from './flows/CopyFirstStepSchema.svelte';
@@ -9,15 +9,51 @@ import Path from './Path.svelte';
 import RadioButtonV2 from './RadioButtonV2.svelte';
 import SchemaEditor from './SchemaEditor.svelte';
 import Required from './Required.svelte';
-import { pathIsEmpty } from '../utils';
+import { pathIsEmpty, sendUserToast } from '../utils';
+import Dropdown from './Dropdown.svelte';
+import Editor from './Editor.svelte';
+import Modal from './Modal.svelte';
+import FlowViewer from './FlowViewer.svelte';
+import { flowToMode } from './flows/utils';
 export let pathError = '';
 export let initialPath = '';
+let jsonSetter;
+let jsonViewer;
+let jsonValue = '';
 let open = 0;
 let args = {};
 export let mode = $flowStore?.value.modules[1]?.value.type == FlowModuleValue.type.FORLOOPFLOW ? 'pull' : 'push';
 $: numberOfSteps = $flowStore?.value.modules.length - 1;
 </script>
 
+<Modal bind:this={jsonSetter}>
+	<div slot="title">Import JSON</div>
+	<div slot="content" class="h-full">
+		<Editor bind:code={jsonValue} lang={'json'} class="h-full" />
+	</div>
+	<div slot="submission">
+		<button
+			class="default-button px-4 py-2 font-semibold"
+			on:click={() => {
+				Object.assign($flowStore, JSON.parse(jsonValue))
+				$flowStore = $flowStore
+				open = -1
+				sendUserToast('Flow imported from JSON')
+				jsonSetter.closeModal()
+			}}
+		>
+			Import
+		</button>
+	</div></Modal
+>
+
+<Modal bind:this={jsonViewer}>
+	<div slot="title">See JSON</div>
+	<div slot="content" class="h-full">
+		<FlowViewer flow={flowToMode($flowStore, mode)} tab="json" />
+	</div>
+</Modal>
+
 <div class="flow-root bg-gray-50 rounded-xl border  border-gray-200">
 	<ul class="relative -mt-10">
 		<span class="absolute top-0 left-1/2  h-full w-1 bg-gray-400" aria-hidden="true" />
@@ -26,15 +62,51 @@ $: numberOfSteps = $flowStore?.value.modules.length - 1;
 				<div
 					class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto p-4"
 				>
+					<div class="flex flex-row-reverse mr-4">
+						<Dropdown
+							dropdownItems={[
+								{
+									displayName: 'Import from JSON',
+									icon: faFileImport,
+									action: () => {
+										jsonSetter.openModal()
+									}
+								},
+								{
+									displayName: 'Export to JSON',
+									icon: faFileExport,
+									action: () => {
+										jsonViewer.openModal()
+									}
+								},
+								{
+									displayName: 'Publish to Hub',
+									icon: faGlobe,
+									action: () => {
+										const url = new URL('https://hub.windmill.dev/flows/add')
+										url.searchParams.append(
+											'flow',
+											btoa(JSON.stringify(flowToMode($flowStore, mode).value))
+										)
+										url.searchParams.append('schema', btoa(JSON.stringify($flowStore.schema)))
+										url.searchParams.append('description', $flowStore.description ?? '')
+										url.searchParams.append('summary', $flowStore.summary)
+										window.open(url, '_blank')?.focus()
+									}
+								}
+							]}
+							relative={false}
+						/>
+					</div>
 					<div class="mb-8 p-4">
 						<Path
 							bind:error={pathError}
 							bind:path={$flowStore.path}
 							{initialPath}
-							namePlaceholder="example/my/flow"
+							namePlaceholder="my_flow"
 							kind="flow"
 						>
-							<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+							<div slot="ownerToolkit">
 								Flow permissions depend on their path. Select the group <span class="font-mono"
 									>all</span
 								>

package/components/FlowViewer.svelte

@@ -8,6 +8,12 @@ import github from 'svelte-highlight/styles/github';
 import { slide } from 'svelte/transition';
 import Tabs from './Tabs.svelte';
 export let flow;
+let flowFiltered = {
+    summary: flow.summary,
+    description: flow.description,
+    value: flow.value,
+    schema: flow.schema
+};
 export let embedded = false;
 export let tab = 'ui';
 let open = {};
@@ -90,5 +96,5 @@ let open = {};
 		</ul>
 	</div>
 {:else}
-	<Highlight language={json} code={JSON.stringify(flow.value, null, 4)} />
+	<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
 {/if}

package/components/FlowViewer.svelte.d.ts

@@ -1,8 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Flow } from '../gen';
+import { type FlowValue } from '../gen';
 declare const __propDef: {
     props: {
-        flow: Flow;
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
         embedded?: boolean | undefined;
         tab?: "json" | "ui" | undefined;
     };

package/components/Modal.svelte

@@ -3,10 +3,12 @@ export let open = false;
 export let z = 'z-30';
 const dispatch = createEventDispatcher();
 export function closeModal() {
+    document.body.style.overflow = 'auto';
     open = false;
     dispatch('close');
 }
 export function openModal() {
+    document.body.style.overflow = 'hidden';
     open = true;
     dispatch('open');
 }
@@ -23,9 +25,9 @@ function handleKeyUp(event) {
 
 <svelte:window on:keyup={handleKeyUp} />
 
-<div class="blurred-background z-0  {open ? '' : 'hidden'}" />
+<div class="blurred-background  {open ? '' : 'hidden'}" />
 
-<div class="fixed top-0 w-screen h-screen  {open ? '' : 'hidden'} {z}">
+<div class="fixed top-0 w-screen h-screen {open ? '' : 'hidden'} {z}">
 	<div
 		class="fixed right-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
 	>
@@ -90,5 +92,5 @@ function handleKeyUp(event) {
 <style>
 	.blurred-background {
 		/* @apply absolute sm:top-6 lg:top-8 left-28 sm:left-40 md:left-48; */ /* If we wanted to make the navbars visible */ position: fixed; top: 0px; left: 0px; --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); opacity: 0.75; width: 100vw; height: 100vh;
-		z-index: 1;
+		z-index: 10;
 	}</style>

package/components/ModuleStep.svelte

@@ -9,6 +9,7 @@ import FlowInputs from './flows/FlowInputs.svelte';
 import FlowModuleHeader from './flows/FlowModuleHeader.svelte';
 import { createInlineScriptModule, flowStore, loadSchema, pickScript, schemasStore } from './flows/flowStore';
 import SchemaForm from './SchemaForm.svelte';
+import Tooltip from './Tooltip.svelte';
 export let open;
 export let mode;
 export let i;
@@ -29,6 +30,17 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 			<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
 				<div>
 					<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
+					{#if i == 0 && mode == 'pull'}
+						<h3 class="font-bold">
+							Trigger Script <Tooltip
+								>When a flow is 'Pull', the first step is a trigger script. Trigger scripts are
+								scripts that must return a list which are the new items to be treated one by one by
+								the rest of the flow, usually the list of new items since last time the flow was
+								run. One can retrieve the item in the next step using `previous_result._value`. To
+								easily compute the diff, windmill provides some helpers under the form of
+								`getInternalState` and `setInternalState`.</Tooltip
+							>
+						</h3>{/if}
 					<p>
 						{#if mod.value.path}
 							{mod.value.path}
@@ -105,3 +117,14 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 		{/if}
 	</div>
 </li>
+{#if i == 0 && mode == 'pull'}
+	<li class="relative m-20 ">
+		<div class="relative flex justify-center bg-white shadow p-2">
+			Starting from here, the flow for loop over items from step 1's result above &nbsp;<Tooltip
+				>This flow being in 'Pull' mode, the rest of the flow will for loop over the list of items
+				returned by the trigger script right above. Retrieve the item value using
+				`previous_result._value`</Tooltip
+			>
+		</div>
+	</li>
+{/if}

package/components/Path.svelte

@@ -114,8 +114,8 @@ $: {
 <div>
 	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
 		<label class="block">
-			<span class="text-gray-700 text-sm">
-				Owner Kind<Tooltip class="mx-1">
+			<span class="text-gray-700 text-sm whitespace-nowrap">
+				Owner Kind <Tooltip>
 					<slot name="ownerToolkit" />
 				</Tooltip>
 			</span>

package/components/RadioButtonV2.svelte

@@ -1,38 +1,33 @@
 <script>export let options;
 export let value;
 import { createEventDispatcher } from 'svelte';
+import Tooltip from './Tooltip.svelte';
 $: dispatch('change', value);
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="flex flex-row space-x-4 m-4 reveal">
+<div class="flex flex-row gap-x-4 m-4 reveal flex-wrap ">
 	{#each options as [label, val]}
 		<button
 			type="button"
 			on:click={() => {
 				value = val
 			}}
-			class="flex flex-col default-secondary-button-v2 mb-2 w-full"
+			class="flex flex-col default-secondary-button-v2 mb-2 grow"
 			class:selected={value == val}
 		>
-			<h2 class="mb-2">{label.title}</h2>
-			<p class="hidden">
-				{label.desc}
-			</p>
+			<h2 class="mb-2 whitespace-nowrap">{label.title} <Tooltip>{label.desc}</Tooltip></h2>
 		</button>
 	{/each}
 </div>
 
 <style>
-	.reveal:hover > button > p {
-		display: block;
-	}
 	.selected {
-		background-color: rgb(59 130 246 / 0.7);
-		--tw-text-opacity: 1;
-		color: rgb(255 255 255 / var(--tw-text-opacity));
+    background-color: rgb(59 130 246 / 0.7);
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity))
 }
 	.selected > h2 {
-		--tw-text-opacity: 1;
-		color: rgb(255 255 255 / var(--tw-text-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity))
 }</style>

package/components/ResourceEditor.svelte

@@ -118,7 +118,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 						namePlaceholder="my/resource"
 						kind="resource"
 					>
-						<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+						<div slot="ownerToolkit">
 							Resource permissions depend on their path. Select the group <span class="font-mono"
 								>all</span
 							>

package/components/ScriptBuilder.svelte

@@ -156,7 +156,7 @@ onDestroy(() => {
 				namePlaceholder="example/my/script"
 				kind="script"
 			>
-				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+				<div slot="ownerToolkit">
 					Script permissions depend on their path. Select the group <span class="font-mono"
 						>all</span
 					>

package/components/Tooltip.svelte

@@ -1,93 +1,66 @@
 <script>import Icon from 'svelte-awesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { createPopperActions } from 'svelte-popperjs';
 import { fade } from 'svelte/transition';
-export let position = 'above';
-export let direction = 'default';
-let viewTooltip = false;
-let mouseOnMessage = false;
-let mouseOver = false;
-// This function makes sure the tooltip does not disappear when moving the mouse to the tooltip
-// message, so that users can click links there for example
-function hideTooltip() {
-    setTimeout(function () {
-        if (!mouseOnMessage && !mouseOver) {
-            viewTooltip = false;
+const [popperRef, popperContent] = createPopperActions({
+    placement: 'auto'
+});
+const betterPreventOverflow = (options) => ({
+    name: 'preventOverflow',
+    options,
+    effect: ({ state }) => {
+        const { padding = 0 } = options;
+        state.elements.popper.style.maxWidth = `calc(100vw - ${padding * 2}px)`;
+    }
+});
+const extraOpts = {
+    modifiers: [
+        betterPreventOverflow({ padding: 50 }),
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10 // 5px from the edges of the popper
+            }
         }
-        else {
-            hideTooltip();
-        }
-    }, 300);
+    ]
+};
+let showTooltip = false;
+let timeout;
+function open() {
+    clearTimeout(timeout);
+    showTooltip = true;
+}
+function close() {
+    timeout = setTimeout(() => (showTooltip = false), 200);
 }
 </script>
 
-<div class="inline-block has-tooltip {$$props.class}">
-	{#if viewTooltip}
-		<span
-			transition:fade
-			class="tooltip rounded shadow-lg p-1 leading-4 {position === 'above' ? '-mt-8' : 'mt-6'} 
-			{viewTooltip ? 'tooltip-visible' : 'tooltip'} {direction === 'left' ? 'right-0' : ''}
-			text-2xs text-gray-700"
-			on:mouseover={() => {
-				mouseOnMessage = true
-			}}
-			on:focus={() => {}}
-			on:mouseout={() => {
-				mouseOnMessage = false
-			}}
-			on:blur={() => {}}
-			><slot />
-		</span>
-	{/if}
-	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.6} />
-	<!-- Hovering on this (invisible) area triggers the apparition of the tooltip. Needed because the icon is too small-->
+<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
+	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.8} />
+</button>
+{#if showTooltip}
 	<div
-		class="relative w-4 h-5 -mt-5 -ml-1"
-		on:mouseover={() => {
-			viewTooltip = true
-			mouseOver = true
-		}}
-		on:focus={() => {
-			viewTooltip = true
-		}}
-		on:mouseout={() => {
-			hideTooltip()
-			mouseOver = false
-		}}
-		on:blur={() => {}}
-	/>
-</div>
+		transition:fade
+		id="tooltip"
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+	>
+		<slot />
+		<div id="arrow" data-popper-arrow />
+	</div>
+{/if}
 
 <style>
-	.tooltip {
-
-    visibility: hidden;
-
-    position: absolute;
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 100ms
-}
-
-	.tooltip-visible {
-
-    visibility: visible;
-
-    position: absolute;
-
+	#tooltip {
     z-index: 50;
-
+    white-space: normal;
+    border-radius: 0.75rem;
     --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
-    max-width: 24rem;
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 150ms
+    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+    padding: 1rem;
+    font-weight: 400;
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity))
 }</style>

package/components/Tooltip.svelte.d.ts

@@ -1,10 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        position?: ("above" | "below") | undefined;
-        direction?: ("default" | "left") | undefined;
-    };
+    props: {};
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "devDependencies": {
     "@playwright/test": "^1.23.4",
     "@sveltejs/adapter-static": "^1.0.0-next.37",
@@ -29,6 +29,7 @@
     "svelte-highlight": "^6.2.0",
     "svelte-markdown": "^0.2.1",
     "svelte-overlay": "^1.4.1",
+    "svelte-popperjs": "^1.2.11",
     "svelte-preprocess": "^4.9.8",
     "svelte-split-pane": "^0.1.2",
     "svelte2tsx": "^0.5.11",