Skip to content

Commit ce5780a

Browse files
emrberkemrberk
committedMar 19, 2025
remove react-contextmenu & introduce new context menu styling
1 parent cf60d3d commit ce5780a

11 files changed

+345
-245
lines changed
 

‎.pnp.cjs

+212-61
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.yarn/cache/@radix-ui-react-context-menu-npm-2.1.5-7aebbd6208-45400126a3.zip

27.3 KB
Binary file not shown.

‎.yarn/cache/react-contextmenu-npm-2.14.0-53d23b7cab-9824f5f143.zip

-45.2 KB
Binary file not shown.

‎packages/web-console/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@popperjs/core": "2.4.2",
3131
"@questdb/react-components": "workspace:^",
3232
"@questdb/sql-grammar": "1.2.3",
33+
"@radix-ui/react-context-menu": "2.1.5",
3334
"@radix-ui/react-dialog": "^1.0.3",
3435
"@styled-icons/bootstrap": "10.47.0",
3536
"@styled-icons/boxicons-logos": "10.47.0",
@@ -69,7 +70,6 @@
6970
"ramda": "0.27.1",
7071
"react": "17.0.2",
7172
"react-calendar": "^4.0.0",
72-
"react-contextmenu": "2.14.0",
7373
"react-dom": "17.0.2",
7474
"react-highlight-words": "^0.20.0",
7575
"react-hook-form": "7.22.3",

‎packages/web-console/src/components/ContextMenu/ContextMenu.tsx

-46
This file was deleted.

‎packages/web-console/src/components/ContextMenu/MenuItem.tsx

-46
This file was deleted.

‎packages/web-console/src/components/ContextMenu/index.tsx

+58-29
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,58 @@
1-
/*******************************************************************************
2-
* ___ _ ____ ____
3-
* / _ \ _ _ ___ ___| |_| _ \| __ )
4-
* | | | | | | |/ _ \/ __| __| | | | _ \
5-
* | |_| | |_| | __/\__ \ |_| |_| | |_) |
6-
* \__\_\\__,_|\___||___/\__|____/|____/
7-
*
8-
* Copyright (c) 2014-2019 Appsicle
9-
* Copyright (c) 2019-2022 QuestDB
10-
*
11-
* Licensed under the Apache License, Version 2.0 (the "License");
12-
* you may not use this file except in compliance with the License.
13-
* You may obtain a copy of the License at
14-
*
15-
* http://www.apache.org/licenses/LICENSE-2.0
16-
*
17-
* Unless required by applicable law or agreed to in writing, software
18-
* distributed under the License is distributed on an "AS IS" BASIS,
19-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
20-
* See the License for the specific language governing permissions and
21-
* limitations under the License.
22-
*
23-
******************************************************************************/
24-
25-
import ContextMenu from "./ContextMenu"
26-
import MenuItem from "./MenuItem"
27-
import { ContextMenuTrigger } from "react-contextmenu"
28-
29-
export { ContextMenu, ContextMenuTrigger, MenuItem }
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
4+
5+
const StyledContent = styled(ContextMenuPrimitive.Content)`
6+
background-color: #343846; /* vscode-menu-background */
7+
border-radius: 0.5rem;
8+
padding: 0.4rem;
9+
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.36); /* vscode-widget-shadow */
10+
z-index: 9999;
11+
min-width: 160px;
12+
`
13+
14+
const StyledItem = styled(ContextMenuPrimitive.Item)`
15+
font-size: 1.3rem;
16+
height: 2.6rem;
17+
font-family: "system-ui", sans-serif;
18+
cursor: pointer;
19+
color: rgb(248, 248, 242); /* vscode-menu-foreground */
20+
display: flex;
21+
align-items: center;
22+
padding: 0 1.2rem;
23+
border-radius: 0.4rem;
24+
25+
&[data-highlighted] {
26+
background-color: #45475a;
27+
color: rgb(240, 240, 240);
28+
}
29+
`
30+
31+
const IconWrapper = styled.span`
32+
margin-right: 10px;
33+
`
34+
35+
export const ContextMenu = ContextMenuPrimitive.Root
36+
export const ContextMenuTrigger = ContextMenuPrimitive.Trigger
37+
38+
export const ContextMenuContent = React.forwardRef<
39+
HTMLDivElement,
40+
ContextMenuPrimitive.ContextMenuContentProps
41+
>((props, forwardedRef) => (
42+
<ContextMenuPrimitive.Portal data-test="emre">
43+
<StyledContent {...props} ref={forwardedRef} />
44+
</ContextMenuPrimitive.Portal>
45+
))
46+
47+
type MenuItemProps = ContextMenuPrimitive.ContextMenuItemProps & {
48+
icon?: React.ReactNode
49+
}
50+
51+
export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
52+
({ children, icon, ...props }, forwardedRef) => (
53+
<StyledItem {...props} ref={forwardedRef}>
54+
{icon && <IconWrapper>{icon}</IconWrapper>}
55+
{children}
56+
</StyledItem>
57+
)
58+
)

‎packages/web-console/src/scenes/Schema/Table/index.tsx

