windmill-components 1.444.2 → 1.447.4

package/package/components/schema/SchemaPicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        payloadData: Record<string, any>;
+        date: string | undefined;
+        selected?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        start: {};
+        extra: {};
+    };
+};
+export type SchemaPickerProps = typeof __propDef.props;
+export type SchemaPickerEvents = typeof __propDef.events;
+export type SchemaPickerSlots = typeof __propDef.slots;
+export default class SchemaPicker extends SvelteComponent<SchemaPickerProps, SchemaPickerEvents, SchemaPickerSlots> {
+}
+export {};

package/package/components/schema/SchemaPickerRow.svelte

@@ -0,0 +1,95 @@
+<script>import CustomPopover from '../CustomPopover.svelte';
+import { copyToClipboard } from '../../utils';
+import ObjectViewer from '../propertyPicker/ObjectViewer.svelte';
+import { twMerge } from 'tailwind-merge';
+import Cell from '../table/Cell.svelte';
+export let payloadData;
+export let date;
+export let selected = false;
+export let hovering = false;
+function formatDate(dateString) {
+    if (!dateString)
+        return '';
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }).format(date);
+}
+function formatDateShort(dateString) {
+    if (!dateString)
+        return '';
+    const date = new Date(dateString);
+    const now = new Date();
+    // If date is today, only show time
+    if (date.toDateString() === now.toDateString()) {
+        return new Intl.DateTimeFormat('en-US', {
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(date);
+    }
+    // If date is this year, show only month and day
+    if (date.getFullYear() === now.getFullYear()) {
+        return new Intl.DateTimeFormat('en-US', {
+            month: 'short',
+            day: 'numeric'
+        }).format(date);
+    }
+    // If date is from another year, only show the date with year
+    return new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    }).format(date);
+}
+</script>
+
+<Cell>
+	<slot name="start" />
+</Cell>
+
+<Cell
+	wrap
+	class="text-2xs font-normal text-left p-2 rounded-md overflow-auto text-ellipsis scrollbar-none"
+	title={formatDate(date)}
+>
+	{formatDateShort(date)}
+</Cell>
+
+<Cell class="items-center flex flex-row gap-2">
+	<CustomPopover class="w-full overflow-auto flex items-center justify-center">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class={twMerge(
+				'text-xs border w-full font-normal text-left p-1 rounded-md whitespace-nowrap overflow-hidden text-ellipsis',
+				hovering && 'border-surface'
+			)}
+			on:click={() => {
+				if (selected) {
+					copyToClipboard(JSON.stringify(payloadData))
+				}
+			}}
+		>
+			{JSON.stringify(payloadData)}
+		</div>
+		<svelte:fragment slot="overlay">
+			<ObjectViewer json={payloadData} />
+		</svelte:fragment>
+	</CustomPopover>
+
+	<slot name="extra" />
+</Cell>
+
+<style>
+	.scrollbar-none {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	.scrollbar-none::-webkit-scrollbar {
+		display: none; /* Chrome, Safari and Opera */
+	}</style>

package/package/components/schema/SchemaPickerRow.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        payloadData: Record<string, any>;
+        date: string | undefined;
+        selected?: boolean | undefined;
+        hovering?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        start: {};
+        extra: {};
+    };
+};
+export type SchemaPickerRowProps = typeof __propDef.props;
+export type SchemaPickerRowEvents = typeof __propDef.events;
+export type SchemaPickerRowSlots = typeof __propDef.slots;
+export default class SchemaPickerRow extends SvelteComponent<SchemaPickerRowProps, SchemaPickerRowEvents, SchemaPickerRowSlots> {
+}
+export {};

package/package/components/scriptEditor/LogPanel.svelte

