windmill-components 1.87.0 → 1.89.0

package/package/components/EditorBar.svelte

@@ -0,0 +1,389 @@
+<script context="module">export const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
+</script>
+
+<script>import { ResourceService, VariableService } from '../gen';
+import { getModifierKey, getScriptByPath, sendUserToast } from '../utils';
+import { faBroom, faCube, faDollarSign, faEye, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { workspaceStore } from '../stores';
+import ItemPicker from './ItemPicker.svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+import VariableEditor from './VariableEditor.svelte';
+import Button from './common/button/Button.svelte';
+import HighlightCode from './HighlightCode.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { Badge, Drawer } from './common';
+import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte';
+import PickHubScript from './flows/pickers/PickHubScript.svelte';
+import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import Popover from './Popover.svelte';
+import Kbd from './common/kbd/Kbd.svelte';
+import { SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS } from '../consts';
+export let lang;
+export let editor;
+export let websocketAlive;
+export let iconOnly = false;
+export let validCode = true;
+export let kind = 'script';
+let contextualVariablePicker;
+let variablePicker;
+let resourcePicker;
+let variableEditor;
+let resourceEditor;
+let codeViewer;
+let codeObj = undefined;
+function addEditorActions() {
+    editor?.addAction('insert-variable', 'Windmill: Insert variable', () => {
+        variablePicker.openDrawer();
+    });
+    editor?.addAction('insert-resource', 'Windmill: Insert resource', () => {
+        resourcePicker.openDrawer();
+    });
+}
+$: editor && addEditorActions();
+async function loadVariables() {
+    return await VariableService.listVariable({ workspace: $workspaceStore ?? '' });
+}
+async function loadContextualVariables() {
+    return await VariableService.listContextualVariables({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+}
+let scriptPicker;
+let pick_existing = 'hub';
+let filter = '';
+async function onScriptPick(e) {
+    codeObj = undefined;
+    codeViewer?.openDrawer?.();
+    codeObj = await getScriptByPath(e.detail.path ?? '');
+}
+let version = __pkg__.version;
+</script>
+
+<Drawer bind:this={scriptPicker} size="900px">
+	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter {kind} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker bind:filter {kind} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={codeViewer} size="600px">
+	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
+		{#if codeObj}
+			<HighlightCode language={codeObj?.language} code={codeObj?.content} />
+		{:else}
+			<Skeleton layout={[[40]]} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<ItemPicker
+	bind:this={contextualVariablePicker}
+	pickCallback={(path, name) => {
+		if (!editor) return
+		if (lang == 'deno') {
+			editor.insertAtCursor(`Deno.env.get('${name}')`)
+		} else if (lang == 'python3') {
+			if (!editor.getCode().includes('import os')) {
+				editor.insertAtBeginning('import os\n')
+			}
+			editor.insertAtCursor(`os.environ.get("${name}")`)
+		} else if (lang == 'go') {
+			if (!editor.getCode().includes('"os"')) {
+				editor.insertAtLine('import "os"\n', 2)
+			}
+			editor.insertAtCursor(`os.Getenv("${name}")`)
+		} else if (lang == 'bash') {
+			editor.insertAtCursor(`$${name}`)
+		}
+		sendUserToast(`${name} inserted at cursor`)
+	}}
+	itemName="Contextual Variable"
+	extraField="name"
+	loadItems={loadContextualVariables}
+/>
+
+<ItemPicker
+	bind:this={variablePicker}
+	pickCallback={(path, name) => {
+		if (!editor) return
+		if (lang == 'deno') {
+			if (!editor.getCode().includes('import * as wmill from')) {
+				editor.insertAtBeginning(
+					`import * as wmill from 'https://deno.land/x/windmill@v${version}/mod.ts'\n`
+				)
+			}
+			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
+		} else if (lang == 'python3') {
+			if (!editor.getCode().includes('import wmill')) {
+				editor.insertAtBeginning('import wmill\n')
+			}
+			editor.insertAtCursor(`wmill.get_variable("${path}")`)
+		} else if (lang == 'go') {
+			if (!editor.getCode().includes('wmill "github.com/windmill-labs/windmill-go-client"')) {
+				editor.insertAtLine('import wmill "github.com/windmill-labs/windmill-go-client"\n\n', 3)
+			}
+			editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`)
+		} else if (lang == 'bash') {
+			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
+  "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/variables/get/${path}" \\
+  | jq -r .value`)
+		}
+		sendUserToast(`${name} inserted at cursor`)
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={loadVariables}
+	buttons={{ 'Edit/View': (x) => variableEditor.editVariable(x) }}
+>
+	<div slot="submission" class="flex flex-row">
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor.initNew()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<ItemPicker
+	bind:this={resourcePicker}
+	pickCallback={(path, _) => {
+		if (!editor) return
+		if (lang == 'deno') {
+			if (!editor.getCode().includes('import * as wmill from')) {
+				editor.insertAtBeginning(
+					`import * as wmill from 'https://deno.land/x/windmill@v${version}/mod.ts'\n`
+				)
+			}
+			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
+		} else if (lang == 'python3') {
+			if (!editor.getCode().includes('import wmill')) {
+				editor.insertAtBeginning('import wmill\n')
+			}
+			editor.insertAtCursor(`wmill.get_resource("${path}")`)
+		} else if (lang == 'go') {
+			if (!editor.getCode().includes('wmill "github.com/windmill-labs/windmill-go-client"')) {
+				editor.insertAtLine('import wmill "github.com/windmill-labs/windmill-go-client"\n\n', 3)
+			}
+			editor.insertAtCursor(`r, _ := wmill.GetResource("${path}")`)
+		} else if (lang == 'bash') {
+			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
+  "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/resources/get/${path}" \\
+  | jq -r .value`)
+		}
+		sendUserToast(`${path} inserted at cursor`)
+	}}
+	itemName="Resource"
+	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
+	extraField="description"
+	extraField2="resource_type"
+	loadItems={async () =>
+		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
+>
+	<div slot="submission" class="flex flex-row gap-x-1 mr-2">
+		<Button
+			target="_blank"
+			variant="border"
+			color="blue"
+			size="sm"
+			href="/resources?connect_app=undefined"
+		>
+			Connect an API
+		</Button>
+	</div>
+</ItemPicker>
+
+<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
+
+<div class="flex justify-between items-center overflow-y-auto w-full p-1">
+	<div class="flex items-center">
+		<Badge color={validCode ? 'green' : 'red'} class="min-w-[60px] mr-3">
+			{validCode ? 'Valid' : 'Invalid'}
+		</Badge>
+		<div class="flex items-center divide-x">
+			<Popover
+				notClickable
+				placement="bottom"
+				disappearTimeout={0}
+				class="pr-1"
+				disablePopup={!iconOnly}
+			>
+				<Button
+					color="light"
+					btnClasses="!font-medium !h-full"
+					on:click={contextualVariablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Context Var
+				</Button>
+				<svelte:fragment slot="text">Add context variable</svelte:fragment>
+			</Popover>
+			<Popover
+				notClickable
+				placement="bottom"
+				disappearTimeout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
+				<Button
+					color="light"
+					btnClasses="!font-medium !h-full"
+					on:click={variablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Variable
+				</Button>
+				<svelte:fragment slot="text">Add variable</svelte:fragment>
+			</Popover>
+			<Popover
+				notClickable
+				placement="bottom"
+				disappearTimeout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={resourcePicker.openDrawer}
+					{iconOnly}
+					startIcon={{ icon: faCube }}
+				>
+					+Resource
+				</Button>
+				<svelte:fragment slot="text">Add resource</svelte:fragment>
+			</Popover>
+			<Popover
+				notClickable
+				placement="bottom"
+				disappearTimeout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor?.clearContent}
+					{iconOnly}
+					startIcon={{ icon: faRotateLeft }}
+				>
+					Reset
+				</Button>
+				<svelte:fragment slot="text">Reset</svelte:fragment>
+			</Popover>
+			<Popover
+				notClickable
+				placement="bottom"
+				disappearTimeout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor?.reloadWebsocket}
+					startIcon={{ icon: faRotate }}
+				>
+					{#if !iconOnly}
+						Assistant
+					{/if}
+					<span class="ml-1 -my-1">
+						{#if lang == 'deno'}
+							(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
+						{:else if lang == 'go'}
+							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
+						{:else if lang == 'python3'}
+							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+							<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+						{/if}
+					</span>
+				</Button>
+				<svelte:fragment slot="text">Reload assistant</svelte:fragment>
+			</Popover>
+			<Popover
+				notClickable
+				placement="bottom"
+				disappearTimeout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
+				<Button
+					btnClasses="!font-medium"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor?.format}
+					{iconOnly}
+					startIcon={{ icon: faBroom }}
+				>
+					Format ({getModifierKey()}+S)
+				</Button>
+				<svelte:fragment slot="text">
+					Format <Kbd class="!text-gray-800">{getModifierKey()}</Kbd> + <Kbd class="!text-gray-800">
+						S
+					</Kbd>
+				</svelte:fragment>
+			</Popover>
+		</div>
+	</div>
+	<Popover
+		notClickable
+		placement="bottom"
+		disappearTimeout={0}
+		class="px-1"
+		disablePopup={!iconOnly}
+	>
+		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
+			<Button
+				btnClasses="!font-medium"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={scriptPicker.openDrawer}
+				{iconOnly}
+				startIcon={{ icon: faEye }}
+			>
+				Explore other scripts
+			</Button>
+		{/if}
+		<svelte:fragment slot="text">Script</svelte:fragment>
+	</Popover>
+</div>
+
+<style>
+	@keyframes pulse {
+    50% {
+        opacity: .5
+    }
+}
+span.green {
+    animation: pulse 5s ease-in-out infinite;
+    --tw-text-opacity: 1;
+    color: rgb(22 163 74 / var(--tw-text-opacity))
+}</style>

package/package/components/EditorBar.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
+import type Editor from './Editor.svelte';
+declare const __propDef: {
+    props: {
+        lang: 'python3' | 'deno' | 'go' | 'bash';
+        editor: Editor | undefined;
+        websocketAlive: {
+            pyright: boolean;
+            black: boolean;
+            deno: boolean;
+            go: boolean;
+        };
+        iconOnly?: boolean | undefined;
+        validCode?: boolean | undefined;
+        kind?: "script" | "trigger" | "approval" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorBarProps = typeof __propDef.props;
+export type EditorBarEvents = typeof __propDef.events;
+export type EditorBarSlots = typeof __propDef.slots;
+export default class EditorBar extends SvelteComponentTyped<EditorBarProps, EditorBarEvents, EditorBarSlots> {
+}
+export {};

package/package/components/FieldHeader.svelte

@@ -0,0 +1,26 @@
+<script>import Required from './Required.svelte';
+export let label;
+export let format = '';
+export let contentEncoding = '';
+export let type = undefined;
+export let required = false;
+</script>
+
+<div class="inline-flex flex-row items-center truncated">
+	<span class="font-semibold">
+		{label}
+	</span>
+	<Required {required} class="!ml-0" />
+
+	{#if format && format != ''}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({format})
+		</span>
+	{:else}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({type ?? 'any'}{contentEncoding && contentEncoding != ''
+				? `, encoding: ${contentEncoding}`
+				: ''})</span
+		>
+	{/if}
+</div>

package/package/components/FieldHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        format?: string | undefined;
+        contentEncoding?: string | undefined;
+        type?: string | undefined;
+        required?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldHeaderProps = typeof __propDef.props;
+export type FieldHeaderEvents = typeof __propDef.events;
+export type FieldHeaderSlots = typeof __propDef.slots;
+export default class FieldHeader extends SvelteComponentTyped<FieldHeaderProps, FieldHeaderEvents, FieldHeaderSlots> {
+}
+export {};