windmill-components 1.46.3 → 1.52.0

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type UnsavedConfirmationModalProps = typeof __propDef.props;
-export declare type UnsavedConfirmationModalEvents = typeof __propDef.events;
-export declare type UnsavedConfirmationModalSlots = typeof __propDef.slots;
+export type UnsavedConfirmationModalProps = typeof __propDef.props;
+export type UnsavedConfirmationModalEvents = typeof __propDef.events;
+export type UnsavedConfirmationModalSlots = typeof __propDef.slots;
 export default class UnsavedConfirmationModal extends SvelteComponentTyped<UnsavedConfirmationModalProps, UnsavedConfirmationModalEvents, UnsavedConfirmationModalSlots> {
 }
 export {};

package/components/common/drawer/Drawer.svelte

@@ -4,6 +4,7 @@ export let open = false;
 export let duration = 0.3;
 export let placement = 'right';
 export let size = '600px';
+$: durationMs = duration * 1000;
 export function toggleDrawer() {
     open = !open;
 }
@@ -12,6 +13,9 @@ export function openDrawer() {
 }
 export function closeDrawer() {
     open = false;
+    setTimeout(() => {
+        dispatch('afterClose');
+    }, durationMs);
 }
 export function isOpen() {
     return open;
@@ -42,7 +46,7 @@ function onKeyDown(event) {
 }
 $: open ? dispatch('open') : dispatch('close');
 let timeout = true;
-$: !open ? setTimeout(() => (timeout = true), duration * 1000) : (timeout = false);
+$: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
 onMount(() => {
     mounted = true;
     scrollLock(open);

package/components/common/drawer/Drawer.svelte.d.ts

@@ -21,9 +21,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type DrawerProps = typeof __propDef.props;
-export declare type DrawerEvents = typeof __propDef.events;
-export declare type DrawerSlots = typeof __propDef.slots;
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
 export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
     get toggleDrawer(): () => void;
     get openDrawer(): () => void;

package/components/common/drawer/DrawerContent.svelte

@@ -4,12 +4,15 @@ import Icon from 'svelte-awesome';
 import Button from '../button/Button.svelte';
 export let title = undefined;
 export let overflow_y = true;
+export let noPadding = false;
+export let forceOverflowVisible = false;
 const dispatch = createEventDispatcher();
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
-	<div class="flex justify-between items-center py-2 px-6 gap-x-2">
+	<div class="flex justify-between items-center gap-x-2">
 		<Button
+			btnClasses="m-1"
 			variant="border"
 			size="lg"
 			color="dark"
@@ -20,14 +23,19 @@ const dispatch = createEventDispatcher();
 			<Icon data={faClose} />
 		</Button>
 		<span class="font-bold truncate">{title}</span>
-		<div class="flex flex-row">
+		<div class="flex flex-row m-1">
 			{#if $$slots.submission}
 				<slot name="submission" class="sticky" />
 			{/if}
 		</div>
 	</div>
 
-	<div class="py-2 px-6 grow h-full max-h-full" class:overflow-y-auto={overflow_y}>
+	<div
+		class="{noPadding ? '' : 'py-2 px-6'} grow h-full max-h-full {forceOverflowVisible
+			? '!overflow-visible'
+			: ''}"
+		class:overflow-y-auto={overflow_y}
+	>
 		<slot />
 	</div>
 </div>

package/components/common/drawer/DrawerContent.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         overflow_y?: boolean | undefined;
+        noPadding?: boolean | undefined;
+        forceOverflowVisible?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -16,9 +18,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type DrawerContentProps = typeof __propDef.props;
-export declare type DrawerContentEvents = typeof __propDef.events;
-export declare type DrawerContentSlots = typeof __propDef.slots;
+export type DrawerContentProps = typeof __propDef.props;
+export type DrawerContentEvents = typeof __propDef.events;
+export type DrawerContentSlots = typeof __propDef.slots;
 export default class DrawerContent extends SvelteComponentTyped<DrawerContentProps, DrawerContentEvents, DrawerContentSlots> {
 }
 export {};

package/components/common/languageIcons/LanguageIcon.svelte

@@ -1,13 +1,15 @@
-<script>import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
+<script>import PostgresIcon from '../../icons/PostgresIcon.svelte';
+import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
 export let lang;
-export let width = 16;
-export let height = 16;
+export let width = 30;
+export let height = 30;
 export let scale = 1;
 const langToComponent = {
     go: GoIcon,
     python3: PythonIcon,
     deno: TypeScriptIcon,
-    bash: BashIcon
+    bash: BashIcon,
+    pgsql: PostgresIcon
 };
 </script>
 

package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SupportedLanguage } from '../../../common';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: SupportedLanguage;
+        lang: SupportedLanguage | 'pgsql';
         width?: number | undefined;
         height?: number | undefined;
         scale?: number | undefined;
@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LanguageIconProps = typeof __propDef.props;
-export declare type LanguageIconEvents = typeof __propDef.events;
-export declare type LanguageIconSlots = typeof __propDef.slots;
+export type LanguageIconProps = typeof __propDef.props;
+export type LanguageIconEvents = typeof __propDef.events;
+export type LanguageIconSlots = typeof __propDef.slots;
 export default class LanguageIcon extends SvelteComponentTyped<LanguageIconProps, LanguageIconEvents, LanguageIconSlots> {
 }
 export {};

package/components/common/menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
-import { scale } from 'svelte/transition';
+export let noMinW = false;
 let show = false;
 let menu;
 export let placement = 'bottom-start';
@@ -34,15 +34,17 @@ const placementsClasses = {
 </script>
 
 <div class="relative" bind:this={menu}>
-	<div on:click={() => (show = !show)} on:click>
-		<slot name="trigger" />
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div on:click={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
+		<slot class="triggerable" name="trigger" />
 	</div>
 
 	{#if show}
 		<div
 			class={classNames(
-				'z-50 absolute mt-2 w-60 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
-				placementsClasses[placement]
+				'z-50 absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+				placementsClasses[placement],
+				noMinW ? 'min-w-0' : 'w-60'
 			)}
 			role="menu"
 			tabindex="-1"

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

@@ -1,23 +1,24 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        noMinW?: boolean | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
+        trigger: {
+            class: string;
+        };
         default: {
             close: () => void;
         };
     };
 };
-export declare type MenuProps = typeof __propDef.props;
-export declare type MenuEvents = typeof __propDef.events;
-export declare type MenuSlots = typeof __propDef.slots;
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
 export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
 }
 export {};

package/components/common/menu/MenuItem.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click class="py-1">
 	<span
 		class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"

package/components/common/popup/Popup.svelte.d.ts

@@ -17,9 +17,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PopupProps = typeof __propDef.props;
-export declare type PopupEvents = typeof __propDef.events;
-export declare type PopupSlots = typeof __propDef.slots;
+export type PopupProps = typeof __propDef.props;
+export type PopupEvents = typeof __propDef.events;
+export type PopupSlots = typeof __propDef.slots;
 export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents, PopupSlots> {
     get ref(): HTMLElement;
     /**accessor*/

package/components/common/skeleton/Skeleton.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SkeletonProps = typeof __propDef.props;
-export declare type SkeletonEvents = typeof __propDef.events;
-export declare type SkeletonSlots = typeof __propDef.slots;
+export type SkeletonProps = typeof __propDef.props;
+export type SkeletonEvents = typeof __propDef.events;
+export type SkeletonSlots = typeof __propDef.slots;
 export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
 }
 export {};

package/components/common/skeleton/SkeletonElement.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SkeletonElementProps = typeof __propDef.props;
-export declare type SkeletonElementEvents = typeof __propDef.events;
-export declare type SkeletonElementSlots = typeof __propDef.slots;
+export type SkeletonElementProps = typeof __propDef.props;
+export type SkeletonElementEvents = typeof __propDef.events;
+export type SkeletonElementSlots = typeof __propDef.slots;
 export default class SkeletonElement extends SvelteComponentTyped<SkeletonElementProps, SkeletonElementEvents, SkeletonElementSlots> {
 }
 export {};

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

@@ -1,8 +1,8 @@
 export declare const HEIGHT_UNIT: 16;
-export declare type SkeletonLayout = (SkeletonGap | SkeletonRow)[];
+export type SkeletonLayout = (SkeletonGap | SkeletonRow)[];
 /** **Gap**: number of height units. *(1 unit = 16px)* */
-export declare type SkeletonGap = number;
-export declare type SkeletonRow = SkeletonElement[] | ISkeletonRow;
+export type SkeletonGap = number;
+export type SkeletonRow = SkeletonElement[] | ISkeletonRow;
 export interface ISkeletonRow {
     /** Number of elements in the row.
      * All elements will have the same width and height of the row. */
@@ -10,7 +10,7 @@ export interface ISkeletonRow {
     /** **Height**: number of height units. *(1 unit = 16px)* */
     h: number;
 }
-export declare type SkeletonElement = number | ISkeletonElement;
+export type SkeletonElement = number | ISkeletonElement;
 export interface ISkeletonElement {
     /** **Height**: number of height units. *(1 unit = 16px)* */
     h: number;

package/components/common/table/AppRow.svelte

@@ -0,0 +1,61 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import SharedBadge from '../../SharedBadge.svelte';
+import { workspaceStore } from '../../../stores';
+import { faEdit, faEye } from '@fortawesome/free-solid-svg-icons';
+import Button from '../button/Button.svelte';
+import Row from './Row.svelte';
+export let app;
+export let marked;
+export let starred;
+let { summary, path, extra_perms, canWrite, workspace_id } = app;
+</script>
+
+<Row
+	href={`/apps/get/${path}`}
+	kind="app"
+	{marked}
+	{path}
+	{summary}
+	workspaceId={workspace_id ?? $workspaceStore ?? ''}
+	{starred}
+	on:change
+>
+	<svelte:fragment slot="badges">
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+	</svelte:fragment>
+	<svelte:fragment slot="actions">
+		<Dropdown
+			dropdownItems={[
+				{
+					displayName: 'View app',
+					icon: faEye,
+					href: `/apps/get/${path}`
+				}
+			]}
+		/>
+
+		{#if canWrite}
+			<div>
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faEdit }}
+					href="/apps/edit/{path}"
+				>
+					Edit
+				</Button>
+			</div>
+		{/if}
+
+		<Button
+			href="/apps/get/{path}"
+			color="dark"
+			size="xs"
+			spacingSize="md"
+			startIcon={{ icon: faEye }}
+		>
+			View
+		</Button>
+	</svelte:fragment>
+</Row>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ListableApp } from '../../../gen';
+declare const __propDef: {
+    props: {
+        app: ListableApp & {
+            canWrite: boolean;
+        };
+        marked: string | undefined;
+        starred: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppRowProps = typeof __propDef.props;
+export type AppRowEvents = typeof __propDef.events;
+export type AppRowSlots = typeof __propDef.slots;
+export default class AppRow extends SvelteComponentTyped<AppRowProps, AppRowEvents, AppRowSlots> {
+}
+export {};

package/components/common/table/FlowRow.svelte

@@ -0,0 +1,136 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import SharedBadge from '../../SharedBadge.svelte';
+import { FlowService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { sendUserToast } from '../../../utils';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Button from '../button/Button.svelte';
+import Row from './Row.svelte';
+export let flow;
+export let marked;
+export let starred;
+export let shareModal;
+let { summary, path, extra_perms, canWrite, workspace_id } = flow;
+const dispatch = createEventDispatcher();
+async function archiveFlow(path) {
+    try {
+        await FlowService.archiveFlowByPath({ workspace: $workspaceStore, path });
+        dispatch('change');
+        sendUserToast(`Successfully archived flow ${path}`);
+    }
+    catch (err) {
+        sendUserToast(`Could not archive this flow ${err.body}`, true);
+    }
+}
+</script>
+
+<Row
+	href={`/flows/get/${path}`}
+	kind="flow"
+	workspaceId={workspace_id ?? $workspaceStore ?? ''}
+	{marked}
+	{path}
+	{summary}
+	{starred}
+	on:change
+>
+	<svelte:fragment slot="badges">
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+	</svelte:fragment>
+	<svelte:fragment slot="actions">
+		<Dropdown
+			dropdownItems={[
+				{
+					displayName: 'View flow',
+					icon: faEye,
+					href: `/flows/get/${path}`
+				},
+				{
+					displayName: 'Edit',
+					icon: faEdit,
+					href: `/flows/edit/${path}`,
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Use as template/Fork',
+					icon: faCodeFork,
+					href: `/flows/add?template=${path}`
+				},
+				{
+					displayName: 'View runs',
+					icon: faList,
+					href: `/runs/${path}`
+				},
+				{
+					displayName: 'Schedule',
+					icon: faCalendarAlt,
+					href: `/schedule/add?path=${path}&isFlow=true`
+				},
+				{
+					displayName: 'Share',
+					icon: faShare,
+					action: () => {
+						shareModal.openDrawer && shareModal.openDrawer(path)
+					},
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Archive',
+					icon: faArchive,
+					action: () => {
+						path ? archiveFlow(path) : null
+					},
+					type: 'delete',
+					disabled: !canWrite
+				}
+			]}
+		/>
+
+		{#if canWrite}
+			<div>
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faEdit }}
+					href="/flows/edit/{path}"
+				>
+					Edit
+				</Button>
+			</div>
+		{:else}
+			<div>
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faCodeFork }}
+					href="/flows/add?template={path}"
+				>
+					Fork
+				</Button>
+			</div>
+		{/if}
+
+		<Button
+			href="/flows/get/{path}"
+			color="light"
+			variant="border"
+			size="xs"
+			spacingSize="md"
+			startIcon={{ icon: faEye }}
+		>
+			Detail
+		</Button>
+		<Button
+			href="/flows/run/{path}"
+			color="dark"
+			size="xs"
+			spacingSize="md"
+			endIcon={{ icon: faPlay }}
+		>
+			Run
+		</Button>
+	</svelte:fragment>
+</Row>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type ShareModal from '../../ShareModal.svelte';
+import { type Flow } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flow: import("../../../gen").OpenFlow & import("../../../gen").FlowMetadata & {
+            canWrite: boolean;
+        };
+        marked: string | undefined;
+        starred: boolean;
+        shareModal: ShareModal;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowRowProps = typeof __propDef.props;
+export type FlowRowEvents = typeof __propDef.events;
+export type FlowRowSlots = typeof __propDef.slots;
+export default class FlowRow extends SvelteComponentTyped<FlowRowProps, FlowRowEvents, FlowRowSlots> {
+}
+export {};

package/components/common/table/LanguageBadge.svelte

@@ -0,0 +1,32 @@
+<script>import { Script } from '../../../gen';
+import { classNames } from '../../../utils';
+import Badge from '../badge/Badge.svelte';
+import { LanguageIcon } from '../languageIcons';
+export let language;
+const languageLabel = {
+    [Script.language.PYTHON3]: 'Python 3',
+    [Script.language.DENO]: 'TypeScript',
+    [Script.language.GO]: 'Go',
+    [Script.language.BASH]: 'Bash'
+}[language];
+const baseClassByLanguage = {
+    [Script.language.PYTHON3]: 'border border-[#ffe082] !bg-white',
+    [Script.language.DENO]: 'border border-blue-200 !bg-white',
+    [Script.language.GO]: 'border border-[#80cbc4] !bg-white',
+    [Script.language.BASH]: 'border border-gray-400 !bg-white'
+}[language];
+const colorByLanguage = {
+    [Script.language.PYTHON3]: 'gray',
+    [Script.language.DENO]: 'gray',
+    [Script.language.GO]: 'gray',
+    [Script.language.BASH]: 'gray'
+}[language];
+</script>
+
+<Badge
+	color={colorByLanguage}
+	baseClass={classNames(baseClassByLanguage, 'flex gap-1 items-center')}
+>
+	<LanguageIcon lang={language} width={12} height={12} />
+	{languageLabel}
+</Badge>

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

@@ -0,0 +1,24 @@
+/** @typedef {typeof __propDef.props}  LanguageBadgeProps */
+/** @typedef {typeof __propDef.events}  LanguageBadgeEvents */
+/** @typedef {typeof __propDef.slots}  LanguageBadgeSlots */
+export default class LanguageBadge extends SvelteComponentTyped<{
+    language: Script.language;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LanguageBadgeProps = typeof __propDef.props;
+export type LanguageBadgeEvents = typeof __propDef.events;
+export type LanguageBadgeSlots = typeof __propDef.slots;
+import { Script } from "../../../gen";
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        language: Script.language;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/common/table/Row.svelte

@@ -0,0 +1,47 @@
+<script>import Star from '../../Star.svelte';
+import { createEventDispatcher } from 'svelte';
+import RowIcon from './RowIcon.svelte';
+export let marked;
+export let starred;
+const dispatch = createEventDispatcher();
+export let kind = 'script';
+export let summary = undefined;
+export let path;
+export let href;
+export let workspaceId;
+</script>
+
+<a class="hover:bg-gray-50 cursor-pointer w-full flex items-center p-4 gap-4 min-w-[1000px]" {href}>
+	<RowIcon {kind} />
+
+	<div class="w-full">
+		<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+			{#if marked}
+				{@html marked}
+			{:else}
+				{!summary || summary.length == 0 ? path : summary}
+			{/if}
+		</div>
+		<div class="text-gray-600 text-xs ">
+			{path}
+		</div>
+	</div>
+	<div class="w-96 flex flex-row max-w-xs gap-1 items-start flex-wrap">
+		<slot name="badges" />
+	</div>
+
+	<div class="flex gap-1 items-center justify-end">
+		<slot name="actions" />
+	</div>
+	<div class="text-left text-sm font-semibold text-gray-900">
+		<Star
+			{kind}
+			{path}
+			{starred}
+			workspace_id={workspaceId}
+			on:starred={() => {
+				dispatch('change')
+			}}
+		/>
+	</div>
+</a>

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        marked: string | undefined;
+        starred: boolean;
+        kind?: "script" | "flow" | "app" | undefined;
+        summary?: string | undefined;
+        path: string;
+        href: string;
+        workspaceId: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        badges: {};
+        actions: {};
+    };
+};
+export type RowProps = typeof __propDef.props;
+export type RowEvents = typeof __propDef.events;
+export type RowSlots = typeof __propDef.slots;
+export default class Row extends SvelteComponentTyped<RowProps, RowEvents, RowSlots> {
+}
+export {};