@@ -70,7 +70,7 @@ let forceJson = false;
 		<Tab value="logs" size="xs">Logs & Result</Tab>
 		<Tab value="history" size="xs">History</Tab>
 		{#if showCaptures}
-			<Tab value="captures" size="xs">Captures</Tab>
+			<Tab value="captures" size="xs">Trigger captures</Tab>
 		{/if}
 
 		<svelte:fragment slot="content">

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -0,0 +1,103 @@
+<script>import { workspaceStore, usersWorkspaceStore } from '../../stores';
+import Button from '../common/button/Button.svelte';
+import { sendUserToast } from '../../toast';
+import { WorkspaceService } from '../../gen';
+import Modal from '../common/modal/Modal.svelte';
+import { Pen } from 'lucide-svelte';
+import Toggle from '../Toggle.svelte';
+let colorEnabled = false;
+let workspaceColor = undefined;
+let savedWorkspaceColor = undefined;
+let lastWorkspace = undefined;
+export let open = false;
+$: $usersWorkspaceStore && $workspaceStore !== lastWorkspace && onWorkspaceChange();
+function onWorkspaceChange() {
+    lastWorkspace = $workspaceStore;
+    savedWorkspaceColor = $usersWorkspaceStore?.workspaces.find((w) => w.id === $workspaceStore)?.color;
+    workspaceColor = savedWorkspaceColor;
+}
+$: colorEnabled = !!workspaceColor;
+$: if (colorEnabled && !workspaceColor)
+    generateRandomColor();
+function generateRandomColor() {
+    const randomColor = '#' +
+        Math.floor(Math.random() * 16777215)
+            .toString(16)
+            .padStart(6, '0');
+    workspaceColor = randomColor;
+}
+async function changeWorkspaceColor() {
+    const colorToSave = colorEnabled && workspaceColor ? workspaceColor : undefined;
+    open = false;
+    await WorkspaceService.changeWorkspaceColor({
+        workspace: $workspaceStore,
+        requestBody: {
+            color: colorToSave
+        }
+    });
+    usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
+    savedWorkspaceColor = colorToSave;
+    sendUserToast(`Workspace color updated.`);
+}
+</script>
+
+<div>
+	<p class="font-semibold text-sm">Workspace color</p>
+	<div class="flex flex-row gap-0.5 items-center">
+		{#if savedWorkspaceColor}
+			<div
+				class="w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600"
+				style="background-color: {savedWorkspaceColor}"
+			/>
+		{:else}
+			<span class="text-xs text-secondary">No color set</span>
+		{/if}
+		<Button
+			on:click={() => {
+				open = true
+			}}
+			size="xs"
+			spacingSize="xs2"
+			color="light"
+			iconOnly
+			startIcon={{
+				icon: Pen
+			}}
+		/>
+	</div>
+	<p class="italic text-xs">
+		Color to identify the current workspace in the list of workspaces
+	</p>
+</div>
+
+<Modal bind:open title="Change Workspace Color">
+	<div class="flex flex-col gap-4">
+		<label class="block">
+			<span class="text-secondary text-sm">Workspace color</span>
+			<div class="flex items-center gap-2">
+				<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
+				{#if colorEnabled}
+					<input class="w-10" type="color" bind:value={workspaceColor} disabled={!colorEnabled} />
+				{/if}
+				<input
+					type="text"
+					class="w-24 text-sm"
+					bind:value={workspaceColor}
+					disabled={!colorEnabled}
+				/>
+				<Button on:click={generateRandomColor} size="xs" disabled={!colorEnabled}>Random</Button>
+			</div>
+		</label>
+	</div>
+
+	<svelte:fragment slot="actions">
+		<Button
+			size="sm"
+			on:click={() => {
+				changeWorkspaceColor()
+			}}
+		>
+			Save
+		</Button>
+	</svelte:fragment>
+</Modal>

package/package/components/settings/ChangeWorkspaceColor.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChangeWorkspaceColorProps = typeof __propDef.props;
+export type ChangeWorkspaceColorEvents = typeof __propDef.events;
+export type ChangeWorkspaceColorSlots = typeof __propDef.slots;
+export default class ChangeWorkspaceColor extends SvelteComponent<ChangeWorkspaceColorProps, ChangeWorkspaceColorEvents, ChangeWorkspaceColorSlots> {
+}
+export {};

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -61,6 +61,7 @@ export let open = false;
 			/>
 		{/if}
 	</div>
+	<p class="italic text-xs">Slug to uniquely identify your workspace</p>
 </div>
 
 <Modal bind:open title="Change workspace ID">

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -42,6 +42,10 @@ export let open = false;
 			}}
 		/>
 	</div>
+
+	<p class="italic text-xs">
+		Displayable name
+	</p>
 </div>
 
 <Modal bind:open title="Change workspace name">

package/package/components/sidebar/MenuButton.svelte

@@ -10,6 +10,7 @@ export let lightMode = false;
 export let stopPropagationOnClick = false;
 export let shortcut = '';
 export let notificationsCount = 0;
+export let color = null;
 let dispatch = createEventDispatcher();
 </script>
 
@@ -24,10 +25,12 @@ let dispatch = createEventDispatcher();
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				lightMode
 					? 'text-primary hover:bg-surface-hover '
-					: '  hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+					: 'hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+				color ? 'border-4' : '',
 				'transition-all',
 				$$props.class
 			)}
