Skip to content

Commit 3ca1b9c

Browse files
renovate[bot]mjfwebb
renovate[bot]
and
mjfwebb
authored
fix(deps): update neo4j-ndl to v4 (major) (#853)
* fix(deps): update neo4j-ndl to v4 * wip: update components for ndl v4 * fix: update styles for ndl v4 * fix: vertical-drag-bar * test: fix failing e2e tests --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Webb <[email protected]>
1 parent 8f2176c commit 3ca1b9c

27 files changed

+3651
-1805
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@
5858
"@graphiql/react": "0.32.1",
5959
"@graphiql/toolkit": "0.11.3",
6060
"@mjfwebb/thememirror": "2.0.2",
61-
"@neo4j-ndl/base": "3.7.36",
62-
"@neo4j-ndl/react": "3.9.24",
61+
"@neo4j-ndl/base": "4.2.1",
62+
"@neo4j-ndl/react": "4.2.6",
6363
"@neo4j/graphql": "7.3.2",
6464
"@neo4j/introspector": "5.0.1",
6565
"@tanstack/react-table": "8.21.3",

‎pnpm-lock.yaml‎

Lines changed: 3426 additions & 1565 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ViewSelector.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,32 +36,30 @@ export const ViewSelector = ({ hasSchema }: Props) => {
3636
};
3737

3838
return (
39-
<>
40-
<Tabs className="h-12 pl-4" fill="underline" onChange={handleOnScreenChange} value={screen.view.toString()}>
41-
<Tabs.Tab
42-
htmlAttributes={{
43-
"data-test-view-selector-type-defs": "true",
44-
}}
45-
tabId={Screen.TYPEDEFS.toString()}
46-
>
47-
Type definitions
48-
</Tabs.Tab>
49-
<Tooltip placement="right" type="simple">
50-
<Tooltip.Trigger>
51-
<Tabs.Tab
52-
htmlAttributes={{
53-
"data-test-view-selector-editor": "true",
54-
}}
55-
tabId={Screen.EDITOR.toString()}
56-
as="div"
57-
isDisabled={!hasSchema}
58-
>
59-
Query editor
60-
</Tabs.Tab>
61-
</Tooltip.Trigger>
62-
{!hasSchema && <Tooltip.Content>Build the schema to use the Query editor</Tooltip.Content>}
63-
</Tooltip>
64-
</Tabs>
65-
</>
39+
<Tabs fill="underline" onChange={handleOnScreenChange} value={screen.view.toString()} className="pt-3">
40+
<Tabs.Tab
41+
htmlAttributes={{
42+
"data-test-view-selector-type-defs": "true",
43+
}}
44+
id={Screen.TYPEDEFS.toString()}
45+
>
46+
Type definitions
47+
</Tabs.Tab>
48+
<Tooltip placement="right" type="simple">
49+
<Tooltip.Trigger>
50+
<Tabs.Tab
51+
htmlAttributes={{
52+
"data-test-view-selector-editor": "true",
53+
}}
54+
id={Screen.EDITOR.toString()}
55+
as="div"
56+
isDisabled={!hasSchema}
57+
>
58+
Query editor
59+
</Tabs.Tab>
60+
</Tooltip.Trigger>
61+
{!hasSchema && <Tooltip.Content>Build the schema to use the Query editor</Tooltip.Content>}
62+
</Tooltip>
63+
</Tabs>
6664
);
6765
};

‎src/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
--color-dracula-dark: #282A36;
99
}
1010

11+
#root {
12+
height: 100%;
13+
}
14+
1115
/* ----------------------*/
1216

1317
/* Login window */

