From ac6b63bd6d5b139bd535cdb256e20cdea22bbc09 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 25 Jul 2025 16:24:43 -0600 Subject: [PATCH] close on select false for favorites --- .../dropdowns/SaveToDashboardDropdown.tsx | 7 ++++- .../components/features/list/FavoriteStar.tsx | 30 ++++++++++--------- .../features/metrics/ThreeDotMenu.tsx | 3 +- .../ui/dropdown/Dropdown.stories.tsx | 4 --- .../src/components/ui/dropdown/Dropdown.tsx | 15 ++++------ .../MetricThreeDotMenu.tsx | 1 + 6 files changed, 31 insertions(+), 29 deletions(-) diff --git a/apps/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx b/apps/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx index ee7b83b0e..702acf5c4 100644 --- a/apps/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx +++ b/apps/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx @@ -89,7 +89,12 @@ export const useSaveToDashboardDropdownContent = ({ value: dashboard.id, label: dashboard.name || 'New dashboard', selected: selectedDashboards.some((d) => d === dashboard.id), - onClick: () => onClickItem(dashboard), + closeOnSelect: false, + onClick: (e) => { + e.stopPropagation(); + e.preventDefault(); + onClickItem(dashboard); + }, link: createBusterRoute({ route: BusterRoutes.APP_DASHBOARD_ID, dashboardId: dashboard.id diff --git a/apps/web/src/components/features/list/FavoriteStar.tsx b/apps/web/src/components/features/list/FavoriteStar.tsx index 15d6e14f3..e01600996 100644 --- a/apps/web/src/components/features/list/FavoriteStar.tsx +++ b/apps/web/src/components/features/list/FavoriteStar.tsx @@ -81,21 +81,23 @@ export const useFavoriteStar = ({ return userFavorites?.some((favorite) => favorite.id === id); }, [userFavorites, id]); - const onFavoriteClick = useMemoizedFn(async (e?: React.MouseEvent) => { - e?.stopPropagation(); - e?.preventDefault(); - if (!isFavorited) { - return await addItemToFavorite([ - { - asset_type: type, - id, - name - } - ]); - } + const onFavoriteClick = useMemoizedFn( + async (e?: React.MouseEvent | React.MouseEvent) => { + e?.stopPropagation(); + e?.preventDefault(); + if (!isFavorited) { + return await addItemToFavorite([ + { + asset_type: type, + id, + name + } + ]); + } - return await removeItemFromFavorite([id]); - }); + return await removeItemFromFavorite([id]); + } + ); return useMemo( () => ({ diff --git a/apps/web/src/components/features/metrics/ThreeDotMenu.tsx b/apps/web/src/components/features/metrics/ThreeDotMenu.tsx index 0f4db94c2..2de112bd5 100644 --- a/apps/web/src/components/features/metrics/ThreeDotMenu.tsx +++ b/apps/web/src/components/features/metrics/ThreeDotMenu.tsx @@ -63,7 +63,8 @@ export const useFavoriteMetricSelectMenu = ({ metricId }: { metricId: string }) label: isFavorited ? 'Remove from favorites' : 'Add to favorites', value: 'add-to-favorites', icon: isFavorited ? : , - onClick: onFavoriteClick + onClick: onFavoriteClick, + closeOnSelect: false }), [isFavorited, onFavoriteClick] ); diff --git a/apps/web/src/components/ui/dropdown/Dropdown.stories.tsx b/apps/web/src/components/ui/dropdown/Dropdown.stories.tsx index 68d34f5ab..a259468b3 100644 --- a/apps/web/src/components/ui/dropdown/Dropdown.stories.tsx +++ b/apps/web/src/components/ui/dropdown/Dropdown.stories.tsx @@ -15,10 +15,6 @@ const meta: Meta = { layout: 'centered' }, argTypes: { - closeOnSelect: { - control: 'boolean', - defaultValue: true - }, align: { control: 'select', options: ['start', 'center', 'end'], diff --git a/apps/web/src/components/ui/dropdown/Dropdown.tsx b/apps/web/src/components/ui/dropdown/Dropdown.tsx index 47d73380d..5fe45151c 100644 --- a/apps/web/src/components/ui/dropdown/Dropdown.tsx +++ b/apps/web/src/components/ui/dropdown/Dropdown.tsx @@ -31,7 +31,8 @@ export interface DropdownItem { secondaryLabel?: string; value: T; shortcut?: string; - onClick?: () => void; + onClick?: (e: React.MouseEvent) => void; + closeOnSelect?: boolean; //default is true icon?: React.ReactNode; disabled?: boolean; loading?: boolean; @@ -52,7 +53,6 @@ export interface DropdownProps extends DropdownMenuProps { items: DropdownItems; selectType?: 'single' | 'multiple' | 'none'; menuHeader?: string | React.ReactNode; //if string it will render a search box - closeOnSelect?: boolean; onSelect?: (value: T) => void; align?: 'start' | 'center' | 'end'; side?: 'top' | 'right' | 'bottom' | 'left'; @@ -81,7 +81,6 @@ export const DropdownBase = ({ selectType = 'none', menuHeader, contentClassName = '', - closeOnSelect = true, onSelect, children, align = 'start', @@ -114,7 +113,6 @@ export const DropdownBase = ({ items={items} selectType={selectType} menuHeader={menuHeader} - closeOnSelect={closeOnSelect} onSelect={onSelect} showIndex={showIndex} emptyStateText={emptyStateText} @@ -135,7 +133,6 @@ export const DropdownContent = ({ items, selectType, menuHeader, - closeOnSelect = true, showIndex = false, emptyStateText = 'No items found', footerContent, @@ -198,7 +195,7 @@ export const DropdownContent = ({ if (!disabled && onSelect) { onSelect(item.value); // Close the dropdown if closeOnSelect is true - if (closeOnSelect) { + if (item.closeOnSelect !== false) { const dropdownTrigger = document.querySelector('[data-state="open"][role="menu"]'); if (dropdownTrigger) { const closeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }); @@ -248,7 +245,7 @@ export const DropdownContent = ({ selectType={selectType} onSelect={onSelect} onSelectItem={onSelectItem} - closeOnSelect={closeOnSelect} + closeOnSelect={(item as DropdownItem).closeOnSelect !== false} showIndex={showIndex} /> ); @@ -270,7 +267,7 @@ export const DropdownContent = ({ selectType={selectType} onSelect={onSelect} onSelectItem={onSelectItem} - closeOnSelect={closeOnSelect} + closeOnSelect={(item as DropdownItem).closeOnSelect !== false} showIndex={showIndex} /> ); @@ -365,7 +362,7 @@ const DropdownItem = ({ selectType: DropdownProps['selectType']; }) => { const onClickItem = useMemoizedFn((e: React.MouseEvent) => { - if (onClick) onClick(); + if (onClick) onClick(e); if (onSelect) onSelect(value as T); }); const enabledHotKeys = showIndex && !disabled && !!onSelectItem; diff --git a/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx b/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx index 38c973552..e698d9cf7 100644 --- a/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx +++ b/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx @@ -190,6 +190,7 @@ const useDashboardSelectMenu = ({ metricId }: { metricId: string }) => { () => ({ label: 'Add to dashboard', value: 'add-to-dashboard', + closeOnSelect: false, icon: , items: [{dashboardSubMenu}] }),