windmill-components 1.60.4 → 1.83.1

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

@@ -0,0 +1,129 @@
+import type { CollapsibleType } from '../../collapsible/types/types';
+import type { Writable } from 'svelte/store';
+import type { AnchorType } from '../../edges/types/types';
+export interface ResizeNodeType {
+    id: string;
+    nodeId: string;
+    edgeId?: string;
+    canvasId: string;
+    anchorId?: string;
+    positionX: number;
+    positionY: number;
+    setPositionAndCascade: Function;
+    setPosition: Function;
+    delete: Function;
+}
+export interface StoreType {
+    nodesStore: Writable<{
+        [key: string]: NodeType;
+    }>;
+    edgesStore: Writable<{
+        [key: string]: EdgeType;
+    }>;
+    anchorsStore: Writable<{
+        [key: string]: AnchorType;
+    }>;
+    potentialAnchorsStore: Writable<{
+        [key: string]: PotentialAnchorType;
+    }>;
+    widthStore: Writable<number>;
+    heightStore: Writable<number>;
+    backgroundStore: Writable<boolean>;
+    movementStore: Writable<boolean>;
+    nodeIdSelected: Writable<number>;
+    nodeSelected: Writable<boolean>;
+    d3Scale: Writable<number>;
+    options: Writable<{
+        [key: string]: any;
+    }>;
+    temporaryEdgeStore: Writable<TemporaryEdgeType[]>;
+    nodeCreate: Writable<boolean>;
+    boundary: Writable<boolean | PositionType>;
+    edgeEditModal: Writable<null | string>;
+    collapsibleStore: Writable<CollapsibleType[]>;
+    collapsibleOption: Writable<boolean>;
+    lockedOption: Writable<boolean>;
+    editableOption: Writable<boolean>;
+    d3ZoomParameters: Writable<{
+        [key: string]: number;
+    }>;
+    highlightEdgesOption: Writable<boolean>;
+}
+export interface PositionType {
+    x: number;
+    y: number;
+}
+export interface NodeType {
+    id: string;
+    width: number;
+    height: number;
+    positionX: number;
+    positionY: number;
+    bgColor: string;
+    data: {
+        html?: any;
+        custom?: {
+            component: any;
+            props?: any;
+            cb?: (e: string, detail: any) => void;
+        };
+        img?: any;
+        label?: string;
+    };
+    canvasId: string;
+    setPositionFromMovement: Function;
+    setSizeFromMovement: Function;
+    setExportableData: Function;
+    borderColor: string;
+    image: boolean;
+    src: string;
+    textColor: string;
+    borderRadius: number;
+    childNodes: string[];
+    className: string;
+    clickCallback: Function;
+}
+export interface EdgeType {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    canvasId: string;
+    label: string;
+    type: 'straight' | 'smoothstep' | 'step' | 'bezier';
+    labelBgColor: string;
+    labelTextColor: string;
+    edgeColor: string;
+    animate: boolean;
+    noHandle: boolean;
+    arrow: boolean;
+    clickCallback: Function;
+    className: string;
+    delete: Function;
+    setExportableData: Function;
+}
+export interface PotentialAnchorType {
+    id: string;
+    nodeId: string;
+    callback: Function;
+    positionX: number;
+    positionY: number;
+    angle: number;
+    canvasId: string;
+    delete: Function;
+}
+export interface TemporaryEdgeType {
+    id: string;
+    sourcePotentialAnchorId: string;
+    sourceX: number;
+    sourceY: number;
+    targetPotentialAnchorId: string | null;
+    targetX: number;
+    targetY: number;
+    canvasId: string;
+    type: string;
+    edgeColor: string;
+    createEdge: Function;
+    createNode: Function;
+}

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

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

package/components/graph/svelvet/types/README.md

@@ -0,0 +1,3 @@
+# Types
+
+This folder contains types exported to the user, as decribed in feature: `https://www.svelvet.io/docs/typescript/`

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

@@ -0,0 +1,2 @@
+import type { UserEdgeType, UserNodeType } from './types';
+export { UserEdgeType, UserNodeType };

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

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

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 && filteredItems?.length}
+			<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/icons/SquareIcon.svelte

@@ -0,0 +1,9 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 30 30">
+	<path
+		d="M 7 4 C 5.343 4 4 5.343 4 7 L 4 23 C 4 24.657 5.343 26 7 26 L 23 26 C 24.657 26 26 24.657 26 23 L 26 7 C 26 5.343 24.657 4 23 4 L 7 4 z M 8 8 L 22 8 L 22 22 L 8 22 L 8 8 z M 12 12 L 12 18 L 18 18 L 18 12 L 12 12 z"
+	/>
+</svg>

package/components/icons/SquareIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SquareIconProps = typeof __propDef.props;
+export type SquareIconEvents = typeof __propDef.events;
+export type SquareIconSlots = typeof __propDef.slots;
+export default class SquareIcon extends SvelteComponentTyped<SquareIconProps, SquareIconEvents, SquareIconSlots> {
+}
+export {};

package/components/icons/index.d.ts

@@ -45,6 +45,7 @@ import SupabaseIcon from './SupabaseIcon.svelte';
 import WebdavIcon from './WebdavIcon.svelte';
 import ZammadIcon from './ZammadIcon.svelte';
 import SurrealdbIcon from './SurrealdbIcon.svelte';
