Improved handling of draft dashboards in the sidebar, allowing to distinguish between save/overwrite (#734)

nielsdejong · web-flow · commit ac8eda15d56e · 2024-01-10T11:34:18.000+01:00
* Improved handling of draft dashboards in the sidebar, allowing to distinguish between logical saves/overwrites

* Ordering dashboard list by name rather than edit date
diff --git a/src/dashboard/DashboardThunks.ts b/src/dashboard/DashboardThunks.ts
@@ -502,7 +502,7 @@ export const loadDashboardListFromNeo4jThunk = (driver, database, callback) => (
     runCypherQuery(
       driver,
       database,
-      'MATCH (n:_Neodash_Dashboard) RETURN n.uuid as uuid, n.title as title, toString(n.date) as date,  n.user as author, n.version as version ORDER BY date DESC',
+      'MATCH (n:_Neodash_Dashboard) RETURN n.uuid as uuid, n.title as title, toString(n.date) as date,  n.user as author, n.version as version ORDER BY toLower(n.title) ASC',
       {},
       1000,
       (status) => setStatus(status),
diff --git a/src/dashboard/sidebar/DashboardSidebar.tsx b/src/dashboard/sidebar/DashboardSidebar.tsx
@@ -41,13 +41,15 @@ import NeoDashboardSidebarShareModal from './modal/DashboardSidebarShareModal';
 import LegacyShareModal from './modal/legacy/LegacyShareModal';
 import { NEODASH_VERSION } from '../DashboardReducer';
 
+// Which (small) pop-up menu is currently open for the sidebar.
 enum Menu {
   DASHBOARD = 0,
   DATABASE = 1,
   CREATE = 2,
   NONE = 3,
 }
 
+// Which (large) pop-up modal is currently open for the sidebar.
 enum Modal {
   CREATE = 0,
   IMPORT = 1,
@@ -61,6 +63,9 @@ enum Modal {
   NONE = 9,
 }
 
+// We use "index = -1" to represent a non-saved draft dashboard in the sidebar's dashboard list.
+const UNSAVED_DASHBOARD_INDEX = -1;
+
 /**
  * A component responsible for rendering the sidebar on the left of the screen.
  */
@@ -83,10 +88,10 @@ export const NeoDashboardSidebar = ({
 }) => {
   const { driver } = useContext<Neo4jContextState>(Neo4jContext);
   const [expanded, setOnExpanded] = useState(false);
-  const [selectedDashboardIndex, setSelectedDashboardIndex] = React.useState(-1);
+  const [selectedDashboardIndex, setSelectedDashboardIndex] = React.useState(UNSAVED_DASHBOARD_INDEX);
   const [dashboardDatabase, setDashboardDatabase] = React.useState(database ? database : 'neo4j');
   const [databases, setDatabases] = useState([]);
-  const [inspectedIndex, setInspectedIndex] = useState(-1);
+  const [inspectedIndex, setInspectedIndex] = useState(UNSAVED_DASHBOARD_INDEX);
   const [searchText, setSearchText] = useState('');
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
   const [menuOpen, setMenuOpen] = useState(Menu.NONE);
@@ -103,7 +108,7 @@ export const NeoDashboardSidebar = ({
       if (dashboard && dashboard.uuid) {
         const index = list.findIndex((element) => element.uuid == dashboard.uuid);
         setSelectedDashboardIndex(index);
-        if (index == -1) {
+        if (index == UNSAVED_DASHBOARD_INDEX) {
           // If we can't find the currently dashboard in the database, we are drafting a new one.
           setDraft(true);
         }
@@ -121,8 +126,9 @@ export const NeoDashboardSidebar = ({
     // Creates new dashboard in draft state (not yet saved to Neo4j)
     deleteDashboardFromNeo4j(driver, dashboardDatabase, uuid, () => {
       if (uuid == dashboard.uuid) {
-        setSelectedDashboardIndex(0);
+        setSelectedDashboardIndex(UNSAVED_DASHBOARD_INDEX);
         resetLocalDashboard();
+        loadDashboardListFromNeo4j();
         setDraft(true);
       }
       setTimeout(() => {
@@ -154,19 +160,27 @@ export const NeoDashboardSidebar = ({
             }
           );
         }}
+        overwrite={selectedDashboardIndex >= 0}
         handleClose={() => setModalOpen(Modal.NONE)}
       />
 
       <NeoDashboardSidebarLoadModal
         open={modalOpen == Modal.LOAD}
         onConfirm={() => {
-          setModalOpen(Modal.LOAD);
-          const { uuid } = dashboards[inspectedIndex];
-          loadDashboardFromNeo4j(driver, dashboardDatabase, uuid, (file) => {
-            setDraft(false);
-            loadDashboard(uuid, file);
-            setSelectedDashboardIndex(inspectedIndex);
-          });
+          if (inspectedIndex == UNSAVED_DASHBOARD_INDEX) {
+            // Someone attempted to load the unsaved draft dashboard... this isn't possible, we create a fresh one.
+            setSelectedDashboardIndex(UNSAVED_DASHBOARD_INDEX);
+            createDashboard();
+          } else {
+            // Load one of the dashboards from the database.
+            setModalOpen(Modal.LOAD);
+            const { uuid } = dashboards[inspectedIndex];
+            loadDashboardFromNeo4j(driver, dashboardDatabase, uuid, (file) => {
+              setDraft(false);
+              loadDashboard(uuid, file);
+              setSelectedDashboardIndex(inspectedIndex);
+            });
+          }
         }}
         handleClose={() => setModalOpen(Modal.NONE)}
       />
@@ -190,6 +204,7 @@ export const NeoDashboardSidebar = ({
         onConfirm={() => {
           setModalOpen(Modal.NONE);
           createDashboard();
+          setSelectedDashboardIndex(UNSAVED_DASHBOARD_INDEX);
         }}
         handleClose={() => setModalOpen(Modal.NONE)}
       />
@@ -211,6 +226,7 @@ export const NeoDashboardSidebar = ({
         onImport={(text) => {
           setModalOpen(Modal.NONE);
           setDraft(true);
+          setSelectedDashboardIndex(UNSAVED_DASHBOARD_INDEX);
           loadDashboard(createUUID(), text);
         }}
         handleClose={() => setModalOpen(Modal.NONE)}
@@ -271,6 +287,7 @@ export const NeoDashboardSidebar = ({
             }}
           />
           <NeoDashboardSidebarDashboardMenu
+            draft={draft && selectedDashboardIndex == inspectedIndex}
             open={menuOpen == Menu.DASHBOARD}
             anchorEl={menuAnchor}
             handleInfoClicked={() => {
@@ -281,6 +298,14 @@ export const NeoDashboardSidebar = ({
               });
               setModalOpen(Modal.INFO);
             }}
+            handleDiscardClicked={() => {
+              setMenuOpen(Menu.NONE);
+              setModalOpen(Modal.LOAD);
+            }}
+            handleSaveClicked={() => {
+              setMenuOpen(Menu.NONE);
+              setModalOpen(Modal.SAVE);
+            }}
             handleLoadClicked={() => {
               setMenuOpen(Menu.NONE);
               if (draft) {
@@ -323,6 +348,7 @@ export const NeoDashboardSidebar = ({
               if (draft) {
                 setModalOpen(Modal.CREATE);
               } else {
+                setSelectedDashboardIndex(UNSAVED_DASHBOARD_INDEX);
                 createDashboard();
               }
             }}
@@ -425,15 +451,18 @@ export const NeoDashboardSidebar = ({
               onChange={(e) => setSearchText(e.target.value)}
             />
           </SideNavigationGroupHeader>
-          {draft && !readonly ? (
+          {draft && selectedDashboardIndex == UNSAVED_DASHBOARD_INDEX && !readonly ? (
             <DashboardSidebarListItem
               version={NEODASH_VERSION}
               selected={draft}
               title={title}
               saved={false}
               onSelect={() => {}}
-              onSave={() => setModalOpen(Modal.SAVE)}
-              onSettingsOpen={() => {}}
+              onSettingsOpen={(event) => {
+                setInspectedIndex(UNSAVED_DASHBOARD_INDEX);
+                setMenuOpen(Menu.DASHBOARD);
+                setMenuAnchor(event.currentTarget);
+              }}
             />
           ) : (
             <></>
@@ -444,13 +473,13 @@ export const NeoDashboardSidebar = ({
               // index stored in list
               return (
                 <DashboardSidebarListItem
-                  selected={!draft && selectedDashboardIndex == d.index}
-                  title={d.title}
+                  selected={selectedDashboardIndex == d.index}
+                  title={draft && selectedDashboardIndex == d.index ? title : d.title}
                   version={d.version}
-                  saved={true}
+                  saved={!(draft && selectedDashboardIndex == d.index)}
                   readonly={readonly}
                   onSelect={() => {
-                    if (draft) {
+                    if (draft && d.index !== selectedDashboardIndex) {
                       setInspectedIndex(d.index);
                       setModalOpen(Modal.LOAD);
                     } else {
@@ -460,7 +489,6 @@ export const NeoDashboardSidebar = ({
                       });
                     }
                   }}
-                  onSave={() => {}}
                   onSettingsOpen={(event) => {
                     setInspectedIndex(d.index);
                     setMenuOpen(Menu.DASHBOARD);
diff --git a/src/dashboard/sidebar/DashboardSidebarListItem.tsx b/src/dashboard/sidebar/DashboardSidebarListItem.tsx
@@ -4,16 +4,7 @@ import { CloudArrowUpIconOutline, EllipsisVerticalIconOutline } from '@neo4j-ndl
 import Tooltip from '@mui/material/Tooltip';
 import { NEODASH_VERSION } from '../DashboardReducer';
 
-export const DashboardSidebarListItem = ({
-  title,
-  selected,
-  readonly,
-  saved,
-  version,
-  onSelect,
-  onSave,
-  onSettingsOpen,
-}) => {
+export const DashboardSidebarListItem = ({ title, selected, readonly, saved, version, onSelect, onSettingsOpen }) => {
   return (
     <SideNavigationGroupHeader>
       <div style={{ display: 'contents', width: '100%' }}>
@@ -56,7 +47,7 @@ export const DashboardSidebarListItem = ({
               marginRight: '10px',
             }}
             onClick={(event) => {
-              saved == false ? onSave() : onSettingsOpen(event);
+              saved == false ? onSettingsOpen(event) : onSettingsOpen(event);
             }}
           >
             {saved == true ? (
@@ -67,8 +58,8 @@ export const DashboardSidebarListItem = ({
                 />
               </Tooltip>
             ) : (
-              <Tooltip title='Save' aria-label='save' disableInteractive>
-                <CloudArrowUpIconOutline
+              <Tooltip title='Settings' aria-label='settings' disableInteractive>
+                <EllipsisVerticalIconOutline
                   color='rgb(var(--palette-warning-text))'
                   style={{ float: 'right', marginRight: '-6px' }}
                   className='btn-icon-base-r'
diff --git a/src/dashboard/sidebar/menu/DashboardSidebarDashboardMenu.tsx b/src/dashboard/sidebar/menu/DashboardSidebarDashboardMenu.tsx
@@ -1,21 +1,27 @@
 import React from 'react';
 import { Menu, MenuItem, MenuItems } from '@neo4j-ndl/react';
 import {
+  ArchiveBoxIconOutline,
+  ArrowUturnLeftIconOutline,
   CloudArrowUpIconOutline,
   DocumentDuplicateIconOutline,
   DocumentTextIconOutline,
   InformationCircleIconOutline,
   ShareIconOutline,
   TrashIconOutline,
+  XMarkIconOutline,
 } from '@neo4j-ndl/react/icons';
 
 /**
  * Configures setting the current Neo4j database connection for the dashboard.
  */
 export const NeoDashboardSidebarDashboardMenu = ({
   anchorEl,
+  draft,
   open,
   handleInfoClicked,
+  handleSaveClicked,
+  handleDiscardClicked,
   handleLoadClicked,
   handleExportClicked,
   handleShareClicked,
@@ -37,14 +43,21 @@ export const NeoDashboardSidebarDashboardMenu = ({
       onClose={handleClose}
       size='small'
     >
-      <MenuItems>
-        <MenuItem onClick={handleInfoClicked} icon={<InformationCircleIconOutline />} title='Info' />
-        <MenuItem onClick={handleLoadClicked} icon={<CloudArrowUpIconOutline />} title='Load' />
-        {/* <MenuItem onClick={() => {}} icon={<DocumentDuplicateIconOutline />} title='Clone' /> */}
-        <MenuItem onClick={handleExportClicked} icon={<DocumentTextIconOutline />} title='Export' />
-        <MenuItem onClick={handleShareClicked} icon={<ShareIconOutline />} title='Share' />
-        <MenuItem onClick={handleDeleteClicked} icon={<TrashIconOutline />} title='Delete' />
-      </MenuItems>
+      {!draft ? (
+        <MenuItems>
+          <MenuItem onClick={handleInfoClicked} icon={<InformationCircleIconOutline />} title='Info' />
+          <MenuItem onClick={handleLoadClicked} icon={<CloudArrowUpIconOutline />} title='Load' />
+          {/* <MenuItem onClick={() => {}} icon={<DocumentDuplicateIconOutline />} title='Clone' /> */}
+          <MenuItem onClick={handleExportClicked} icon={<DocumentTextIconOutline />} title='Export' />
+          <MenuItem onClick={handleShareClicked} icon={<ShareIconOutline />} title='Share' />
+          <MenuItem onClick={handleDeleteClicked} icon={<TrashIconOutline />} title='Delete' />
+        </MenuItems>
+      ) : (
+        <MenuItems>
+          <MenuItem onClick={handleSaveClicked} icon={<CloudArrowUpIconOutline />} title='Save' />
+          <MenuItem onClick={handleDiscardClicked} icon={<ArrowUturnLeftIconOutline />} title='Discard Draft' />
+        </MenuItems>
+      )}
     </Menu>
   );
 };
diff --git a/src/dashboard/sidebar/modal/DashboardSidebarLoadModal.tsx b/src/dashboard/sidebar/modal/DashboardSidebarLoadModal.tsx
@@ -10,9 +10,9 @@ export const NeoDashboardSidebarLoadModal = ({ open, onConfirm, handleClose }) =
     <Dialog size='small' open={open == true} onClose={handleClose} aria-labelledby='form-dialog-title'>
       <Dialog.Header id='form-dialog-title'>Discard Draft?</Dialog.Header>
       <Dialog.Subtitle>
-        Switching your active dashboard will delete your current draft.
+        You are discarding your current draft dashboard.
         <br />
-        <b>Save the draft first to ensure your dashboard is stored.</b>
+        <b>Your draft will not be recoverable.</b>
       </Dialog.Subtitle>
       <Dialog.Actions>
         <Button
diff --git a/src/dashboard/sidebar/modal/DashboardSidebarSaveModal.tsx b/src/dashboard/sidebar/modal/DashboardSidebarSaveModal.tsx
@@ -5,12 +5,12 @@ import { Button, Dialog } from '@neo4j-ndl/react';
 /**
  * Configures setting the current Neo4j database connection for the dashboard.
  */
-export const NeoDashboardSidebarSaveModal = ({ open, onConfirm, handleClose }) => {
+export const NeoDashboardSidebarSaveModal = ({ open, onConfirm, handleClose, overwrite }) => {
   return (
     <Dialog size='small' open={open} onClose={handleClose} aria-labelledby='form-dialog-title'>
       <Dialog.Header id='form-dialog-title'>Save to Neo4j</Dialog.Header>
       <Dialog.Content>
-        This will save your current draft as a node to your Neo4j database.
+        This will <b>{overwrite ? 'overwrite' : 'save'}</b> your current draft as a node in your Neo4j database.
         <br />
         Ensure you have write permissions to the database to use this feature.
       </Dialog.Content>
diff --git a/src/report/ReportQueryRunner.ts b/src/report/ReportQueryRunner.ts
@@ -61,6 +61,10 @@ export async function runCypherQuery(
     setStatus(QueryStatus.NO_QUERY);
     return;
   }
+  if (!driver) {
+    setStatus(QueryStatus.ERROR);
+    return;
+  }
   const session = database ? driver.session({ database: database }) : driver.session();
   const transaction = session.beginTransaction({ timeout: queryTimeLimit * 1000, connectionTimeout: 2000 });
 
