[Component] New Cypher Block

.gitignore

@@ -133,3 +133,5 @@ package-lock.json
 docs/build
 vite.config.ts
 yarn.lock
+
+.early.coverage

@types/react-codemirror.d.ts

@@ -0,0 +1,5 @@
+declare module '@neo4j-cypher/react-codemirror' {
+    import { ComponentType } from 'react';
+
+    export const CypherEditor: ComponentType<any>;
+  }

package.json

@@ -11,6 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@neo4j-cypher/react-codemirror": "^1.0.4",
+    "@neo4j-devtools/word-color": "^0.0.8",
     "@neo4j-ndl/base": "^3.0.14",
     "@neo4j-ndl/react": "^3.0.24",
     "@neo4j-nvl/react": "^0.3.6",

src/App.tsx

@@ -19,6 +19,7 @@ import messagesData from './templates/shared/assets/ChatbotMessages.json';
 import ConnectionModal from './templates/shared/components/ConnectionModal';
 import Header from './templates/shared/components/Header';
 import User from './templates/shared/components/User';
+import CypherBlock from './templates/shared/components/CypherBlock';
 
 import { FileContextProvider } from './context/connectionFile';
 
@@ -59,6 +60,21 @@ function App() {
           />
           <Route path='/user-preview' element={<User />} />
           <Route path='/cards-preview' element={<DemoCards />} />
+          <Route
+            path='/cypherblock-preview'
+            element={
+
+
+              <CypherBlock
+                //cypherEditorEnabled={true}
+                neo4jConnection='needleStarterKit-neo4j.connection'
+                initialQuery='MATCH (a)-[r]-(b) RETURN a, r, b'
+                limitResultSet={1000}
+              />
+
+
+            }
+          />
           <Route path='*' element={<PageNotFound />} />
         </Routes>
       </ThemeWrapper>

src/landingPage/categories/Component.tsx

@@ -60,6 +60,16 @@ export default function Component() {
       }/src/templates/shared/components/Card.tsx`,
       previewLink: '/cards-preview',
     },
+    {
+      title: 'CypherBlock',
+      description:
+        'xxx',
+      image: colorMode === 'dark' ? CardImgDark : CardImgLight,
+      sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
+        import.meta.env.PACKAGE_VERSION
+      }/src/templates/shared/components/Card.tsx`,
+      previewLink: '/cypherblock-preview',
+    }
   ];
 
   return (

src/templates/foundation/Content.tsx

@@ -3,6 +3,7 @@ import { Button, Label, Typography } from '@neo4j-ndl/react';
 
 import { setDriver, disconnect } from '../shared/utils/Driver';
 import ConnectionModal from '../shared/components/ConnectionModal';
+import { Driver } from 'neo4j-driver';
 
 export default function Content() {
   const [init, setInit] = useState<boolean>(false);
@@ -14,8 +15,8 @@ export default function Content() {
       let session = localStorage.getItem('needleStarterKit-neo4j.connection');
       if (session) {
         let neo4jConnection = JSON.parse(session);
-        setDriver(neo4jConnection.uri, neo4jConnection.user, neo4jConnection.password).then((isSuccessful: boolean) => {
-          setConnectionStatus(isSuccessful);
+        setDriver(neo4jConnection.uri, neo4jConnection.user, neo4jConnection.password).then((driver: false | Driver) => {
+          setConnectionStatus(driver instanceof Driver);
         });
       }
       setInit(true);

src/templates/shared/components/ConnectionModal.tsx

@@ -1,6 +1,7 @@
 import { Button, Dialog, TextInput, Select, Banner, Dropzone } from '@neo4j-ndl/react';
 import { useState } from 'react';
 import { setDriver } from '../utils/Driver';
+import { Driver } from 'neo4j-driver';
 
 interface Message {
   type: 'success' | 'info' | 'warning' | 'danger' | 'neutral';
@@ -78,13 +79,16 @@ export default function ConnectionModal({
   function submitConnection() {
     const connectionURI = `${protocol}://${URI}${URI.split(':')[1] ? '' : `:${port}`}`;
     setDriver(connectionURI, username, password).then((isSuccessful) => {
-      setConnectionStatus(isSuccessful);
-      isSuccessful
-        ? setOpenConnection(false)
-        : setMessage({
-            type: 'danger',
-            content: 'Connection failed, please check the developer console logs for more informations',
-          });
+      setConnectionStatus(isSuccessful instanceof Driver);
+      if (isSuccessful instanceof Driver) {
+        setOpenConnection(false);
+        setMessage({ type: 'success', content: `Connected to ${connectionURI}` });
+      } else {
+        setMessage({
+          type: 'danger',
+          content: 'Connection failed, please check the developer console logs for more informations',
+        });
+      }
     });
   }
 
@@ -93,10 +97,10 @@ export default function ConnectionModal({
       <Dialog
         size='small'
         isOpen={open}
-        hasDisabledCloseButton
         htmlAttributes={{
           'aria-labelledby': 'form-dialog-title',
         }}
+        onClose={() => setOpenConnection(false)}
       >
         <Dialog.Header
           htmlAttributes={{