+			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
 			title={label}
 		>
 			{#if icon}
@@ -48,7 +51,7 @@ let dispatch = createEventDispatcher();
 				<span
 					class={twMerge(
 						'whitespace-pre truncate',
-						lightMode ? 'text-primary' : 'text-primary-inverse  dark:text-primary',
+						lightMode ? 'text-primary' : 'text-primary-inverse dark:text-primary',
 						'transition-all',
 						$$props.class
 					)}

package/package/components/sidebar/MenuButton.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         stopPropagationOnClick?: boolean | undefined;
         shortcut?: string | undefined;
         notificationsCount?: number | undefined;
+        color?: string | null | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/package/components/sidebar/SidebarContent.svelte

@@ -19,6 +19,7 @@ import { changelogs } from './changelogs';
 import { page } from '$app/stores';
 import SideBarNotification from './SideBarNotification.svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
+import NatsIcon from '../icons/NatsIcon.svelte';
 export let numUnacknowledgedCriticalAlerts = 0;
 $: mainMenuLinks = [
     { label: 'Home', href: `${base}/`, icon: Home },
@@ -67,6 +68,13 @@ const defaultExtraTriggerLinks = [
         icon: KafkaIcon,
         disabled: $userStore?.operator || !$enterpriseLicense,
         kind: 'kafka'
+    },
+    {
+        label: 'NATS' + ($enterpriseLicense ? '' : ' (EE)'),
+        href: '/nats_triggers',
+        icon: NatsIcon,
+        disabled: $userStore?.operator || !$enterpriseLicense,
+        kind: 'nats'
     }
 ];
 $: extraTriggerLinks = defaultExtraTriggerLinks.filter((link) => {

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -11,6 +11,7 @@ import MenuButton from './MenuButton.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { isCloudHosted } from '../../cloud';
 import { initAllAiWorkspace } from '../copilot/lib';
+import { twMerge } from 'tailwind-merge';
 export let isCollapsed = false;
 // When used outside of the side bar, where links to workspace settings and such don't make as much sense.
 export let strictWorkspaceSelect = false;
@@ -43,7 +44,13 @@ async function toggleSwitchWorkspace(id) {
 
 <Menu>
 	<div slot="trigger">
-		<MenuButton class="!text-xs" icon={Building} label={$workspaceStore ?? ''} {isCollapsed} />
+		<MenuButton
+			class="!text-xs"
+			icon={Building}
+			label={$workspaceStore ?? ''}
+			{isCollapsed}
+			color={$userWorkspaces.find((w) => w.id === $workspaceStore)?.color}
+		/>
 	</div>
 
 	<div class="divide-y" role="none">
@@ -51,17 +58,29 @@ async function toggleSwitchWorkspace(id) {
 			{#each $userWorkspaces as workspace}
 				<MenuItem>
 					<button
-						class="text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5
-						{$workspaceStore === workspace.id
-							? 'cursor-default bg-surface-selected'
-							: 'cursor-pointer hover:bg-surface-hover'}"
+						class={twMerge(
+							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							$workspaceStore === workspace.id
+								? 'cursor-default bg-surface-selected'
+								: 'cursor-pointer hover:bg-surface-hover'
+						)}
 						on:click={async () => {
 							await toggleSwitchWorkspace(workspace.id)
 						}}
 					>
-						<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
-						<div class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left">
-							{workspace.id}
+						<div class="flex items-center justify-between min-w-0 w-full">
+							<div>
+								<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
+								<div class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left">
+									{workspace.id}
+								</div>
+							</div>
+							{#if workspace.color}
+								<div
+									class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
+									style="background-color: {workspace.color}"
+								></div>
+							{/if}
 						</div>
 					</button>
 				</MenuItem>
@@ -81,19 +100,19 @@ async function toggleSwitchWorkspace(id) {
 			</div>
 		{/if}
 		{#if !strictWorkspaceSelect}
-		<div class="py-1" role="none">
-			<a
-				href="{base}/user/workspaces"
-				on:click={() => {
-					localStorage.removeItem('workspace')
-				}}
-				class="text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
-				role="menuitem"
-				tabindex="-1"
-			>
-				All workspaces
-			</a>
-		</div>
+			<div class="py-1" role="none">
+				<a
+					href="{base}/user/workspaces"
+					on:click={() => {
+						localStorage.removeItem('workspace')
+					}}
+					class="text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
+					role="menuitem"
+					tabindex="-1"
+				>
+					All workspaces
+				</a>
+			</div>
 		{/if}
 		{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 			<div class="py-1" role="none">

package/package/components/table/DataTable.svelte

@@ -19,22 +19,62 @@ export let noBorder = false;
 export let rowCount = undefined;
 export let hasMore = true;
 export let contentHeight = 0;
+export let tableFixed = false;
+export let infiniteScroll = undefined;
 let footerHeight = 0;
 let tableHeight = 0;
 const dispatch = createEventDispatcher();
+let tableContainer;
+let isLoading = false;
 setContext('datatable', {
     size
 });
 $: contentHeight = tableHeight - footerHeight;
+function checkScrollStatus() {
+    if (!infiniteScroll || isLoading)
+        return;
+    const hasScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
+    if (!hasScrollbar && hasMore) {
+        isLoading = true;
+        dispatch('loadMore');
+        setTimeout(() => {
+            isLoading = false;
+        }, 200);
+    }
+}
+function handleScroll() {
+    if (!infiniteScroll || isLoading) {
+        if (isLoading) {
+            const checkAgain = () => {
+                if (!isLoading) {
+                    handleScroll();
+                }
+            };
+            setTimeout(checkAgain, 200);
+        }
+        return;
+    }
+    const { scrollTop, scrollHeight, clientHeight } = tableContainer;
+    if (scrollHeight - (scrollTop + clientHeight) < 50) {
+        isLoading = true;
+        dispatch('loadMore');
+        setTimeout(() => {
+            isLoading = false;
+        }, 1000);
+    }
+}
+$: if (tableContainer && hasMore && !isLoading) {
+    checkScrollStatus();
+}
 </script>
 
 <div
 	class={twMerge('h-full', rounded ? 'rounded-md' : '', noBorder ? 'border-0' : 'border')}
 	bind:clientHeight={tableHeight}
 >
-	<List justify="between" gap="none">
-		<div class="w-full overflow-auto min-h-0 grow">
-			<table class={twMerge('min-w-full divide-y')}>
+	<List justify="between" gap="none" hFull={true}>
+		<div class="w-full overflow-auto h-fit" bind:this={tableContainer} on:scroll={handleScroll}>
+			<table class={tableFixed ? 'table-fixed w-full' : 'min-w-full'}>
 				<slot />
 			</table>
 		</div>

package/package/components/table/DataTable.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         rowCount?: number | undefined;
         hasMore?: boolean | undefined;
         contentHeight?: number | undefined;
+        tableFixed?: boolean | undefined;
+        infiniteScroll?: boolean | undefined;
     };
     events: {
         previous: CustomEvent<any>;

package/package/components/table/Head.svelte

@@ -1,4 +1,4 @@
-<thead class="bg-surface-secondary sticky top-0 z-10">
+<thead class="bg-surface-secondary sticky top-0 z-10 border-b">
 	<slot />
 	<div class="absolute top-2 right-2">
 		<slot name="headerAction" />

package/package/components/table/Row.svelte

@@ -4,6 +4,7 @@ export let hoverable = false;
 export let selected = false;
 export let dividable = false;
 export let disabled = false;
+export let hovering = false;
 const dispatch = createEventDispatcher();
 </script>
 
@@ -13,11 +14,20 @@ const dispatch = createEventDispatcher();
 		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'transition-all',
 		dividable ? 'divide-x' : '',
-		disabled ? 'opacity-60' : ''
+		disabled ? 'opacity-60' : '',
+		$$props.class
 	)}
 	on:click={() => {
 		dispatch('click')
 	}}
+	on:mouseenter={() => {
+		hovering = true
+		dispatch('hover', true)
+	}}
+	on:mouseleave={() => {
+		hovering = false
+		dispatch('hover', false)
+	}}
 >
 	<slot />
 </tr>

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

@@ -1,13 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         hoverable?: boolean | undefined;
         selected?: boolean | undefined;
         dividable?: boolean | undefined;
         disabled?: boolean | undefined;
+        hovering?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;
+        hover: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Row } from './Row.svelte';
+export { default as Cell } from './Cell.svelte';
+export { default as DataTable } from './DataTable.svelte';

package/package/components/table/index.js

@@ -0,0 +1,3 @@
+export { default as Row } from './Row.svelte';
+export { default as Cell } from './Cell.svelte';
+export { default as DataTable } from './DataTable.svelte';

package/package/components/triggers/CaptureButton.svelte

@@ -1,12 +1,14 @@
 <script>import Popover from '../meltComponents/Popover.svelte';
 import { Button } from '../common';
-import { Webhook, Route, Unplug, Mail } from 'lucide-svelte';
+import { Webhook, Route, Unplug, Mail, Plus } from 'lucide-svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
 import { enterpriseLicense } from '../../stores';
 import {} from '../../gen';
 import { createEventDispatcher } from 'svelte';
 import { captureTriggerKindToTriggerKind } from '../triggers';
 import CaptureIcon from './CaptureIcon.svelte';
+import NatsIcon from '../icons/NatsIcon.svelte';
+export let small = false;
 let isOpen = false;
 const dispatch = createEventDispatcher();
 function handleClick(kind) {
@@ -20,9 +22,31 @@ function handleClick(kind) {
 
 <Popover closeButton={false} bind:open={isOpen}>
 	<svelte:fragment slot="trigger">
-		<Button color="dark" btnClasses="rounded-l-none" wrapperClasses="h-full" nonCaptureEvent>
-			<CaptureIcon />
-		</Button>
+		{#if small}
+			<Button
+				color="light"
+				size="xs"
+				variant="border"
+				wrapperClasses="h-full"
+				nonCaptureEvent
+				title="Test trigger"
+			>
+				<div class="flex flex-row items-center gap-1">
+					<CaptureIcon variant="redDot" />
+					<Plus size={10} class="text-red" />
+				</div>
+			</Button>
+		{:else}
+			<Button
+				color="dark"
+				btnClasses="rounded-l-none"
+				wrapperClasses="h-full"
+				nonCaptureEvent
+				title="Test trigger"
+			>
+				<CaptureIcon variant="redDot" />
+			</Button>
+		{/if}
 	</svelte:fragment>
 	<svelte:fragment slot="content">
 		<div class="flex flex-col bg-surface">
@@ -72,6 +96,16 @@ function handleClick(kind) {
 					<p class="text-xs text-secondary">Kafka</p>
 				</div>
 			</button>
+			<button
+				disabled={!$enterpriseLicense}
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('nats')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<NatsIcon size={16} />
+					<p class="text-xs text-secondary">Nats</p>
+				</div>
+			</button>
 		</div>
 	</svelte:fragment>
 </Popover>

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

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        small?: boolean | undefined;
+    };
     events: {
         openTriggers: CustomEvent<any>;
     } & {