ConnectionModal Component

Light

Dark

The ConnectionModal component is a React component designed to handle the connection setup to a Neo4j database. It provides a user-friendly interface for entering database connection details and displays feedback on the connection attempt. This component is particularly useful in applications requiring a dynamic connection to a Neo4j database.

Link to the live preview

Link to the component code

The connection modal also comes with a dropzone for the user to upload a file containing the connection details. The file can be either an Aura credential file you downloaded when creating an instance, or your own file containing the connection details.

The accepted file format are either .env or .txt file with the following structure:

Name Description Example

Name	Description	Example
`NEO4J_URI`	The URI of the Neo4j database. Ideally you would have the protocol, hostname and port, but all are optional and will be defaulted if not present.	neo4j+s://abcd1234.databases.neo4j.io:7687
`NEO4J_USERNAME`	Your neo4j username	neo4j
`NEO4J_PASSWORD`	Your neo4j password	password
`NEO4J_DATABASE`	The database name	neo4j

NEO4J_URI

The URI of the Neo4j database. Ideally you would have the protocol, hostname and port, but all are optional and will be defaulted if not present.

neo4j+s://abcd1234.databases.neo4j.io:7687

NEO4J_USERNAME

Your neo4j username

neo4j

NEO4J_PASSWORD

Your neo4j password

password

NEO4J_DATABASE

The database name

neo4j

Example of a local.env file:

NEO4J_URI=neo4j://localhost:7687
NEO4J_USERNAME=neo4j
NEO4J_PASSWORD=password
NEO4J_DATABASE=neo4j

Pre-requisite

Ensure you have the @neo4j-ndl library installed in your project to use this ConnectionModal component.
Ensure you also import the utils/Driver.tsx as it is used for creating the driver connection to the Neo4j Database.

Usage

To integrate the ConnectionModal component into your application, follow these steps:

Import the component:

import ConnectionModal from './path/to/ConnectionModal';

Add state to your parent component to control the modal’s visibility and to handle the connection status:

const [isModalOpen, setIsModalOpen] = useState(false);
const [connectionStatus, setConnectionStatus] = useState(false);

Render the ConnectionModal component with the required props:

<ConnectionModal
  open={isModalOpen}
  setOpenConnection={setIsModalOpen}
  setConnectionStatus={setConnectionStatus}
  message={{ type: 'info', content: 'Please enter your database connection details.' }}
/>

Component Props

The ConnectionModal component accepts the following props:

Name Description Required

Name	Description	Required
`open`	A boolean state indicating whether the modal is open or closed.	Yes
`setOpenConnection`	A function to update the `open` state above.	Yes
`setConnectionStatus`	A function to update the parent component’s connection status based on the success or failure of the connection attempt.	Yes
`message?`	An optional `Message` object containing a `type` for styling the banner (success, info, warning, danger, neutral) and a `content` string for the message text.	No

open

A boolean state indicating whether the modal is open or closed.

Yes

setOpenConnection

A function to update the open state above.

Yes

setConnectionStatus

A function to update the parent component’s connection status based on the success or failure of the connection attempt.

Yes

message?

An optional Message object containing a type for styling the banner (success, info, warning, danger, neutral) and a content string for the message text.

(Optionnal) Message object structure:

{
  type: string; // success | info | warning | danger | neutral
  content: string; // The message content
}

Key components

Handling State

The component uses the useState hook to manage local state for each connection parameter (protocol, hostname, port, etc.) and the connection message to provide feedback.

Submitting the Connection Details

Upon submitting the form:

It constructs the connection URI using the selected protocol, hostname, and port.
It calls setDriver to attempt the database connection.
Based on the success or failure of setDriver, it updates the connection status and potentially closes the modal or displays an error message.