Skip to content

Commit a00f0b6

Browse files
mjfwebbmjfwebb
committed
wip: update components for ndl v4
1 parent dcf68a9 commit a00f0b6

21 files changed

+179
-197
lines changed

‎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()}>
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/modules/EditorView/EditorTabs.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const EditorTabs = () => {
7070
"data-test-query-editor-tab": tab.title,
7171
}}
7272
key={idx.toString()}
73-
tabId={idx.toString()}
73+
id={idx.toString()}
7474
className={theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"}
7575
>
7676
<div className="flex justify-center items-center">
@@ -80,14 +80,17 @@ export const EditorTabs = () => {
8080

8181
{useStore.getState().tabs.length > 1 && (
8282
<XMarkIconOutline
83-
data-test-close-icon-query-editor-tab
8483
className={classNames(
8584
"h-5 w-5 ml-2",
8685
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "hover:bg-neutral-50"
8786
)}
88-
aria-label="Close Icon"
89-
onClick={(event) => {
90-
handleCloseTab(event, idx);
87+
htmlAttributes={{
88+
"data-test-close-icon-query-editor-tab": true,
89+
"aria-label": "Close Icon",
90+
91+
onClick: (event) => {
92+
handleCloseTab(event, idx);
93+
},
9194
}}
9295
/>
9396
)}
@@ -100,16 +103,18 @@ export const EditorTabs = () => {
100103
"data-test-new-query-editor-tab": "true",
101104
}}
102105
key="new"
103-
tabId="new"
106+
id="new"
104107
className="vertical-align-bottom"
105108
>
106109
<PlusIconOutline
107110
className={classNames(
108111
"h-5 w-5",
109112
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "text-neutral-10 hover:bg-neutral-50"
110113
)}
111-
aria-label="Add tab Icon"
112-
onClick={handleAddTab}
114+
htmlAttributes={{
115+
"aria-label": "Add tab Icon",
116+
onClick: handleAddTab,
117+
}}
113118
/>
114119
</Tabs.Tab>
115120
</Tabs>

‎src/modules/EditorView/EditorView.tsx‎

Lines changed: 1 addition & 1 deletion
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: {

‎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/HelpDrawer/Resources.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ const ResourceLinksBlock = ({ listBlockTitle, links, screen }: ResourceLinksBloc
157157
tabIndex: 0,
158158
"data-canny-changelog": "true",
159159
}}
160-
>
160+
type="internal">
161161
<p className="p-0 m-0">{link.label}</p>
162162
</TextLink>
163163
</div>

‎src/modules/Login/FormInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
* limitations under the License.
1818
*/
1919

20-
import type { TextInputProps } from "@neo4j-ndl/react";
2120
import { TextInput } from "@neo4j-ndl/react";
21+
import type { ComponentProps } from "react";
2222

23-
export const FormInput = (props: TextInputProps) => {
23+
export const FormInput = (props: ComponentProps<typeof TextInput>) => {
2424
return <TextInput className="w-full" size="large" aria-label={props.htmlAttributes?.name} isFluid {...props} />;
2525
};

‎src/modules/Login/Login.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
import { useCallback, useContext, useState } from "react";
2121

22-
import { Banner, Button, Tooltip } from "@neo4j-ndl/react";
22+
import { Banner, FilledButton, Tooltip } from "@neo4j-ndl/react";
2323
import { ExclamationTriangleIconOutline } from "@neo4j-ndl/react/icons";
2424
import type { JSX } from "react";
2525

@@ -82,14 +82,10 @@ export const Login = () => {
8282
<h2 className="h2 text-3xl text-center mt-16 mb-8">Neo4j GraphQL Toolbox</h2>
8383

8484
{error && (
85-
<Banner
86-
className="mb-8"
87-
title="Neo4j Error"
88-
description={error}
89-
hasIcon
90-
type="danger"
91-
isCloseable={false}
92-
/>
85+
<Banner className="mb-8" hasIcon variant="danger" isCloseable={false}>
86+
<Banner.Header>Neo4j Error</Banner.Header>
87+
<Banner.Description>{error}</Banner.Description>
88+
</Banner>
9389
)}
9490

9591
<form onSubmit={onSubmit} className="flex flex-col items-center gap-4 mt-auto mb-24">
@@ -154,19 +150,18 @@ export const Login = () => {
154150
isDisabled={loading}
155151
/>
156152

157-
<Button
153+
<FilledButton
158154
htmlAttributes={{
159155
"data-test-login-button": "true",
160156
}}
161157
className="w-60 mt-8"
162-
fill="filled"
163158
type="submit"
164159
size="large"
165160
isLoading={loading}
166161
isDisabled={loading || !url || !username || !password}
167162
>
168163
Connect
169-
</Button>
164+
</FilledButton>
170165
</form>
171166
</div>
172167
</div>

‎src/modules/Main/Main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const Main = () => {
9292
return (
9393
<div className="flex">
9494
<div className="flex w-full h-full flex-col">
95-
<Banner />
95+
<Banner></Banner>
9696
<Login />
9797
</div>
9898
</div>
@@ -104,7 +104,7 @@ export const Main = () => {
104104
<EditorContextProvider>
105105
<StorageContextProvider>
106106
<NeedleThemeProvider theme="dark">
107-
<Banner />
107+
<Banner></Banner>
108108
<TopBar />
109109
</NeedleThemeProvider>
110110
<ViewSelector hasSchema={!!schema} />

‎src/modules/SchemaView/Favorites/DeleteFavoritesDialog.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
* limitations under the License.
1818
*/
1919

20-
import { Button, Dialog } from "@neo4j-ndl/react";
20+
import { Dialog, FilledButton, OutlinedButton } from "@neo4j-ndl/react";
2121

2222
interface DeleteFavoritesDialogProps {
2323
showConfirm: boolean;
@@ -31,22 +31,22 @@ export const DeleteFavoritesDialog = ({
3131
deleteSelectedFavorites,
3232
}: DeleteFavoritesDialogProps) => {
3333
return (
34-
<Dialog isOpen={showConfirm} ndl-id="default-menu" type="danger">
34+
<Dialog isOpen={showConfirm} ndl-id="default-menu" variant="danger">
3535
<Dialog.Header>Delete selected favorites?</Dialog.Header>
3636
<Dialog.Content>Deleting saved favorites can not be undone.</Dialog.Content>
3737
<Dialog.Actions>
38-
<Button color="neutral" fill="outlined" onClick={() => setShowConfirm(false)} size="large">
38+
<OutlinedButton variant="neutral" onClick={() => setShowConfirm(false)} size="large">
3939
Cancel
40-
</Button>
41-
<Button
40+
</OutlinedButton>
41+
<FilledButton
4242
onClick={() => {
4343
deleteSelectedFavorites();
4444
setShowConfirm(false);
4545
}}
4646
size="large"
4747
>
4848
Delete
49-
</Button>
49+
</FilledButton>
5050
</Dialog.Actions>
5151
</Dialog>
5252
);

0 commit comments

Comments
 (0)