Merge pull request #552 from neo4j-labs/task/new-design-dashboard

New design dashboard

Author: BennuFire

cypress.config.ts

@@ -5,10 +5,16 @@ export default defineConfig({
   projectId: 'a8nh14',
   video: false,
   e2e: {
+    experimentalMemoryManagement: true,
+    numTestsKeptInMemory: 0,
     baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config);
     },
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
   },
   env: {
     codeCoverage: {

cypress/e2e/start_page.cy.js

@@ -27,7 +27,7 @@ describe('NeoDash E2E Tests', () => {
       },
     });
 
-    cy.get('#form-dialog-title', { timeout: 2000 }).should('be.visible');
+    cy.get('#form-dialog-title', { timeout: 20000 }).should('contain', 'NeoDash - Neo4j Dashboard Builder').click();
 
     cy.get('#form-dialog-title').then(($div) => {
       const text = $div.text();
@@ -43,7 +43,7 @@ describe('NeoDash E2E Tests', () => {
     //     cy.contains('Yes').click()
     // }
 
-    cy.get('#form-dialog-title').should('contain', 'Connect to Neo4j');
+    cy.get('#form-dialog-title', { timeout: 20000 }).should('contain', 'Connect to Neo4j');
 
     // Connect to Neo4j database
     // cy.get('#protocol').click()
@@ -279,6 +279,7 @@ describe('NeoDash E2E Tests', () => {
 });
 
 function enableAdvancedVisualizations() {
+  cy.get('main button[aria-label="Dashboard actions').should('be.visible').click();
   cy.get('#extensions-sidebar-button').should('be.visible').click();
   cy.get('#checkbox-advanced-charts').should('be.visible').click();
   cy.get('.ndl-dialog-close').scrollIntoView().should('be.visible').click();
@@ -321,6 +322,9 @@ function checkInitialState() {
 
 function createCard() {
   // Check the starter cards
-  cy.get('main .react-grid-item:eq(2)  button[aria-label="add report"]').click();
+  cy.get('main .react-grid-item button[aria-label="add report"]', { timeout: WAITING_TIME })
+    .should('be.visible')
+    .click();
+  cy.wait(1000);
   cy.get('main .react-grid-item:eq(2)').should('contain', 'No query specified.');
 }

cypress/plugins/index.js

@@ -2,5 +2,12 @@ module.exports = (on, config) => {
   require('@cypress/code-coverage/task')(on, config);
   //Used to instrument code ran like unit tests
   on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));
+  on('before:browser:launch', (browser, launchOptions) => {
+    if (browser.family === 'chromium') {
+      console.log('Adding Chrome flag: --disable-dev-shm-usage');
+      launchOptions.args.push('--disable-dev-shm-usage');
+    }
+    return launchOptions;
+  });
   return config;
 };

docs/modules/ROOT/pages/developer-guide/style-configuration.adoc

@@ -14,7 +14,6 @@ An example configuration for NeoDash
 ....
 {
   "DASHBOARD_HEADER_BRAND_LOGO": "logo_lightsand.png",
-  "APPLY_CUSTOM_BRAND_LOGO": true,
   "DASHBOARD_HEADER_COLOR" : "#F3F3F0",
   "DASHBOARD_HEADER_BUTTON_COLOR" : "#009999",
   "DASHBOARD_HEADER_TITLE_COLOR" : "#00C1B6",
@@ -31,9 +30,7 @@ An example configuration for NeoDash
 [width="100%",cols="19%,17%,26%,38%",options="header",]
 |===
 |Name |Type |Default Value |Description
-|APPLY_CUSTOM_BRAND_LOGO |boolean |false |If enabled, a custom logo will be used on the header based on the DASHBOARD_HEADER_BRAND_LOGO variable.
-
-|DASHBOARD_HEADER_BRAND_LOGO |string |undefined |If APPLY_CUSTOM_BRAND_LOGO is true, this variable defines the name of the logo file located on the public folder of the Neodash deployment.
+|DASHBOARD_HEADER_BRAND_LOGO |string |undefined |This variable defines the name of the logo file located on the public folder of the Neodash deployment, if you want your own logo instead of the Neo4j one.
 
 |DASHBOARD_HEADER_COLOR |string |#0B297D |Determines the color of the header.
 

package.json

@@ -36,26 +36,27 @@
   "dependencies": {
     "@azure/openai": "^1.0.0-beta.2",
     "@codemirror/lang-markdown": "^6.1.1",
-    "@codemirror/language-data": "^6.3.1",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/styles": "^5.12.3",
     "@mui/x-data-grid": "5.17.26",
     "@mui/x-date-pickers": "^5.0.17",
-    "@neo4j-cypher/react-codemirror": "^1.0.2",
-    "@neo4j-ndl/base": "1.7.0",
-    "@neo4j-ndl/react": "1.7.0",
-    "@nivo/bar": "^0.82.1",
-    "@nivo/circle-packing": "^0.82.1",
-    "@nivo/core": "^0.82.1",
-    "@nivo/geo": "^0.82.1",
-    "@nivo/line": "^0.82.1",
-    "@nivo/pie": "^0.82.1",
-    "@nivo/radar": "^0.82.1",
-    "@nivo/sankey": "^0.82.1",
+    "@neo4j-cypher/react-codemirror": "^1.0.3",
+    "@neo4j-ndl/base": "1.10.1",
+    "@neo4j-ndl/react": "1.10.2",
+    "@nivo/bar": "^0.83.0",
+    "@nivo/circle-packing": "^0.83.0",
+    "@nivo/core": "^0.83.0",
+    "@nivo/geo": "^0.83.0",
+    "@nivo/line": "^0.83.0",
+    "@nivo/pie": "^0.83.0",
+    "@nivo/radar": "^0.83.0",
+    "@nivo/sankey": "^0.83.0",
     "@nivo/scatterplot": "^0.83.0",
-    "@nivo/sunburst": "^0.82.1",
-    "@nivo/treemap": "^0.82.1",
+    "@nivo/sunburst": "^0.83.0",
+    "@nivo/treemap": "^0.83.0",
     "@sentry/react": "^7.57.0",
     "@sentry/webpack-plugin": "^2.5.0",
     "babel-runtime": "^6.26.0",
@@ -88,6 +89,7 @@
     "react-markdown": "^8.0.0",
     "react-redux": "^7.2.6",
     "react-show-more-text": "^1.6.2",
+    "react-toggle-dark-mode": "^1.1.1",
     "react-use-error-boundary": "^3.0.0",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.1",

public/neo4j-icon-color-full.png

@@ -47,9 +47,8 @@ import { NeoLoadSharedDashboardModal } from '../modal/LoadSharedDashboardModal';
 import { downloadComponentAsImage } from '../chart/ChartUtils';
 import NeoReportHelpModal from '../modal/ReportHelpModal';
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { ThemeProvider } from '@mui/material/styles';
-import lightTheme from '../component/theme/Themes';
 import { resetSessionStorage } from '../sessionStorage/SessionStorageActions';
+import { getDashboardTheme } from '../dashboard/DashboardSelectors';
 
 /**
  * This is the main application component for NeoDash.
@@ -83,13 +82,15 @@ const Application = ({
   resetDashboard,
   onAboutModalOpen,
   onAboutModalClose,
+  resetApplication,
   getDebugState,
   onReportHelpModalClose,
   welcomeScreenOpen,
   setWelcomeScreenOpen,
   onConnectionModalOpen,
   onConnectionModalClose,
   onSSOAttempt,
+  themeMode,
 }) => {
   const [initialized, setInitialized] = React.useState(false);
 
@@ -106,52 +107,67 @@ const Application = ({
 
   const ref = React.useRef();
 
+  useEffect(() => {
+    if (themeMode === 'dark') {
+      document.body.classList.add('ndl-theme-dark');
+    } else {
+      document.body.classList.remove('ndl-theme-dark');
+    }
+  }, [themeMode]);
+
   // Only render the dashboard component if we have an active Neo4j connection.
   return (
-    <ThemeProvider theme={lightTheme}>
-      <div ref={ref} className='n-flex'>
-        {/* TODO - clean this up. Only draw the placeholder if the connection is not established. */}
-        <NeoDashboardPlaceholder connected={connected}></NeoDashboardPlaceholder>
-        {connected ? <Dashboard onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}></Dashboard> : <></>}
-        {/* TODO - move all models into a pop-ups (or modals) component. */}
-        <NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
-        <NeoConnectionModal
-          open={connectionModalOpen}
-          dismissable={connected}
-          connection={connection}
-          ssoSettings={ssoSettings}
-          standalone={standaloneSettings.standalone}
-          standaloneSettings={standaloneSettings}
-          createConnection={createConnection}
-          onSSOAttempt={onSSOAttempt}
-          setConnectionProperties={setConnectionDetails}
-          onConnectionModalClose={onConnectionModalClose}
-        ></NeoConnectionModal>
-        <NeoWelcomeScreenModal
-          welcomeScreenOpen={welcomeScreenOpen}
-          setWelcomeScreenOpen={setWelcomeScreenOpen}
-          hasCachedDashboard={hasCachedDashboard}
-          hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
-          onConnectionModalOpen={onConnectionModalOpen}
-          createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
+    <div
+      ref={ref}
+      className={`n-bg-palette-neutral-bg-default n-h-screen n-w-screen n-flex n-flex-col n-overflow-hidden`}
+    >
+      {connected ? (
+        <Dashboard
+          onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}
           onAboutModalOpen={onAboutModalOpen}
-          resetDashboard={resetDashboard}
-        ></NeoWelcomeScreenModal>
-        <NeoUpgradeOldDashboardModal
-          open={oldDashboard}
-          text={oldDashboard}
-          loadDashboard={loadDashboard}
-          clearOldDashboard={clearOldDashboard}
-        />
-        <NeoLoadSharedDashboardModal
-          shareDetails={shareDetails}
-          onResetShareDetails={onResetShareDetails}
-          onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
-        />
-        <NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
-        <NeoNotificationModal></NeoNotificationModal>
-      </div>
-    </ThemeProvider>
+          resetApplication={resetApplication}
+        ></Dashboard>
+      ) : (
+        <NeoDashboardPlaceholder></NeoDashboardPlaceholder>
+      )}
+      {/* TODO - move all models into a pop-ups (or modals) component. */}
+      <NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
+      <NeoConnectionModal
+        open={connectionModalOpen}
+        dismissable={connected}
+        connection={connection}
+        ssoSettings={ssoSettings}
+        standalone={standaloneSettings.standalone}
+        standaloneSettings={standaloneSettings}
+        createConnection={createConnection}
+        onSSOAttempt={onSSOAttempt}
+        setConnectionProperties={setConnectionDetails}
+        onConnectionModalClose={onConnectionModalClose}
+      ></NeoConnectionModal>
+      <NeoWelcomeScreenModal
+        welcomeScreenOpen={welcomeScreenOpen}
+        setWelcomeScreenOpen={setWelcomeScreenOpen}
+        hasCachedDashboard={hasCachedDashboard}
+        hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
+        onConnectionModalOpen={onConnectionModalOpen}
+        createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
+        onAboutModalOpen={onAboutModalOpen}
+        resetDashboard={resetDashboard}
+      ></NeoWelcomeScreenModal>
+      <NeoUpgradeOldDashboardModal
+        open={oldDashboard}
+        text={oldDashboard}
+        loadDashboard={loadDashboard}
+        clearOldDashboard={clearOldDashboard}
+      />
+      <NeoLoadSharedDashboardModal
+        shareDetails={shareDetails}
+        onResetShareDetails={onResetShareDetails}
+        onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
+      />
+      <NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
+      <NeoNotificationModal></NeoNotificationModal>
+    </div>
   );
 };
 
@@ -171,6 +187,7 @@ const mapStateToProps = (state) => ({
     return applicationGetDebugState(state);
   }, // TODO - change this to be variable instead of a function?
   hasNeo4jDesktopConnection: applicationHasNeo4jDesktopConnection(state),
+  themeMode: getDashboardTheme(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -212,6 +229,10 @@ const mapDispatchToProps = (dispatch) => ({
   onAboutModalOpen: (_) => dispatch(setAboutModalOpen(true)),
   setWelcomeScreenOpen: (open) => dispatch(setWelcomeScreenOpen(open)),
   onAboutModalClose: (_) => dispatch(setAboutModalOpen(false)),
+  resetApplication: () => {
+    dispatch(setWelcomeScreenOpen(true));
+    dispatch(setConnected(false));
+  },
 });
 
 Application.displayName = 'Application';

src/application/Application.tsx

@@ -81,6 +81,9 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
     }
     case SET_ABOUT_MODAL_OPEN: {
       const { open } = payload;
+      if (!open) {
+        console.log('');
+      }
       state = update(state, { aboutModalOpen: open });
       return state;
     }

src/application/ApplicationReducer.ts

@@ -121,7 +121,7 @@ const NeoCard = ({
   const component = (
     <div
       ref={observe}
-      className='bg-light-neutral-bg-weak overflow-hidden n-shadow-l4 border-2 border-light-neutral-border-strong min-w-max rounded-lg px-4 py-5 sm:p-6 n-h-full'
+      className='n-bg-neutral-bg-weak overflow-hidden n-shadow-l4 border-2 border-neutral-border-strong min-w-max rounded-lg px-4 py-5 sm:p-6 n-h-full'
     >
       {/* The front of the card, referred to as the 'view' */}
       <Collapse disablestrictmodecompat='true' in={!settingsOpen} timeout={collapseTimeout} className='n-h-full'>

src/card/Card.tsx

@@ -91,7 +91,9 @@ const NeoCardSettings = ({
   );
 
   return (
-    <div className={`card-view ${expanded ? 'expanded' : ''} n-overflow-y-auto n-h-full`}>
+    <div
+      className={`card-view n-bg-palette-neutral-bg-strong ${expanded ? 'expanded' : ''} n-overflow-y-auto n-h-full`}
+    >
       {cardSettingsHeader}
       <ReportItemContainer style={{ height: reportHeight }} className='-n-mt-2'>
         {cardSettingsContent}