‎src/modules/AppSettings/AppSettings.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -65,20 +65,22 @@ export const AppSettings = ({ onClickClose }: Props) => {
6565
<div>
6666
<span className="h6">Editors</span>
6767
<div className="pt-3">
68-
<Radio
69-
htmlAttributes={{ id: Theme.LIGHT.toString() }}
70-
className="cursor-pointer"
71-
label="Light theme"
72-
isChecked={theme.theme === Theme.LIGHT}
73-
onChange={handleOnChangeEditorTheme}
74-
/>
75-
<Radio
76-
htmlAttributes={{ id: Theme.DARK.toString() }}
77-
className="cursor-pointer"
78-
label="Dark theme"
79-
isChecked={theme.theme === Theme.DARK}
80-
onChange={handleOnChangeEditorTheme}
81-
/>
68+
<div className="flex flex-col">
69+
<Radio
70+
htmlAttributes={{ id: Theme.LIGHT.toString() }}
71+
className="cursor-pointer"
72+
label="Light theme"
73+
isChecked={theme.theme === Theme.LIGHT}
74+
onChange={handleOnChangeEditorTheme}
75+
/>
76+
<Radio
77+
htmlAttributes={{ id: Theme.DARK.toString() }}
78+
className="cursor-pointer"
79+
label="Dark theme"
80+
isChecked={theme.theme === Theme.DARK}
81+
onChange={handleOnChangeEditorTheme}
82+
/>
83+
</div>
8284
<div className="mt-3">
8385
<Checkbox
8486
htmlAttributes={{

‎src/modules/EditorView/EditorTabs.tsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const EditorTabs = () => {
4646
tracking.trackAddQueryTab({ screen: Screen.EDITOR });
4747
};
4848

49-
const handleCloseTab = (event: React.MouseEvent<SVGSVGElement, MouseEvent>, idx: number) => {
49+
const handleCloseTab = (event: React.MouseEvent<HTMLElement, MouseEvent>, idx: number) => {
5050
event.stopPropagation();
5151
closeTab(idx);
5252
tracking.trackDeleteQueryTab({ screen: Screen.EDITOR });
@@ -59,58 +59,57 @@ export const EditorTabs = () => {
5959
value={useStore.getState().activeTabIndex.toString()}
6060
onChange={handleTabsChange}
6161
className={classNames(
62-
"w-full h-12 pt-2 px-1 mb-[0.1rem] overflow-x-auto whitespace-nowrap rounded-t-xl border-b-0 z-0",
62+
"w-full pt-2 px-1 overflow-hidden whitespace-nowrap rounded-t-xl border-b-0 z-0",
6363
theme.theme === Theme.LIGHT ? "bg-neutral-10" : "bg-draculaDark"
6464
)}
6565
>
6666
{useStore.getState().tabs?.map((tab, idx) => {
6767
return (
6868
<Tabs.Tab
69-
htmlAttributes={{
70-
"data-test-query-editor-tab": tab.title,
71-
}}
7269
key={idx.toString()}
73-
tabId={idx.toString()}
70+
id={idx.toString()}
7471
className={theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"}
7572
>
76-
<div className="flex justify-center items-center">
73+
<div className="flex justify-center items-center" data-test-query-editor-tab={tab.title}>
7774
<span className="truncate" style={{ maxWidth: "7rem" }} title={tab.title}>
7875
{tab.title}
7976
</span>
8077

8178
{useStore.getState().tabs.length > 1 && (
82-
<XMarkIconOutline
83-
data-test-close-icon-query-editor-tab
84-
className={classNames(
85-
"h-5 w-5 ml-2",
86-
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "hover:bg-neutral-50"
87-
)}
79+
<button
80+
data-test-close-icon-query-editor-tab="true"
8881
aria-label="Close Icon"
8982
onClick={(event) => {
9083
handleCloseTab(event, idx);
9184
}}
92-
/>
85+
className="flex items-center bg-transparent border-0 p-0 cursor-pointer"
86+
>
87+
<XMarkIconOutline
88+
className={classNames(
89+
"h-5 w-5 ml-2",
90+
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "hover:bg-neutral-50"
91+
)}
92+
/>
93+
</button>
9394
)}
9495
</div>
9596
</Tabs.Tab>
9697
);
9798
})}
98-
<Tabs.Tab
99-
htmlAttributes={{
100-
"data-test-new-query-editor-tab": "true",
101-
}}
102-
key="new"
103-
tabId="new"
104-
className="vertical-align-bottom"
105-
>
106-
<PlusIconOutline
107-
className={classNames(
108-
"h-5 w-5",
109-
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "text-neutral-10 hover:bg-neutral-50"
110-
)}
99+
<Tabs.Tab key="new" id="new" className="vertical-align-bottom">
100+
<button
101+
data-test-new-query-editor-tab="true"
111102
aria-label="Add tab Icon"
112103
onClick={handleAddTab}
113-
/>
104+
className="flex items-center bg-transparent border-0 p-0 cursor-pointer"
105+
>
106+
<PlusIconOutline
107+
className={classNames(
108+
"h-5 w-5",
109+
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "text-neutral-10 hover:bg-neutral-50"
110+
)}
111+
/>
112+
</button>
114113
</Tabs.Tab>
115114
</Tabs>
116115
);

‎src/modules/EditorView/EditorView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const EditorView = ({ schema }: Props) => {
129129
buttonStyle: {
130130
display: "block",
131131
fontWeight: "bold",
132-
backgroundColor: tokens.colors.neutral[40],
132+
backgroundColor: tokens.palette.neutral[40],
133133
margin: "5px 5px 5px 10px",
134134
},
135135
explorerActionsStyle: {
@@ -158,7 +158,7 @@ export const EditorView = ({ schema }: Props) => {
158158
</div>
159159
) : null}
160160

161-
<div className="w-content-container h-content-container flex flex-col justify-start p-4">
161+
<div className="w-content-container flex flex-col justify-start p-4">
162162
<EditorTabs />
163163
<Grid
164164
queryEditor={

‎src/modules/EditorView/QueryEditor.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import type { ViewUpdate } from "@codemirror/view";
3535
import { drawSelection, dropCursor, highlightSpecialChars, keymap, lineNumbers } from "@codemirror/view";
3636
import { dracula, tomorrow } from "@mjfwebb/thememirror";
3737
import { tokens } from "@neo4j-ndl/base";
38-
import { Button, IconButton } from "@neo4j-ndl/react";
38+
import { CleanIconButton, OutlinedButton } from "@neo4j-ndl/react";
3939
import { PlayIconOutline } from "@neo4j-ndl/react/icons";
4040
import classNames from "classnames";
4141
import { graphql as graphqlExtension } from "cm6-graphql";
@@ -201,37 +201,35 @@ export const QueryEditor = ({ loading, onSubmit, schema }: Props) => {
201201
extension={Extension.GRAPHQL}
202202
rightButtons={
203203
<>
204-
<Button
204+
<OutlinedButton
205205
aria-label="Prettify code"
206206
className={classNames(
207207
"mr-2",
208208
theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"
209209
)}
210-
color="neutral"
211-
fill="outlined"
210+
variant="neutral"
212211
size="small"
213212
onClick={formatTheCode}
214213
isDisabled={loading}
215214
>
216215
Prettify
217-
</Button>
218-
<IconButton
216+
</OutlinedButton>
217+
<CleanIconButton
219218
htmlAttributes={{
220219
"data-test-editor-query-button": "true",
221220
}}
222-
ariaLabel="Execute query"
221+
description="Execute query"
223222
style={{ height: "1.7rem" }}
224223
className={classNames(theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark")}
225-
isClean
226224
onClick={() => onSubmit()}
227225
isDisabled={!schema || loading}
228226
>
229227
<PlayIconOutline
230228
style={{
231-
color: tokens.colors.baltic[50],
229+
color: tokens.palette.baltic[50],
232230
}}
233231
/>
234-
</IconButton>
232+
</CleanIconButton>
235233
</>
236234
}
237235
borderRadiusTop={false}

‎src/modules/EditorView/VariablesEditor.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { Annotation, Prec, StateEffect } from "@codemirror/state";
2727
import type { ViewUpdate } from "@codemirror/view";
2828
import { drawSelection, dropCursor, EditorView, highlightSpecialChars, keymap, lineNumbers } from "@codemirror/view";
2929
import { dracula, tomorrow } from "@mjfwebb/thememirror";
30-
import { Button } from "@neo4j-ndl/react";
30+
import { OutlinedButton } from "@neo4j-ndl/react";
3131
import classNames from "classnames";
3232
import { useMount } from "react-use";
3333

@@ -162,21 +162,20 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
162162
name={fileName}
163163
borderRadiusTop={borderRadiusTop}
164164
rightButtons={
165-
<Button
165+
<OutlinedButton
166166
aria-label="Prettify code"
167167
data-testid="variables-editor-prettify-button"
168168
className={classNames(
169169
"mr-2",
170170
theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"
171171
)}
172-
color="neutral"
173-
fill="outlined"
172+
variant="neutral"
174173
size="small"
175174
onClick={formatTheCode}
176175
isDisabled={loading}
177176
>
178177
Prettify
179-
</Button>
178+
</OutlinedButton>
180179
}
181180
/>
182181
<div

‎src/modules/EditorView/grid/grid.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
bottom: 0;
44
right: 0;
55
width: 15px;
6+
height: 100%;
67
background-color: transparent;
78
background-repeat: no-repeat;
89
background-origin: content-box;
@@ -15,6 +16,7 @@
1516
left: 0;
1617
top: 0;
1718
height: 15px;
19+
width: 100%;
1820
background-color: transparent;
1921
background-repeat: no-repeat;
2022
background-origin: content-box;

0 commit comments

Comments
 (0)