From 41e46238d333233b4cb49babe5d60e7472f1f551 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 07:54:59 +0000 Subject: [PATCH 01/96] use melt menu in sidebar --- .../lib/components/meltComponents/Menu.svelte | 58 ++++ .../meltComponents/MenuSingleItem.svelte | 18 ++ .../components/meltComponents/Menubar.svelte | 12 + .../components/sidebar/MenuButtonMelt.svelte | 94 ++++++ .../components/sidebar/MenuLinkMelt.svelte | 86 +++++ .../components/sidebar/SidebarContent.svelte | 302 ++++++++++-------- .../lib/components/sidebar/UserMenu.svelte | 39 ++- 7 files changed, 462 insertions(+), 147 deletions(-) create mode 100644 frontend/src/lib/components/meltComponents/Menu.svelte create mode 100644 frontend/src/lib/components/meltComponents/MenuSingleItem.svelte create mode 100644 frontend/src/lib/components/meltComponents/Menubar.svelte create mode 100644 frontend/src/lib/components/sidebar/MenuButtonMelt.svelte create mode 100644 frontend/src/lib/components/sidebar/MenuLinkMelt.svelte diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte new file mode 100644 index 0000000000000..be1a41e6b954b --- /dev/null +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -0,0 +1,58 @@ + + +
+ + + + + +
+
+
+ +
+
+
+ +
diff --git a/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte b/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte new file mode 100644 index 0000000000000..8c87617fd6f40 --- /dev/null +++ b/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte @@ -0,0 +1,18 @@ + + +
+ +
+ +
+
diff --git a/frontend/src/lib/components/meltComponents/Menubar.svelte b/frontend/src/lib/components/meltComponents/Menubar.svelte new file mode 100644 index 0000000000000..c1f4f5828a533 --- /dev/null +++ b/frontend/src/lib/components/meltComponents/Menubar.svelte @@ -0,0 +1,12 @@ + + +
+ +
diff --git a/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte new file mode 100644 index 0000000000000..792cbc6f692db --- /dev/null +++ b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte @@ -0,0 +1,94 @@ + + +{#if !disabled} + + + + {#if label} + {label} + {/if} + + +{/if} diff --git a/frontend/src/lib/components/sidebar/MenuLinkMelt.svelte b/frontend/src/lib/components/sidebar/MenuLinkMelt.svelte new file mode 100644 index 0000000000000..54a180049603b --- /dev/null +++ b/frontend/src/lib/components/sidebar/MenuLinkMelt.svelte @@ -0,0 +1,86 @@ + + +{#if !disabled} + + + {#if icon} + + {/if} + + {#if !isCollapsed} + + {label} + + {/if} + + + {label} + + +{/if} diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte index cf82e1aaeeecf..06ebfa7d2d04b 100644 --- a/frontend/src/lib/components/sidebar/SidebarContent.svelte +++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte @@ -35,9 +35,6 @@ AlertCircle, Database } from 'lucide-svelte' - import Menu from '../common/menu/MenuV2.svelte' - import MenuButton from './MenuButton.svelte' - import { MenuItem } from '@rgossiaux/svelte-headlessui' import UserMenu from './UserMenu.svelte' import DiscordIcon from '../icons/brands/Discord.svelte' import { WorkspaceService } from '$lib/gen' @@ -53,7 +50,12 @@ import SideBarNotification from './SideBarNotification.svelte' import KafkaIcon from '../icons/KafkaIcon.svelte' import NatsIcon from '../icons/NatsIcon.svelte' - + import Menubar from '../meltComponents/Menubar.svelte' + import Menu from '../meltComponents/Menu.svelte' + import { melt } from '@melt-ui/svelte' + import MenuButtonMelt from './MenuButtonMelt.svelte' + import MenuSingleItem from '../meltComponents/MenuSingleItem.svelte' + import MenuLinkMelt from './MenuLinkMelt.svelte' export let numUnacknowledgedCriticalAlerts = 0 $: mainMenuLinks = [ @@ -321,141 +323,182 @@ class:opacity-0={isCollapsed}>Triggers
- {#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)} - - {/each} - {#if extraTriggerLinks.length > 0 && !$userStore?.operator} - -
- -
- {#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)} - -
- -
- {#if subItem.icon} - - {/if} - {subItem.label} -
- + + {#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)} + + {/each} + {#if extraTriggerLinks.length > 0 && !$userStore?.operator} + + +
+
- - {/each} - - {/if} -
-
- -
-
- - {#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)} - {#if menuLink.subItems} - {@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)} - -
- -
- {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)} - -
- {#if subItem?.['action']} - - {:else} + + {#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)} + - - {/each} -
- {:else} - - {/if} - {/each} + {/each} + + {/if} + +
-
- {#each thirdMenuLinks as menuLink (menuLink)} - {#if menuLink.subItems} - -
- - -
{ - if (menuLink.label === 'Help') { - openChangelogs() - } - }} - > - - {#if menuLink.label === 'Help' && hasNewChangelogs} - - - - - {/if} +
+
+
+ + + {#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)} + {#if menuLink.subItems} + {@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)} + + + + +
+ {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)} +
+ {#if subItem?.['action']} + + {:else} + +
+ {#if subItem.icon} + + {/if} + + {subItem.label} + + {#if subItem?.['notificationCount']} +
+ +
+ {/if} +
+ + {/if} +
+ {/each}
+ + {:else} +
+ + +
+ +
+ + +
- {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)} - + {/if} + {/each} + +
+
+ + {#each thirdMenuLinks as menuLink (menuLink)} + {#if menuLink.subItems} + + + + + {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
{#if subItem.icon} @@ -466,13 +509,11 @@
- - {/each} - {#if recentChangelogs.length > 0} -
- Latest changelogs - {#each recentChangelogs as changelog} - + {/each} + {#if recentChangelogs.length > 0} +
+ Latest changelogs + {#each recentChangelogs as changelog}
{changelog.label}
- - {/each} - {/if} -
- {/if} - {/each} + {/each} + {/if} +
+ {/if} + {/each} +
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte index 87f39a590a9a4..f160696fc06fa 100644 --- a/frontend/src/lib/components/sidebar/UserMenu.svelte +++ b/frontend/src/lib/components/sidebar/UserMenu.svelte @@ -8,30 +8,32 @@ isPremiumStore, workspaceStore } from '$lib/stores' - import Menu from '../common/menu/MenuV2.svelte' import { USER_SETTINGS_HASH } from './settings' import { isCloudHosted } from '$lib/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 MenuButtonMelt from './MenuButtonMelt.svelte' + import { melt } from '@melt-ui/svelte' + import Menu from '$lib/components/meltComponents/Menu.svelte' let darkMode: boolean = false export let isCollapsed: boolean = false export let lightMode: boolean = false + export let createMenu: (any) => any - -
- + + -
+

@@ -47,17 +49,18 @@

- Account settings - +
@@ -72,11 +75,13 @@ } }} 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' + 'text-secondary block text-left px-4 py-2 font-normal text-sm w-full', + 'flex flex-row items-center gap-2', + 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary' )} role="menuitem" tabindex="-1" + use:melt={item} > {#if darkMode} @@ -88,18 +93,18 @@
- logout()} class={twMerge( - 'flex flex-row gap-2 items-center px-4 py-2 ', + 'flex flex-row gap-2 items-center px-4 py-2 w-full', 'text-secondary text-sm', - 'hover:bg-surface-hover hover:text-primary cursor-pointer' + 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary' )} + use:melt={item} > Sign out - +
{#if isCloudHosted()} From 67417de14235f53790c3323e5962a6fc82a45bbc Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 09:35:41 +0000 Subject: [PATCH 02/96] stop keyboard navigation for disabled items --- frontend/src/lib/components/sidebar/SidebarContent.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte index 06ebfa7d2d04b..d17a992af0b14 100644 --- a/frontend/src/lib/components/sidebar/SidebarContent.svelte +++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte @@ -354,6 +354,7 @@ role="menuitem" tabindex="-1" use:melt={item} + data-disabled={subItem.disabled ? true : undefined} >
{#if subItem.icon} From f5fc11a51da145990859c6d8a25ba6d4ded82c64 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 10:52:34 +0000 Subject: [PATCH 03/96] use melt menu for FavoriteMenu and WorkspaceMenu --- .../lib/components/meltComponents/Menu.svelte | 3 +- .../components/sidebar/FavoriteMenu.svelte | 55 +++++---- .../components/sidebar/WorkspaceMenu.svelte | 106 ++++++++++-------- .../src/routes/(root)/(logged)/+layout.svelte | 35 ++++-- .../svix/create-webhook/+page@(root).svelte | 5 +- 5 files changed, 120 insertions(+), 84 deletions(-) diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index be1a41e6b954b..a63de65874be9 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -17,7 +17,8 @@ const menu = createMenu({ positioning: { placement - } + }, + loop: true }) //Melt diff --git a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte index 017a3dd6e8260..701cb6899b486 100644 --- a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte +++ b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte @@ -1,10 +1,9 @@ - -
- -
+ + + +
{#if !favoriteLinks.length} @@ -30,22 +37,24 @@ {:else}
{#each favoriteLinks ?? [] as favorite (favorite.href)} - - - - {#if favorite.kind == 'script'} - - {:else if favorite.kind == 'flow'} - - {:else if favorite.kind == 'app' || favorite.kind == 'raw_app'} - - {/if} - - - {favorite.label} - + + + {#if favorite.kind == 'script'} + + {:else if favorite.kind == 'flow'} + + {:else if favorite.kind == 'app' || favorite.kind == 'raw_app'} + + {/if} + + + {favorite.label} - + {/each}
{/if} diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte index 7b75c77ab123b..8ce8eba2a1eb8 100644 --- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte +++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte @@ -8,21 +8,21 @@ workspaceUsageStore } from '$lib/stores' import { Building, Plus, Settings } from 'lucide-svelte' - - import Menu from '../common/menu/MenuV2.svelte' + import MenuButtonMelt from '$lib/components/sidebar/MenuButtonMelt.svelte' + import Menu from '$lib/components/meltComponents/Menu.svelte' + import { melt } from '@melt-ui/svelte' import { goto } from '$lib/navigation' import { base } from '$lib/base' import { page } from '$app/stores' import { switchWorkspace } from '$lib/storeUtils' import MultiplayerMenu from './MultiplayerMenu.svelte' import { enterpriseLicense } from '$lib/stores' - import MenuButton from './MenuButton.svelte' - import { MenuItem } from '@rgossiaux/svelte-headlessui' import { isCloudHosted } from '$lib/cloud' import { initAllAiWorkspace } from '../copilot/lib' import { twMerge } from 'tailwind-merge' export let isCollapsed: boolean = false + export let createMenu: any // When used outside of the side bar, where links to workspace settings and such don't make as much sense. export let strictWorkspaceSelect = false @@ -54,48 +54,50 @@ } - -
- + + w.id === $workspaceStore)?.color} + {trigger} /> -
+
{#each $userWorkspaces as workspace} - - - + {#if workspace.color} +
+ {/if} +
+ {/each}
{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect} @@ -118,9 +120,13 @@ on:click={() => { localStorage.removeItem('workspace') }} - class="text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary" + class={twMerge( + 'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary', + 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary' + )} role="menuitem" tabindex="-1" + use:melt={item} > All workspaces @@ -128,17 +134,19 @@ {/if} {#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
- - - - Workspace settings - - + + + Workspace settings +
{/if}
@@ -158,12 +166,16 @@ {#if $userStore?.is_admin} diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte index 90b49a3ed295b..ab3706e4a48b7 100644 --- a/frontend/src/routes/(root)/(logged)/+layout.svelte +++ b/frontend/src/routes/(root)/(logged)/+layout.svelte @@ -51,6 +51,7 @@ import MenuButton from '$lib/components/sidebar/MenuButton.svelte' import { setContext } from 'svelte' import { base } from '$app/paths' + import Menubar from '$lib/components/meltComponents/Menubar.svelte' OpenAPI.WITH_CREDENTIALS = true let menuOpen = false @@ -192,11 +193,9 @@ async function loadUsedTriggerKinds() { let usedKinds: string[] = [] const { http_routes_used, websocket_used, kafka_used, postgres_used, nats_used } = - await WorkspaceService.getUsedTriggers( - { - workspace: $workspaceStore ?? '' - } - ) + await WorkspaceService.getUsedTriggers({ + workspace: $workspaceStore ?? '' + }) if (http_routes_used) { usedKinds.push('http') } @@ -294,7 +293,13 @@ setContext('openSearchWithPrefilledText', openSearchModal) $: { - if ($enterpriseLicense && $workspaceStore && $userStore && $devopsRole !== undefined && ($devopsRole || $userStore.is_admin)) { + if ( + $enterpriseLicense && + $workspaceStore && + $userStore && + $devopsRole !== undefined && + ($devopsRole || $userStore.is_admin) + ) { mountModal = true loadCriticalAlertsMuted() } @@ -409,8 +414,10 @@ Windmill
- - + + + + openSearchModal()} @@ -462,8 +469,10 @@
- - + + + + openSearchModal()} @@ -555,8 +564,10 @@
- - + + + + openSearchModal()} diff --git a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte index e68a192eafd9c..2e26a5f913034 100644 --- a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte +++ b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte @@ -8,6 +8,7 @@ import { generateRandomString } from '$lib/utils' import Tooltip from '$lib/components/Tooltip.svelte' import WorkspaceMenu from '$lib/components/sidebar/WorkspaceMenu.svelte' + import Menubar from '$lib/components/meltComponents/Menubar.svelte' let itemPath: string | undefined = undefined let itemKind: 'script' | 'flow' | 'app' = 'script' @@ -95,7 +96,9 @@
Selected Workspace: - + + +
Date: Tue, 4 Feb 2025 11:10:33 +0000 Subject: [PATCH 04/96] fix popover placement for menuButton --- frontend/src/lib/components/sidebar/MenuButton.svelte | 10 ++++++++-- .../src/lib/components/sidebar/MenuButtonMelt.svelte | 10 ++++++++-- frontend/src/lib/components/sidebar/MenuLink.svelte | 8 +++++++- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte index ab7a32274fa4c..62fc930e0a854 100644 --- a/frontend/src/lib/components/sidebar/MenuButton.svelte +++ b/frontend/src/lib/components/sidebar/MenuButton.svelte @@ -16,7 +16,13 @@ {#if !disabled} - + + { + localStorage.removeItem('workspace') + }} + class={twMerge( + 'text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary', + 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary' + )} + role="menuitem" + tabindex="-1" + > + + All workspaces + -
- - { - localStorage.removeItem('workspace') - }} - class="text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary" - role="menuitem" - tabindex="-1" - > - - All workspaces - - {#if $superadmin} - logout()} class={twMerge( - 'flex flex-row gap-3.5 items-center px-2 py-2 ', + 'flex flex-row gap-3.5 items-center px-2 py-2 ', 'text-secondary text-xs', - 'hover:bg-surface-hover hover:text-primary cursor-pointer' + 'hover:bg-surface-hover hover:text-primary cursor-pointer', + 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary' )} + use:item > - - Instance settings - - {/if} - - logout()} - class={twMerge( - 'flex flex-row gap-3.5 items-center px-2 py-2 ', - 'text-secondary text-xs', - 'hover:bg-surface-hover hover:text-primary cursor-pointer' - )} + + Sign out + +
+
(moreOpen = true)} + on:mouseleave={() => (moreOpen = false)} + class="divide-y" + role="none" > - - Sign out - -
-
(moreOpen = true)} - on:mouseleave={() => (moreOpen = false)} - class="divide-y" - role="none" - > - {#if moreOpen == false && secondMenuLinks.length > 0} -
More...
- {:else} - {#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)} - - {/each} - {/if} + {#if moreOpen == false && secondMenuLinks.length > 0} +
More...
+ {:else} + {#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)} + + {/each} + {/if} +
-
- {#if $enterpriseLicense} - - {/if} - + {#if $enterpriseLicense} + + {/if} + + From 2029f6afbc8be5da7214017483aeb0f32362e853 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 13:54:31 +0000 Subject: [PATCH 06/96] fix notification --- frontend/src/lib/components/sidebar/MenuButtonMelt.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte index c16e3ebb03e20..16e31f4fed376 100644 --- a/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte +++ b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte @@ -44,7 +44,7 @@ ? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover' : 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary', color ? 'border-4' : '', - 'transition-all', + 'transition-all relative', $$props.class )} style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''} From 87a5a6fdbd5334b66e0655bf28ad446789a5d55b Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 15:19:57 +0000 Subject: [PATCH 07/96] fix operator menu --- .../components/sidebar/OperatorMenu.svelte | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/frontend/src/lib/components/sidebar/OperatorMenu.svelte b/frontend/src/lib/components/sidebar/OperatorMenu.svelte index 14936bd52f6a5..496f601ebfb46 100644 --- a/frontend/src/lib/components/sidebar/OperatorMenu.svelte +++ b/frontend/src/lib/components/sidebar/OperatorMenu.svelte @@ -25,7 +25,8 @@ import Menu from '$lib/components/meltComponents/Menu.svelte' import Menubar from '$lib/components/meltComponents/Menubar.svelte' import MenuButtonMelt from './MenuButtonMelt.svelte' - import MenuLinkMelt from './MenuLink.svelte' + import MenuLinkMelt from './MenuLinkMelt.svelte' + import { melt } from '@melt-ui/svelte' let darkMode: boolean = false export let isCollapsed: boolean = false @@ -130,7 +131,7 @@ {#each favoriteLinks ?? [] as favorite (favorite.href)} Account settings @@ -190,7 +192,7 @@ )} role="menuitem" tabindex="-1" - use:item + use:melt={item} > {#if darkMode} @@ -201,7 +203,6 @@ { localStorage.removeItem('workspace') }} @@ -211,6 +212,7 @@ )} role="menuitem" tabindex="-1" + use:melt={item} > All workspaces @@ -225,7 +227,7 @@ 'hover:bg-surface-hover hover:text-primary cursor-pointer', 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary' )} - use:item + use:melt={item} > Instance settings @@ -235,12 +237,12 @@ -
+ + + + + - - - - {#each flowJobs ?? [] as id, idx (id)} - {#if filter == undefined || (idx + 1).toString().includes(filter.toString())} - - - - {/if} - {/each} - +
+ + +
+ {#each flowJobs ?? [] as id, idx (id)} + {#if filter == undefined || (idx + 1).toString().includes(filter.toString())} + + {/if} + {/each} +
+
+
+ diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index a63de65874be9..44a96cae7fb79 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -31,6 +31,10 @@ const sync = createSync(states) $: sync.open(open, (v) => (open = Boolean(v))) + + export function close() { + open = false + }
diff --git a/frontend/src/lib/components/meltComponents/index.ts b/frontend/src/lib/components/meltComponents/index.ts new file mode 100644 index 0000000000000..19712b5f7798d --- /dev/null +++ b/frontend/src/lib/components/meltComponents/index.ts @@ -0,0 +1,2 @@ +export { default as Menu } from './Menu.svelte' +export { default as Menubar } from './Menubar.svelte' From 68d9a2bb40dd778713a2fb89b4c5244ece686344 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 17:40:01 +0000 Subject: [PATCH 09/96] use melt menu for AppMenu --- .../apps/components/display/AppMenu.svelte | 146 ++++++++++-------- .../lib/components/meltComponents/Menu.svelte | 4 +- .../components/meltComponents/Menubar.svelte | 2 +- 3 files changed, 83 insertions(+), 69 deletions(-) diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte index fe105e6e5b05b..3dae672692485 100644 --- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte @@ -15,9 +15,10 @@ import { Button } from '$lib/components/common' import { loadIcon } from '../icon' import ResolveStyle from '../helpers/ResolveStyle.svelte' - import Menu from '$lib/components/common/menu/MenuV2.svelte' import { AppButton } from '../buttons' import AlignWrapper from '../helpers/AlignWrapper.svelte' + import { Menubar, Menu } from '$lib/components/meltComponents' + import { melt } from '@melt-ui/svelte' export let id: string export let configuration: RichConfigurations @@ -34,6 +35,7 @@ latestButtonClicked: undefined as string | undefined } }) + let menu: Menu | undefined = undefined const resolvedConfig = initConfig( components['menucomponent'].initialData.configuration, @@ -96,71 +98,83 @@ {#if render} - -
- -
+ + + +
+ +
+ -
- {#if menuItems.length > 0} - {#each menuItems as actionButton, actionIndex (actionButton?.id)} - {#if actionButton.type == 'buttoncomponent'} -
{ - outputs?.result.set({ - latestButtonClicked: actionButton.id - }) - }} - > - -
- {/if} - {/each} - {/if} -
- +
+ {#if menuItems.length > 0} + {#each menuItems as actionButton, actionIndex (actionButton?.id)} + {#if actionButton.type == 'buttoncomponent'} +
{ + outputs?.result.set({ + latestButtonClicked: actionButton.id + }) + }} + > + +
+ {/if} + {/each} + {/if} +
+ + {/if} diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index 44a96cae7fb79..820b2e5f04a0f 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -37,10 +37,10 @@ } -
+
- diff --git a/frontend/src/lib/components/meltComponents/Menubar.svelte b/frontend/src/lib/components/meltComponents/Menubar.svelte index c1f4f5828a533..b6a34f07a7a83 100644 --- a/frontend/src/lib/components/meltComponents/Menubar.svelte +++ b/frontend/src/lib/components/meltComponents/Menubar.svelte @@ -7,6 +7,6 @@ } = createMenubar() -
+
From b891a40ac14851ee5d905f7ea71da02406ae63b8 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 18:41:28 +0000 Subject: [PATCH 10/96] use melt menu for DropDownV2 --- frontend/src/lib/components/DropdownV2.svelte | 33 +++++++++++-------- .../src/lib/components/DropdownV2Inner.svelte | 9 +++-- .../components/meltComponents/MenuItem.svelte | 18 ++++++++++ .../lib/components/meltComponents/index.ts | 1 + 4 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 frontend/src/lib/components/meltComponents/MenuItem.svelte diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte index ef14f4bbcbffe..404ebce6f312b 100644 --- a/frontend/src/lib/components/DropdownV2.svelte +++ b/frontend/src/lib/components/DropdownV2.svelte @@ -1,6 +1,7 @@ - -
- {#if $$slots.buttonReplacement} - - {:else} - - {/if} -
+ + + +
+ {#if $$slots.buttonReplacement} + + {:else} + + {/if} +
+ - - + + + diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte index 548fda060c0f3..115fb8c325a25 100644 --- a/frontend/src/lib/components/DropdownV2Inner.svelte +++ b/frontend/src/lib/components/DropdownV2Inner.svelte @@ -1,5 +1,5 @@ + +{#if href} + + + +{:else} + +{/if} diff --git a/frontend/src/lib/components/meltComponents/index.ts b/frontend/src/lib/components/meltComponents/index.ts index 19712b5f7798d..3af39b543303d 100644 --- a/frontend/src/lib/components/meltComponents/index.ts +++ b/frontend/src/lib/components/meltComponents/index.ts @@ -1,2 +1,3 @@ export { default as Menu } from './Menu.svelte' export { default as Menubar } from './Menubar.svelte' +export { default as MenuItem } from './MenuItem.svelte' From 582f2cd8f90ad6cc121bf3a8c56b3e9e760e5c7a Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 18:42:09 +0000 Subject: [PATCH 11/96] delete MenuV2 --- .../lib/components/common/menu/MenuV2.svelte | 54 ------------------- 1 file changed, 54 deletions(-) delete mode 100644 frontend/src/lib/components/common/menu/MenuV2.svelte diff --git a/frontend/src/lib/components/common/menu/MenuV2.svelte b/frontend/src/lib/components/common/menu/MenuV2.svelte deleted file mode 100644 index 708224ee13b8a..0000000000000 --- a/frontend/src/lib/components/common/menu/MenuV2.svelte +++ /dev/null @@ -1,54 +0,0 @@ - - - - -
- - - -
- -
- - -
- -
- - -
- - From 0e58d96a4a0e724cecb4d5aabe76d499e638f6e2 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 18:54:33 +0000 Subject: [PATCH 12/96] remove unused FlowCopilotButton --- .../flows/map/FlowCopilotButton.svelte | 59 ------------------- 1 file changed, 59 deletions(-) delete mode 100644 frontend/src/lib/components/flows/map/FlowCopilotButton.svelte diff --git a/frontend/src/lib/components/flows/map/FlowCopilotButton.svelte b/frontend/src/lib/components/flows/map/FlowCopilotButton.svelte deleted file mode 100644 index 51cbec517e619..0000000000000 --- a/frontend/src/lib/components/flows/map/FlowCopilotButton.svelte +++ /dev/null @@ -1,59 +0,0 @@ - - -
- -
- - - {#if !$copilotInfo.exists_ai_resource} -
-

- Enable Windmill AI in the - { - close() - }} - > - workspace settings - - -

-
- {/if} - -
- - AI Flow builder - -
From 767b6fe41bd97d8484e6a8a576337c1b0836ac10 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 19:04:28 +0000 Subject: [PATCH 13/96] clean code --- frontend/src/lib/components/DropdownV2Inner.svelte | 2 +- .../lib/components/apps/components/display/AppMenu.svelte | 2 -- frontend/src/lib/components/meltComponents/MenuItem.svelte | 5 ++++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte index 115fb8c325a25..f8e0548331279 100644 --- a/frontend/src/lib/components/DropdownV2Inner.svelte +++ b/frontend/src/lib/components/DropdownV2Inner.svelte @@ -32,7 +32,7 @@
{#each computedItems ?? [] as item} item?.action?.(e)} + on:click={(e) => item?.action?.(e.detail)} href={item?.href} disabled={item?.disabled} class={twMerge( diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte index 3dae672692485..de56cd22cd3ab 100644 --- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte @@ -35,7 +35,6 @@ latestButtonClicked: undefined as string | undefined } }) - let menu: Menu | undefined = undefined const resolvedConfig = initConfig( components['menucomponent'].initialData.configuration, @@ -106,7 +105,6 @@ on:close on:open class={resolvedConfig.fillContainer ? 'w-full h-full' : ''} - bind:this={menu} >
diff --git a/frontend/src/lib/components/meltComponents/MenuItem.svelte b/frontend/src/lib/components/meltComponents/MenuItem.svelte index d0c899428e10d..966602e7bb4aa 100644 --- a/frontend/src/lib/components/meltComponents/MenuItem.svelte +++ b/frontend/src/lib/components/meltComponents/MenuItem.svelte @@ -1,10 +1,13 @@ {#if href} @@ -12,7 +15,7 @@ {:else} - {/if} From c868c27d9ec7499b8d182868cfc98c49cd24549a Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 4 Feb 2025 20:08:59 +0000 Subject: [PATCH 14/96] replace detail page dropdown with DropdownV2 --- frontend/src/lib/components/DropdownV2.svelte | 4 +- .../details/DetailPageHeader.svelte | 39 ++++-------- .../src/lib/components/details/Menu.svelte | 62 ------------------- .../lib/components/meltComponents/Menu.svelte | 4 +- 4 files changed, 17 insertions(+), 92 deletions(-) delete mode 100644 frontend/src/lib/components/details/Menu.svelte diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte index 404ebce6f312b..8df25b42f6e96 100644 --- a/frontend/src/lib/components/DropdownV2.svelte +++ b/frontend/src/lib/components/DropdownV2.svelte @@ -2,6 +2,7 @@ import { MoreVertical } from 'lucide-svelte' import { Menu, Menubar } from '$lib/components/meltComponents' import { melt } from '@melt-ui/svelte' + import type { Placement } from '@floating-ui/core' import DropdownV2Inner from './DropdownV2Inner.svelte' @@ -18,6 +19,7 @@ export let items: Item[] | (() => Item[]) | (() => Promise) = [] export let justifyEnd: boolean = true export let disabled = false + export let placement: Placement = 'bottom-end' async function computeItems(): Promise { if (typeof items === 'function') { @@ -29,7 +31,7 @@ - +
{#if $$slots.buttonReplacement} diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte index 6a3012946b461..abf4a004bff28 100644 --- a/frontend/src/lib/components/details/DetailPageHeader.svelte +++ b/frontend/src/lib/components/details/DetailPageHeader.svelte @@ -1,9 +1,7 @@ - - - - - diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index 820b2e5f04a0f..4f7b1831f939a 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -1,11 +1,11 @@
- From cae8f5bbd45c117a4cb3e4b2255c193c0f6a4130 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Mon, 10 Feb 2025 14:57:30 +0000 Subject: [PATCH 20/96] use pointerdown_outside --- .../apps/components/display/AppMenu.svelte | 2 +- .../lib/components/meltComponents/Menu.svelte | 18 ++++++++++++------ frontend/src/lib/utils.ts | 2 ++ 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte index e048a54fcc465..f42a292015484 100644 --- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte @@ -105,7 +105,7 @@ on:close on:open class={resolvedConfig.fillContainer ? 'w-full h-full' : ''} - useClickOutside={true} + usePointerDownOutside={true} >
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index 1c95403274ebc..9cbfb8997d70c 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -2,7 +2,7 @@ import Portal from '$lib/components/Portal.svelte' import { melt, createSync } from '@melt-ui/svelte' import type { Placement } from '@floating-ui/core' - import { clickOutside } from '$lib/utils' + import { pointerDownOutside } from '$lib/utils' import { twMerge } from 'tailwind-merge' import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte' @@ -14,7 +14,7 @@ export let disabled = false export let createMenu: (any) => any export let invisible: boolean = false - export let useClickOutside: boolean = true + export let usePointerDownOutside: boolean = false // Use the passed createMenu function const menu = createMenu({ @@ -50,9 +50,15 @@ -
+
{ + if (!event.isTrusted) return + if (options?.customEventName) { node.dispatchEvent( new CustomEvent(options.customEventName, { From b728b0ec01c555c9c93009b856cd34d95f3f02a2 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Mon, 10 Feb 2025 15:32:10 +0000 Subject: [PATCH 21/96] use pointerdown_outside # Conflicts: # frontend/src/lib/components/meltComponents/Menu.svelte --- frontend/src/lib/components/meltComponents/Menu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index 9cbfb8997d70c..82ca93ba1a054 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -52,7 +52,7 @@ {disabled} use:pointerDownOutside={{ capture: true, - stopPropagation: open, + stopPropagation: false, exclude: getMenuElements, customEventName: 'pointerdown_menu' }} From 987990ee41c45b75f17bd30e5ce60a96da8c9c09 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Mon, 10 Feb 2025 15:26:03 +0000 Subject: [PATCH 22/96] use pointerdown in menus --- frontend/src/lib/components/flows/map/FlowJobsMenu.svelte | 2 +- frontend/src/lib/components/meltComponents/Menu.svelte | 1 - frontend/src/lib/components/sidebar/FavoriteMenu.svelte | 2 +- frontend/src/lib/components/sidebar/OperatorMenu.svelte | 2 +- frontend/src/lib/components/sidebar/SidebarContent.svelte | 6 +++--- frontend/src/lib/components/sidebar/UserMenu.svelte | 2 +- frontend/src/lib/components/sidebar/WorkspaceMenu.svelte | 2 +- 7 files changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte index b709d9e47baa7..97156f41498db 100644 --- a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte +++ b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte @@ -62,7 +62,7 @@ {/if} - +
-
+
{#if menuItems.length > 0} {#each menuItems as actionButton, actionIndex (actionButton?.id)} {#if actionButton.type == 'buttoncomponent'} From 805478790c3776526ee97b0e46775d7b2e42be61 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Mon, 10 Feb 2025 17:17:56 +0000 Subject: [PATCH 24/96] keep more open in operator menu --- frontend/src/lib/components/sidebar/OperatorMenu.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/sidebar/OperatorMenu.svelte b/frontend/src/lib/components/sidebar/OperatorMenu.svelte index 91e4aa65533f6..31e2c15718393 100644 --- a/frontend/src/lib/components/sidebar/OperatorMenu.svelte +++ b/frontend/src/lib/components/sidebar/OperatorMenu.svelte @@ -282,7 +282,13 @@
{#if $enterpriseLicense} - +
(moreOpen = true)} + on:mouseleave={() => (moreOpen = false)} + role="none" + > + +
{/if}
From 0594838c36585feadae9e801939cd708ca6d57ff Mon Sep 17 00:00:00 2001 From: Guilhem Date: Mon, 10 Feb 2025 20:09:26 +0000 Subject: [PATCH 25/96] add a MenuItem component --- .../components/meltComponents/MenuItem.svelte | 26 +++ .../lib/components/meltComponents/index.ts | 1 + .../components/sidebar/SidebarContent.svelte | 194 ++++++----------- .../lib/components/sidebar/UserMenu.svelte | 202 ++++++++---------- 4 files changed, 188 insertions(+), 235 deletions(-) create mode 100644 frontend/src/lib/components/meltComponents/MenuItem.svelte diff --git a/frontend/src/lib/components/meltComponents/MenuItem.svelte b/frontend/src/lib/components/meltComponents/MenuItem.svelte new file mode 100644 index 0000000000000..4eeae6e6aeb0b --- /dev/null +++ b/frontend/src/lib/components/meltComponents/MenuItem.svelte @@ -0,0 +1,26 @@ + + +{#if href} + + + +{:else} + +{/if} diff --git a/frontend/src/lib/components/meltComponents/index.ts b/frontend/src/lib/components/meltComponents/index.ts index d8468e69d0bda..f38c7aeb3a251 100644 --- a/frontend/src/lib/components/meltComponents/index.ts +++ b/frontend/src/lib/components/meltComponents/index.ts @@ -1,3 +1,4 @@ export { default as Menu } from './Menu.svelte' export { default as Menubar } from './Menubar.svelte' export { default as MenuSingleItem } from './MenuSingleItem.svelte' +export { default as MenuItem } from './MenuItem.svelte' diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte index 2496506c7c8a2..4b43652a99e36 100644 --- a/frontend/src/lib/components/sidebar/SidebarContent.svelte +++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte @@ -50,7 +50,7 @@ import SideBarNotification from './SideBarNotification.svelte' import KafkaIcon from '../icons/KafkaIcon.svelte' import NatsIcon from '../icons/NatsIcon.svelte' - import { Menubar, Menu, MenuSingleItem } from '$lib/components/meltComponents' + import { Menubar, Menu, MenuSingleItem, MenuItem } from '$lib/components/meltComponents' import { melt } from '@melt-ui/svelte' import MenuButtonMelt from './MenuButtonMelt.svelte' import MenuLinkMelt from './MenuLinkMelt.svelte' @@ -301,6 +301,10 @@ } 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' + ) {/if} @@ -372,8 +369,9 @@
- + + {#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)} {#if menuLink.subItems} {@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)} @@ -387,82 +385,51 @@ {trigger} /> -
- {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)} -
- {#if subItem?.['action']} - - {:else} - -
- {#if subItem.icon} - - {/if} - - {subItem.label} - - {#if subItem?.['notificationCount']} -
- -
- {/if} -
- + {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)} + { + subItem?.['action']?.() + }} + > +
+ {#if subItem.icon} + + {/if} + {subItem.label} + {#if subItem?.['notificationCount']} +
+ +
{/if}
- {/each} -
+ + {/each} {:else} -
- - -
- -
- - - -
+ + +
+ +
+ + + {/if} {/each}
- + {#each thirdMenuLinks as menuLink (menuLink)} {#if menuLink.subItems} @@ -487,46 +454,25 @@ {#each menuLink.subItems as subItem (subItem.href ?? subItem.label)} -
- -
- {#if subItem.icon} - - {/if} + +
+ {#if subItem.icon} + + {/if} - {subItem.label} -
- -
+ {subItem.label} +
+ {/each} {#if recentChangelogs.length > 0}
Latest changelogs {#each recentChangelogs as changelog} -
- -
- {changelog.label} -
- -
+ +
+ {changelog.label} +
+ {/each} {/if}
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte index 326ddf86418e3..fbce578a9e2cc 100644 --- a/frontend/src/lib/components/sidebar/UserMenu.svelte +++ b/frontend/src/lib/components/sidebar/UserMenu.svelte @@ -14,13 +14,19 @@ import { Crown, HardHat, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte' import DarkModeObserver from '../DarkModeObserver.svelte' import MenuButtonMelt from './MenuButtonMelt.svelte' + import { Menu, MenuItem } from '$lib/components/meltComponents' - import { melt } from '@melt-ui/svelte' - import { Menu } from '$lib/components/meltComponents' let darkMode: boolean = false + export let isCollapsed: boolean = false export let lightMode: boolean = false export let createMenu: (any) => any + + 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' + ) @@ -34,130 +40,104 @@ {trigger} /> -
-
-

- {$userStore?.email} -

- - {#if $userStore?.is_admin} - Admin of this workspace - {:else if $userStore?.operator} - Operator in this workspace - {/if} - -
-
- - - Account settings - -
+
+

+ {$userStore?.email} +

+ + {#if $userStore?.is_admin} + Admin of this workspace + {:else if $userStore?.operator} + Operator in this workspace + {/if} + +
+
+ + + Account settings + -
- -
+ { + 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} + + {:else} + + {/if} + Switch theme + -
- -
+ logout()} + class={twMerge(itemClass, 'text-primary font-semibold')} + {item} + > + + Sign out + +
- {#if isCloudHosted()} + {#if isCloudHosted() || true} +
{#if !$isPremiumStore} -
- {$usageStore}/1000 user execs -
-
+ {$usageStore}/1000 user execs +
+
+
- {#if $workspaceStore != 'demo'} - {$workspaceUsageStore}/1000 free workspace execs -
+
+ {#if $workspaceStore != 'demo'} + {$workspaceUsageStore}/1000 free workspace execs +
+
- {/if} - {#if $userStore?.is_admin} - - {/if} -
- {:else} -
- -
+ Upgrade + + {/if} + {:else} + { + goto('/workspace_settings?tab=premium') + }} + {item} + > + Premium plan + {/if} - {/if} -
+
+ {/if}
From 0c395ed4d1a2d79a7725739d48a8e53cf8077894 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 11 Feb 2025 08:48:00 +0000 Subject: [PATCH 26/96] clean --- frontend/src/lib/components/sidebar/SidebarContent.svelte | 8 +++----- frontend/src/lib/components/sidebar/UserMenu.svelte | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte index 4b43652a99e36..33301e29b80e0 100644 --- a/frontend/src/lib/components/sidebar/SidebarContent.svelte +++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte @@ -290,7 +290,6 @@ ] export let isCollapsed: boolean = false - export let noGap: boolean = false let leaveWorkspaceModal = false @@ -309,11 +308,10 @@ diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte index 8049bc7cc07ec..ccf3eaed4aeaa 100644 --- a/frontend/src/lib/components/sidebar/UserMenu.svelte +++ b/frontend/src/lib/components/sidebar/UserMenu.svelte @@ -13,7 +13,7 @@ import { twMerge } from 'tailwind-merge' import { Crown, HardHat, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte' import DarkModeObserver from '../DarkModeObserver.svelte' - import MenuButtonMelt from './MenuButtonMelt.svelte' + import MenuButton from './MenuButton.svelte' import { Menu, MenuItem } from '$lib/components/meltComponents' let darkMode: boolean = false @@ -31,7 +31,7 @@ - - Windmill
-
+
@@ -472,8 +472,8 @@ {/if}
-
- +
+ From e19c24224ce1ff630275e3a95598e4347e424a8d Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 11 Feb 2025 13:37:28 +0000 Subject: [PATCH 30/96] put conditionalMelt as utility function --- frontend/src/lib/components/sidebar/MenuButton.svelte | 9 +-------- frontend/src/lib/components/sidebar/MenuLink.svelte | 9 +-------- frontend/src/lib/utils.ts | 10 ++++++++-- 3 files changed, 10 insertions(+), 18 deletions(-) diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte index 860aa867553eb..3a01ba70cd031 100644 --- a/frontend/src/lib/components/sidebar/MenuButton.svelte +++ b/frontend/src/lib/components/sidebar/MenuButton.svelte @@ -4,7 +4,7 @@ import { createEventDispatcher } from 'svelte' import SideBarNotification from './SideBarNotification.svelte' import { goto } from '$app/navigation' - + import { conditionalMelt } from '$lib/utils' export let label: string | undefined = undefined export let icon: any | undefined = undefined export let isCollapsed: boolean @@ -18,13 +18,6 @@ export let href: string | undefined = undefined let dispatch = createEventDispatcher() - - function conditionalMelt(node: HTMLElement, triggerParams: any) { - if (triggerParams) { - return triggerParams.action(node) - } - return { destroy: () => {} } - } {#if !disabled} diff --git a/frontend/src/lib/components/sidebar/MenuLink.svelte b/frontend/src/lib/components/sidebar/MenuLink.svelte index 8399fdad33a53..7b4a4bba2caf8 100644 --- a/frontend/src/lib/components/sidebar/MenuLink.svelte +++ b/frontend/src/lib/components/sidebar/MenuLink.svelte @@ -1,5 +1,5 @@ {#if !disabled} diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index e76f6a7a6d804..6d2681d393850 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -353,14 +353,13 @@ export function removeItemAll(arr: T[], value: T) { } export function emptyString(str: string | undefined | null): boolean { - return str === undefined || str === null || str === '' + return str === undefined || str === null || str === '' } export function emptyStringTrimmed(str: string | undefined | null): boolean { return str === undefined || str === null || str === '' || str.trim().length === 0 } - export function defaultIfEmptyString(str: string | undefined, dflt: string): string { return emptyString(str) ? dflt : str! } @@ -1106,3 +1105,10 @@ export function isScriptPreview(job_kind: Job['job_kind'] | undefined) { !!job_kind && (job_kind === 'preview' || job_kind === 'flowscript' || job_kind === 'appscript') ) } + +export function conditionalMelt(node: HTMLElement, meltElement: any) { + if (meltElement) { + return meltElement.action(node) + } + return { destroy: () => {} } +} From 8ef175e77baea1d80d770a27617229f39b6344fc Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 11 Feb 2025 14:59:52 +0000 Subject: [PATCH 31/96] fix action arg type --- frontend/src/lib/components/DropdownV2Inner.svelte | 2 +- .../src/lib/components/meltComponents/MenuItem.svelte | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte index f8e0548331279..115fb8c325a25 100644 --- a/frontend/src/lib/components/DropdownV2Inner.svelte +++ b/frontend/src/lib/components/DropdownV2Inner.svelte @@ -32,7 +32,7 @@
{#each computedItems ?? [] as item} item?.action?.(e.detail)} + on:click={(e) => item?.action?.(e)} href={item?.href} disabled={item?.disabled} class={twMerge( diff --git a/frontend/src/lib/components/meltComponents/MenuItem.svelte b/frontend/src/lib/components/meltComponents/MenuItem.svelte index 4eeae6e6aeb0b..051f30ee4378e 100644 --- a/frontend/src/lib/components/meltComponents/MenuItem.svelte +++ b/frontend/src/lib/components/meltComponents/MenuItem.svelte @@ -1,5 +1,8 @@ - +
{#if $$slots.buttonReplacement} diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte index 115fb8c325a25..249f190603007 100644 --- a/frontend/src/lib/components/DropdownV2Inner.svelte +++ b/frontend/src/lib/components/DropdownV2Inner.svelte @@ -7,6 +7,7 @@ displayName: string action?: (e: CustomEvent) => void icon?: any + iconColor?: string href?: string disabled?: boolean type?: 'action' | 'delete' @@ -36,7 +37,7 @@ href={item?.href} disabled={item?.disabled} class={twMerge( - 'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-all', + 'px-4 py-2 text-primary font-semibold hover:bg-surface-hover cursor-pointer text-xs transition-all', 'data-[highlighted]:bg-surface-hover', 'flex flex-row gap-2 items-center', item?.disabled && 'text-gray-400 cursor-not-allowed', @@ -47,7 +48,7 @@ item={meltItem} > {#if item.icon} - + {/if} {item.displayName} diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index a713835829354..08473a975fbae 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -73,14 +73,11 @@ import { loadFlowModuleState, pickScript } from './flows/flowStateUtils' import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte' import FlowBuilderTutorials from './FlowBuilderTutorials.svelte' - + import Dropdown from '$lib/components/DropdownV2.svelte' import FlowTutorials from './FlowTutorials.svelte' import { ignoredTutorials } from './tutorials/ignoredTutorials' import type DiffDrawer from './DiffDrawer.svelte' import FlowHistory from './flows/FlowHistory.svelte' - import ButtonDropdown from './common/button/ButtonDropdown.svelte' - import { MenuItem } from '@rgossiaux/svelte-headlessui' - import { twMerge } from 'tailwind-merge' import CustomPopover from './CustomPopover.svelte' import Summary from './Summary.svelte' import type { FlowBuilderWhitelabelCustomUi } from './custom_ui' @@ -1364,33 +1361,16 @@ {/if}
{#if moreItems?.length > 0} - + - - - - {#each moreItems as item} - -
- - {item.displayName} -
- - {/each} +
{#if customUi?.topBar?.tutorials != false} diff --git a/frontend/src/lib/components/FlowBuilderTutorials.svelte b/frontend/src/lib/components/FlowBuilderTutorials.svelte index 14024db3b07ec..312e89d07217d 100644 --- a/frontend/src/lib/components/FlowBuilderTutorials.svelte +++ b/frontend/src/lib/components/FlowBuilderTutorials.svelte @@ -1,21 +1,47 @@ - + +{/key} {/if}
- + - - - - {#each moreItems as item} - -
- - {item.displayName} -
- - {/each} + -
- {:else if isSmall} -
- {:else}
{`Debug nodes (current node: ${currentNodeId})`}
{/if} -
- - - {#each nodes ?? [] as node, index} - { - $componentControl?.[id]?.setTab?.(index) - - $debuggingComponents[id] = index - }} - > -
+ +
- - {/each} - { - $componentControl?.[id]?.setTab?.(0) - - $debuggingComponents = Object.fromEntries( - Object.entries($debuggingComponents).filter(([key]) => key !== id) - ) - }} - > -
- {`Reset debug mode`} + +
- - - - + {:else if isSmall} +
+ {:else}
{`Debug nodes (current node: ${currentNodeId})`}
{/if} + + + {/key} diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte index a351f6e74d0a4..6b762fcbfb9e7 100644 --- a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte +++ b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte @@ -1,9 +1,7 @@ - - - + +{/key} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte index 34cef28d8e399..b9d58d79043ee 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte @@ -4,13 +4,9 @@ import { Trash } from 'lucide-svelte' import { sendUserToast } from '$lib/toast' - import { twMerge } from 'tailwind-merge' import { createEventDispatcher } from 'svelte' import NameEditor from './NameEditor.svelte' - - import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte' - import { classNames } from '$lib/utils' - import { MenuItem } from '@rgossiaux/svelte-headlessui' + import Dropdown from '$lib/components/DropdownV2.svelte' import { ResourceService } from '$lib/gen' export let row: { @@ -52,6 +48,17 @@ sendUserToast('Component name updated:\n' + name) } + + function getItems() { + return [ + { + action: toggleDelete, + icon: Trash, + displayName: 'Delete', + type: 'delete' as const + } + ] + } @@ -69,23 +76,6 @@ -
- -
+ diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte index 295e0f5fedef7..4bb894e308a8f 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte @@ -69,8 +69,6 @@ getCustomComponents() -
-
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte index da0d7bbc85788..c3c72d6a78da9 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte @@ -2,17 +2,12 @@ import { deleteGroup, getGroup, updateGroup } from './groupUtils' import { workspaceStore } from '$lib/stores' import Cell from '$lib/components/table/Cell.svelte' - + import Dropdown from '$lib/components/DropdownV2.svelte' import { Trash } from 'lucide-svelte' import { sendUserToast } from '$lib/toast' - import { twMerge } from 'tailwind-merge' import { createEventDispatcher } from 'svelte' import GroupNameEditor from './NameEditor.svelte' - import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte' - import { classNames } from '$lib/utils' - import { MenuItem } from '@rgossiaux/svelte-headlessui' - export let row: { name: string path: string @@ -27,6 +22,17 @@ dispatch('reloadGroups') sendUserToast('Group deleted:\n' + row.name) } + + function getItems() { + return [ + { + action: toggleDelete, + icon: Trash, + displayName: 'Delete', + type: 'delete' as const + } + ] + } @@ -54,23 +60,6 @@ -
- -
+ diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte index 4b7d83bb13bd1..099377675ab60 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte @@ -14,9 +14,7 @@ import ThemeNameEditor from './ThemeNameEditor.svelte' import ThemeDrawer from './ThemeDrawer.svelte' - import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte' - import { classNames } from '$lib/utils' - import { MenuItem } from '@rgossiaux/svelte-headlessui' + import Dropdown from '$lib/components/DropdownV2.svelte' export let previewThemePath: string | undefined = undefined @@ -134,6 +132,36 @@ } } + async function getDropdownItems() { + return [ + { + action: () => themeDrawer?.openDrawer(), + icon: Code, + displayName: 'View code', + type: 'action' as const + }, + { + action: () => fork(row.path), + icon: GitBranch, + displayName: 'Fork', + type: 'action' as const + }, + { + action: () => makeDefaultTheme(row.path), + icon: Pin, + displayName: 'Make default', + type: 'action' as const, + disabled: row.path === DEFAULT_THEME + }, + { + action: toggleDelete, + icon: Trash, + displayName: 'Delete', + type: 'delete' as const, + disabled: row.path === DEFAULT_THEME + } + ] + } let themeDrawer: ThemeDrawer @@ -172,55 +200,7 @@ {/if} - +
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte index 264a56dc00094..f8a3b1cb5fb0e 100644 --- a/frontend/src/lib/components/common/button/Button.svelte +++ b/frontend/src/lib/components/common/button/Button.svelte @@ -2,10 +2,9 @@ import { createEventDispatcher } from 'svelte' import { ButtonType } from './model' import { twMerge } from 'tailwind-merge' - import ButtonDropdown from './ButtonDropdown.svelte' - import { MenuItem } from '@rgossiaux/svelte-headlessui' - import { classNames, getModifierKey } from '$lib/utils' - import { Loader2 } from 'lucide-svelte' + import Dropdown from '$lib/components/DropdownV2.svelte' + import { getModifierKey, type Item } from '$lib/utils' + import { Loader2, ChevronDown } from 'lucide-svelte' export let size: ButtonType.Size = 'md' export let spacingSize: ButtonType.Size = size @@ -30,7 +29,6 @@ export let title: string | undefined = undefined export let style: string = '' export let download: string | undefined = undefined - export let portalTarget: string | undefined = undefined export let startIcon: ButtonType.Icon | undefined = undefined export let endIcon: ButtonType.Icon | undefined = undefined export let shortCut: @@ -45,12 +43,14 @@ } export let dropdownItems: MenuItem[] | (() => MenuItem[]) | undefined = undefined - function computeDropdowns(): MenuItem[] | undefined { - if (typeof dropdownItems === 'function') { - return dropdownItems() - } else { - return dropdownItems - } + function computeDropdowns(menuItems: MenuItem[] | (() => MenuItem[])): Item[] { + const items = typeof menuItems === 'function' ? menuItems() : menuItems + return items.map((item) => ({ + displayName: item.label, + action: item.onClick ? (e) => item.onClick?.(e) : undefined, + icon: item.icon, + href: item.href + })) } export function focus() { @@ -230,32 +230,19 @@ {/if} {#if dropdownItems && dropdownItems.length > 0} -
- - - {#each computeDropdowns() ?? [] as item} - -
- {#if item.icon} - - {/if} - {item.label} -
- - {/each} - - -
+ + +
+ +
+ + {/if}
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte index 9f03351667a30..b70ac1c3fadba 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -1,5 +1,4 @@ - - - - - - -
- {#each dropdownItems as item} - - {/each} -
- - From 7df118e7d681bde18fdedc1f1257ee1373883d97 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 12 Feb 2025 10:58:30 +0000 Subject: [PATCH 34/96] Add new tooltip component --- .../components/meltComponents/Tooltip.svelte | 77 +++++++++++++++++++ frontend/src/lib/zIndexes.ts | 3 +- 2 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 frontend/src/lib/components/meltComponents/Tooltip.svelte diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte new file mode 100644 index 0000000000000..9c08e25187635 --- /dev/null +++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte @@ -0,0 +1,77 @@ + + +
+ + {#if !$$slots.default} +
+ +
+ {/if} +
+ +{#if $open && !disablePopup} +
+ {#if markdownTooltip} +
+ +
+ {:else} + + {/if} + + {#if documentationLink} + +
+ See documentation + +
+ + {/if} +
+{/if} diff --git a/frontend/src/lib/zIndexes.ts b/frontend/src/lib/zIndexes.ts index 2137887df0fef..e49a7deb6210d 100644 --- a/frontend/src/lib/zIndexes.ts +++ b/frontend/src/lib/zIndexes.ts @@ -8,5 +8,6 @@ export const zIndexes = { contextMenu: 6000, draggingComponent: 10000, monacoEditor: 10000, - monacoEditorSuggestions: 10001 + monacoEditorSuggestions: 10001, + tooltip: 20000 } From dc32bcb2d6c0fa716b1c8b2c8ac935af326a43e1 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 12 Feb 2025 11:01:16 +0000 Subject: [PATCH 35/96] reolace addUser popup with popover --- frontend/src/lib/components/AddUser.svelte | 108 +++++++++--------- .../components/meltComponents/Popover.svelte | 48 +++++--- .../schema/AddPropertyFormV2.svelte | 10 +- .../components/triggers/CaptureButton.svelte | 2 +- frontend/src/lib/zIndexes.ts | 1 + 5 files changed, 89 insertions(+), 80 deletions(-) diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte index 90ce1e8d3154a..54acc1157a09b 100644 --- a/frontend/src/lib/components/AddUser.svelte +++ b/frontend/src/lib/components/AddUser.svelte @@ -2,7 +2,8 @@ import { createEventDispatcher } from 'svelte' import { globalEmailInvite, superadmin, workspaceStore } from '$lib/stores' import { SettingService, UserService, WorkspaceService } from '$lib/gen' - import { Button, Popup } from './common' + import { Button } from './common' + import Popover from './meltComponents/Popover.svelte' import { sendUserToast } from '$lib/toast' import { isCloudHosted } from '$lib/cloud' import { goto } from '$lib/navigation' @@ -72,64 +73,63 @@ let selected: 'operator' | 'developer' | 'admin' = 'developer' - - + + -
- Add a new user + +
+ Add a new user - Email - + Email + - {#if !automateUsernameCreation} - Username - - {/if} + {#if !automateUsernameCreation} + Username + + {/if} - Role - - Role + + + + + + -
- + on:click={() => { + addUser().then(() => { + // @ts-ignore + email = undefined + // @ts-ignore + username = undefined + }) + }} + disabled={email === undefined || (!automateUsernameCreation && username === undefined)} + > + Add + +
+ + diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte index 18122ba505688..76fa12aca3bcf 100644 --- a/frontend/src/lib/components/meltComponents/Popover.svelte +++ b/frontend/src/lib/components/meltComponents/Popover.svelte @@ -2,16 +2,17 @@ import { createPopover, createSync, melt } from '@melt-ui/svelte' import { fade } from 'svelte/transition' import { X } from 'lucide-svelte' + import type { Placement } from '@floating-ui/core' + import { zIndexes } from '$lib/zIndexes' - export let open = false - export let closeButton: boolean = true + export let closeButton: boolean = false export let displayArrow: boolean = false - export let placement: any = 'bottom' + export let placement: Placement = 'bottom' export let disablePopup: boolean = false export let openOnHover: boolean = false const { - elements: { trigger, content, arrow, close }, + elements: { trigger, content, arrow, close: closeElement }, states } = createPopover({ forceVisible: true, @@ -20,29 +21,42 @@ } }) + let isOpen = false const sync = createSync(states) - $: sync.open(open, (v) => (open = v)) + $: sync.open(isOpen, (v) => (isOpen = v)) + + export function close() { + isOpen = false + } + + export function open() { + isOpen = true + } - +
-{#if open} -
+{#if isOpen && !disablePopup} +
{#if displayArrow}
{/if} - + {#if closeButton} - {/if} @@ -56,8 +70,4 @@ @apply focus-visible:ring focus-visible:ring-gray-400 focus-visible:ring-offset-2; @apply bg-surface p-0 text-sm font-medium; } - - .content { - @apply w-fit rounded-[4px] bg-surface p-0 overflow-hidden shadow-md; - } diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte index 8748fc8e3eef7..69c5017e40fe6 100644 --- a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte +++ b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte @@ -13,15 +13,13 @@ dispatch('add', { name }) name = '' } - - let open: boolean = false - + - +
{ if (event.key === 'Enter') { addField() - open = false + close() } }} /> @@ -40,7 +38,7 @@ id="flow-editor-add-property" on:click={() => { addField() - open = false + close() }} disabled={!name} shortCut={{ Icon: CornerDownLeft, withoutModifier: true }} diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte index b90070d2c13b0..4ba19739bb2bc 100644 --- a/frontend/src/lib/components/triggers/CaptureButton.svelte +++ b/frontend/src/lib/components/triggers/CaptureButton.svelte @@ -25,7 +25,7 @@ } - + {#if small} -
- - + close() + }} + > + Rename + +
+ + +
{/if}
From 526e659dc71d495a108018ded3b8abf1213c5f9c Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 12 Feb 2025 11:49:10 +0000 Subject: [PATCH 39/96] add floating config and usePointerdownOutside to popover props --- .../components/meltComponents/Popover.svelte | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte index c6c9a33f65854..b61d98fdbb17e 100644 --- a/frontend/src/lib/components/meltComponents/Popover.svelte +++ b/frontend/src/lib/components/meltComponents/Popover.svelte @@ -4,19 +4,22 @@ import { X } from 'lucide-svelte' import type { Placement } from '@floating-ui/core' import { zIndexes } from '$lib/zIndexes' + import { pointerDownOutside } from '$lib/utils' export let closeButton: boolean = false export let displayArrow: boolean = false export let placement: Placement = 'bottom' export let disablePopup: boolean = false export let openOnHover: boolean = false + export let floatingConfig: any | undefined = undefined + export let usePointerDownOutside: boolean = false const { elements: { trigger, content, arrow, close: closeElement }, states } = createPopover({ forceVisible: true, - positioning: { + positioning: floatingConfig ?? { placement } }) @@ -32,6 +35,10 @@ export function open() { isOpen = true } + + async function getMenuElements(): Promise { + return Array.from(document.querySelectorAll('[data-popover]')) as HTMLElement[] + }
(openOnHover ? open() : null)} on:mouseleave={() => (openOnHover ? close() : null)} + use:pointerDownOutside={{ + capture: true, + stopPropagation: false, + exclude: getMenuElements + }} + on:pointerdown_outside={() => { + if (usePointerDownOutside) { + close() + } + }} + data-popover >
@@ -50,6 +68,7 @@ transition:fade={{ duration: 100 }} class="w-fit border rounded-md bg-surface overflow-hidden shadow-lg" style="z-index: {zIndexes.popover}" + data-popover > {#if displayArrow}
From bdce1b75cb9a9bbc3fe922f937165b32f09b79a6 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 12 Feb 2025 11:51:19 +0000 Subject: [PATCH 40/96] replace popup with melt popover in RunForm --- frontend/src/lib/components/RunForm.svelte | 28 +++++++++---------- .../components/RunFormAdvancedPopup.svelte | 9 ++---- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte index 22a31ff5301d5..9be671846d17c 100644 --- a/frontend/src/lib/components/RunForm.svelte +++ b/frontend/src/lib/components/RunForm.svelte @@ -12,7 +12,7 @@ import SharedBadge from './SharedBadge.svelte' import TimeAgo from './TimeAgo.svelte' - import Popup from './common/popup/Popup.svelte' + import Popover from './meltComponents/Popover.svelte' import { autoPlacement } from '@floating-ui/core' import { Calendar, CornerDownLeft } from 'lucide-svelte' import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte' @@ -58,7 +58,6 @@ export let jsonView = false let reloadArgs = 0 - let blockPopupOpen = false let jsonEditor: JsonInputs | undefined = undefined let schemaHeight = 0 @@ -206,7 +205,7 @@ {scheduledForStr ? 'Schedule to run later' : buttonText}
- - + - close(null)} - /> - + + + +
{#if overrideTag} diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte index da7508a114219..f0ba3d1eb9f59 100644 --- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte +++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte @@ -1,7 +1,6 @@ -
+
{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
- + - + + +
{oneOfSelected} - - + -
- - + + + @@ -247,7 +239,7 @@ iconOnly={false} on:click={() => { if (oneOfSelected) { - updateVariantName(oneOfSelected) + variantName = oneOfSelected } }} /> @@ -260,12 +252,12 @@ on:keydown={(event) => { if (event.key === 'Enter') { if (oneOfSelected) { - renameVariant(oneOfSelected) + renameVariant(oneOfSelected, variantName) close() } } }} - on:input={(e) => updateVariantName(e.currentTarget.value)} + bind:value={variantName} /> From f37659207ace19cea426805a08324d258ba81953 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 12 Feb 2025 16:20:59 +0000 Subject: [PATCH 45/96] replace Popup with melt Popover in ScriptGen --- .../lib/components/copilot/ScriptGen.svelte | 285 +++++++++--------- 1 file changed, 144 insertions(+), 141 deletions(-) diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte index 1ae45c9146cd2..f8812be4b5e73 100644 --- a/frontend/src/lib/components/copilot/ScriptGen.svelte +++ b/frontend/src/lib/components/copilot/ScriptGen.svelte @@ -6,7 +6,8 @@ import type { SupportedLanguage } from '$lib/common' import { sendUserToast } from '$lib/toast' import type Editor from '../Editor.svelte' - import Popup from '../common/popup/Popup.svelte' + import Popover from '$lib/components/meltComponents/Popover.svelte' + import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte' import { dbSchemas, copilotInfo, @@ -29,7 +30,6 @@ import { fade } from 'svelte/transition' import { isInitialCode } from '$lib/script_helpers' import { twMerge } from 'tailwind-merge' - import Popover from '../Popover.svelte' import { onDestroy } from 'svelte' // props @@ -311,7 +311,7 @@ {/if} {/if} {#if ($generatedCode.length === 0 || genLoading) && SUPPORTED_LANGUAGES.has(lang ?? '')} - - + {#if inlineScript}