Merge pull request #571 from neo4j-labs/task/SideBarRemote

Remote Sidebar Import + Fixes

Author: BennuFire

package.json

@@ -38,7 +38,6 @@
     "@codemirror/lang-markdown": "^6.1.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",
@@ -135,6 +134,7 @@
     "typescript": "^4.8.4",
     "webpack": "^5.77.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3"
+    "webpack-dev-server": "^4.7.3",
+    "circular-dependency-plugin": "^5.2.2"
   }
 }

src/application/Application.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import NeoNotificationModal from '../modal/NotificationModal';
+import React, { Suspense, useEffect } from 'react';
 import NeoWelcomeScreenModal from '../modal/WelcomeScreenModal';
 import { connect } from 'react-redux';
 import {
@@ -39,17 +38,20 @@ import {
 import { resetDashboardState } from '../dashboard/DashboardActions';
 import { NeoDashboardPlaceholder } from '../dashboard/placeholder/DashboardPlaceholder';
 import NeoConnectionModal from '../modal/ConnectionModal';
-import Dashboard from '../dashboard/Dashboard';
-import NeoAboutModal from '../modal/AboutModal';
-import { NeoUpgradeOldDashboardModal } from '../modal/UpgradeOldDashboardModal';
+
 import { loadDashboardThunk } from '../dashboard/DashboardThunks';
-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 { resetSessionStorage } from '../sessionStorage/SessionStorageActions';
 import { getDashboardTheme } from '../dashboard/DashboardSelectors';
 
+const NeoUpgradeOldDashboardModal = React.lazy(() => import('../modal/UpgradeOldDashboardModal'));
+const NeoLoadSharedDashboardModal = React.lazy(() => import('../modal/LoadSharedDashboardModal'));
+const NeoReportHelpModal = React.lazy(() => import('../modal/ReportHelpModal'));
+const NeoNotificationModal = React.lazy(() => import('../modal/NotificationModal'));
+const NeoAboutModal = React.lazy(() => import('../modal/AboutModal'));
+const Dashboard = React.lazy(() => import('../dashboard/Dashboard'));
+
 /**
  * This is the main application component for NeoDash.
  * It contains:
@@ -122,16 +124,20 @@ const Application = ({
       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}
-          resetApplication={resetApplication}
-        ></Dashboard>
+        <Suspense fallback=''>
+          <Dashboard
+            onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}
+            onAboutModalOpen={onAboutModalOpen}
+            resetApplication={resetApplication}
+          ></Dashboard>
+        </Suspense>
       ) : (
         <NeoDashboardPlaceholder></NeoDashboardPlaceholder>
       )}
       {/* TODO - move all models into a pop-ups (or modals) component. */}
-      <NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
+      <Suspense fallback=''>
+        <NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
+      </Suspense>
       <NeoConnectionModal
         open={connectionModalOpen}
         dismissable={connected}
@@ -154,19 +160,27 @@ const Application = ({
         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>
+      <Suspense fallback=''>
+        <NeoUpgradeOldDashboardModal
+          open={oldDashboard}
+          text={oldDashboard}
+          loadDashboard={loadDashboard}
+          clearOldDashboard={clearOldDashboard}
+        />
+      </Suspense>
+      <Suspense fallback=''>
+        <NeoLoadSharedDashboardModal
+          shareDetails={shareDetails}
+          onResetShareDetails={onResetShareDetails}
+          onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
+        />
+      </Suspense>
+      <Suspense fallback=''>
+        <NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
+      </Suspense>
+      <Suspense fallback=''>
+        <NeoNotificationModal></NeoNotificationModal>
+      </Suspense>
     </div>
   );
 };

src/application/ApplicationThunks.ts

@@ -9,7 +9,6 @@ import {
   loadDashboardThunk,
   upgradeDashboardVersion,
 } from '../dashboard/DashboardThunks';
-import { setExtensionSidebarOpen } from '../extensions/sidebar/state/SidebarActions';
 import { createNotificationThunk } from '../page/PageThunks';
 import { runCypherQuery } from '../report/ReportQueryRunner';
 import {
@@ -395,8 +394,6 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState:
       )
     );
     dispatch(setConnectionModalOpen(false));
