windmill-components 1.434.1 → 1.444.0

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -12,6 +12,8 @@ import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { isCloudHosted } from '../../cloud';
 import { initAllAiWorkspace } from '../copilot/lib';
 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;
 async function toggleSwitchWorkspace(id) {
     if ($workspaceStore === id) {
         return;
@@ -65,7 +67,7 @@ async function toggleSwitchWorkspace(id) {
 				</MenuItem>
 			{/each}
 		</div>
-		{#if isCloudHosted() || $superadmin}
+		{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect}
 			<div class="py-1" role="none">
 				<a
 					href="{base}/user/create_workspace"
@@ -78,6 +80,7 @@ async function toggleSwitchWorkspace(id) {
 				</a>
 			</div>
 		{/if}
+		{#if !strictWorkspaceSelect}
 		<div class="py-1" role="none">
 			<a
 				href="{base}/user/workspaces"
@@ -91,7 +94,8 @@ async function toggleSwitchWorkspace(id) {
 				All workspaces
 			</a>
 		</div>
-		{#if $userStore?.is_admin || $superadmin}
+		{/if}
+		{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 			<div class="py-1" role="none">
 				<MenuItem>
 					<a
@@ -101,13 +105,13 @@ async function toggleSwitchWorkspace(id) {
 						tabindex="-1"
 					>
 						<Settings size={16} />
-						Workspace Settings
+						Workspace settings
 					</a>
 				</MenuItem>
 			</div>
 		{/if}
 	</div>
-	{#if isCloudHosted() && !$isPremiumStore}
+	{#if isCloudHosted() && !$isPremiumStore && !strictWorkspaceSelect}
 		<div class="py-1" role="none">
 			{#if $workspaceStore != 'demo'}
 				<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
@@ -135,7 +139,7 @@ async function toggleSwitchWorkspace(id) {
 			{/if}
 		</div>
 	{/if}
-	{#if $enterpriseLicense}
+	{#if $enterpriseLicense && !strictWorkspaceSelect}
 		<MultiplayerMenu />
 	{/if}
 </Menu>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         isCollapsed?: boolean | undefined;
+        strictWorkspaceSelect?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,69 @@
 const changelogs = [
+    {
+        label: 'Full text search on jobs and logs',
+        href: 'https://www.windmill.dev/changelog/instant-full-text-search-on-jobs-and-logs',
+        date: '2024-12-05'
+    },
+    {
+        label: 'Force dark/light theme in apps',
+        href: 'https://www.windmill.dev/changelog/force-dark-light-theme',
+        date: '2024-11-28'
+    },
+    {
+        label: 'Kafka triggers',
+        href: 'https://www.windmill.dev/changelog/kafka-triggers',
+        date: '2024-11-18'
+    },
+    {
+        label: 'Critical channels in UI',
+        href: 'https://www.windmill.dev/changelog/critical-channels-ui',
+        date: '2024-11-15'
+    },
+    {
+        label: 'Support for Mistral and Anthropic AI models',
+        href: 'https://www.windmill.dev/changelog/mistral-anthropic-support',
+        date: '2024-11-14'
+    },
+    {
+        label: 'Websocket triggers',
+        href: 'https://www.windmill.dev/changelog/websocket-triggers',
+        date: '2024-11-06'
+    },
+    {
+        label: 'Autoscaling',
+        href: 'https://www.windmill.dev/changelog/autoscaling',
+        date: '2024-10-28'
+    },
+    {
+        label: 'File download helper',
+        href: 'https://www.windmill.dev/changelog/file-download-helper',
+        date: '2024-10-12'
+    },
+    {
+        label: 'Queue metric alerts',
+        href: 'https://www.windmill.dev/changelog/queue-metric-alerts',
+        date: '2024-10-10'
+    },
+    {
+        label: 'Deno 2.0',
+        href: 'https://www.windmill.dev/changelog/deno-2.0',
+        date: '2024-10-10'
+    },
+    {
+        label: 'Move components inside containers with ctrl+click',
+        href: 'https://www.windmill.dev/changelog/move-components-inside-containers-with-ctrl',
+        date: '2024-10-09'
+    },
+    {
+        label: 'Support workers to run natively on Windows',
+        href: 'https://www.windmill.dev/changelog/workers-run-natively-windows',
+        date: '2024-10-03'
+    },
+    {
+        label: 'Quick access menu for faster component insertion',
+        href: 'https://www.windmill.dev/changelog/flow-quick-access-menu',
+        date: '2024-10-03'
+    },
     {
         label: 'Custom HTTP routes',
         href: 'https://www.windmill.dev/changelog/http-routing',
@@ -16,7 +81,7 @@ const changelogs = [
     },
     {
         label: 'Critical alert channels',
-        href: 'https://www.windmill.dev/changelog/critical-alert-channels',
+        href: 'https://www.windmill.dev/changelog/critical-alerts',
         date: '2024-09-01'
     },
     {
@@ -60,7 +125,7 @@ const changelogs = [
         date: '2024-07-26'
     },
     {
-        label: 'Dynamic Select',
+        label: 'Dynamic select',
         href: 'https://www.windmill.dev/changelog/dynamic-select',
         date: '2024-07-22'
     },
@@ -70,17 +135,17 @@ const changelogs = [
         date: '2024-07-14'
     },
     {
-        label: 'Navbar Component',
+        label: 'Navbar component',
         href: 'https://www.windmill.dev/changelog/navbar',
         date: '2024-07-05'
     },
     {
-        label: 'Flow Versioning',
+        label: 'Flow versioning',
         href: 'https://www.windmill.dev/changelog/flow-versioning',
         date: '2024-07-04'
     },
     {
-        label: 'OneOf Inputs',
+        label: 'OneOf inputs',
         href: 'https://www.windmill.dev/changelog/oneof-inputs',
         date: '2024-06-17'
     },
@@ -95,7 +160,7 @@ const changelogs = [
         date: '2024-06-04'
     },
     {
-        label: 'Secondary Storage',
+        label: 'Secondary storage',
         href: 'https://www.windmill.dev/changelog/secondary-storage',
         date: '2024-05-31'
     },
@@ -110,12 +175,12 @@ const changelogs = [
         date: '2024-05-27'
     },
     {
-        label: 'Concurrency Limit Observability',
+        label: 'Concurrency limit observability',
         href: 'https://www.windmill.dev/changelog/concurrency-limit-observability',
         date: '2024-05-15'
     },
     {
-        label: 'Full Height Components',
+        label: 'Full height components',
         href: 'https://www.windmill.dev/changelog/full-height-components',
         date: '2024-05-15'
     },
@@ -130,7 +195,7 @@ const changelogs = [
         date: '2024-05-13'
     },
     {
-        label: 'Workers Metrics',
+        label: 'Workers metrics',
         href: 'https://www.windmill.dev/changelog/workers-metrics',
         date: '2024-05-10'
     },
@@ -145,7 +210,7 @@ const changelogs = [
         date: '2024-04-24'
     },
     {
-        label: 'Jobs Labels',
+        label: 'Jobs labels',
         href: 'https://www.windmill.dev/changelog/jobs-labels',
         date: '2024-04-24'
     },
@@ -160,12 +225,12 @@ const changelogs = [
         date: '2024-04-02'
     },
     {
-        label: 'While Loops',
+        label: 'While loops',
         href: 'https://www.windmill.dev/changelog/while-loops',
         date: '2024-04-02'
     },
     {
-        label: 'Approval Steps Improvements',
+        label: 'Approval steps improvements',
         href: 'https://www.windmill.dev/changelog/approval-steps-improvements',
         date: '2024-03-27'
     },
@@ -180,12 +245,12 @@ const changelogs = [
         date: '2024-03-27'
     },
     {
-        label: 'Custom Flow States',
+        label: 'Custom flow states',
         href: 'https://www.windmill.dev/changelog/custom-flow-states',
         date: '2024-03-26'
     },
     {
-        label: 'Custom Contextual Variables',
+        label: 'Custom contextual variables',
         href: 'https://www.windmill.dev/changelog/custom-contextual-variables',
         date: '2024-03-23'
     },
@@ -200,7 +265,7 @@ const changelogs = [
         date: '2024-03-22'
     },
     {
-        label: 'Configurable Available Languages',
+        label: 'Configurable available languages',
         href: 'https://www.windmill.dev/changelog/configurable-languages',
         date: '2024-03-13'
     },
@@ -215,7 +280,7 @@ const changelogs = [
         date: '2024-02-27'
     },
     {
-        label: 'Custom Workspace Secret Encryption',
+        label: 'Custom workspace secret encryption',
         href: 'https://www.windmill.dev/changelog/workspace-encryption',
         date: '2024-02-15'
     },
@@ -230,7 +295,7 @@ const changelogs = [
         date: '2024-01-24'
     },
     {
-        label: 'Database Studio',
+        label: 'Database studio',
         href: 'https://www.windmill.dev/changelog/database-studio',
         date: '2024-01-24'
     },

package/package/components/splitPanes/SplitPanesOrColumnOnMobile.svelte

@@ -8,27 +8,27 @@ export let rightPaneIsFirstInCol = false;
 let clientWidth = window.innerWidth;
 </script>
 
-<main class="h-screen w-full" bind:clientWidth>
-	{#if clientWidth >= 768}
-		<SplitPanesWrapper class="hidden md:block">
-			<Splitpanes>
-				<Pane size={30} minSize={25}>
+<main class="flex-grow w-full overflow-y-auto" bind:clientWidth>
+		{#if clientWidth >= 768}
+			<SplitPanesWrapper class="hidden md:block">
+				<Splitpanes>
+					<Pane size={leftPaneSize} minSize={leftPaneMinSize}>
+						<slot name="left-pane" />
+					</Pane>
+					<Pane size={rightPaneSize} minSize={rightPaneMinSize}>
+						<slot name="right-pane" />
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		{:else}
+			<div class="flex flex-col">
+				{#if rightPaneIsFirstInCol}
+					<slot name="right-pane" />
+					<slot name="left-pane" />
+				{:else}
 					<slot name="left-pane" />
-				</Pane>
-				<Pane size={70} minSize={25}>
 					<slot name="right-pane" />
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
-	{:else}
-		<div class="flex flex-col">
-			{#if rightPaneIsFirstInCol}
-				<slot name="right-pane" />
-				<slot name="left-pane" />
-			{:else}
-				<slot name="left-pane" />
-				<slot name="right-pane" />
-			{/if}
-		</div>
-	{/if}
+				{/if}
+			</div>
+		{/if}
 </main>

package/package/components/table/AutoDataTable.svelte

@@ -362,7 +362,7 @@ function handleColumnSelected(key) {
 												disablePopup={typeof value === 'string' && value.length < 100}
 											>
 												<div
-													class="max-w-80 text-wrap whitespace-pre-wrap flex flex-grow w-max three-lines cursor-text"
+													class="max-w-[100ch] text-wrap whitespace-pre-wrap flex flex-grow w-max three-lines cursor-text"
 												>
 													{txt?.length > 100 ? txt.slice(0, 100) + '...' : txt}
 												</div>

package/package/components/table/Cell.svelte

@@ -7,6 +7,7 @@ export let head = false;
 export let shouldStopPropagation = false;
 export let selected = false;
 export let sticky = false;
+export let wrap = false;
 let Tag = head ? 'th' : 'td';
 const { size } = getContext('datatable');
 </script>
@@ -19,7 +20,8 @@ const { size } = getContext('datatable');
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
-		'text-left text-xs text-primary font-normal whitespace-nowrap',
+		'text-left text-xs text-primary font-normal',
+		wrap ? 'break-words' : 'whitespace-nowrap',
 		first ? 'sm:pl-6' : '',
 		last ? 'sm:pr-6' : '',
 
@@ -28,13 +30,13 @@ const { size } = getContext('datatable');
 
 		numeric ? 'text-right' : '',
 		head ? 'font-semibold ' : '',
-		$$restProps.class,
 		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-3.5',
 		size === 'sm' ? 'px-1.5 py-2.5' : '',
 		size === 'lg' ? 'px-3 py-4' : '',
 		size === 'xs' ? 'px-1 py-1.5' : '',
 		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
-		'transition-all'
+		'transition-all',
+		$$restProps.class
 	)}
 >
 	{#if sticky}

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         shouldStopPropagation?: boolean | undefined;
         selected?: boolean | undefined;
         sticky?: boolean | undefined;
+        wrap?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/DataTable.svelte

@@ -5,6 +5,7 @@
 import Button from '../common/button/Button.svelte';
 import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
+import List from '../common/layout/List.svelte';
 export let paginated = false;
 export let currentPage = 1;
 export let showNext = true;
@@ -16,78 +17,84 @@ export let perPage = undefined;
 export let shouldHidePagination = false;
 export let noBorder = false;
 export let rowCount = undefined;
+export let hasMore = true;
+export let contentHeight = 0;
+let footerHeight = 0;
+let tableHeight = 0;
 const dispatch = createEventDispatcher();
 setContext('datatable', {
     size
 });
+$: contentHeight = tableHeight - footerHeight;
 </script>
 
 <div
-	class={twMerge(
-		'h-full overflow-auto',
-		rounded ? 'rounded-md' : '',
-		noBorder ? 'border-0' : 'border'
-	)}
+	class={twMerge('h-full', rounded ? 'rounded-md' : '', noBorder ? 'border-0' : 'border')}
+	bind:clientHeight={tableHeight}
 >
-	<div class={twMerge('overflow-auto')}>
-		<table class={twMerge('min-w-full divide-y')}>
-			<slot />
-		</table>
-	</div>
-	{#if paginated && !shouldHidePagination}
-		<div
-			class="bg-surface border-t flex flex-row justify-between p-1 items-center gap-2 sticky bottom-0"
-		>
-			<div>
-				{#if rowCount}
-					<span class="text-xs mx-2"> {rowCount} items</span>
-				{/if}
-			</div>
+	<List justify="between" gap="none">
+		<div class="w-full overflow-auto min-h-0 grow">
+			<table class={twMerge('min-w-full divide-y')}>
+				<slot />
+			</table>
+		</div>
+		{#if paginated && !shouldHidePagination}
+			<div
+				class="w-full bg-surface border-t flex flex-row justify-between p-1 items-center gap-2 sticky bottom-0"
+				bind:clientHeight={footerHeight}
+			>
+				<div>
+					{#if rowCount}
+						<span class="text-xs mx-2"> {rowCount} items</span>
+					{/if}
+				</div>
 
-			<div class="flex flex-row gap-2 items-center">
-				<span class="text-xs">
-					Page: {currentPage}
-					{perPage && rowCount ? `/ ${Math.ceil(rowCount / perPage)}` : ''}
-				</span>
+				<div class="flex flex-row gap-2 items-center">
+					<span class="text-xs">
+						Page: {currentPage}
+						{perPage && rowCount ? `/ ${Math.ceil(rowCount / perPage)}` : ''}
+					</span>
 
-				{#if perPage !== undefined}
-					<select class="!text-xs !w-16" bind:value={perPage}>
-						<option value={25}>25</option>
-						<option value={100}>100</option>
-						<option value={1000}>1000</option>
-					</select>
-				{/if}
-				<Button
-					color="light"
-					size="xs2"
-					on:click={() => dispatch('previous')}
-					disabled={currentPage === 1}
-					startIcon={{ icon: ArrowLeftIcon }}
-				>
-					Previous
-				</Button>
-				{#if showNext}
+					{#if perPage !== undefined}
+						<select class="!text-xs !w-16" bind:value={perPage}>
+							<option value={25}>25</option>
+							<option value={100}>100</option>
+							<option value={1000}>1000</option>
+						</select>
+					{/if}
 					<Button
 						color="light"
 						size="xs2"
-						on:click={() => dispatch('next')}
-						endIcon={{ icon: ArrowRightIcon }}
+						on:click={() => dispatch('previous')}
+						disabled={currentPage === 1}
+						startIcon={{ icon: ArrowLeftIcon }}
 					>
-						Next
+						Previous
 					</Button>
-				{/if}
+					{#if showNext}
+						<Button
+							color="light"
+							size="xs2"
+							on:click={() => dispatch('next')}
+							endIcon={{ icon: ArrowRightIcon }}
+							disabled={!hasMore}
+						>
+							Next
+						</Button>
+					{/if}
+				</div>
 			</div>
-		</div>
-	{:else if shouldLoadMore}
-		<div class="bg-surface border-t flex flex-row justify-center py-4 items-center gap-2">
-			<Button
-				color="light"
-				size="xs2"
-				on:click={() => dispatch('loadMore')}
-				endIcon={{ icon: ArrowDownIcon }}
-			>
-				Load {loadMore} more
-			</Button>
-		</div>
-	{/if}
+		{:else if shouldLoadMore}
+			<div class="bg-surface border-t flex flex-row justify-center py-4 items-center gap-2">
+				<Button
+					color="light"
+					size="xs2"
+					on:click={() => dispatch('loadMore')}
+					endIcon={{ icon: ArrowDownIcon }}
+				>
+					Load {loadMore} more
+				</Button>
+			</div>
+		{/if}
+	</List>
 </div>

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

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

package/package/components/table/Head.svelte

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

package/package/components/table/Row.svelte

@@ -3,6 +3,7 @@ import { twMerge } from 'tailwind-merge';
 export let hoverable = false;
 export let selected = false;
 export let dividable = false;
+export let disabled = false;
 const dispatch = createEventDispatcher();
 </script>
 
@@ -11,7 +12,8 @@ const dispatch = createEventDispatcher();
 		hoverable ? 'hover:bg-surface-hover cursor-pointer' : '',
 		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'transition-all',
-		dividable ? 'divide-x' : ''
+		dividable ? 'divide-x' : '',
+		disabled ? 'opacity-60' : ''
 	)}
 	on:click={() => {
 		dispatch('click')

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         hoverable?: boolean | undefined;
         selected?: boolean | undefined;
         dividable?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/package/components/toast.js

@@ -1,7 +1,9 @@
 //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 (typeof message == 'string'
+        ? message ?? 'Error without message'
+        : JSON.stringify(message, null, 2)).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/CaptureButton.svelte

@@ -0,0 +1,77 @@
+<script>import Popover from '../meltComponents/Popover.svelte';
+import { Button } from '../common';
+import { Webhook, Route, Unplug, Mail } 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';
+let isOpen = false;
+const dispatch = createEventDispatcher();
+function handleClick(kind) {
+    dispatch('openTriggers', {
+        kind: captureTriggerKindToTriggerKind(kind),
+        config: {}
+    });
+    isOpen = false;
+}
+</script>
+
+<Popover closeButton={false} bind:open={isOpen}>
+	<svelte:fragment slot="trigger">
+		<Button color="dark" btnClasses="rounded-l-none" wrapperClasses="h-full" nonCaptureEvent>
+			<CaptureIcon />
+		</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col bg-surface">
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('webhook')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Webhook size={16} />
+					<p class="text-xs text-secondary">Webhook</p>
+				</div>
+			</button>
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('http')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Route size={16} />
+					<p class="text-xs text-secondary">HTTP</p>
+				</div>
+			</button>
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('websocket')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Unplug size={16} />
+					<p class="text-xs text-secondary">Websocket</p>
+				</div>
+			</button>
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('email')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Mail size={16} />
+					<p class="text-xs text-secondary">Email</p>
+				</div>
+			</button>
+			<button
+				disabled={!$enterpriseLicense}
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('kafka')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<KafkaIcon size={16} />
+					<p class="text-xs text-secondary">Kafka</p>
+				</div>
+			</button>
+		</div>
+	</svelte:fragment>
+</Popover>