+import SquareIcon from './SquareIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -92,6 +93,7 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly mongodb: typeof MongodbIcon;
     readonly reddit: typeof RedditIcon;
     readonly supabase: typeof SupabaseIcon;
+    readonly square: typeof SquareIcon;
     readonly webdav: typeof WebdavIcon;
     readonly zammad: typeof ZammadIcon;
     readonly nextcloud: typeof NextcloudIcon;

package/components/icons/index.js

@@ -45,6 +45,7 @@ import SupabaseIcon from './SupabaseIcon.svelte';
 import WebdavIcon from './WebdavIcon.svelte';
 import ZammadIcon from './ZammadIcon.svelte';
 import SurrealdbIcon from './SurrealdbIcon.svelte';
+import SquareIcon from './SquareIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -92,6 +93,7 @@ export const APP_TO_ICON_COMPONENT = {
     mongodb: MongodbIcon,
     reddit: RedditIcon,
     supabase: SupabaseIcon,
+    square: SquareIcon,
     webdav: WebdavIcon,
     zammad: ZammadIcon,
     nextcloud: NextcloudIcon,

package/components/jobs/JobDetail.svelte

@@ -3,6 +3,7 @@ import { page } from '$app/stores';
 import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
 import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import { CalendarClock } from 'lucide-svelte';
+import { onDestroy, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
 import { Badge } from '../common';
@@ -10,13 +11,39 @@ import ScheduleEditor from '../ScheduleEditor.svelte';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 let scheduleEditor;
+let time = Date.now();
+let interval;
+onMount(() => {
+    interval = setInterval(() => {
+        time = Date.now();
+    }, 1000);
+});
+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 `${displayDate(started)} ${displayIfRecent(started)}`;
+}
 </script>
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 
 <div class="border border-gray-400 rounded py-4">
-	<div class="grid grid-cols-1 lg:grid-cols-3 w-full gap-4">
-		<div class="flex-col">
+	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
+		<div class="flex-col col-span-2">
 			<div class="flex flex-row text-sm">
 				{#if job === undefined}
 					No job found
@@ -130,9 +157,17 @@ let scheduleEditor;
 						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
 							class="mx-1.5"
 						>
-							Started {displayDaysAgo(job.started_at ?? '')}</span
-						>
-					</div>
+							<span>
+								{#if job?.['duration_ms']}
+									Ended {#key time}
+										{endedDate(job.started_at, job?.['duration_ms'])}{/key}
+								{:else}
+									Started {#key time}
+										{displayDaysAgo(job.started_at ?? '')}{/key}
+								{/if}</span
+							>
+						</span></div
+					>
 				{/if}
 				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
 					<div class="inline-flex gap-1">

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,9 +1,8 @@
-<script>import { pluralize, truncate } from '../../utils';
+<script>import { copyToClipboard, pluralize, truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import { Badge } from '../common';
 import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
-import Popover from '../Popover.svelte';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
 export let json;
@@ -15,6 +14,7 @@ export let collapsed = level == 3 || Array.isArray(json);
 export let rawKey = false;
 export let topBrackets = false;
 export let topLevelNode = false;
+export let allowCopy = true;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -30,7 +30,10 @@ function collapse() {
     collapsed = !collapsed;
 }
 const dispatch = createEventDispatcher();
-function selectProp(key) {
+function selectProp(key, value) {
+    if (pureViewer && allowCopy) {
+        copyToClipboard(value);
+    }
     dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath));
 }
 </script>
@@ -47,10 +50,14 @@ function selectProp(key) {
 			</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)} class="whitespace-nowrap">
+					<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
 						{#if topLevelNode}
 							<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
 						{:else}
@@ -77,19 +84,21 @@ function selectProp(key) {
 						<button
 							class="val {pureViewer
 								? 'cursor-auto'
-								: ''} rounded hover:bg-blue-100 {getTypeAsString(json[key])}"
-							on:click={() => selectProp(key)}
+								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+							on:click={() => selectProp(key, json[key])}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />
 							{:else if json[key] == undefined}
 								<span class="text-2xs">undefined</span>
+							{:else if json[key] == null}
+								<span class="text-2xs">null</span>
 							{:else if typeof json[key] == 'string'}
 								<span title={json[key]} class="text-2xs">"{truncate(json[key], 200)}"</span>
 							{:else}
-								<span title={JSON.stringify(json[key])} class="text-2xs"
-									>{truncate(JSON.stringify(json[key]), 200)}</span
-								>
+								<span title={JSON.stringify(json[key])} class="text-2xs">
+									{truncate(JSON.stringify(json[key]), 200)}
+								</span>
 							{/if}
 						</button>
 					{/if}
@@ -111,20 +120,15 @@ function selectProp(key) {
 			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
 		</span>
 	{/if}
-	{#if !isLast && collapsed}
-		<span class="text-black">,</span>
-	{/if}
 {:else if topBrackets}
 	<span class="text-black">{openBracket}{closeBracket}</span>
 {:else}
-	<span class="text-gray-600 text-xs">No items</span>
+	<span class="text-gray-600 text-xs ml-2">No items</span>
 {/if}
 
 <style>
 	ul {
 		list-style: none;
-		padding-left: 1rem;
-		border-left: 1px dotted lightgray;
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 	}

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         rawKey?: boolean | undefined;
         topBrackets?: boolean | undefined;
         topLevelNode?: boolean | undefined;
+        allowCopy?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;