windmill-components 1.46.2 → 1.52.0

package/components/common/table/RowIcon.svelte

@@ -0,0 +1,23 @@
+<script>import { classNames } from '../../../utils';
+import { Code2, LayoutDashboard, Wind } from 'svelte-lucide';
+export let kind;
+const icon = {
+    script: Code2,
+    flow: Wind,
+    app: LayoutDashboard
+}[kind];
+const color = {
+    script: 'bg-blue-50 border-blue-200',
+    flow: 'bg-[#f0fdfa] border-[#99f6e4]',
+    app: 'bg-[#fff7ed] border-orange-200'
+}[kind];
+const iconColor = {
+    script: '#60A5FA',
+    flow: '#14b8a6',
+    app: '#fb923c'
+}[kind];
+</script>
+
+<div class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
+	<svelte:component this={icon} size="18px" color={iconColor} />
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        kind: 'script' | 'flow' | 'app';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RowIconProps = typeof __propDef.props;
+export type RowIconEvents = typeof __propDef.events;
+export type RowIconSlots = typeof __propDef.slots;
+export default class RowIcon extends SvelteComponentTyped<RowIconProps, RowIconEvents, RowIconSlots> {
+}
+export {};

package/components/common/table/ScriptRow.svelte

@@ -0,0 +1,147 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import SharedBadge from '../../SharedBadge.svelte';
+import { ScriptService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { capitalize, sendUserToast } from '../../../utils';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Badge from '../badge/Badge.svelte';
+import Button from '../button/Button.svelte';
+import LanguageBadge from './LanguageBadge.svelte';
+import Row from './Row.svelte';
+export let script;
+export let marked;
+export let starred;
+export let shareModal;
+let { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind, workspace_id } = script;
+const dispatch = createEventDispatcher();
+async function archiveScript(path) {
+    await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
+    dispatch('change');
+    sendUserToast(`Successfully archived script ${path}`);
+}
+</script>
+
+<Row
+	href={`/scripts/get/${hash}`}
+	kind="script"
+	{marked}
+	{path}
+	{summary}
+	{starred}
+	workspaceId={workspace_id ?? $workspaceStore ?? ''}
+	on:change
+>
+	<svelte:fragment slot="badges">
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+		{#if lock_error_logs}
+			<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
+		{/if}
+		{#if kind !== 'script'}
+			<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
+		{/if}
+
+		<LanguageBadge {language} />
+	</svelte:fragment>
+	<svelte:fragment slot="actions">
+		<Dropdown
+			dropdownItems={[
+				{
+					displayName: 'View script',
+					icon: faEye,
+					href: `/scripts/get/${hash}`
+				},
+				{
+					displayName: 'Edit',
+					icon: faEdit,
+					href: `/scripts/edit/${hash}`,
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Edit code',
+					icon: faEdit,
+					href: `/scripts/edit/${hash}?step=2`,
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Use as template',
+					icon: faCodeFork,
+					href: `/scripts/add?template=${path}`
+				},
+				{
+					displayName: 'View runs',
+					icon: faList,
+					href: `/runs/${path}`
+				},
+				{
+					displayName: 'Schedule',
+					icon: faCalendarAlt,
+					href: `/schedule/add?path=${path}`
+				},
+				{
+					displayName: 'Share',
+					icon: faShare,
+					action: () => {
+						shareModal.openDrawer && shareModal.openDrawer(path)
+					},
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Archive',
+					icon: faArchive,
+					action: () => {
+						path ? archiveScript(path) : null
+					},
+					type: 'delete',
+					disabled: !canWrite
+				}
+			]}
+		/>
+
+		{#if canWrite}
+			<div>
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faEdit }}
+					href="/scripts/edit/{hash}?step=2"
+				>
+					Edit
+				</Button>
+			</div>
+		{:else}
+			<div>
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faCodeFork }}
+					href="/scripts/add?template={path}"
+				>
+					Fork
+				</Button>
+			</div>
+		{/if}
+
+		<Button
+			href="/scripts/get/{hash}"
+			color="light"
+			variant="border"
+			size="xs"
+			spacingSize="md"
+			startIcon={{ icon: faEye }}
+		>
+			Detail
+		</Button>
+		<Button
+			href="/scripts/run/{hash}"
+			color="dark"
+			size="xs"
+			spacingSize="md"
+			endIcon={{ icon: faPlay }}
+		>
+			Run
+		</Button>
+	</svelte:fragment>
+</Row>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type ShareModal from '../../ShareModal.svelte';
+import { type Script } from '../../../gen';
+declare const __propDef: {
+    props: {
+        script: Script & {
+            canWrite: boolean;
+        };
+        marked: string | undefined;
+        starred: boolean;
+        shareModal: ShareModal;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptRowProps = typeof __propDef.props;
+export type ScriptRowEvents = typeof __propDef.events;
+export type ScriptRowSlots = typeof __propDef.slots;
+export default class ScriptRow extends SvelteComponentTyped<ScriptRowProps, ScriptRowEvents, ScriptRowSlots> {
+}
+export {};

package/components/common/table/Table.svelte

@@ -0,0 +1,9 @@
+<div class="flex flex-col">
+	<div class="overflow-hidden rounded-md border">
+		<table class="min-w-full divide-y divide-gray-300">
+			<tbody class="divide-y divide-gray-200 bg-white">
+				<slot />
+			</tbody>
+		</table>
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/common/tabs/Tab.svelte

@@ -1,15 +1,26 @@
 <script>import { classNames } from '../../../utils';
 import { getContext } from 'svelte';
 export let value;
+export let size = 'sm';
+const fontSizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-md',
+    lg: 'text-lg',
+    xl: 'text-xl'
+};
 const { selected, update } = getContext('Tabs');
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class={classNames(
-		value === $selected
-			? 'border-b-2 border-gray-900 text-gray-900 text-sm'
-			: 'text-sm hover:border-b-2 hover:border-gray-300',
-		' py-1 px-4 cursor-pointer transition-all 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
 	)}
 	on:click={() => update(value)}
 >

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

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value: string;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -10,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type TabProps = typeof __propDef.props;
-export declare type TabEvents = typeof __propDef.events;
-export declare type TabSlots = typeof __propDef.slots;
+export type TabProps = typeof __propDef.props;
+export type TabEvents = typeof __propDef.events;
+export type TabSlots = typeof __propDef.slots;
 export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
 }
 export {};

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

