windmill-components 1.448.50 → 1.472.2

package/package/components/sidebar/SidebarContent.svelte

@@ -1,10 +1,7 @@
 <script>import MenuLink from './MenuLink.svelte';
 import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole } from '../../stores';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle } from 'lucide-svelte';
-import Menu from '../common/menu/MenuV2.svelte';
-import MenuButton from './MenuButton.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database } from 'lucide-svelte';
 import UserMenu from './UserMenu.svelte';
 import DiscordIcon from '../icons/brands/Discord.svelte';
 import { WorkspaceService } from '../../gen';
@@ -20,6 +17,9 @@ import { page } from '$app/stores';
 import SideBarNotification from './SideBarNotification.svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
+import AwsIcon from '../icons/AwsIcon.svelte';
+import { Menubar, Menu, MenuSingleItem, MenuItem, MeltButton } from '../meltComponents';
+import MenuButton from './MenuButton.svelte';
 export let numUnacknowledgedCriticalAlerts = 0;
 $: mainMenuLinks = [
     { label: 'Home', href: `${base}/`, icon: Home },
@@ -47,7 +47,7 @@ async function leaveWorkspace() {
     clearStores();
     goto('/user/workspaces');
 }
-const defaultExtraTriggerLinks = [
+$: defaultExtraTriggerLinks = [
     {
         label: 'HTTP',
         href: '/routes',
@@ -56,12 +56,19 @@ const defaultExtraTriggerLinks = [
         kind: 'http'
     },
     {
-        label: 'Websockets',
+        label: 'WebSockets',
         href: '/websocket_triggers',
         icon: Unplug,
         disabled: $userStore?.operator,
         kind: 'ws'
     },
+    {
+        label: 'Postgres',
+        href: '/postgres_triggers',
+        icon: Database,
+        disabled: $userStore?.operator,
+        kind: 'postgres'
+    },
     {
         label: 'Kafka' + ($enterpriseLicense ? '' : ' (EE)'),
         href: '/kafka_triggers',
@@ -75,6 +82,13 @@ const defaultExtraTriggerLinks = [
         icon: NatsIcon,
         disabled: $userStore?.operator || !$enterpriseLicense,
         kind: 'nats'
+    },
+    {
+        label: 'SQS' + ($enterpriseLicense ? '' : ' (EE)'),
+        href: '/sqs_triggers',
+        icon: AwsIcon,
+        disabled: $userStore?.operator || !$enterpriseLicense,
+        kind: 'sqs'
     }
 ];
 $: extraTriggerLinks = defaultExtraTriggerLinks.filter((link) => {
@@ -239,7 +253,6 @@ const thirdMenuLinks = [
     }
 ];
 export let isCollapsed = false;
-export let noGap = false;
 let leaveWorkspaceModal = false;
 function computeAllNotificationsCount(menuItems) {
     let count = 0;
@@ -248,15 +261,15 @@ function computeAllNotificationsCount(menuItems) {
     }
     return count;
 }
+const itemClass = twMerge('text-secondary font-normal w-full block px-4 py-2 text-2xs data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary');
 </script>
 
 <nav
 	class={twMerge(
-		'grow flex flex-col overflow-x-hidden scrollbar-hidden px-2 md:pb-2 justify-between',
-		noGap ? 'gap-0' : 'gap-16'
+		'grow flex flex-col overflow-x-hidden scrollbar-hidden px-2 md:pb-2 justify-between gap-2'
 	)}
 >
-	<div class={twMerge('pt-4 ', noGap ? 'md:mb-0 mb-0' : 'mb-6 md:mb-10')}>
+	<div class={twMerge('pt-4 mb-6 md:mb-10')}>
 		<div class="space-y-1">
 			{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
 				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
@@ -267,124 +280,111 @@ function computeAllNotificationsCount(menuItems) {
 				class="text-gray-400 text-[0.5rem] uppercase transition-opacity"
 				class:opacity-0={isCollapsed}>Triggers</div
 			>
-			<div class="space-y-1">
+			<Menubar let:createMenu class="flex flex-col gap-1">
 				{#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
 					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 				{/each}
 				{#if extraTriggerLinks.length > 0 && !$userStore?.operator}
-					<Menu>
-						<div
-							slot="trigger"
-							class="w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded"
-						>
-							<Plus size={14} />
-						</div>
+					<Menu {createMenu} let:item usePointerDownOutside>
+						<svelte:fragment slot="trigger" let:trigger>
+							<MeltButton
+								class={twMerge(
+									'w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded',
+									'data-[highlighted]:bg-[#2A3648] dark:data-[highlighted]:bg-[#30404e]'
+								)}
+								meltElement={trigger}
+							>
+								<Plus size={14} />
+							</MeltButton>
+						</svelte:fragment>
 						{#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)}
-							<MenuItem>
-								<div class="py-1" role="none">
-									<a
-										href={subItem.disabled ? '' : subItem.href}
-										class={twMerge(
-											'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary',
-											subItem.disabled ? 'pointer-events-none opacity-50' : ''
-										)}
-										role="menuitem"
-										tabindex="-1"
-									>
-										<div class="flex flex-row items-center gap-2">
-											{#if subItem.icon}
-												<svelte:component this={subItem.icon} size={16} />
-											{/if}
-
-											{subItem.label}
-										</div>
-									</a>
+							<MenuItem
+								href={subItem.disabled ? '' : subItem.href}
+								class={twMerge(itemClass, subItem.disabled ? 'pointer-events-none opacity-50' : '')}
+								{item}
+								disabled={subItem.disabled}
+							>
+								<div class="flex flex-row items-center gap-2">
+									{#if subItem.icon}
+										<svelte:component this={subItem.icon} size={16} />
+									{/if}
+									{subItem.label}
 								</div>
 							</MenuItem>
 						{/each}
 					</Menu>
 				{/if}
-			</div>
+			</Menubar>
 		</div>
 	</div>
 	<div class="flex flex-col h-full justify-end">
-		<div class={twMerge('space-y-0.5 mb-6 md:mb-10', noGap ? 'md:mb-0 mb-0' : 'mb-6 md:mb-10')}>
-			<UserMenu {isCollapsed} />
+		<Menubar let:createMenu class="flex flex-col gap-1 mb-6 md:mb-10">
+			<UserMenu {isCollapsed} {createMenu} />
+
 			{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
 				{#if menuLink.subItems}
 					{@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)}
-					<Menu>
-						<div slot="trigger">
-							<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {notificationsCount} />
-						</div>
-						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-							<MenuItem>
-								<div class="py-1" role="none">
-									{#if subItem?.['action']}
-										<button
-											class="text-secondary font-normal w-full block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary"
-											on:click={subItem?.['action']}
-										>
-											<div class="flex flex-row items-center gap-2">
-												{#if subItem.icon}
-													<svelte:component this={subItem.icon} size={16} />
-												{/if}
+					<Menu {createMenu} let:item usePointerDownOutside>
+						<svelte:fragment slot="trigger" let:trigger>
+							<MenuButton
+								class="!text-2xs"
+								{...menuLink}
+								{isCollapsed}
+								{notificationsCount}
+								{trigger}
+							/>
+						</svelte:fragment>
 
-												{subItem.label}
-												{#if subItem?.['notificationCount']}
-													<div class="ml-auto">
-														<SideBarNotification notificationCount={subItem['notificationCount']} />
-													</div>
-												{/if}
-											</div>
-										</button>
-									{:else}
-										<a
-											href={subItem.href}
-											class="text-secondary font-normal block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary"
-											role="menuitem"
-											tabindex="-1"
-										>
-											<div class="flex flex-row items-center gap-2">
-												{#if subItem.icon}
-													<svelte:component this={subItem.icon} size={16} />
-												{/if}
-
-												{subItem.label}
-
-												{#if subItem?.['notificationCount']}
-													<div class="ml-auto">
-														<SideBarNotification notificationCount={subItem['notificationCount']} />
-													</div>
-												{/if}
-											</div>
-										</a>
+						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
+							<MenuItem
+								class={itemClass}
+								href={subItem.href}
+								{item}
+								on:click={() => {
+									subItem?.['action']?.()
+								}}
+							>
+								<div class="flex flex-row items-center gap-2">
+									{#if subItem.icon}
+										<svelte:component this={subItem.icon} size={16} />
+									{/if}
+									{subItem.label}
+									{#if subItem?.['notificationCount']}
+										<div class="ml-auto">
+											<SideBarNotification notificationCount={subItem['notificationCount']} />
+										</div>
 									{/if}
 								</div>
 							</MenuItem>
 						{/each}
 					</Menu>
 				{:else}
-					<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} />
+					<MenuSingleItem {createMenu} let:item>
+						<svelte:fragment slot="trigger" let:trigger>
+							<div class="w-full">
+								<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
+							</div>
+						</svelte:fragment>
+						<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} {item} />
+					</MenuSingleItem>
 				{/if}
 			{/each}
-		</div>
-		<div class="space-y-0.5">
+		</Menubar>
+
+		<Menubar let:createMenu class="flex flex-col gap-1">
 			{#each thirdMenuLinks as menuLink (menuLink)}
 				{#if menuLink.subItems}
-					<Menu>
-						<div slot="trigger">
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<div
-								class="relative"
+					<Menu {createMenu} let:item usePointerDownOutside>
+						<svelte:fragment slot="trigger" let:trigger>
+							<button
+								class="relative w-full"
 								on:click={() => {
 									if (menuLink.label === 'Help') {
 										openChangelogs()
 									}
 								}}
 							>
-								<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} />
+								<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
 								{#if menuLink.label === 'Help' && hasNewChangelogs}
 									<span class="absolute top-1 right-1 flex h-2 w-2">
 										<span
@@ -393,26 +393,16 @@ function computeAllNotificationsCount(menuItems) {
 										<span class="relative inline-flex rounded-full h-2 w-2 bg-frost-500" />
 									</span>
 								{/if}
-							</div>
-						</div>
+							</button>
+						</svelte:fragment>
 						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-							<MenuItem>
-								<div class="py-1" role="none">
-									<a
-										href={subItem.href}
-										class="text-secondary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary relative"
-										role="menuitem"
-										tabindex="-1"
-										target="_blank"
-									>
-										<div class="flex flex-row items-center gap-2">
-											{#if subItem.icon}
-												<svelte:component this={subItem.icon} size={16} />
-											{/if}
+							<MenuItem href={subItem.href} class={itemClass} target="_blank" {item}>
+								<div class="flex flex-row items-center gap-2">
+									{#if subItem.icon}
+										<svelte:component this={subItem.icon} size={16} />
+									{/if}
 
-											{subItem.label}
-										</div>
-									</a>
+									{subItem.label}
 								</div>
 							</MenuItem>
 						{/each}
@@ -420,19 +410,9 @@ function computeAllNotificationsCount(menuItems) {
 							<div class="w-full h-1 border-t" />
 							<span class="text-xs px-4 font-bold"> Latest changelogs </span>
 							{#each recentChangelogs as changelog}
-								<MenuItem>
-									<div class="py-1" role="none">
-										<a
-											href={changelog.href}
-											class="text-secondary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary relative"
-											role="menuitem"
-											tabindex="-1"
-											target="_blank"
-										>
-											<div class="flex flex-row items-center gap-2">
-												{changelog.label}
-											</div>
-										</a>
+								<MenuItem href={changelog.href} class={itemClass} target="_blank" {item}>
+									<div class="flex flex-row items-center gap-2">
+										{changelog.label}
 									</div>
 								</MenuItem>
 							{/each}
@@ -440,7 +420,7 @@ function computeAllNotificationsCount(menuItems) {
 					</Menu>
 				{/if}
 			{/each}
-		</div>
+		</Menubar>
 	</div>
 </nav>
 

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

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         numUnacknowledgedCriticalAlerts?: number | undefined;
         isCollapsed?: boolean | undefined;
-        noGap?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/sidebar/UserMenu.svelte

@@ -1,150 +1,130 @@
 <script>import { goto } from '../../navigation';
 import { logout } from '../../logout';
 import { userStore, usageStore, workspaceUsageStore, isPremiumStore, workspaceStore } from '../../stores';
-import Menu from '../common/menu/MenuV2.svelte';
 import { USER_SETTINGS_HASH } from './settings';
 import { isCloudHosted } from '../../cloud';
 import { twMerge } from 'tailwind-merge';
 import { Crown, HardHat, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import MenuButton from './MenuButton.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { Menu, MenuItem } from '../meltComponents';
+import {} from '@melt-ui/svelte';
 let darkMode = false;
 export let isCollapsed = false;
 export let lightMode = false;
+export let createMenu;
+const itemClass = twMerge('text-secondary text-left font-normal text-xs ', 'flex flex-row items-center gap-2 px-4 py-3 w-full', 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary');
 </script>
 
-<Menu>
-	<div slot="trigger" class="w-full">
+<Menu {createMenu} let:item usePointerDownOutside>
+	<svelte:fragment slot="trigger" let:trigger>
 		<MenuButton
 			class="!text-xs"
 			icon={User}
 			label={`User (${$userStore?.username ?? $userStore?.email})`}
 			{isCollapsed}
 			{lightMode}
+			{trigger}
 		/>
-	</div>
-	<div class="divide-y z-20">
-		<div class="px-4 py-3" role="none">
-			<p class="text-sm font-medium text-primary truncate" role="none">
-				{$userStore?.email}
-			</p>
-			<span class="text-xs text-tertiary flex flex-row gap-2 items-center">
-				{#if $userStore?.is_admin}
-					Admin of this workspace <Crown size={14} />
-				{:else if $userStore?.operator}
-					Operator in this workspace <HardHat size={14} />
-				{/if}
-			</span>
-		</div>
+	</svelte:fragment>
 
-		<div class="py-1" role="none">
-			<MenuItem
-				href={USER_SETTINGS_HASH}
-				class={twMerge(
-					'flex flex-row gap-2 items-center px-4 py-2 ',
-					'text-secondary text-sm',
-					'hover:bg-surface-hover hover:text-primary cursor-pointer'
-				)}
-			>
-				<Settings size={14} />
-				Account settings
-			</MenuItem>
-		</div>
+	<div class="px-4 py-3 border-b" role="none">
+		<p class="text-sm font-medium text-primary truncate" role="none">
+			{$userStore?.email}
+		</p>
+		<span class="text-xs text-tertiary flex flex-row gap-2 items-center">
+			{#if $userStore?.is_admin}
+				Admin of this workspace <Crown size={14} />
+			{:else if $userStore?.operator}
+				Operator in this workspace <HardHat size={14} />
+			{/if}
+		</span>
+	</div>
+	<div class="py-1">
+		<MenuItem href={USER_SETTINGS_HASH} class={itemClass} {item}>
+			<Settings size={16} />
+			Account settings
+		</MenuItem>
 
-		<div class="py-1" role="none">
-			<button
-				on:click={() => {
-					if (!document.documentElement.classList.contains('dark')) {
-						document.documentElement.classList.add('dark')
-						window.localStorage.setItem('dark-mode', 'dark')
-					} else {
-						document.documentElement.classList.remove('dark')
-						window.localStorage.setItem('dark-mode', 'light')
-					}
-				}}
-				class={twMerge(
-					'text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full',
-					'flex flex-row items-center gap-2'
-				)}
-				role="menuitem"
-				tabindex="-1"
-			>
-				{#if darkMode}
-					<Sun size={14} />
-				{:else}
-					<Moon size={14} />
-				{/if}
-				Switch theme
-			</button>
-		</div>
+		<MenuItem
+			on:click={() => {
+				if (!document.documentElement.classList.contains('dark')) {
+					document.documentElement.classList.add('dark')
+					window.localStorage.setItem('dark-mode', 'dark')
+				} else {
+					document.documentElement.classList.remove('dark')
+					window.localStorage.setItem('dark-mode', 'light')
+				}
+			}}
+			class={itemClass}
+			{item}
+		>
+			{#if darkMode}
+				<Sun size={16} />
+			{:else}
+				<Moon size={16} />
+			{/if}
+			Switch theme
+		</MenuItem>
 
-		<div class="py-1" role="none">
-			<MenuItem
-				href="#"
-				on:click={() => logout()}
-				class={twMerge(
-					'flex flex-row gap-2 items-center px-4 py-2 ',
-					'text-secondary text-sm',
-					'hover:bg-surface-hover hover:text-primary cursor-pointer'
-				)}
-			>
-				<LogOut size={14} />
-				Sign out
-			</MenuItem>
-		</div>
+		<MenuItem
+			on:click={() => logout()}
+			class={twMerge(itemClass, 'text-primary font-semibold')}
+			{item}
+		>
+			<LogOut size={16} />
+			Sign out
+		</MenuItem>
+	</div>
 
-		{#if isCloudHosted()}
+	{#if isCloudHosted()}
+		<div class="border-t">
 			{#if !$isPremiumStore}
-				<div class="py-1" role="none">
-					<span class="text-secondary block w-full text-left px-4 py-2 text-sm"
-						>{$usageStore}/1000 user execs</span
-					>
-					<div class="w-full bg-gray-200 h-1">
-						<div class="bg-blue-400 h-1" style="width: {Math.min($usageStore, 1000) / 10}%" />
+				<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
+					>{$usageStore}/1000 user execs</span
+				>
+				<div class="px-4 w-full h-1 mb-1">
+					<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
+						<div class="bg-blue-400 h-full" style="width: {Math.min($usageStore, 1000) / 10}%" />
 					</div>
-					{#if $workspaceStore != 'demo'}
-						<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
-							>{$workspaceUsageStore}/1000 free workspace execs</span
-						>
-						<div class="w-full bg-gray-200 h-1">
+				</div>
+				{#if $workspaceStore != 'demo'}
+					<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
+						>{$workspaceUsageStore}/1000 free workspace execs</span
+					>
+					<div class="px-4 w-full h-1 mb-1">
+						<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
 							<div
-								class="bg-blue-400 h-1"
+								class="bg-blue-400 h-full"
 								style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
 							/>
 						</div>
-					{/if}
-					{#if $userStore?.is_admin}
-						<button
-							type="button"
-							class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
-							role="menuitem"
-							tabindex="-1"
-							on:click={() => {
-								goto('/workspace_settings?tab=premium')
-							}}
-						>
-							Upgrade
-						</button>
-					{/if}
-				</div>
-			{:else}
-				<div class="py-1" role="none">
-					<button
-						type="button"
-						class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
-						role="menuitem"
-						tabindex="-1"
+					</div>
+				{/if}
+				{#if $userStore?.is_admin}
+					<MenuItem
+						class={twMerge(itemClass, 'py-2')}
 						on:click={() => {
 							goto('/workspace_settings?tab=premium')
 						}}
+						{item}
 					>
-						Premium plan
-					</button>
-				</div>
+						Upgrade
+					</MenuItem>
+				{/if}
+			{:else}
+				<MenuItem
+					class={twMerge(itemClass, 'py-2')}
+					on:click={() => {
+						goto('/workspace_settings?tab=premium')
+					}}
+					{item}
+				>
+					Premium plan
+				</MenuItem>
 			{/if}
-		{/if}
-	</div>
+		</div>
+	{/if}
 </Menu>
 
 <DarkModeObserver bind:darkMode />

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

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
+import { type MenubarBuilders } from '@melt-ui/svelte';
 declare const __propDef: {
     props: {
         isCollapsed?: boolean | undefined;
         lightMode?: boolean | undefined;
+        createMenu: MenubarBuilders['createMenu'];
     };
     events: {
         [evt: string]: CustomEvent<any>;