Skip to content

fix(deps): update neo4j-ndl to v4 (major) #853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

fix(deps): update neo4j-ndl to v4 (major) #853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dcf68a9
fix(deps): update neo4j-ndl to v4
renovate[bot] Nov 3, 2025
a00f0b6
wip: update components for ndl v4
mjfwebb Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
"@graphiql/react": "0.32.1",
"@graphiql/toolkit": "0.11.3",
"@mjfwebb/thememirror": "2.0.2",
"@neo4j-ndl/base": "3.7.36",
"@neo4j-ndl/react": "3.9.24",
"@neo4j-ndl/base": "4.0.6",
"@neo4j-ndl/react": "4.0.15",
"@neo4j/graphql": "7.3.0",
"@neo4j/introspector": "5.0.1",
"@tanstack/react-table": "8.21.3",
Expand Down
2,643 changes: 1,167 additions & 1,476 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

52 changes: 25 additions & 27 deletions src/components/ViewSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,32 +36,30 @@ export const ViewSelector = ({ hasSchema }: Props) => {
};

return (
<>
<Tabs className="h-12 pl-4" fill="underline" onChange={handleOnScreenChange} value={screen.view.toString()}>
<Tabs.Tab
htmlAttributes={{
"data-test-view-selector-type-defs": "true",
}}
tabId={Screen.TYPEDEFS.toString()}
>
Type definitions
</Tabs.Tab>
<Tooltip placement="right" type="simple">
<Tooltip.Trigger>
<Tabs.Tab
htmlAttributes={{
"data-test-view-selector-editor": "true",
}}
tabId={Screen.EDITOR.toString()}
as="div"
isDisabled={!hasSchema}
>
Query editor
</Tabs.Tab>
</Tooltip.Trigger>
{!hasSchema && <Tooltip.Content>Build the schema to use the Query editor</Tooltip.Content>}
</Tooltip>
</Tabs>
</>
<Tabs fill="underline" onChange={handleOnScreenChange} value={screen.view.toString()}>
<Tabs.Tab
htmlAttributes={{
"data-test-view-selector-type-defs": "true",
}}
id={Screen.TYPEDEFS.toString()}
>
Type definitions
</Tabs.Tab>
<Tooltip placement="right" type="simple">
<Tooltip.Trigger>
<Tabs.Tab
htmlAttributes={{
"data-test-view-selector-editor": "true",
}}
id={Screen.EDITOR.toString()}
as="div"
isDisabled={!hasSchema}
>
Query editor
</Tabs.Tab>
</Tooltip.Trigger>
{!hasSchema && <Tooltip.Content>Build the schema to use the Query editor</Tooltip.Content>}
</Tooltip>
</Tabs>
);
};
21 changes: 13 additions & 8 deletions src/modules/EditorView/EditorTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const EditorTabs = () => {
"data-test-query-editor-tab": tab.title,
}}
key={idx.toString()}
tabId={idx.toString()}
id={idx.toString()}
className={theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"}
>
<div className="flex justify-center items-center">
Expand All @@ -80,14 +80,17 @@ export const EditorTabs = () => {

{useStore.getState().tabs.length > 1 && (
<XMarkIconOutline
data-test-close-icon-query-editor-tab
className={classNames(
"h-5 w-5 ml-2",
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "hover:bg-neutral-50"
)}
aria-label="Close Icon"
onClick={(event) => {
handleCloseTab(event, idx);
htmlAttributes={{
"data-test-close-icon-query-editor-tab": true,
"aria-label": "Close Icon",

onClick: (event) => {
handleCloseTab(event, idx);
},
}}
/>
)}
Expand All @@ -100,16 +103,18 @@ export const EditorTabs = () => {
"data-test-new-query-editor-tab": "true",
}}
key="new"
tabId="new"
id="new"
className="vertical-align-bottom"
>
<PlusIconOutline
className={classNames(
"h-5 w-5",
theme.theme === Theme.LIGHT ? "hover:bg-neutral-10" : "text-neutral-10 hover:bg-neutral-50"
)}
aria-label="Add tab Icon"
onClick={handleAddTab}
htmlAttributes={{
"aria-label": "Add tab Icon",
onClick: handleAddTab,
}}
/>
</Tabs.Tab>
</Tabs>
Expand Down
2 changes: 1 addition & 1 deletion src/modules/EditorView/EditorView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const EditorView = ({ schema }: Props) => {
buttonStyle: {
display: "block",
fontWeight: "bold",
backgroundColor: tokens.colors.neutral[40],
backgroundColor: tokens.palette.neutral[40],
margin: "5px 5px 5px 10px",
},
explorerActionsStyle: {
Expand Down
18 changes: 8 additions & 10 deletions src/modules/EditorView/QueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import type { ViewUpdate } from "@codemirror/view";
import { drawSelection, dropCursor, highlightSpecialChars, keymap, lineNumbers } from "@codemirror/view";
import { dracula, tomorrow } from "@mjfwebb/thememirror";
import { tokens } from "@neo4j-ndl/base";
import { Button, IconButton } from "@neo4j-ndl/react";
import { CleanIconButton, OutlinedButton } from "@neo4j-ndl/react";
import { PlayIconOutline } from "@neo4j-ndl/react/icons";
import classNames from "classnames";
import { graphql as graphqlExtension } from "cm6-graphql";
Expand Down Expand Up @@ -201,37 +201,35 @@ export const QueryEditor = ({ loading, onSubmit, schema }: Props) => {
extension={Extension.GRAPHQL}
rightButtons={
<>
<Button
<OutlinedButton
aria-label="Prettify code"
className={classNames(
"mr-2",
theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"
)}
color="neutral"
fill="outlined"
variant="neutral"
size="small"
onClick={formatTheCode}
isDisabled={loading}
>
Prettify
</Button>
<IconButton
</OutlinedButton>
<CleanIconButton
htmlAttributes={{
"data-test-editor-query-button": "true",
}}
ariaLabel="Execute query"
description="Execute query"
style={{ height: "1.7rem" }}
className={classNames(theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark")}
isClean
onClick={() => onSubmit()}
isDisabled={!schema || loading}
>
<PlayIconOutline
style={{
color: tokens.colors.baltic[50],
color: tokens.palette.baltic[50],
}}
/>
</IconButton>
</CleanIconButton>
</>
}
borderRadiusTop={false}
Expand Down
9 changes: 4 additions & 5 deletions src/modules/EditorView/VariablesEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { Annotation, Prec, StateEffect } from "@codemirror/state";
import type { ViewUpdate } from "@codemirror/view";
import { drawSelection, dropCursor, EditorView, highlightSpecialChars, keymap, lineNumbers } from "@codemirror/view";
import { dracula, tomorrow } from "@mjfwebb/thememirror";
import { Button } from "@neo4j-ndl/react";
import { OutlinedButton } from "@neo4j-ndl/react";
import classNames from "classnames";
import { useMount } from "react-use";

Expand Down Expand Up @@ -162,21 +162,20 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
name={fileName}
borderRadiusTop={borderRadiusTop}
rightButtons={
<Button
<OutlinedButton
aria-label="Prettify code"
data-testid="variables-editor-prettify-button"
className={classNames(
"mr-2",
theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"
)}
color="neutral"
fill="outlined"
variant="neutral"
size="small"
onClick={formatTheCode}
isDisabled={loading}
>
Prettify
</Button>
</OutlinedButton>
}
/>
<div
Expand Down
2 changes: 1 addition & 1 deletion src/modules/HelpDrawer/Resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const ResourceLinksBlock = ({ listBlockTitle, links, screen }: ResourceLinksBloc
tabIndex: 0,
"data-canny-changelog": "true",
}}
>
type="internal">
Copy link

@github-actions github-actions bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚫 [eslint] <prettier/prettier> reported by reviewdog 🐶
Insert ⏎····································

Suggested change
type="internal">
type="internal"
>

<p className="p-0 m-0">{link.label}</p>
</TextLink>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/modules/Login/FormInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
* limitations under the License.
*/

import type { TextInputProps } from "@neo4j-ndl/react";
import { TextInput } from "@neo4j-ndl/react";
import type { ComponentProps } from "react";

export const FormInput = (props: TextInputProps) => {
export const FormInput = (props: ComponentProps<typeof TextInput>) => {
return <TextInput className="w-full" size="large" aria-label={props.htmlAttributes?.name} isFluid {...props} />;
};
19 changes: 7 additions & 12 deletions src/modules/Login/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

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

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

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

{error && (
<Banner
className="mb-8"
title="Neo4j Error"
description={error}
hasIcon
type="danger"
isCloseable={false}
/>
<Banner className="mb-8" hasIcon variant="danger" isCloseable={false}>
<Banner.Header>Neo4j Error</Banner.Header>
<Banner.Description>{error}</Banner.Description>
</Banner>
)}

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

<Button
<FilledButton
htmlAttributes={{
"data-test-login-button": "true",
}}
className="w-60 mt-8"
fill="filled"
type="submit"
size="large"
isLoading={loading}
isDisabled={loading || !url || !username || !password}
>
Connect
</Button>
</FilledButton>
</form>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/modules/Main/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const Main = () => {
return (
<div className="flex">
<div className="flex w-full h-full flex-col">
<Banner />
<Banner></Banner>
<Login />
</div>
</div>
Expand All @@ -104,7 +104,7 @@ export const Main = () => {
<EditorContextProvider>
<StorageContextProvider>
<NeedleThemeProvider theme="dark">
<Banner />
<Banner></Banner>
<TopBar />
</NeedleThemeProvider>
<ViewSelector hasSchema={!!schema} />
Expand Down
12 changes: 6 additions & 6 deletions src/modules/SchemaView/Favorites/DeleteFavoritesDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* limitations under the License.
*/

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

interface DeleteFavoritesDialogProps {
showConfirm: boolean;
Expand All @@ -31,22 +31,22 @@ export const DeleteFavoritesDialog = ({
deleteSelectedFavorites,
}: DeleteFavoritesDialogProps) => {
return (
<Dialog isOpen={showConfirm} ndl-id="default-menu" type="danger">
<Dialog isOpen={showConfirm} ndl-id="default-menu" variant="danger">
<Dialog.Header>Delete selected favorites?</Dialog.Header>
<Dialog.Content>Deleting saved favorites can not be undone.</Dialog.Content>
<Dialog.Actions>
<Button color="neutral" fill="outlined" onClick={() => setShowConfirm(false)} size="large">
<OutlinedButton variant="neutral" onClick={() => setShowConfirm(false)} size="large">
Cancel
</Button>
<Button
</OutlinedButton>
<FilledButton
onClick={() => {
deleteSelectedFavorites();
setShowConfirm(false);
}}
size="large"
>
Delete
</Button>
</FilledButton>
</Dialog.Actions>
</Dialog>
);
Expand Down
9 changes: 4 additions & 5 deletions src/modules/SchemaView/Favorites/DragHandle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,21 @@

import { forwardRef } from "react";

import { IconButton } from "@neo4j-ndl/react";
import { CleanIconButton } from "@neo4j-ndl/react";
import { DragIcon } from "@neo4j-ndl/react/icons";

export const DragHandle = forwardRef<HTMLButtonElement>(function DragHandle(props, ref) {
const { ...rest } = props;

return (
<IconButton
ariaLabel="Reorder favorite snippet"
<CleanIconButton
description="Reorder favorite snippet"
ref={ref}
isClean
size="small"
style={{ cursor: "grab" }}
{...rest}
>
<DragIcon />
</IconButton>
</CleanIconButton>
);
});
Loading
Loading