From 02567839a314d99b91d4aa32715ef2f137249f4d Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 11 Feb 2025 21:36:12 +0000 Subject: [PATCH] replace ButtonDropdown with DropdownV2 --- frontend/src/lib/components/DropdownV2.svelte | 25 ++-- .../src/lib/components/DropdownV2Inner.svelte | 5 +- .../src/lib/components/FlowBuilder.svelte | 38 ++--- .../components/FlowBuilderTutorials.svelte | 101 +++++--------- .../apps/editor/AppEditorHeader.svelte | 31 +--- .../apps/editor/AppEditorTutorial.svelte | 115 +++++++-------- .../apps/editor/DecisionTreeDebug.svelte | 132 ++++++++---------- .../apps/editor/RecomputeAllButton.svelte | 43 +----- .../components/apps/editor/TabsDebug.svelte | 101 ++++++-------- .../componentsPanel/CustomComponentRow.svelte | 36 ++--- .../CustomComponentsList.svelte | 2 - .../editor/componentsPanel/GroupRow.svelte | 37 ++--- .../editor/componentsPanel/ThemeRow.svelte | 84 +++++------ .../components/common/button/Button.svelte | 63 ++++----- .../lib/components/meltComponents/Menu.svelte | 29 ++-- .../FlowBuilderTutorialErrorHandler.svelte | 2 +- frontend/src/lib/utils.ts | 11 ++ .../(root)/(logged)/run/[...run]/+page.svelte | 45 +++--- 18 files changed, 360 insertions(+), 540 deletions(-) diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte index 8df25b42f6..18415ad9e4 100644 --- a/frontend/src/lib/components/DropdownV2.svelte +++ b/frontend/src/lib/components/DropdownV2.svelte @@ -3,23 +3,14 @@ import { Menu, Menubar } from '$lib/components/meltComponents' import { melt } from '@melt-ui/svelte' import type { Placement } from '@floating-ui/core' - + import type { Item } from '$lib/utils' import DropdownV2Inner from './DropdownV2Inner.svelte' - type Item = { - displayName: string - action?: (e: CustomEvent) => void - icon?: any - href?: string - disabled?: boolean - type?: 'action' | 'delete' - hide?: boolean | undefined - } - export let items: Item[] | (() => Item[]) | (() => Promise) = [] export let justifyEnd: boolean = true export let disabled = false export let placement: Placement = 'bottom-end' + export let usePointerDownOutside = false async function computeItems(): Promise { if (typeof items === 'function') { @@ -31,7 +22,17 @@ - +
{#if $$slots.buttonReplacement} diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte index 115fb8c325..249f190603 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 a713835829..08473a975f 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} - + - +
{#if customUi?.topBar?.tutorials != false} diff --git a/frontend/src/lib/components/FlowBuilderTutorials.svelte b/frontend/src/lib/components/FlowBuilderTutorials.svelte index 14024db3b0..312e89d072 100644 --- a/frontend/src/lib/components/FlowBuilderTutorials.svelte +++ b/frontend/src/lib/components/FlowBuilderTutorials.svelte @@ -1,21 +1,47 @@ - + +{/key} {/if}
- + - + -
- {:else if isSmall} -
- {:else}
{`Debug nodes (current node: ${currentNodeId})`}
{/if} -
- - - {#each nodes ?? [] as node, index} - { - $componentControl?.[id]?.setTab?.(index) - - $debuggingComponents[id] = index - }} - > -
key !== id) + ) + }} > - {`Debug node ${node.label}`} -
- - {/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 a351f6e74d..6b762fcbfb 100644 --- a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte +++ b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte @@ -1,9 +1,7 @@ - - - {#each tabs ?? [] as { }, index} - { - $componentControl?.[id]?.setTab?.(index) - selected = index - isManuallySelected = true - }} - > -
- {#if index === tabs.length - 1} - {isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`} - {:else} - {`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`} - {/if} -
- - {/each} - { - $componentControl?.[id]?.setTab?.(-1) - selected = null - isManuallySelected = false - }} - > -
- {`Reset debug mode`} -
- - - - + +{/key} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte index 34cef28d8e..b9d58d7904 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 295e0f5fed..4bb894e308 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 da0d7bbc85..c3c72d6a78 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 4b7d83bb13..099377675a 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 264a56dc00..f8a3b1cb5f 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 9f03351667..b70ac1c3fa 100644 --- a/frontend/src/lib/components/meltComponents/Menu.svelte +++ b/frontend/src/lib/components/meltComponents/Menu.svelte @@ -1,5 +1,4 @@