From 4e86c39ea18e1d35cf8d3133effffbe5f45b6776 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Fri, 15 May 2026 15:09:25 +0200 Subject: [PATCH] chore: remove `` `_Shadcn_` suffix (#45971) ## Problem The `_Shadcn_` suffix isn't needed anymore on `` and related components ## Solution Remove it. No other changes ## Summary by CodeRabbit * **Refactor** * Replaced legacy context-menu component variants with the unified UI context-menu components across the app for consistent rendering and imports; behavior and menu content remain unchanged. * **Tests** * Updated a test mock to track the unified context-menu component mount count. * **Chores** * Simplified UI package re-exports to expose the canonical context-menu symbols. [![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971) --- .../default/example/context-menu-demo.tsx | 104 ++++++++--------- .../default/example/tree-view-edit.tsx | 34 +++--- .../example/tree-view-multi-select.tsx | 34 +++--- .../formatter/CellContextMenuWrapper.tsx | 20 ++-- .../interfaces/Auth/Users/Users.utils.tsx | 42 +++---- .../CronJobs/CronJobTableCell.tsx | 36 +++--- .../SQLEditor/UtilityPanel/Results.tsx | 28 ++--- .../interfaces/Settings/Logs/LogTable.tsx | 18 +-- .../StorageExplorer/FileExplorerColumn.tsx | 106 +++++++++--------- .../FileExplorerRowContextMenu.tsx | 54 +++++---- .../SQLEditorNavV2/SQLEditorTreeViewItem.tsx | 86 +++++++------- apps/studio/components/layouts/Tabs/Tabs.tsx | 36 +++--- .../FileExplorerAndEditorRow.tsx | 32 +++--- .../components/SQLEditor/Results.test.tsx | 4 +- packages/ui/index.tsx | 18 +-- 15 files changed, 313 insertions(+), 339 deletions(-) diff --git a/apps/design-system/registry/default/example/context-menu-demo.tsx b/apps/design-system/registry/default/example/context-menu-demo.tsx index 877b9917d90..abf39fe0594 100644 --- a/apps/design-system/registry/default/example/context-menu-demo.tsx +++ b/apps/design-system/registry/default/example/context-menu-demo.tsx @@ -1,65 +1,65 @@ import { - ContextMenu_Shadcn_, - ContextMenuCheckboxItem_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuLabel_Shadcn_, - ContextMenuRadioGroup_Shadcn_, - ContextMenuRadioItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuShortcut_Shadcn_, - ContextMenuSub_Shadcn_, - ContextMenuSubContent_Shadcn_, - ContextMenuSubTrigger_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuCheckboxItem, + ContextMenuContent, + ContextMenuItem, + ContextMenuLabel, + ContextMenuRadioGroup, + ContextMenuRadioItem, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, } from 'ui' export default function ContextMenuDemo() { return ( - - + + Right click here - - - + + + Back - ⌘[ - - + ⌘[ + + Forward - ⌘] - - + ⌘] + + Reload - ⌘R - - - More Tools - - + ⌘R + + + More Tools + + Save Page As... - ⇧⌘S - - Create Shortcut... - Name Window... - - Developer Tools - - - - + ⇧⌘S + + Create Shortcut... + Name Window... + + Developer Tools + + + + Show Bookmarks Bar - ⌘⇧B - - Show Full URLs - - - People - - Pedro Duarte - Colm Tuite - - - + ⌘⇧B + + Show Full URLs + + + People + + Pedro Duarte + Colm Tuite + + + ) } diff --git a/apps/design-system/registry/default/example/tree-view-edit.tsx b/apps/design-system/registry/default/example/tree-view-edit.tsx index b690c0fff43..c37cfbbc057 100644 --- a/apps/design-system/registry/default/example/tree-view-edit.tsx +++ b/apps/design-system/registry/default/example/tree-view-edit.tsx @@ -1,10 +1,10 @@ import { useState } from 'react' import { - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, flattenTree, TreeView, TreeViewItem, @@ -84,8 +84,8 @@ export default function TreeViewDemo() { aria-label="directory tree" nodeRenderer={({ element, isBranch, isExpanded, getNodeProps, level, isSelected }) => { return ( - - + + - - + { // stop focus propagation // so input in TreeViewItem gets focus e.stopPropagation() }} > - { handleRenameSelect(element.id as number) }} @@ -130,13 +130,13 @@ export default function TreeViewDemo() { }} > Rename - - Open in new tab - Share with team - - Delete - - + + Open in new tab + Share with team + + Delete + + ) }} /> diff --git a/apps/design-system/registry/default/example/tree-view-multi-select.tsx b/apps/design-system/registry/default/example/tree-view-multi-select.tsx index 983c616ce77..959788df623 100644 --- a/apps/design-system/registry/default/example/tree-view-multi-select.tsx +++ b/apps/design-system/registry/default/example/tree-view-multi-select.tsx @@ -1,10 +1,10 @@ import { useState } from 'react' import { - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, flattenTree, TreeView, TreeViewItem, @@ -87,8 +87,8 @@ export default function TreeViewDemo() { className="w-[420px] border bg py-2" nodeRenderer={({ element, isBranch, isExpanded, getNodeProps, level, isSelected }) => { return ( - - + + - - + { // stop focus propagation // so input in TreeViewItem gets focus e.stopPropagation() }} > - { handleRenameSelect(element.id as number) }} @@ -132,13 +132,13 @@ export default function TreeViewDemo() { }} > Rename - - Open in new tab - Share with team - - Delete - - + + Open in new tab + Share with team + + Delete + + ) }} /> diff --git a/apps/studio/components/grid/components/formatter/CellContextMenuWrapper.tsx b/apps/studio/components/grid/components/formatter/CellContextMenuWrapper.tsx index b465ef79f93..90ebd1e8299 100644 --- a/apps/studio/components/grid/components/formatter/CellContextMenuWrapper.tsx +++ b/apps/studio/components/grid/components/formatter/CellContextMenuWrapper.tsx @@ -1,11 +1,11 @@ -import { ContextMenuContent } from '@ui/components/shadcn/ui/context-menu' import { Copy } from 'lucide-react' import { PropsWithChildren } from 'react' import { toast } from 'sonner' import { - ContextMenu_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuTrigger, copyToClipboard, } from 'ui' @@ -26,16 +26,14 @@ export const CellContextMenuWrapper = ({ } return ( - - - {children} - + + {children} - + Copy cell - + - + ) } diff --git a/apps/studio/components/interfaces/Auth/Users/Users.utils.tsx b/apps/studio/components/interfaces/Auth/Users/Users.utils.tsx index 8b332a47fbb..23b97d59300 100644 --- a/apps/studio/components/interfaces/Auth/Users/Users.utils.tsx +++ b/apps/studio/components/interfaces/Auth/Users/Users.utils.tsx @@ -5,11 +5,11 @@ import { Column, useRowSelection } from 'react-data-grid' import { Checkbox, cn, - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, copyToClipboard, } from 'ui' @@ -351,8 +351,8 @@ export const formatUserColumns = ({ } return ( - - + +
)}
- - e.stopPropagation()}> - + e.stopPropagation()}> + e.stopPropagation()} onSelect={() => { @@ -404,11 +404,11 @@ export const formatUserColumns = ({ > Copy {col.id === 'id' ? col.name : col.name.toLowerCase()} - + - + - e.stopPropagation()} onSelect={() => { @@ -417,9 +417,9 @@ export const formatUserColumns = ({ > View data as user - + - e.stopPropagation()} onSelect={() => { @@ -428,11 +428,11 @@ export const formatUserColumns = ({ > Run SQL as user - + - + - e.stopPropagation()} onSelect={() => { @@ -441,9 +441,9 @@ export const formatUserColumns = ({ > Delete user - - - + + + ) }, } diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx index e5a516269dc..1b2bd728fc0 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx @@ -8,11 +8,11 @@ import { Badge, Button, cn, - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, copyToClipboard, Dialog, DialogContent, @@ -243,8 +243,8 @@ export const CronJobTableCell = ({ } return ( - - + +
{['latest_run', 'next_run'].includes(col.id) ? ( !hasValue ? ( @@ -304,18 +304,18 @@ export const CronJobTableCell = ({ )}
- - e.stopPropagation()}> - + e.stopPropagation()}> + e.stopPropagation()} onSelect={() => copyToClipboard(formattedValue)} > Copy {col.name.toLowerCase()} - + - e.stopPropagation()} onSelect={() => onSelectEdit(row)} @@ -334,19 +334,19 @@ export const CronJobTableCell = ({ )} - + - + - e.stopPropagation()} onSelect={() => onSelectDelete(row)} > Delete job - - - + + + ) } diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx index 7e5a34b449d..1fda67ce9d4 100644 --- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx +++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx @@ -2,10 +2,10 @@ import { Copy, Expand } from 'lucide-react' import { useCallback, useMemo, useRef, useState } from 'react' import DataGrid, { CalculatedColumn } from 'react-data-grid' import { - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuTrigger, copyToClipboard, } from 'ui' @@ -95,12 +95,12 @@ export const Results = ({ rows }: { rows: readonly any[] }) => { ) : ( <> - - + +
- - e.stopPropagation()}> - + e.stopPropagation()}> + { const value = formatClipboardValue(contextMenuCellRef.current?.value ?? '') @@ -110,8 +110,8 @@ export const Results = ({ rows }: { rows: readonly any[] }) => { > Copy cell content - - + { const cell = contextMenuCellRef.current @@ -121,9 +121,9 @@ export const Results = ({ rows }: { rows: readonly any[] }) => { > View cell content - - - + + +
- - + +
- + - { const eventMessage = activeRow?.event_message @@ -520,9 +520,9 @@ export const LogTable = ({ > Copy event message - + - + - + +
)}
- - + + {canUpdateStorage && ( <> - + New folder - - + + )} - + Select all items - - - + + + View - - - setView(STORAGE_VIEWS.COLUMNS)}> + + + setView(STORAGE_VIEWS.COLUMNS)}> As columns - - setView(STORAGE_VIEWS.LIST)}> + + setView(STORAGE_VIEWS.LIST)}> As list - - - - - + + + + + Sort by - - - setSortBy(STORAGE_SORT_BY.NAME)}> + + + setSortBy(STORAGE_SORT_BY.NAME)}> Name - - setSortBy(STORAGE_SORT_BY.CREATED_AT)}> + + setSortBy(STORAGE_SORT_BY.CREATED_AT)}> Last created - - setSortBy(STORAGE_SORT_BY.UPDATED_AT)}> + + setSortBy(STORAGE_SORT_BY.UPDATED_AT)}> Last modified - - setSortBy(STORAGE_SORT_BY.LAST_ACCESSED_AT)}> + + setSortBy(STORAGE_SORT_BY.LAST_ACCESSED_AT)}> Last accessed - - - - - + + + + + Sort by order - - - setSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}> + + + setSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}> Ascending - - setSortByOrder(STORAGE_SORT_BY_ORDER.DESC)}> + + setSortByOrder(STORAGE_SORT_BY_ORDER.DESC)}> Descending - - - - - + + + + + ) } diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRowContextMenu.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRowContextMenu.tsx index 83e6f1e3752..a16603fc453 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRowContextMenu.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRowContextMenu.tsx @@ -1,14 +1,14 @@ import { createContext, useCallback, useContext, useRef, useState } from 'react' import type { ReactNode } from 'react' import { - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuSub_Shadcn_, - ContextMenuSubContent_Shadcn_, - ContextMenuSubTrigger_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, } from 'ui' export type RowOptionChild = { name: string; onClick: () => void } @@ -58,11 +58,11 @@ export function FileExplorerRowContextMenuProvider({ children }: { children: Rea return ( - - + +
- - + e.stopPropagation()} onClick={(e) => e.stopPropagation()} @@ -70,37 +70,33 @@ export function FileExplorerRowContextMenuProvider({ children }: { children: Rea {activeOptions.map((option) => { if ((option.children ?? []).length > 0) { return ( - - + + {option.icon || <>} {option.name} - - + + {(option.children ?? []).map((child) => ( - + {child.name} - + ))} - - + + ) } else if (option.name === 'Separator') { - return + return } else { return ( - + {option.icon || <>} {option.name} - + ) } })} - - + + {children} ) diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx index 56c743d9ecd..5536305da67 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx @@ -20,11 +20,11 @@ import { ComponentProps, useEffect } from 'react' import { Button, cn, - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, TreeViewItem, } from 'ui' @@ -218,8 +218,8 @@ export const SQLEditorTreeViewItem = ({ return ( <> - - + + - - e.stopPropagation()}> + + e.stopPropagation()}> {isBranch ? ( <> {onSelectCreate !== undefined && ( - onSelectCreate()} onFocusCapture={(e) => e.stopPropagation()} > Create new snippet - + )} {onSelectRename !== undefined && isOwner && ( - onSelectRename()} onFocusCapture={(e) => e.stopPropagation()} > Rename folder - + )} {onSelectDelete !== undefined && isOwner && ( <> - - + onSelectDelete()} onFocusCapture={(e) => e.stopPropagation()} > Delete folder - + )} ) : isMultiSelected ? ( <> {onSelectMove !== undefined && ( - onSelectMove()} onFocusCapture={(e) => e.stopPropagation()} > Move selected queries - + )} - + {onSelectDelete !== undefined && ( - onSelectDelete()} onFocusCapture={(e) => e.stopPropagation()} > Delete selected queries - + )} ) : ( <> - e.stopPropagation()} @@ -334,63 +334,63 @@ export const SQLEditorTreeViewItem = ({ Open in new tab - - + + {onSelectRename !== undefined && isOwner && ( - onSelectRename()} onFocusCapture={(e) => e.stopPropagation()} > Rename query - + )} {onSelectMove !== undefined && isOwner && ( - onSelectMove()} onFocusCapture={(e) => e.stopPropagation()} > Move query - + )} {onSelectShare !== undefined && !isSharedSnippet && canCreateSQLSnippet && IS_PLATFORM && ( - onSelectShare()} onFocusCapture={(e) => e.stopPropagation()} > Share query with team - + )} {onSelectUnshare !== undefined && isSharedSnippet && isOwner && ( - onSelectUnshare()} onFocusCapture={(e) => e.stopPropagation()} > Unshare query with team - + )} {onSelectDuplicate !== undefined && canCreateSQLSnippet && ( - onSelectDuplicate()} onFocusCapture={(e) => e.stopPropagation()} > Duplicate query - + )} {IS_PLATFORM && ( - onToggleFavorite()} onFocusCapture={(e) => e.stopPropagation()} @@ -402,31 +402,31 @@ export const SQLEditorTreeViewItem = ({ )} /> {isFavorite ? 'Remove from' : 'Add to'} favorites - + )} {onSelectDownload !== undefined && IS_PLATFORM && ( - onSelectDownload()} onFocusCapture={(e) => e.stopPropagation()} > Download as migration file - + )} {onSelectDelete !== undefined && isOwner && ( <> - - onSelectDelete()}> + + onSelectDelete()}> Delete query - + )} )} - - + + {hasNextPage && typeof element.id === 'string' && isLastItem && (
{ strategy={horizontalListSortingStrategy} > {editorTabs.map((tab, index) => ( - - + + { openTabs={openTabs} onClose={() => handleClose(tab.id)} /> - - - handleClose(tab.id)}> - Close - - handleCloseOthers(tab.id)}> + + + handleClose(tab.id)}>Close + handleCloseOthers(tab.id)}> Close Others - - handleCloseRight(tab.id)}> + + handleCloseRight(tab.id)}> Close to the Right - - - Close All - - - + + Close All + + ))} diff --git a/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditorRow.tsx b/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditorRow.tsx index d789541c7db..7c18859609c 100644 --- a/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditorRow.tsx +++ b/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditorRow.tsx @@ -2,11 +2,11 @@ import { IS_PLATFORM } from 'common' import { Edit, File, Trash } from 'lucide-react' import { cn, - ContextMenu_Shadcn_, - ContextMenuContent_Shadcn_, - ContextMenuItem_Shadcn_, - ContextMenuSeparator_Shadcn_, - ContextMenuTrigger_Shadcn_, + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, Tooltip, TooltipContent, TooltipTrigger, @@ -45,8 +45,8 @@ export const FileExplorerAndEditorRow = ({ const isEditing = Boolean(element.metadata?.isEditing) return ( - - + +
- + {IS_PLATFORM && ( - e.stopPropagation()}> - e.stopPropagation()}> + { if (originalId !== null) handleStartRename(originalId) @@ -110,12 +110,12 @@ export const FileExplorerAndEditorRow = ({ > Rename file - + {files.length > 1 && ( <> - - + { if (originalId !== null) { @@ -126,11 +126,11 @@ export const FileExplorerAndEditorRow = ({ > Delete file - + )} - + )} - + ) } diff --git a/apps/studio/tests/components/SQLEditor/Results.test.tsx b/apps/studio/tests/components/SQLEditor/Results.test.tsx index 8a180954fd7..401150fcd3c 100644 --- a/apps/studio/tests/components/SQLEditor/Results.test.tsx +++ b/apps/studio/tests/components/SQLEditor/Results.test.tsx @@ -10,9 +10,9 @@ vi.mock('ui', async () => { const actual = await vi.importActual('ui') return { ...actual, - ContextMenu_Shadcn_: (props: any) => { + ContextMenu: (props: any) => { contextMenuMountCount++ - return + return }, } }) diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 80c909d9b00..d98a1c03e81 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -77,23 +77,7 @@ export { CommandSeparator as CommandSeparator_Shadcn_, } from './src/components/shadcn/ui/command' -export { - ContextMenu as ContextMenu_Shadcn_, - ContextMenuTrigger as ContextMenuTrigger_Shadcn_, - ContextMenuContent as ContextMenuContent_Shadcn_, - ContextMenuItem as ContextMenuItem_Shadcn_, - ContextMenuSeparator as ContextMenuSeparator_Shadcn_, - ContextMenuLabel as ContextMenuLabel_Shadcn_, - ContextMenuRadioGroup as ContextMenuRadioGroup_Shadcn_, - ContextMenuRadioItem as ContextMenuRadioItem_Shadcn_, - ContextMenuShortcut as ContextMenuShortcut_Shadcn_, - ContextMenuSub as ContextMenuSub_Shadcn_, - ContextMenuSubContent as ContextMenuSubContent_Shadcn_, - ContextMenuSubTrigger as ContextMenuSubTrigger_Shadcn_, - ContextMenuCheckboxItem as ContextMenuCheckboxItem_Shadcn_, - ContextMenuGroup as ContextMenuGroup_Shadcn_, - ContextMenuPortal as ContextMenuPortal_Shadcn_, -} from './src/components/shadcn/ui/context-menu' +export * from './src/components/shadcn/ui/context-menu' export * from './src/components/shadcn/ui/dialog'