@@ -13,9 +13,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type TabContentProps = typeof __propDef.props;
-export declare type TabContentEvents = typeof __propDef.events;
-export declare type TabContentSlots = typeof __propDef.slots;
+export type TabContentProps = typeof __propDef.props;
+export type TabContentEvents = typeof __propDef.events;
+export type TabContentSlots = typeof __propDef.slots;
 export default class TabContent extends SvelteComponentTyped<TabContentProps, TabContentEvents, TabContentSlots> {
 }
 export {};

package/components/common/tabs/Tabs.svelte

@@ -4,6 +4,7 @@
 <script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { createEventDispatcher } from 'svelte';
+import { classNames } from '../../../utils';
 const dispatch = createEventDispatcher();
 export let selected;
 $: selected && updateSelected();
@@ -22,7 +23,10 @@ function updateSelected() {
 </script>
 
 <div
-	class="border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden {$$props.class}"
+	class={classNames(
+		'border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden',
+		$$props.class
+	)}
 >
 	<slot />
 </div>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-export declare type TabsContext = {
+export type TabsContext = {
     selected: Writable<string>;
     update: (value: string) => void;
 };
@@ -19,9 +19,9 @@ declare const __propDef: {
         content: {};
     };
 };
-export declare type TabsProps = typeof __propDef.props;
-export declare type TabsEvents = typeof __propDef.events;
-export declare type TabsSlots = typeof __propDef.slots;
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
 export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
 }
 export {};

package/components/common/toggleButton/ToggleButton.svelte

@@ -1,20 +1,23 @@
 <script>import { classNames } from '../../../utils';
 import { getContext } from 'svelte';
+import Button from '../button/Button.svelte';
 export let value;
 export let position;
+export let light = false;
 const { select, selected } = getContext('ToggleButtonGroup');
 </script>
 
-<button
-	type="button"
+<Button
+	{...$$props}
 	on:click={() => select(value)}
