dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-06 09:55:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove <ContextMenu> _Shadcn_ suffix (#45971)

Browse Source 
## Problem

The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>`
and related components

## Solution

Remove it. No other changes

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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_stack_entry_start -->

[![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)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Gildas Garcia authored and GitHub committed 2026-05-15 15:09:25 +02:00
1 parent 69acd647e1
commit 4e86c39ea1
15 files changed
+313 -339
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/registry/default/example/context-menu-demo.tsx
+52 -52
View File
@@ -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 (
<ContextMenu_Shadcn_>
<ContextMenuTrigger_Shadcn_ className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
<ContextMenu>
<ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
Right click here
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_ className="w-64">
<ContextMenuItem_Shadcn_ inset>
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuItem inset>
Back
<ContextMenuShortcut_Shadcn_>⌘[</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ inset disabled>
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset disabled>
Forward
<ContextMenuShortcut_Shadcn_>⌘]</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ inset>
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset>
Reload
<ContextMenuShortcut_Shadcn_>⌘R</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuSub_Shadcn_>
<ContextMenuSubTrigger_Shadcn_ inset>More Tools</ContextMenuSubTrigger_Shadcn_>
<ContextMenuSubContent_Shadcn_ className="w-48">
<ContextMenuItem_Shadcn_>
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSub>
<ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
<ContextMenuSubContent className="w-48">
<ContextMenuItem>
Save Page As...
<ContextMenuShortcut_Shadcn_>⇧⌘S</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_>Create Shortcut...</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_>Name Window...</ContextMenuItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_>Developer Tools</ContextMenuItem_Shadcn_>
</ContextMenuSubContent_Shadcn_>
</ContextMenuSub_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuCheckboxItem_Shadcn_ checked>
<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>Create Shortcut...</ContextMenuItem>
<ContextMenuItem>Name Window...</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Developer Tools</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenuSeparator />
<ContextMenuCheckboxItem checked>
Show Bookmarks Bar
<ContextMenuShortcut_Shadcn_>⌘⇧B</ContextMenuShortcut_Shadcn_>
</ContextMenuCheckboxItem_Shadcn_>
<ContextMenuCheckboxItem_Shadcn_>Show Full URLs</ContextMenuCheckboxItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuRadioGroup_Shadcn_ value="pedro">
<ContextMenuLabel_Shadcn_ inset>People</ContextMenuLabel_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuRadioItem_Shadcn_ value="pedro">Pedro Duarte</ContextMenuRadioItem_Shadcn_>
<ContextMenuRadioItem_Shadcn_ value="colm">Colm Tuite</ContextMenuRadioItem_Shadcn_>
</ContextMenuRadioGroup_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
<ContextMenuSeparator />
<ContextMenuRadioGroup value="pedro">
<ContextMenuLabel inset>People</ContextMenuLabel>
<ContextMenuSeparator />
<ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
</ContextMenuRadioGroup>
</ContextMenuContent>
</ContextMenu>
)
}
apps/design-system/registry/default/example/tree-view-edit.tsx
+17 -17
View File
@@ -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 (
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<TreeViewItem
isExpanded={isExpanded}
isBranch={isBranch}
@@ -111,15 +111,15 @@ export default function TreeViewDemo() {
}}
{...getNodeProps()}
/>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_
</ContextMenuTrigger>
<ContextMenuContent
onCloseAutoFocus={(e) => {
// stop focus propagation
// so input in TreeViewItem gets focus
e.stopPropagation()
}}
>
<ContextMenuItem_Shadcn_
<ContextMenuItem
onSelect={() => {
handleRenameSelect(element.id as number)
}}
@@ -130,13 +130,13 @@ export default function TreeViewDemo() {
}}
>
Rename
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ disabled>Open in new tab</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ disabled>Share with team</ContextMenuItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_ disabled>Delete</ContextMenuItem_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
<ContextMenuItem disabled>Open in new tab</ContextMenuItem>
<ContextMenuItem disabled>Share with team</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem disabled>Delete</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
}}
/>
apps/design-system/registry/default/example/tree-view-multi-select.tsx
+17 -17
View File
@@ -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 (
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<TreeViewItem
isExpanded={isExpanded}
isBranch={isBranch}
@@ -113,15 +113,15 @@ export default function TreeViewDemo() {
}}
{...getNodeProps()}
/>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_
</ContextMenuTrigger>
<ContextMenuContent
onCloseAutoFocus={(e) => {
// stop focus propagation
// so input in TreeViewItem gets focus
e.stopPropagation()
}}
>
<ContextMenuItem_Shadcn_
<ContextMenuItem
onSelect={(e) => {
handleRenameSelect(element.id as number)
}}
@@ -132,13 +132,13 @@ export default function TreeViewDemo() {
}}
>
Rename
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ disabled>Open in new tab</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ disabled>Share with team</ContextMenuItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_ disabled>Delete</ContextMenuItem_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
<ContextMenuItem disabled>Open in new tab</ContextMenuItem>
<ContextMenuItem disabled>Share with team</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem disabled>Delete</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
}}
/>
apps/studio/components/grid/components/formatter/CellContextMenuWrapper.tsx
+9 -11
View File
@@ -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 (
<ContextMenu_Shadcn_>
<ContextMenuTrigger_Shadcn_ className="flex items-center w-full">
{children}
</ContextMenuTrigger_Shadcn_>
<ContextMenu>
<ContextMenuTrigger className="flex items-center w-full">{children}</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem_Shadcn_ className="gap-x-2" onSelect={onCopyCellContent}>
<ContextMenuItem className="gap-x-2" onSelect={onCopyCellContent}>
<Copy size={12} />
<span className="text-xs">Copy cell</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu_Shadcn_>
</ContextMenu>
)
}
apps/studio/components/interfaces/Auth/Users/Users.utils.tsx
+21 -21
View File
@@ -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 (
<ContextMenu_Shadcn_>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu>
<ContextMenuTrigger asChild>
<div
className={cn(
'w-full flex items-center text-xs',
@@ -392,9 +392,9 @@ export const formatUserColumns = ({
</p>
)}
</div>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_ onClick={(e) => e.stopPropagation()}>
<ContextMenuItem_Shadcn_
</ContextMenuTrigger>
<ContextMenuContent onClick={(e) => e.stopPropagation()}>
<ContextMenuItem
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => {
@@ -404,11 +404,11 @@ export const formatUserColumns = ({
>
<Copy size={12} />
<span>Copy {col.id === 'id' ? col.name : col.name.toLowerCase()}</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuSeparator />
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => {
@@ -417,9 +417,9 @@ export const formatUserColumns = ({
>
<TableEditor size={12} />
<span>View data as user</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => {
@@ -428,11 +428,11 @@ export const formatUserColumns = ({
>
<SqlEditor size={12} />
<span>Run SQL as user</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuSeparator />
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => {
@@ -441,9 +441,9 @@ export const formatUserColumns = ({
>
<Trash size={12} />
<span>Delete user</span>
</ContextMenuItem_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
},
}
apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
+18 -18
View File
@@ -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 (
<ContextMenu_Shadcn_>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu>
<ContextMenuTrigger asChild>
<div className={cn('w-full flex items-center text-xs')}>
{['latest_run', 'next_run'].includes(col.id) ? (
!hasValue ? (
@@ -304,18 +304,18 @@ export const CronJobTableCell = ({
</Badge>
)}
</div>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_ onClick={(e) => e.stopPropagation()}>
<ContextMenuItem_Shadcn_
</ContextMenuTrigger>
<ContextMenuContent onClick={(e) => e.stopPropagation()}>
<ContextMenuItem
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => copyToClipboard(formattedValue)}
>
<Copy size={12} />
<span>Copy {col.name.toLowerCase()}</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
<ContextMenuItem_Shadcn_
<ContextMenuItem
disabled={!jobname}
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => onSelectEdit(row)}
@@ -334,19 +334,19 @@ export const CronJobTableCell = ({
</TooltipContent>
)}
</Tooltip>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuSeparator />
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
onSelect={() => onSelectDelete(row)}
>
<Trash size={12} />
<span>Delete job</span>
</ContextMenuItem_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
}
apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
+14 -14
View File
@@ -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[] }) => {
</div>
) : (
<>
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<div ref={triggerRef} className="fixed pointer-events-none w-0 h-0" />
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_ onCloseAutoFocus={(e) => e.stopPropagation()}>
<ContextMenuItem_Shadcn_
</ContextMenuTrigger>
<ContextMenuContent onCloseAutoFocus={(e) => e.stopPropagation()}>
<ContextMenuItem
className="gap-x-2"
onSelect={() => {
const value = formatClipboardValue(contextMenuCellRef.current?.value ?? '')
@@ -110,8 +110,8 @@ export const Results = ({ rows }: { rows: readonly any[] }) => {
>
<Copy size={12} />
Copy cell content
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_
</ContextMenuItem>
<ContextMenuItem
className="gap-x-2"
onSelect={() => {
const cell = contextMenuCellRef.current
@@ -121,9 +121,9 @@ export const Results = ({ rows }: { rows: readonly any[] }) => {
>
<Expand size={12} />
View cell content
</ContextMenuItem_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
<DataGrid
columns={columns}
rows={rows}
apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+9 -9
View File
@@ -10,9 +10,9 @@ import {
Button,
Checkbox,
cn,
ContextMenu_Shadcn_,
ContextMenuItem_Shadcn_,
ContextMenuTrigger_Shadcn_,
ContextMenu,
ContextMenuItem,
ContextMenuTrigger,
copyToClipboard,
ResizableHandle,
ResizablePanel,
@@ -502,12 +502,12 @@ export const LogTable = ({
}}
/>
</div>
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<div ref={triggerRef} className="fixed pointer-events-none w-0 h-0" />
</ContextMenuTrigger_Shadcn_>
</ContextMenuTrigger>
<ContextMenuContent key={contextMenuKey}>
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => {
const eventMessage = activeRow?.event_message
@@ -520,9 +520,9 @@ export const LogTable = ({
>
<Copy size={14} />
<span className="text-xs">Copy event message</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu_Shadcn_>
</ContextMenu>
<DataGrid
role="table"
style={{ flex: '1 1 0%', minHeight: 0 }}
apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx
+53 -53
View File
@@ -7,14 +7,14 @@ import { toast } from 'sonner'
import {
Checkbox,
cn,
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'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -181,8 +181,8 @@ export const FileExplorerColumn = ({
}
return (
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<div
ref={fileExplorerColumnRef}
className={cn(
@@ -342,70 +342,70 @@ export const FileExplorerColumn = ({
</div>
)}
</div>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_>
</ContextMenuTrigger>
<ContextMenuContent>
{canUpdateStorage && (
<>
<ContextMenuItem_Shadcn_ className="gap-x-2" onSelect={onSelectCreateFolder}>
<ContextMenuItem className="gap-x-2" onSelect={onSelectCreateFolder}>
<FolderPlus size={14} />
<span className="text-xs">New folder</span>
</ContextMenuItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
</ContextMenuItem>
<ContextMenuSeparator />
</>
)}
<ContextMenuItem_Shadcn_ className="gap-x-2" onSelect={onSelectAllItems}>
<ContextMenuItem className="gap-x-2" onSelect={onSelectAllItems}>
<Copy size={14} />
<span className="text-xs">Select all items</span>
</ContextMenuItem_Shadcn_>
<ContextMenuSub_Shadcn_>
<ContextMenuSubTrigger_Shadcn_ className="gap-x-2">
</ContextMenuItem>
<ContextMenuSub>
<ContextMenuSubTrigger className="gap-x-2">
<Eye size={14} />
<span className="text-xs">View</span>
</ContextMenuSubTrigger_Shadcn_>
<ContextMenuSubContent_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setView(STORAGE_VIEWS.COLUMNS)}>
</ContextMenuSubTrigger>
<ContextMenuSubContent>
<ContextMenuItem onSelect={() => setView(STORAGE_VIEWS.COLUMNS)}>
<span className="text-xs">As columns</span>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setView(STORAGE_VIEWS.LIST)}>
</ContextMenuItem>
<ContextMenuItem onSelect={() => setView(STORAGE_VIEWS.LIST)}>
<span className="text-xs">As list</span>
</ContextMenuItem_Shadcn_>
</ContextMenuSubContent_Shadcn_>
</ContextMenuSub_Shadcn_>
<ContextMenuSub_Shadcn_>
<ContextMenuSubTrigger_Shadcn_ className="gap-x-2">
</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenuSub>
<ContextMenuSubTrigger className="gap-x-2">
<ChevronsDown size={14} />
<span className="text-xs">Sort by</span>
</ContextMenuSubTrigger_Shadcn_>
<ContextMenuSubContent_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setSortBy(STORAGE_SORT_BY.NAME)}>
</ContextMenuSubTrigger>
<ContextMenuSubContent>
<ContextMenuItem onSelect={() => setSortBy(STORAGE_SORT_BY.NAME)}>
<span className="text-xs">Name</span>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setSortBy(STORAGE_SORT_BY.CREATED_AT)}>
</ContextMenuItem>
<ContextMenuItem onSelect={() => setSortBy(STORAGE_SORT_BY.CREATED_AT)}>
<span className="text-xs">Last created</span>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setSortBy(STORAGE_SORT_BY.UPDATED_AT)}>
</ContextMenuItem>
<ContextMenuItem onSelect={() => setSortBy(STORAGE_SORT_BY.UPDATED_AT)}>
<span className="text-xs">Last modified</span>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setSortBy(STORAGE_SORT_BY.LAST_ACCESSED_AT)}>
</ContextMenuItem>
<ContextMenuItem onSelect={() => setSortBy(STORAGE_SORT_BY.LAST_ACCESSED_AT)}>
<span className="text-xs">Last accessed</span>
</ContextMenuItem_Shadcn_>
</ContextMenuSubContent_Shadcn_>
</ContextMenuSub_Shadcn_>
<ContextMenuSub_Shadcn_>
<ContextMenuSubTrigger_Shadcn_ className="gap-x-2">
</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenuSub>
<ContextMenuSubTrigger className="gap-x-2">
<ChevronsUp size={14} />
<span className="text-xs">Sort by order</span>
</ContextMenuSubTrigger_Shadcn_>
<ContextMenuSubContent_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}>
</ContextMenuSubTrigger>
<ContextMenuSubContent>
<ContextMenuItem onSelect={() => setSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}>
<span className="text-xs">Ascending</span>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onSelect={() => setSortByOrder(STORAGE_SORT_BY_ORDER.DESC)}>
</ContextMenuItem>
<ContextMenuItem onSelect={() => setSortByOrder(STORAGE_SORT_BY_ORDER.DESC)}>
<span className="text-xs">Descending</span>
</ContextMenuItem_Shadcn_>
</ContextMenuSubContent_Shadcn_>
</ContextMenuSub_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
</ContextMenuContent>
</ContextMenu>
)
}
apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRowContextMenu.tsx
+25 -29
View File
@@ -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 (
<FileExplorerContextMenuContext.Provider value={{ onRowContextMenu }}>
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<div ref={triggerRef} className="fixed pointer-events-none w-0 h-0" />
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_
</ContextMenuTrigger>
<ContextMenuContent
key={contextMenuKey}
onCloseAutoFocus={(e) => 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 (
<ContextMenuSub_Shadcn_ key={option.name}>
<ContextMenuSubTrigger_Shadcn_ className="gap-x-2">
<ContextMenuSub key={option.name}>
<ContextMenuSubTrigger className="gap-x-2">
{option.icon || <></>}
<span className="text-xs">{option.name}</span>
</ContextMenuSubTrigger_Shadcn_>
<ContextMenuSubContent_Shadcn_>
</ContextMenuSubTrigger>
<ContextMenuSubContent>
{(option.children ?? []).map((child) => (
<ContextMenuItem_Shadcn_ key={child.name} onSelect={child.onClick}>
<ContextMenuItem key={child.name} onSelect={child.onClick}>
<span className="text-xs">{child.name}</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
))}
</ContextMenuSubContent_Shadcn_>
</ContextMenuSub_Shadcn_>
</ContextMenuSubContent>
</ContextMenuSub>
)
} else if (option.name === 'Separator') {
return <ContextMenuSeparator_Shadcn_ key={option.name} />
return <ContextMenuSeparator key={option.name} />
} else {
return (
<ContextMenuItem_Shadcn_
className="gap-x-2"
key={option.name}
onSelect={option.onClick}
>
<ContextMenuItem className="gap-x-2" key={option.name} onSelect={option.onClick}>
{option.icon || <></>}
<span className="text-xs">{option.name}</span>
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)
}
})}
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuContent>
</ContextMenu>
{children}
</FileExplorerContextMenuContext.Provider>
)
apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
+43 -43
View File
@@ -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 (
<>
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<TreeViewItem
className={className}
level={level}
@@ -257,71 +257,71 @@ export const SQLEditorTreeViewItem = ({
description={element.metadata?.description || undefined}
xPadding={16}
/>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_ onCloseAutoFocus={(e) => e.stopPropagation()}>
</ContextMenuTrigger>
<ContextMenuContent onCloseAutoFocus={(e) => e.stopPropagation()}>
{isBranch ? (
<>
{onSelectCreate !== undefined && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectCreate()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Plus size={14} />
Create new snippet
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectRename !== undefined && isOwner && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectRename()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Edit size={14} />
Rename folder
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectDelete !== undefined && isOwner && (
<>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_
<ContextMenuSeparator />
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectDelete()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Trash size={14} />
Delete folder
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
</>
)}
</>
) : isMultiSelected ? (
<>
{onSelectMove !== undefined && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectMove()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Move size={14} />
Move selected queries
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
<ContextMenuSeparator_Shadcn_ />
<ContextMenuSeparator />
{onSelectDelete !== undefined && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectDelete()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Trash size={14} />
Delete selected queries
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
</>
) : (
<>
<ContextMenuItem_Shadcn_
<ContextMenuItem
asChild
className="gap-x-2"
onFocusCapture={(e) => e.stopPropagation()}
@@ -334,63 +334,63 @@ export const SQLEditorTreeViewItem = ({
<ExternalLink size={14} />
Open in new tab
</Link>
</ContextMenuItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
</ContextMenuItem>
<ContextMenuSeparator />
{onSelectRename !== undefined && isOwner && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectRename()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Edit size={14} />
Rename query
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectMove !== undefined && isOwner && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectMove()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Move size={14} />
Move query
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectShare !== undefined &&
!isSharedSnippet &&
canCreateSQLSnippet &&
IS_PLATFORM && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectShare()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Share size={14} />
Share query with team
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectUnshare !== undefined && isSharedSnippet && isOwner && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectUnshare()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Lock size={14} />
Unshare query with team
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectDuplicate !== undefined && canCreateSQLSnippet && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectDuplicate()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Copy size={14} />
Duplicate query
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{IS_PLATFORM && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onToggleFavorite()}
onFocusCapture={(e) => e.stopPropagation()}
@@ -402,31 +402,31 @@ export const SQLEditorTreeViewItem = ({
)}
/>
{isFavorite ? 'Remove from' : 'Add to'} favorites
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectDownload !== undefined && IS_PLATFORM && (
<ContextMenuItem_Shadcn_
<ContextMenuItem
className="gap-x-2"
onSelect={() => onSelectDownload()}
onFocusCapture={(e) => e.stopPropagation()}
>
<Download size={14} />
Download as migration file
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
)}
{onSelectDelete !== undefined && isOwner && (
<>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_ className="gap-x-2" onSelect={() => onSelectDelete()}>
<ContextMenuSeparator />
<ContextMenuItem className="gap-x-2" onSelect={() => onSelectDelete()}>
<Trash size={14} />
Delete query
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
</>
)}
</>
)}
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuContent>
</ContextMenu>
{hasNextPage && typeof element.id === 'string' && isLastItem && (
<div
apps/studio/components/layouts/Tabs/Tabs.tsx
+16 -20
View File
@@ -13,10 +13,10 @@ import { Plus, X } from 'lucide-react'
import { useRouter } from 'next/router'
import {
cn,
ContextMenu_Shadcn_,
ContextMenuContent_Shadcn_,
ContextMenuItem_Shadcn_,
ContextMenuTrigger_Shadcn_,
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
Tabs_Shadcn_,
TabsList_Shadcn_,
TabsTrigger_Shadcn_,
@@ -155,8 +155,8 @@ export const EditorTabs = () => {
strategy={horizontalListSortingStrategy}
>
{editorTabs.map((tab, index) => (
<ContextMenu_Shadcn_ key={tab.id}>
<ContextMenuTrigger_Shadcn_>
<ContextMenu key={tab.id}>
<ContextMenuTrigger>
<SortableTab
key={tab.id}
tab={tab}
@@ -164,22 +164,18 @@ export const EditorTabs = () => {
openTabs={openTabs}
onClose={() => handleClose(tab.id)}
/>
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_>
<ContextMenuItem_Shadcn_ onClick={() => handleClose(tab.id)}>
Close
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onClick={() => handleCloseOthers(tab.id)}>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onClick={() => handleClose(tab.id)}>Close</ContextMenuItem>
<ContextMenuItem onClick={() => handleCloseOthers(tab.id)}>
Close Others
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onClick={() => handleCloseRight(tab.id)}>
</ContextMenuItem>
<ContextMenuItem onClick={() => handleCloseRight(tab.id)}>
Close to the Right
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ onClick={handleCloseAll}>
Close All
</ContextMenuItem_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
</ContextMenuItem>
<ContextMenuItem onClick={handleCloseAll}>Close All</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
))}
</SortableContext>
apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditorRow.tsx
+16 -16
View File
@@ -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 (
<ContextMenu_Shadcn_ modal={false}>
<ContextMenuTrigger_Shadcn_ asChild>
<ContextMenu modal={false}>
<ContextMenuTrigger asChild>
<div>
<TreeViewItem
{...nodeProps}
@@ -98,10 +98,10 @@ export const FileExplorerAndEditorRow = ({
}
/>
</div>
</ContextMenuTrigger_Shadcn_>
</ContextMenuTrigger>
{IS_PLATFORM && (
<ContextMenuContent_Shadcn_ onCloseAutoFocus={(e) => e.stopPropagation()}>
<ContextMenuItem_Shadcn_
<ContextMenuContent onCloseAutoFocus={(e) => e.stopPropagation()}>
<ContextMenuItem
className="gap-x-2"
onSelect={() => {
if (originalId !== null) handleStartRename(originalId)
@@ -110,12 +110,12 @@ export const FileExplorerAndEditorRow = ({
>
<Edit size={14} />
Rename file
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
{files.length > 1 && (
<>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_
<ContextMenuSeparator />
<ContextMenuItem
className="gap-x-2"
onSelect={() => {
if (originalId !== null) {
@@ -126,11 +126,11 @@ export const FileExplorerAndEditorRow = ({
>
<Trash size={14} />
Delete file
</ContextMenuItem_Shadcn_>
</ContextMenuItem>
</>
)}
</ContextMenuContent_Shadcn_>
</ContextMenuContent>
)}
</ContextMenu_Shadcn_>
</ContextMenu>
)
}
apps/studio/tests/components/SQLEditor/Results.test.tsx
+2 -2
View File
@@ -10,9 +10,9 @@ vi.mock('ui', async () => {
const actual = await vi.importActual<typeof import('ui')>('ui')
return {
...actual,
ContextMenu_Shadcn_: (props: any) => {
ContextMenu: (props: any) => {
contextMenuMountCount++
return <actual.ContextMenu_Shadcn_ {...props} />
return <actual.ContextMenu {...props} />
},
}
})
packages/ui/index.tsx
+1 -17
View File
@@ -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'