+41-43
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import React, { useContext, useState } from "react"
2626
import styled from "styled-components"
2727
import { Tree } from "../../../components"
2828
import { TreeNode, TreeNodeRenderParams, Text } from "../../../components"
29-
import { ContextMenu, ContextMenuTrigger, MenuItem } from "../../../components/ContextMenu"
29+
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, MenuItem } from "../../../components/ContextMenu"
3030
import { color } from "../../../utils"
3131
import * as QuestDB from "../../../utils/questdb"
3232
import Row from "../Row"
@@ -188,28 +188,46 @@ const Table = ({
188188
{
189189
name: table_name,
190190
kind: matView ? 'matview' : 'table',
191-
render: ({ toggleOpen, isOpen, isLoading }) => (
192-
<ContextMenuTrigger id={`table-context-menu-${id}`}>
193-
<Title
194-
expanded={isOpen && !isLoading}
195-
kind={matView ? 'matview' : 'table'}
196-
table_id={id}
197-
name={table_name}
198-
baseTable={matViewData?.base_table_name}
199-
onClick={() => toggleOpen()}
200-
isLoading={isLoading}
201-
selectOpen={selectOpen}
202-
selected={selected}
203-
onSelectToggle={onSelectToggle}
204-
partitionBy={partitionBy}
205-
walEnabled={walEnabled}
206-
errors={[
207-
...(matViewData?.view_status === 'invalid' ? [`Materialized view is invalid${matViewData?.invalidation_reason && `: ${matViewData?.invalidation_reason}`}`] : []),
208-
...(walTableData?.suspended ? [`Suspended`] : []),
209-
]}
210-
/>
211-
</ContextMenuTrigger>
212-
),
191+
render: ({ toggleOpen, isOpen, isLoading }) => {
192+
return (
193+
<ContextMenu>
194+
<ContextMenuTrigger>
195+
<Title
196+
expanded={isOpen && !isLoading}
197+
kind={matView ? 'matview' : 'table'}
198+
table_id={id}
199+
name={table_name}
200+
baseTable={matViewData?.base_table_name}
201+
onClick={toggleOpen}
202+
isLoading={isLoading}
203+
selectOpen={selectOpen}
204+
selected={selected}
205+
onSelectToggle={onSelectToggle}
206+
partitionBy={partitionBy}
207+
walEnabled={walEnabled}
208+
errors={[
209+
...(matViewData?.view_status === 'invalid' ? [`Materialized view is invalid${matViewData?.invalidation_reason && `: ${matViewData?.invalidation_reason}`}`] : []),
210+
...(walTableData?.suspended ? [`Suspended`] : []),
211+
]}
212+
/>
213+
</ContextMenuTrigger>
214+
215+
<ContextMenuContent>
216+
<MenuItem onClick={handleCopyQuery} icon={<FileCopy size={14} />}>
217+
Copy schema
218+
</MenuItem>
219+
{walTableData?.suspended && (
220+
<MenuItem
221+
onClick={() => setSuspensionDialogOpen(true)}
222+
icon={<Restart size={14} />}
223+
>
224+
Resume WAL
225+
</MenuItem>
226+
)}
227+
</ContextMenuContent>
228+
</ContextMenu>
229+
)
230+
},
213231
async onOpen({ setChildren }) {
214232
const columns: TreeNode = {
215233
name: "Columns",
@@ -260,26 +278,6 @@ const Table = ({
260278
return (
261279
<>
262280
<Tree root={tree} />
263-
<ContextMenu id={`table-context-menu-${id}`}>
264-
<MenuItem onClick={handleCopyQuery}>
265-
<MenuItemContent data-hook="table-context-menu-copy-schema">
266-
<MenuItemIcon>
267-
<FileCopy />
268-
</MenuItemIcon>
269-
Copy schema
270-
</MenuItemContent>
271-
</MenuItem>
272-
{walTableData?.suspended && (
273-
<MenuItem onClick={() => setSuspensionDialogOpen(true)}>
274-
<MenuItemContent data-hook="table-context-menu-resume-wal">
275-
<MenuItemIcon>
276-
<Restart />
277-
</MenuItemIcon>
278-
Resume WAL
279-
</MenuItemContent>
280-
</MenuItem>
281-
)}
282-
</ContextMenu>
283281
{walTableData?.suspended && (
284282
<SuspensionDialog
285283
walTableData={walTableData}

‎packages/web-console/src/scenes/Schema/VirtualTables/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const VirtualTables: FC<VirtualTablesProps> = ({
127127
return (
128128
<GroupedVirtuoso
129129
groupCounts={groupCounts}
130-
components={{ TopItemList: React.Fragment }}
130+
components={{ TopItemList: ({...props}) => <div {...props} style={{ position: 'unset' }} /> }}
131131
groupContent={index => {
132132
const group = groups[index]
133133

‎packages/web-console/webpack.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ module.exports = {
106106
mode: config.isProduction ? "production" : "development",
107107

108108
resolve: {
109-
extensions: [".ts", ".tsx", ".js"],
109+
alias: {
110+
'react/jsx-runtime': require.resolve('react/jsx-runtime.js'),
111+
},
112+
extensions: ['.tsx', '.ts', '.js'],
110113
symlinks: false,
111114
},
112115

0 commit comments

Comments
 (0)
Failed to load comments.