-	class={classNames(
-		'py-1 px-2 text-sm font-medium border-gray-200 ',
-		position === 'left' ? 'rounded-l-lg border' : '',
-		position === 'center' ? 'border-t border-b' : '',
-		position === 'right' ? 'rounded-r-md border border-l-0' : '',
-		$selected.includes(value) ? 'text-white bg-gray-900 ' : 'text-gray-900 bg-white '
+	btnClasses={classNames(
+		'border-gray-200 focus:ring-0 w-full',
+		position === 'left' ? 'rounded-none rounded-l-lg border' : '',
+		position === 'center' ? 'rounded-none border-t border-b border-r' : '',
+		position === 'right' ? 'rounded-none rounded-r-md  border-r border-y' : ''
 	)}
+	color={$selected === value ? (light ? 'dark' : 'dark') : 'light'}
+	variant="contained"
 >
 	<slot />
-</button>
+</Button>

package/components/common/toggleButton/ToggleButton.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        value: string;
+        [x: string]: any;
+        value: any;
         position: 'left' | 'center' | 'right';
+        light?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -11,9 +13,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ToggleButtonProps = typeof __propDef.props;
-export declare type ToggleButtonEvents = typeof __propDef.events;
-export declare type ToggleButtonSlots = typeof __propDef.slots;
+export type ToggleButtonProps = typeof __propDef.props;
+export type ToggleButtonEvents = typeof __propDef.events;
+export type ToggleButtonSlots = typeof __propDef.slots;
 export default class ToggleButton extends SvelteComponentTyped<ToggleButtonProps, ToggleButtonEvents, ToggleButtonSlots> {
 }
 export {};

package/components/common/toggleButton/ToggleButtonGroup.svelte

@@ -1,33 +1,26 @@
 <script context="module">export {};
 </script>
 
-<script>import { setContext } from 'svelte';
+<script>import { createEventDispatcher, setContext } from 'svelte';
 import { writable } from 'svelte/store';
-export let exclusive = true;
-export let selected = [];
+export let selected;
+const dispatch = createEventDispatcher();
+export let col = false;
+$: setSelected(selected);
+function setSelected(selected) {
+    selectedContent.set(selected);
+}
 const selectedContent = writable(selected);
+$: $selectedContent && dispatch('selected', $selectedContent);
 setContext('ToggleButtonGroup', {
     selected: selectedContent,
     select: (value) => {
-        if (exclusive) {
-            selectedContent.set([value]);
-        }
-        else {
-            selectedContent.update((selected) => {
-                const index = selected.findIndex((val) => val === value);
-                if (index !== -1) {
-                    selected.splice(index, 1);
-                    return selected;
-                }
-                else {
-                    return [value, ...selected];
-                }
-            });
-        }
+        selectedContent.set(value);
+        selected = value;
     }
 });
 </script>
 
-<div class="inline-flex rounded-md shadow-sm" role="group">
+<div class:flex-col={col} class="flex rounded-md" role="group">
 	<slot />
 </div>

package/components/common/toggleButton/ToggleButtonGroup.svelte.d.ts

@@ -1,24 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-export declare type ToggleButtonContext = {
-    selected: Writable<string[]>;
-    select: (value: string) => void;
+export type ToggleButtonContext = {
+    selected: Writable<any>;
+    select: (value: any) => void;
 };
 import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
-        exclusive?: boolean | undefined;
-        selected?: string[] | undefined;
+        selected: any;
+        col?: boolean | undefined;
     };
     events: {
+        selected: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
-export declare type ToggleButtonGroupProps = typeof __propDef.props;
-export declare type ToggleButtonGroupEvents = typeof __propDef.events;
-export declare type ToggleButtonGroupSlots = typeof __propDef.slots;
+export type ToggleButtonGroupProps = typeof __propDef.props;
+export type ToggleButtonGroupEvents = typeof __propDef.events;
+export type ToggleButtonGroupSlots = typeof __propDef.slots;
 export default class ToggleButtonGroup extends SvelteComponentTyped<ToggleButtonGroupProps, ToggleButtonGroupEvents, ToggleButtonGroupSlots> {
 }
 export {};

package/components/flows/CreateActionsFlow.svelte

@@ -0,0 +1,66 @@
+<script>import { goto } from '$app/navigation';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import Fuse from 'fuse.js';
+import { loadHubFlows } from '../../utils';
+import { Button, ButtonPopup, ButtonPopupItem } from '../common';
+import ItemPicker from '../ItemPicker.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import { flowStore, initFlow } from './flowStore';
+let hubFlows = undefined;
+const drawers = {
+    hub: undefined,
+    json: undefined
+};
+let pendingJson;
+let hubFilter = '';
+const flowHubFuse = new Fuse([], {
+    includeScore: false,
+    keys: ['summary']
+});
+$: filteredHubFlows =
+    hubFilter.length > 0 ? flowHubFuse.search(hubFilter).map((value) => value.item) : hubFlows ?? [];
+async function importJson() {
+    await goto('/flows/add');
+    Object.assign($flowStore, JSON.parse(pendingJson));
+    initFlow($flowStore);
+    drawers.json?.closeDrawer();
+}
+async function loadHubFlowsWFuse() {
+    hubFlows = await loadHubFlows();
+    flowHubFuse.setCollection(hubFlows ?? []);
+}
+</script>
+
+<!-- Buttons -->
+<div class="flex flex-row gap-2">
+	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/flows/add">
+		<svelte:fragment slot="main">New Flow</svelte:fragment>
+		<ButtonPopupItem on:click={() => drawers.json?.toggleDrawer()}>
+			Import from raw JSON
+		</ButtonPopupItem>
+	</ButtonPopup>
+</div>
+
+<!-- WindmillHub script list -->
+<ItemPicker
+	bind:this={drawers.hub}
+	pickCallback={(path) => {
+		goto('/flows/add?hub=' + path)
+	}}
+	itemName={'Flow'}
+	extraField="summary"
+	loadItems={async () => {
+		await loadHubFlowsWFuse()
+		return filteredHubFlows.map((x) => ({ ...x, path: x.flow_id }))
+	}}
+/>
+
+<!-- Raw JSON -->
+<Drawer bind:this={drawers.json} size="800px">
+	<DrawerContent title="Import flow from JSON" on:close={() => drawers.json?.toggleDrawer()}>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
+		<span slot="submission"><Button size="sm" on:click={importJson}>Import</Button></span>
+	</DrawerContent>
+</Drawer>

package/components/flows/CreateActionsFlow.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CreateActionsFlowProps = typeof __propDef.props;
+export type CreateActionsFlowEvents = typeof __propDef.events;
+export type CreateActionsFlowSlots = typeof __propDef.slots;
+export default class CreateActionsFlow extends SvelteComponentTyped<CreateActionsFlowProps, CreateActionsFlowEvents, CreateActionsFlowSlots> {
+}
+export {};

package/components/flows/FlowEditor.svelte

@@ -2,20 +2,37 @@
 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';
 export let initialPath;
+export let loading;
 </script>
 
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
-		<Pane size={25} minSize={20} class="h-full">
-			<div class="grow overflow-auto p-4 bg-gray h-full bg-gray-50 relative">
-				{#if $flowStore.value.modules}
+		<Pane size={20} 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">
+						{#each new Array(6) as _}
+							<Skeleton layout={[[2], 1.5]} />
+						{/each}
+					</div>
+				{:else if $flowStore.value.modules}
 					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
 				{/if}
 			</div>
 		</Pane>
-		<Pane size={75} minSize={40}>
-			<FlowEditorPanel {initialPath} />
+		<Pane size={80} minSize={40}>
+			{#if loading}
+				<div class="w-full h-full ">
+					<div class="block m-auto mt-40 w-10">
+						<WindmillIcon class="animate-[spin_6s_linear_infinite]" height="40px" width="40px" />
+					</div>
+				</div>
+			{:else}
+				<FlowEditorPanel {initialPath} />
+			{/if}
 		</Pane>
 	</Splitpanes>
 </div>

package/components/flows/FlowEditor.svelte.d.ts

@@ -2,15 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         initialPath: string;
+        loading: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowEditorProps = typeof __propDef.props;
-export declare type FlowEditorEvents = typeof __propDef.events;
-export declare type FlowEditorSlots = typeof __propDef.slots;
+export type FlowEditorProps = typeof __propDef.props;
+export type FlowEditorEvents = typeof __propDef.events;
+export type FlowEditorSlots = typeof __propDef.slots;
 export default class FlowEditor extends SvelteComponentTyped<FlowEditorProps, FlowEditorEvents, FlowEditorSlots> {
 }
 export {};

package/components/flows/FlowProgressBar.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowProgressBarProps = typeof __propDef.props;
-export declare type FlowProgressBarEvents = typeof __propDef.events;
-export declare type FlowProgressBarSlots = typeof __propDef.slots;
+export type FlowProgressBarProps = typeof __propDef.props;
+export type FlowProgressBarEvents = typeof __propDef.events;
+export type FlowProgressBarSlots = typeof __propDef.slots;
 export default class FlowProgressBar extends SvelteComponentTyped<FlowProgressBarProps, FlowProgressBarEvents, FlowProgressBarSlots> {
     get reset(): () => void;
 }