windmill-components 1.70.0 → 1.75.0

package/components/graph/svelvet/types/types.d.ts

@@ -0,0 +1,49 @@
+export interface UserNodeType {
+    id: string;
+    width: number;
+    height: number;
+    bgColor?: string;
+    data: {
+        html?: any;
+        custom?: {
+            component: any;
+            props?: any;
+            cb?: (e: string, detail: any) => void;
+        };
+        img?: any;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    borderColor?: string | undefined;
+    image?: boolean;
+    src?: string;
+    textColor?: string;
+    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
+    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+    borderRadius?: number;
+    childNodes?: string[];
+    className?: string;
+    clickCallback?: Function;
+}
+export interface UserEdgeType {
+    id: string;
+    source: string;
+    target: string;
+    sourceAnchorCb?: Function;
+    targetAnchorCb?: Function;
+    label?: string;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    edgeColor?: string;
+    type?: 'straight' | 'smoothstep' | 'step' | 'bezier' | undefined;
+    animate?: boolean;
+    noHandle?: boolean;
+    arrow?: boolean;
+    clickCallback?: Function;
+    className?: string;
+}
+export declare function getD3PositionX(canvasId: string): number;
+export declare function getD3PositionY(canvasId: string): number;
+export declare function getD3Zoom(canvasId: string): number;

package/components/graph/svelvet/types/types.js

@@ -0,0 +1,18 @@
+import { findStore } from '../store/controllers/storeApi';
+import { get } from 'svelte/store';
+export function getD3PositionX(canvasId) {
+    const store = findStore(canvasId);
+    const width = get(store.widthStore);
+    const x = width / 2 - get(store.d3ZoomParameters).x; // user input is shifted so that x=0, y=0 occurs in the center
+    return x;
+}
+export function getD3PositionY(canvasId) {
+    const store = findStore(canvasId);
+    const height = get(store.heightStore);
+    const y = height / 2 - get(store.d3ZoomParameters).y; // user input is shifted so that x=0, y=0 occurs in the center
+    return y;
+}
+export function getD3Zoom(canvasId) {
+    const store = findStore(canvasId);
+    return get(store.d3ZoomParameters).k;
+}

package/components/graph/util.js

@@ -1,6 +1,6 @@
 export const NODE = {
-    width: 300,
-    height: 35,
+    width: 275,
+    height: 34,
     gap: {
         horizontal: 40,
         vertical: 50

package/components/home/ItemsList.svelte

@@ -1,10 +1,11 @@
 <script>import CenteredPage from '../CenteredPage.svelte';
 import { AppService, FlowService, ListableApp, Script, ScriptService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
+import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
 import { canWrite } from '../../utils';
 import ShareModal from '../ShareModal.svelte';
 import { Code2, LayoutDashboard } from 'lucide-svelte';
+import Toggle from '../Toggle.svelte';
 export let filter = '';
 import ScriptRow from '../common/table/ScriptRow.svelte';
 import FlowRow from '../common/table/FlowRow.svelte';
@@ -15,6 +16,7 @@ import SearchItems from '../SearchItems.svelte';
 import { Icon } from 'svelte-awesome';
 import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import MoveDrawer from '../MoveDrawer.svelte';
+import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
 let scripts;
 let flows;
 let apps;
@@ -24,9 +26,11 @@ let shareModal;
 let moveDrawer;
 let loading = true;
 let nbDisplayed = 30;
+export let deleteConfirmedCallback = undefined;
 async function loadScripts() {
     const loadedScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
+        showArchived: archived ? true : undefined,
         perPage: 300
     });
     scripts = loadedScripts.map((script) => {
@@ -40,7 +44,10 @@ async function loadScripts() {
     loading = false;
 }
 async function loadFlows() {
-    flows = (await FlowService.listFlows({ workspace: $workspaceStore })).map((x) => {
+    flows = (await FlowService.listFlows({
+        workspace: $workspaceStore,
+        showArchived: archived ? true : undefined
+    })).map((x) => {
         return {
             canWrite: canWrite(x.path, x.extra_perms, $userStore) &&
                 x.workspace_id == $workspaceStore &&
@@ -95,7 +102,12 @@ $: {
     if ($userStore && $workspaceStore) {
         loadScripts();
         loadFlows();
-        loadApps();
+        if (!archived) {
+            loadApps();
+        }
+        else {
+            apps = [];
+        }
     }
 }
 const cmp = new Intl.Collator('en').compare;
@@ -139,6 +151,7 @@ function resetScroll() {
     }
 }
 $: items && resetScroll();
+let archived = false;
 </script>
 
 <SearchItems
@@ -223,8 +236,14 @@ $: items && resetScroll();
 			</button>
 		</div>
 	</div>
-
-	<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+	<div class="relative">
+		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+		{#if !loading}
+			<div class="absolute -bottom-2 right-0 bg-white/90">
+				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} /></div
+			>
+		{/if}
+	</div>
 	<div>
 		{#if filteredItems == undefined}
 			<div class="mt-4" />
@@ -240,6 +259,7 @@ $: items && resetScroll();
 				{#each (items ?? []).slice(0, nbDisplayed) as item, i (item.type + '/' + item.path + (item.summary ?? ''))}
 					{#if item.type == 'script'}
 						<ScriptRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadScripts}
@@ -249,6 +269,7 @@ $: items && resetScroll();
 						/>
 					{:else if item.type == 'flow'}
 						<FlowRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadFlows}
@@ -258,6 +279,7 @@ $: items && resetScroll();
 						/>
 					{:else if item.type == 'app'}
 						<AppRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadApps}
@@ -279,3 +301,29 @@ $: items && resetScroll();
 		{/if}
 	</div>
 </CenteredPage>
+
+<ConfirmationModal
+	open={Boolean(deleteConfirmedCallback)}
+	title="Remove"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove it?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

package/components/home/ItemsList.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         filter?: string | undefined;
+        deleteConfirmedCallback?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/home/ListFilters.svelte

@@ -10,11 +10,16 @@ export let resourceType = false;
 function getIconComponent(name) {
     return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
 }
+$: filtersAndSelected = selectedFilter
+    ? filters.includes(selectedFilter)
+        ? filters
+        : [selectedFilter, ...filters]
+    : filters;
 </script>
 
-{#if Array.isArray(filters) && filters.length > 0}
+{#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
 	<div class="gap-2 w-full flex flex-wrap my-4">
-		{#each filters as filter (filter)}
+		{#each filtersAndSelected as filter (filter)}
 			<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 				<Badge
 					class={classNames(

package/components/jobs/JobDetail.svelte

@@ -21,10 +21,21 @@ onMount(() => {
 onDestroy(() => {
     interval && clearInterval(interval);
 });
+function displayIfRecent(date) {
+    const d = new Date(date);
+    const now = new Date();
+    const diff = now.getTime() - d.getTime();
+    if (diff < 1000 * 600) {
+        return `(${displayDaysAgo(d.toString())})`;
+    }
+    else {
+        return '';
+    }
+}
 function endedDate(started_at, duration_ms) {
     const started = new Date(started_at);
     started.setMilliseconds(started.getMilliseconds() + duration_ms);
-    return displayDaysAgo(started.toString());
+    return `${displayDate(started)} ${displayIfRecent(started)}`;
 }
 </script>
 

package/components/propertyPicker/ObjectViewer.svelte

@@ -50,7 +50,11 @@ function selectProp(key, value) {
 			</span>
 		{/if}
 		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
-		<ul class="w-full">
+		<ul
+			class={`w-full ${
+				level === 0 ? 'border-none pl-2' : 'border-l border-dotted border-gray-200 pl-2'
+			}`}
+		>
 			{#each keys as key, index}
 				<li class="pt-1">
 					<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
@@ -80,7 +84,7 @@ function selectProp(key, value) {
 						<button
 							class="val {pureViewer
 								? 'cursor-auto'
-								: ''} rounded hover:bg-blue-100 {getTypeAsString(json[key])}"
+								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key, json[key])}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -126,8 +130,6 @@ function selectProp(key, value) {
 <style>
 	ul {
 		list-style: none;
-		padding-left: 1rem;
-		border-left: 1px dotted lightgray;
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 	}

package/consts.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_WEBHOOK_TYPE: 'async' | 'sync';

package/consts.js

@@ -0,0 +1 @@
+export const DEFAULT_WEBHOOK_TYPE = 'async';

package/defaults.d.ts

@@ -0,0 +1,4 @@
+export declare const SELECT_INPUT_DEFAULT_STYLE: {
+    readonly inputStyles: "border-radius: 0;";
+    readonly containerStyles: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;";
+};

package/defaults.js

@@ -0,0 +1,4 @@
+export const SELECT_INPUT_DEFAULT_STYLE = {
+    inputStyles: 'border-radius: 0;',
+    containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;'
+};

package/history.d.ts

@@ -0,0 +1,9 @@
+import { type Writable } from "svelte/store";
+export type History<T> = Writable<{
+    history: T[];
+    index: number;
+}>;
+export declare function initHistory<T>(initial: T): History<T>;
+export declare function undo<T>(history: History<T> | undefined, now: T): T;
+export declare function redo<T>(history: History<T> | undefined): T;
+export declare function push<T>(history: History<T> | undefined, value: T, noSetIndex?: boolean, skipCopy?: boolean): void;

package/history.js

@@ -0,0 +1,56 @@
+import { deepEqual } from "fast-equals";
+import { get, writable } from "svelte/store";
+export function initHistory(initial) {
+    return writable({ history: [initial], index: 0 });
+}
+export function undo(history, now) {
+    if (history) {
+        let chistory = get(history);
+        if (chistory.index == 0)
+            return now;
+        if (!deepEqual(chistory.history[chistory.index], now)) {
+            push(history, now, true);
+        }
+        else {
+            history.update((history) => {
+                history.index--;
+                return history;
+            });
+        }
+        let nhistory = get(history);
+        return nhistory.history[nhistory.index];
+    }
+    else {
+        return now;
+    }
+}
+export function redo(history) {
+    if (history) {
+        history?.update((history) => {
+            if (history.index < history.history.length - 1) {
+                history.index++;
+            }
+            return history;
+        });
+        let nhistory = get(history);
+        return nhistory.history[nhistory.index];
+    }
+    else {
+        return undefined;
+    }
+}
+export function push(history, value, noSetIndex = false, skipCopy = false) {
+    history?.update((history) => {
+        history.history = JSON.parse(JSON.stringify(history.history.slice(0, history.index + 1)));
+        const toPush = skipCopy ? value : JSON.parse(JSON.stringify(value));
+        history.history.push(toPush);
+        if (!noSetIndex) {
+            history.index = history.history.length - 1;
+        }
+        if (history.history.length > 20) {
+            history.history = history.history.slice(history.history.length - 20);
+            history.index -= 1;
+        }
+        return history;
+    });
+}