windmill-components 1.408.2 → 1.430.3

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -10,11 +10,13 @@ import { enterpriseLicense } from '../../stores';
 import MenuButton from './MenuButton.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { isCloudHosted } from '../../cloud';
+import { initAllAiWorkspace } from '../copilot/lib';
 export let isCollapsed = false;
 async function toggleSwitchWorkspace(id) {
     if ($workspaceStore === id) {
         return;
     }
+    initAllAiWorkspace(id, true);
     const editPages = [
         '/scripts/edit/',
         '/flows/edit/',
@@ -63,17 +65,19 @@ async function toggleSwitchWorkspace(id) {
 				</MenuItem>
 			{/each}
 		</div>
-		<div class="py-1" role="none">
-			<a
-				href="{base}/user/create_workspace"
-				class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-				role="menuitem"
-				tabindex="-1"
-			>
-				<Plus size={16} />
-				Workspace
-			</a>
-		</div>
+		{#if isCloudHosted() || $superadmin}
+			<div class="py-1" role="none">
+				<a
+					href="{base}/user/create_workspace"
+					class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
+					role="menuitem"
+					tabindex="-1"
+				>
+					<Plus size={16} />
+					Workspace
+				</a>
+			</div>
+		{/if}
 		<div class="py-1" role="none">
 			<a
 				href="{base}/user/workspaces"
@@ -84,7 +88,7 @@ async function toggleSwitchWorkspace(id) {
 				role="menuitem"
 				tabindex="-1"
 			>
-				All workspaces & invites
+				All workspaces
 			</a>
 		</div>
 		{#if $userStore?.is_admin || $superadmin}

package/package/components/toast.d.ts

@@ -0,0 +1 @@
+export declare function processMessage(message: string | undefined): string;

package/package/components/toast.js

@@ -0,0 +1,7 @@
+//regex that match path starting with u/ or f/ and with at least 2 /
+const pathRegex = /\b(u|f)\/[^\/\s]+\/[^\/\s]+\b/g;
+export function processMessage(message) {
+    return (message ?? 'Error without message').replaceAll(pathRegex, (path) => {
+        return `<span class="bg-surface-secondary p-1 text-xs font-mono whitespace-nowrap rounded-md">${path}</span>`;
+    });
+}

package/package/components/triggers/KafkaTriggerEditor.svelte

@@ -0,0 +1,19 @@
+<script>import { tick } from 'svelte';
+import KafkaTriggerEditorInner from './KafkaTriggerEditorInner.svelte';
+let open = false;
+export async function openEdit(ePath, isFlow) {
+    open = true;
+    await tick();
+    drawer?.openEdit(ePath, isFlow);
+}
+export async function openNew(is_flow, initial_script_path) {
+    open = true;
+    await tick();
+    drawer?.openNew(is_flow, initial_script_path);
+}
+let drawer;
+</script>
+
+{#if open}
+	<KafkaTriggerEditorInner on:update bind:this={drawer} />
+{/if}

package/package/components/triggers/KafkaTriggerEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
+        openNew?: ((is_flow: boolean, initial_script_path?: string) => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type KafkaTriggerEditorProps = typeof __propDef.props;
+export type KafkaTriggerEditorEvents = typeof __propDef.events;
+export type KafkaTriggerEditorSlots = typeof __propDef.slots;
+export default class KafkaTriggerEditor extends SvelteComponent<KafkaTriggerEditorProps, KafkaTriggerEditorEvents, KafkaTriggerEditorSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => Promise<void>;
+}
+export {};

package/package/components/triggers/KafkaTriggerEditorInner.svelte

@@ -0,0 +1,302 @@
+<script>import { Alert, Button } from '../common';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import Path from '../Path.svelte';
+import Required from '../Required.svelte';
+import ScriptPicker from '../ScriptPicker.svelte';
+import { KafkaTriggerService } from '../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import Section from '../Section.svelte';
+import { Loader2, Save, X, Plus } from 'lucide-svelte';
+import Label from '../Label.svelte';
+import Toggle from '../Toggle.svelte';
+import { fade } from 'svelte/transition';
+import ResourcePicker from '../ResourcePicker.svelte';
+let drawer;
+let is_flow = false;
+let initialPath = '';
+let edit = true;
+let itemKind = 'script';
+let script_path = '';
+let initialScriptPath = '';
+let fixedScriptPath = '';
+let path = '';
+let pathError = '';
+let kafka_resource_path = '';
+let group_id = '';
+let topics = [''];
+let dirtyGroupId = false;
+let enabled = false;
+let dirtyPath = false;
+let can_write = true;
+let drawerLoading = true;
+const dispatch = createEventDispatcher();
+$: is_flow = itemKind === 'flow';
+export async function openEdit(ePath, isFlow) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        initialPath = ePath;
+        itemKind = isFlow ? 'flow' : 'script';
+        edit = true;
+        dirtyPath = false;
+        dirtyGroupId = false;
+        await loadTrigger();
+    }
+    catch (err) {
+        sendUserToast(`Could not load kafka trigger: ${err}`, true);
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+export async function openNew(nis_flow, fixedScriptPath_) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        is_flow = nis_flow;
+        edit = false;
+        itemKind = nis_flow ? 'flow' : 'script';
+        kafka_resource_path = '';
+        group_id = '';
+        topics = [''];
+        dirtyGroupId = false;
+        initialScriptPath = '';
+        fixedScriptPath = fixedScriptPath_ ?? '';
+        script_path = fixedScriptPath;
+        path = '';
+        initialPath = '';
+        dirtyPath = false;
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+async function loadTrigger() {
+    const s = await KafkaTriggerService.getKafkaTrigger({
+        workspace: $workspaceStore,
+        path: initialPath
+    });
+    script_path = s.script_path;
+    initialScriptPath = s.script_path;
+    is_flow = s.is_flow;
+    path = s.path;
+    kafka_resource_path = s.kafka_resource_path;
+    group_id = s.group_id;
+    topics = s.topics;
+    enabled = s.enabled;
+    can_write = canWrite(s.path, s.extra_perms, $userStore);
+}
+async function updateTrigger() {
+    if (edit) {
+        await KafkaTriggerService.updateKafkaTrigger({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                kafka_resource_path,
+                group_id,
+                topics
+            }
+        });
+        sendUserToast(`Kafka trigger ${path} updated`);
+    }
+    else {
+        await KafkaTriggerService.createKafkaTrigger({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                enabled: true,
+                kafka_resource_path,
+                group_id,
+                topics
+            }
+        });
+        sendUserToast(`Kafka trigger ${path} created`);
+    }
+    if (!$usedTriggerKinds.includes('kafka')) {
+        $usedTriggerKinds = [...$usedTriggerKinds, 'kafka'];
+    }
+    dispatch('update');
+    drawer.closeDrawer();
+}
+$: topicsError = topics.some((b) => /[^[a-zA-Z0-9-_.]/.test(b)) ? 'Invalid topics' : '';
+$: groupIdError = /[^a-zA-Z0-9-_.]/.test(group_id) ? 'Invalid group ID' : '';
+$: !dirtyGroupId &&
+    path &&
+    (group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`);
+</script>
+
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit kafka trigger ${initialPath}`
+				: `Kafka trigger ${initialPath}`
+			: 'New kafka trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await KafkaTriggerService.setKafkaTriggerEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} kafka trigger ${initialPath}`)
+							}}
+						/>
+					</div>
+				{/if}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' ||
+						emptyString(script_path) ||
+						emptyString(kafka_resource_path) ||
+						topics.length < 1 ||
+						topics.some((t) => emptyString(t)) ||
+						topicsError != '' ||
+						emptyString(group_id) ||
+						groupIdError != '' ||
+						!can_write}
+					on:click={updateTrigger}
+				>
+					Save
+				</Button>
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<Alert title="Info" type="info">
+				{#if edit}
+					Changes can take up to 30 seconds to take effect.
+				{:else}
+					Kafka consumers can take up to 30 seconds to start.
+				{/if}
+			</Alert>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="kafka_trigger"
+							kind="kafka_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
+
+				<Section label="Kafka">
+					<div class="flex flex-col w-full gap-4">
+						<div class="block grow w-full">
+							<div class="text-secondary text-sm mb-1">
+								Resource
+								<Required required={true} />
+							</div>
+							<ResourcePicker resourceType="kafka" bind:value={kafka_resource_path} />
+						</div>
+						<label class="block grow w-full">
+							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+								<div>
+									Topics
+									<Required required={true} />
+								</div>
+							</div>
+
+							<div class="flex flex-col gap-4 mt-1">
+								{#each topics as v, i}
+									<div class="flex w-full gap-2 items-center">
+										<input type="text" bind:value={v} />
+
+										<button
+											transition:fade|local={{ duration: 100 }}
+											class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+											aria-label="Clear"
+											on:click={() => {
+												topics = topics.filter((_, index) => index !== i)
+											}}
+											class:hidden={topics.length === 1}
+										>
+											<X size={14} />
+										</button>
+									</div>
+								{/each}
+
+								<div class="flex items-baseline">
+									<Button
+										variant="border"
+										color="light"
+										size="xs"
+										on:click={() => {
+											if (topics == undefined || !Array.isArray(topics)) {
+												topics = []
+											}
+											topics = topics.concat('')
+										}}
+										startIcon={{ icon: Plus }}
+									>
+										Add topic
+									</Button>
+								</div>
+							</div>
+							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+								{topicsError}
+							</div>
+						</label>
+
+						<label class="block grow w-full">
+							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+								<div>
+									Group ID
+									<Required required={true} />
+								</div>
+							</div>
+							<div class="mt-1">
+								<input type="text" bind:value={group_id} on:focus={() => (dirtyGroupId = true)} />
+							</div>
+
+							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+								{groupIdError}
+							</div>
+						</label>
+					</div>
+				</Section>
+
+				<Section label="Runnable">
+					<p class="text-xs mb-1 text-tertiary">
+						Pick a script or flow to be triggered<Required required={true} />
+					</p>
+					<div class="flex flex-row mb-2">
+						<ScriptPicker
+							disabled={fixedScriptPath != '' || !can_write}
+							initialPath={fixedScriptPath || initialScriptPath}
+							kinds={['script']}
+							allowFlow={true}
+							bind:itemKind
+							bind:scriptPath={script_path}
+							allowRefresh
+						/>
+					</div>
+				</Section>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>

package/package/components/triggers/KafkaTriggerEditorInner.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
+        openNew?: ((nis_flow: boolean, fixedScriptPath_?: string) => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type KafkaTriggerEditorInnerProps = typeof __propDef.props;
+export type KafkaTriggerEditorInnerEvents = typeof __propDef.events;
+export type KafkaTriggerEditorInnerSlots = typeof __propDef.slots;
+export default class KafkaTriggerEditorInner extends SvelteComponent<KafkaTriggerEditorInnerProps, KafkaTriggerEditorInnerEvents, KafkaTriggerEditorInnerSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
+    get openNew(): (nis_flow: boolean, fixedScriptPath_?: string | undefined) => Promise<void>;
+}
+export {};

package/package/components/triggers/KafkaTriggersPanel.svelte

@@ -0,0 +1,98 @@
+<script>import { Button } from '../common';
+import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
+import { KafkaTriggerService } from '../../gen';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+import { canWrite } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import { getContext } from 'svelte';
+import KafkaTriggerEditor from './KafkaTriggerEditor.svelte';
+import { isCloudHosted } from '../../cloud';
+import KafkaIcon from '../icons/KafkaIcon.svelte';
+export let isFlow;
+export let path;
+export let newItem = false;
+let kafkaTriggerEditor;
+$: path && loadTriggers();
+const { triggersCount } = getContext('TriggerContext');
+let kafkaTriggers = undefined;
+export async function loadTriggers() {
+    try {
+        kafkaTriggers = (await KafkaTriggerService.listKafkaTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+        $triggersCount = { ...($triggersCount ?? {}), kafka_count: kafkaTriggers?.length };
+    }
+    catch (e) {
+        console.error('impossible to load kafka triggers', e);
+    }
+}
+</script>
+
+<KafkaTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={kafkaTriggerEditor}
+/>
+
+{#if !$enterpriseLicense}
+	<Alert title="EE Only" type="warning" size="xs">
+		Kafka triggers are an enterprise only feature.
+	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		Kafka triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		{#if newItem}
+			<Alert title="Triggers disabled" type="warning" size="xs">
+				Deploy the {isFlow ? 'flow' : 'script'} to add kafka triggers.
+			</Alert>
+		{:else}
+			<Button
+				on:click={() => kafkaTriggerEditor?.openNew(isFlow, path)}
+				variant="border"
+				color="light"
+				size="xs"
+				startIcon={{ icon: KafkaIcon }}
+			>
+				New Kafka Trigger
+			</Button>
+			{#if kafkaTriggers}
+				{#if kafkaTriggers.length == 0}
+					<div class="text-xs text-secondary"> No kafka triggers </div>
+				{:else}
+					<div class="flex flex-col divide-y pt-2">
+						{#each kafkaTriggers as kafkaTrigger (kafkaTrigger.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{kafkaTrigger.path}</div>
+								<div class="col-span-2 truncate">
+									{kafkaTrigger.kafka_resource_path}
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => kafkaTriggerEditor?.openEdit(kafkaTrigger.path, isFlow)}
+										class="px-2"
+									>
+										{#if kafkaTrigger.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<Skeleton layout={[[8]]} />
+			{/if}
+		{/if}
+	</div>
+{/if}

package/package/components/triggers/KafkaTriggersPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        newItem?: boolean | undefined;
+        loadTriggers?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type KafkaTriggersPanelProps = typeof __propDef.props;
+export type KafkaTriggersPanelEvents = typeof __propDef.events;
+export type KafkaTriggersPanelSlots = typeof __propDef.slots;
+export default class KafkaTriggersPanel extends SvelteComponent<KafkaTriggersPanelProps, KafkaTriggersPanelEvents, KafkaTriggersPanelSlots> {
+    get loadTriggers(): () => Promise<void>;
+}
+export {};

package/package/components/triggers/RouteEditor.svelte

@@ -11,6 +11,9 @@ export async function openNew(is_flow, initial_script_path) {
     await tick();
     drawer?.openNew(is_flow, initial_script_path);
 }
+export async function getTriggers() {
+    return drawer?.getTriggers();
+}
 let drawer;
 </script>
 

package/package/components/triggers/RouteEditor.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
         openNew?: ((is_flow: boolean, initial_script_path?: string) => Promise<void>) | undefined;
+        getTriggers?: (() => Promise<any>) | undefined;
     };
     events: {
         update: CustomEvent<any>;
@@ -17,5 +18,6 @@ export type RouteEditorSlots = typeof __propDef.slots;
 export default class RouteEditor extends SvelteComponent<RouteEditorProps, RouteEditorEvents, RouteEditorSlots> {
     get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
     get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => Promise<void>;
+    get getTriggers(): () => Promise<any>;
 }
 export {};