-    // TODO - generalize this, close all drawer-based extensions on app startup.
-    dispatch(setExtensionSidebarOpen(false));
 
     // Auto-upgrade the dashboard version if an old version is cached.
     if (state.dashboard && state.dashboard.version !== NEODASH_VERSION) {

src/card/CardReducer.ts

@@ -15,7 +15,7 @@ import {
   UPDATE_REPORT_DATABASE,
 } from './CardActions';
 import { TOGGLE_CARD_SETTINGS } from './CardActions';
-import { createUUID } from '../dashboard/DashboardThunks';
+import { createUUID } from '../utils/uuid';
 
 const update = (state, mutations) => Object.assign({}, state, mutations);
 

src/card/settings/CardSettingsContent.tsx

@@ -7,10 +7,8 @@ import NeoCodeEditorComponent, {
 } from '../../component/editor/CodeEditorComponent';
 import { getReportTypes } from '../../extensions/ExtensionUtils';
 import { Dropdown } from '@neo4j-ndl/react';
-import {
-  EXTENSIONS_CARD_SETTINGS_COMPONENT,
-  getExtensionCardSettingsComponents,
-} from '../../extensions/ExtensionConfig';
+import { EXTENSIONS_CARD_SETTINGS_COMPONENT } from '../../extensions/ExtensionConfig';
+import { update } from '../../utils/ObjectManipulation';
 
 const NeoCardSettingsContent = ({
   pagenumber,
@@ -42,7 +40,8 @@ const NeoCardSettingsContent = ({
   }, [query]);
 
   const reportTypes = getReportTypes(extensions);
-  const SettingsComponent = reportTypes[type] && reportTypes[type].settingsComponent;
+  const report = reportTypes[type];
+  const SettingsComponent = report?.settingsComponent || {};
 
   function hasExtensionComponents() {
     return (
@@ -85,13 +84,13 @@ const NeoCardSettingsContent = ({
       <NeoCodeEditorComponent
         value={queryText}
         editable={true}
-        language={reportTypes[type] && reportTypes[type].inputMode ? reportTypes[type].inputMode : 'cypher'}
+        language={report?.inputMode || 'cypher'}
         onChange={(value) => {
           updateCypherQuery(value);
         }}
         placeholder={`Enter Cypher here...`}
       />
-      <div style={DEFAULT_CARD_SETTINGS_HELPER_TEXT_STYLE}>{reportTypes[type] && reportTypes[type].helperText}</div>
+      <div style={DEFAULT_CARD_SETTINGS_HELPER_TEXT_STYLE}>{report?.helperText || ''}</div>
     </>
   );
 
@@ -105,20 +104,20 @@ const NeoCardSettingsContent = ({
           onChange: (newValue) =>
             newValue && onTypeUpdate(Object.keys(reportTypes).find((key) => reportTypes[key].label === newValue.value)),
           options: Object.keys(reportTypes).map((option) => ({
-            label: reportTypes[type] && reportTypes[option].label,
-            value: reportTypes[type] && reportTypes[option].label,
+            label: report && reportTypes[option].label,
+            value: report && reportTypes[option].label,
           })),
           value: {
-            label: reportTypes[type] && reportTypes[type].label,
-            value: reportTypes[type] && reportTypes[type].label,
+            label: report?.label || '',
+            value: report?.label || '',
           },
           menuPortalTarget: document.querySelector('body'),
         }}
         fluid
         style={{ marginLeft: '0px', marginRight: '10px', width: '47%', maxWidth: '200px', display: 'inline-block' }}
       />
 
-      {reportTypes[type] && reportTypes[type].disableDatabaseSelector == undefined ? (
+      {report?.disableDatabaseSelector == undefined ? (
         <Dropdown
           id='databaseSelector'
           label='Database'
@@ -146,11 +145,10 @@ const NeoCardSettingsContent = ({
       <br />
       <br />
       {/* Allow for overriding the code box with a custom component */}
-      {reportTypes[type] && reportTypes[type].settingsComponent ? (
+      {report && report.settingsComponent ? (
         <SettingsComponent
-          type={type}
           onReportSettingUpdate={onReportSettingUpdate}
-          settings={reportSettings}
+          settings={update({ helperText: report.helperText, inputMode: report.inputMode }, reportSettings)}
           database={database}
           query={query}
           onQueryUpdate={onQueryUpdate}

src/card/settings/CardSettingsFooter.tsx

@@ -10,7 +10,6 @@ import {
 import { getReportTypes } from '../../extensions/ExtensionUtils';
 import { RULE_BASED_REPORT_ACTIONS_CUSTOMIZATIONS } from '../../extensions/actions/ActionsRuleCreationModal';
 import NeoCustomReportActionsModal from '../../extensions/actions/ActionsRuleCreationModal';
-import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
 import { AdjustmentsHorizontalIconOutline, SparklesIconOutline } from '@neo4j-ndl/react/icons';
 import { IconButton, Switch } from '@neo4j-ndl/react';
 

src/card/settings/custom/CardSettingsContentPropertySelect.tsx

@@ -6,19 +6,10 @@ import { QueryStatus, runCypherQuery } from '../../../report/ReportQueryRunner';
 import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context';
 import { Autocomplete, debounce, TextField } from '@mui/material';
 import NeoField from '../../../component/field/Field';
-import { getReportTypes } from '../../../extensions/ExtensionUtils';
 import { Dropdown } from '@neo4j-ndl/react';
 import NeoCodeEditorComponent from '../../../component/editor/CodeEditorComponent';
 
-const NeoCardSettingsContentPropertySelect = ({
-  query,
-  type,
-  database,
-  settings,
-  extensions,
-  onReportSettingUpdate,
-  onQueryUpdate,
-}) => {
+const NeoCardSettingsContentPropertySelect = ({ query, database, settings, onReportSettingUpdate, onQueryUpdate }) => {
   const { driver } = useContext<Neo4jContextState>(Neo4jContext);
   if (!driver) {
     throw new Error(
@@ -199,7 +190,8 @@ const NeoCardSettingsContentPropertySelect = ({
   // TODO: since this component is only rendered for parameter select, this is technically not needed
   const parameterSelectTypes = ['Node Property', 'Relationship Property', 'Free Text', 'Custom Query', 'Date Picker'];
   const selectedType = settings.type ? settings.type : 'Node Property';
-  const reportTypes = getReportTypes(extensions);
+  const helperText = settings?.helperText || '';
+  const inputMode = settings?.inputMode || 'cypher';
   const overridePropertyDisplayName =
     settings.overridePropertyDisplayName !== undefined ? settings.overridePropertyDisplayName : false;
 
@@ -213,7 +205,7 @@ const NeoCardSettingsContentPropertySelect = ({
   return (
     <div>
       <p style={{ color: 'grey', fontSize: 12, paddingLeft: '5px', border: '1px solid lightgrey', marginTop: '0px' }}>
-        {reportTypes[type].helperText}
+        {helperText}
       </p>
       <Dropdown
         id='type'
@@ -265,7 +257,7 @@ const NeoCardSettingsContentPropertySelect = ({
               <NeoCodeEditorComponent
                 value={queryText}
                 editable={true}
-                language={reportTypes[type] && reportTypes[type].inputMode ? reportTypes[type].inputMode : 'cypher'}
+                language={inputMode}
                 onChange={(value) => {
                   debouncedQueryUpdate(value);
                   setQueryText(value);

src/card/view/CardView.tsx

@@ -6,14 +6,15 @@ import { CardContent } from '@mui/material';
 import NeoCodeEditorComponent from '../../component/editor/CodeEditorComponent';
 
 import { CARD_FOOTER_HEIGHT, CARD_HEADER_HEIGHT } from '../../config/CardConfig';
-import { extensionEnabled, getReportTypes } from '../../extensions/ExtensionUtils';
+import { getReportTypes } from '../../extensions/ExtensionUtils';
 import NeoCodeViewerComponent from '../../component/editor/CodeViewerComponent';
 import { NeoReportWrapper } from '../../report/ReportWrapper';
 import { identifyStyleRuleParameters } from '../../extensions/styling/StyleRuleEvaluator';
 import { ThemeProvider } from '@mui/material/styles';
 import { lightTheme, darkHeaderTheme, luma } from '../../component/theme/Themes';
 import { IconButton } from '@neo4j-ndl/react';
 import { PlayCircleIconSolid } from '@neo4j-ndl/react/icons';
+import { extensionEnabled } from '../../utils/ReportUtils';
 
 const NeoCardView = ({
   id,

src/card/view/CardViewHeader.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { Badge, CardHeader, Dialog, DialogContent, DialogTitle, TextField, Tooltip } from '@mui/material';
 import debounce from 'lodash/debounce';
 import { useCallback } from 'react';
-import { Close, ThirteenMp } from '@mui/icons-material';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import { replaceDashboardParameters } from '../../chart/ChartUtils';
@@ -16,6 +15,7 @@ import {
   ShrinkIcon,
   CameraIconSolid,
   InformationCircleIconOutline,
+  XMarkIconOutline,
 } from '@neo4j-ndl/react/icons';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
@@ -81,7 +81,13 @@ const NeoCardViewHeader = ({
           <tr>
             {editable ? (
               <td>
-                <IconButton className='n-mb-3 n-relative -n-left-3 drag-handle' clean size='medium' aria-label={'drag'}>
+                <IconButton
+                  className='n-mb-3 n-relative -n-left-3 drag-handle'
+                  clean
+                  size='medium'
+                  aria-label={'drag'}
+                  onClick={() => {}}
+                >
                   <DragIcon />
                 </IconButton>
               </td>
@@ -172,7 +178,7 @@ const NeoCardViewHeader = ({
     <>
       <Dialog
         maxWidth={'lg'}
-        open={descriptionModalOpen == true}
+        open={descriptionModalOpen}
         onClose={() => setDescriptionModalOpen(false)}
         aria-labelledby='form-dialog-title'
       >
@@ -182,10 +188,9 @@ const NeoCardViewHeader = ({
             onClick={() => setDescriptionModalOpen(false)}
             style={{ padding: '3px', float: 'right' }}
             aria-label={'rect badge'}
+            clean
           >
-            <Badge overlap='rectangular' badgeContent={''}>
-              <Close />
-            </Badge>
+            <XMarkIconOutline />
           </IconButton>
         </DialogTitle>
         <DialogContent style={{ minWidth: '400px' }}>

src/chart/ChartUtils.ts

@@ -247,7 +247,6 @@ export const downloadComponentAsImage = (ref) => {
 
 import { QueryResult, Record as Neo4jRecord } from 'neo4j-driver';
 import { RenderSubValue } from '../report/ReportRecordProcessing';
-import { DEFAULT_NODE_LABELS } from '../config/ReportConfig';
 
 /**
  * Function to cast a value received from the Neo4j Driver to its TS native type
@@ -442,3 +441,5 @@ export function getSelectionBasedOnFields(fields, oldSelection = {}, autoAssignS
   });
   return selection;
 }
+
+export const DEFAULT_NODE_LABELS = ['name', 'title', 'label', 'id', 'uid', '(label)'];