Feature/8raven

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

@@ -24,7 +24,9 @@ will look like this:
     "standaloneDatabase": "neo4j",
     "standaloneDashboardName": "My Dashboard",
     "standaloneDashboardDatabase": "dashboards",
-    "standaloneDashboardURL": ""
+    "standaloneDashboardURL": "",
+    "standaloneAllowLoad": true,
+    "standaloneLoadFromOtherDatabases": false
 }
 ....
 
@@ -84,6 +86,17 @@ use multiple databases.
 inside Neo4j and would like to run a standalone mode deployment with a
 dashboard from a URL, set this parameter to the complete URL pointing to
 the dashboard JSON.
+
+|standaloneAllowLoad |boolean |false |If set t yes the "Load Dashboard"
+button will be enabled in standalone mode, allowing users to load 
+additional dashboards from Neo4J. 
+*NOTE*: when Load is enabled in standalone mode, only Database is available
+as a source, not file.
+
+|standaloneLoadFromOtherDatabases|boolean |false |If standaloneAllowLoad is 
+set to true, this parmeter enables or not users to load dashboards from 
+other databases than the one deifned in standaloneDashboardDatabase. If 
+standaloneAllowLoad is set to false this parameters has no effect. 
 |===
 
 == Configuring SSO

docs/modules/ROOT/pages/developer-guide/state-management.adoc

@@ -134,6 +134,8 @@ standalone mode.
     "standaloneDatabase": "neo4j",
     "standaloneDashboardName": "My Dashboard",
     "standaloneDashboardDatabase": "dashboards",
+    "standaloneAllowLoad": false,
+    "standaloneLoadFromOtherDatabases ": false,
     "notificationIsDismissable": null
 }
 ....

public/config.json

@@ -8,5 +8,7 @@
   "standaloneDatabase": "neo4j",
   "standaloneDashboardName": "My Dashboard",
   "standaloneDashboardDatabase": "dashboards",
-  "standaloneDashboardURL": ""
+  "standaloneDashboardURL": "",
+  "standaloneAllowLoad": false,
+  "standaloneLoadFromOtherDatabases": false
 }

scripts/config-entrypoint.sh

@@ -15,5 +15,7 @@ echo " \
     \"standalonePassword\": \"${standalonePassword:=}\", \
     \"standaloneDashboardName\": \"${standaloneDashboardName:='My Dashboard'}\", \
     \"standaloneDashboardDatabase\": \"${standaloneDashboardDatabase:='neo4j'}\",  \
-    \"standaloneDashboardURL\": \"${standaloneDashboardURL:=}\"  \
+    \"standaloneDashboardURL\": \"${standaloneDashboardURL:=}\",  \
+    \"standaloneAllowLoad\": \"${standaloneAllowLoad:=false}\",  \
+    \"standaloneLoadFromOtherDatabases\": \"${standaloneLoadFromOtherDatabases:=false}\"  \
     }" > /usr/share/nginx/html/config.json

src/application/ApplicationActions.ts

@@ -143,7 +143,9 @@ export const setStandaloneEnabled = (
   standaloneDashboardDatabase: string,
   standaloneDashboardURL: string,
   standaloneUsername: string,
-  standalonePassword: string
+  standalonePassword: string,
+  standaloneAllowLoad: boolean,
+  standaloneLoadFromOtherDatabases: boolean
 ) => ({
   type: SET_STANDALONE_ENABLED,
   payload: {
@@ -157,6 +159,8 @@ export const setStandaloneEnabled = (
     standaloneDashboardURL,
     standaloneUsername,
     standalonePassword,
+    standaloneAllowLoad,
+    standaloneLoadFromOtherDatabases,
   },
 });
 

src/application/ApplicationReducer.ts

@@ -134,6 +134,8 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
         standaloneDashboardURL,
         standaloneUsername,
         standalonePassword,
+        standaloneAllowLoad,
+        standaloneLoadFromOtherDatabases
       } = payload;
       state = update(state, {
         standalone: standalone,
@@ -146,6 +148,8 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
         standaloneDashboardURL: standaloneDashboardURL,
         standaloneUsername: standaloneUsername,
         standalonePassword: standalonePassword,
+        standaloneAllowLoad: standaloneAllowLoad,
+        standaloneLoadFromOtherDatabases: standaloneLoadFromOtherDatabases,
       });
       return state;
     }

src/application/ApplicationSelectors.ts

@@ -81,6 +81,8 @@ export const applicationGetStandaloneSettings = (state: any) => {
     standaloneDashboardURL: state.application.standaloneDashboardURL,
     standaloneUsername: state.application.standaloneUsername,
     standalonePassword: state.application.standalonePassword,
+    standaloneAllowLoad: state.application.standaloneAllowLoad,
+    standaloneLoadFromOtherDatabases: state.application.standaloneLoadFromOtherDatabases,
   };
 };
 

src/application/ApplicationThunks.ts

@@ -349,6 +349,8 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState:
     standaloneDashboardName: 'My Dashboard',
     standaloneDashboardDatabase: 'dashboards',
     standaloneDashboardURL: '',
+    standaloneAllowLoad: false,
+    standaloneLoadFromOtherDatabases: false,
   };
   try {
     config = await (await fetch('config.json')).json();
@@ -390,7 +392,9 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState:
         config.standaloneDashboardDatabase,
         config.standaloneDashboardURL,
         config.standaloneUsername,
-        config.standalonePassword
+        config.standalonePassword,
+        config.standaloneAllowLoad,
+        config.standaloneLoadFromOtherDatabases,
       )
     );
     dispatch(setConnectionModalOpen(false));

src/dashboard/header/DashboardTitle.tsx

@@ -2,7 +2,7 @@ import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { connect } from 'react-redux';
 import { setDashboardTitle } from '../DashboardActions';
-import { applicationGetConnection, applicationIsStandalone } from '../../application/ApplicationSelectors';
+import { applicationGetConnection, applicationGetStandaloneSettings } from '../../application/ApplicationSelectors';
 import { getDashboardTitle, getDashboardExtensions, getDashboardSettings } from '../DashboardSelectors';
 import { getDashboardIsEditable } from '../../settings/SettingsSelectors';
 import { updateDashboardSetting } from '../../settings/SettingsActions';
@@ -21,7 +21,7 @@ export const NeoDashboardTitle = ({
   dashboardTitle,
   setDashboardTitle,
   editable,
-  isStandalone,
+  standaloneSettings,
   dashboardSettings,
   extensions,
   updateDashboardSetting,
@@ -70,7 +70,8 @@ export const NeoDashboardTitle = ({
   return (
     <div className='n-flex n-flex-row n-flex-wrap n-justify-between n-items-center'>
       {/* TODO : Replace with editable field if dashboard is editable */}
-      {editing ? (
+      {/* only allow edit title if dashboard is not standalone - here we are in Title edit mode*/}
+      {editing && !standaloneSettings.standalone ? (
         <div className={'n-flex n-flex-row n-flex-wrap n-justify-between n-items-center'}>
           <TextInput
             autoFocus={true}
@@ -99,7 +100,7 @@ export const NeoDashboardTitle = ({
             </IconButton>
           </Tooltip>
         </div>
-      ) : (
+      ) : !standaloneSettings.standalone? ( /* out of edit mode - if Not Standalone we display the edit button */
         <div className={'n-flex n-flex-row n-flex-wrap n-justify-between n-items-center'}>
           <Typography variant='h3'>{dashboardTitle}</Typography>
           <Tooltip title={'Edit'} disableInteractive>
@@ -118,11 +119,15 @@ export const NeoDashboardTitle = ({
             )}
           </Tooltip>
         </div>
+      ):( /* if we are in Standalone just title is displayed with no edit button */
+        <div className={'n-flex n-flex-row n-flex-wrap n-justify-between n-items-center'}>
+        <Typography variant='h3'>{dashboardTitle}</Typography>
+        </div>
       )}
       {/* If the app is not running in standalone mode (i.e. in edit mode) always show dashboard settings. */}
-      {!isStandalone ? (
+      {!standaloneSettings.standalone ? (
         <div className='flex flex-row flex-wrap items-center gap-2'>
-          {editable ? <NeoExtensionsModal closeMenu={handleSettingsMenuClose} /> : <></>}
+          {(editable && !standaloneSettings.standalone) ? <NeoExtensionsModal closeMenu={handleSettingsMenuClose} /> : <></>}
           <IconButton aria-label='Dashboard actions' onClick={handleSettingsMenuOpen}>
             <EllipsisHorizontalIconOutline />
           </IconButton>
@@ -153,23 +158,22 @@ export const NeoDashboardTitle = ({
                   <NeoShareModal />
                   {renderExtensionsButtons()}
                 </>
-              ) : (
-                <></>
+              ) : ( /* in standalone we allow load is standaloneAllowLoad parameter is enabled */
+              <></>
               )}
             </MenuItems>
           </Menu>
         </div>
-      ) : (
-        <></>
-      )}
+      ) : standaloneSettings.standaloneAllowLoad ? <NeoLoadModal /> : <></>
+    }
     </div>
   );
 };
 
 const mapStateToProps = (state) => ({
   dashboardTitle: getDashboardTitle(state),
   editable: getDashboardIsEditable(state),
-  isStandalone: applicationIsStandalone(state),
+  standaloneSettings: applicationGetStandaloneSettings(state),
   dashboardSettings: getDashboardSettings(state),
   extensions: getDashboardExtensions(state),
   connection: applicationGetConnection(state),

src/modal/LoadModal.tsx

@@ -9,32 +9,39 @@ import {
 } from '../dashboard/DashboardThunks';
 import { DataGrid } from '@mui/x-data-grid';
 import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context';
-import { MenuItem, Button, Dialog, Dropdown } from '@neo4j-ndl/react';
+import { MenuItem, Button, Dialog, Dropdown, IconButton } from '@neo4j-ndl/react';
 import {
   CloudArrowUpIconOutline,
   PlayIconSolid,
   DatabaseAddCircleIcon,
   DocumentPlusIconOutline,
 } from '@neo4j-ndl/react/icons';
+import { applicationGetStandaloneSettings, applicationIsStandalone } from '../application/ApplicationSelectors';
+import { Tooltip } from '@mui/material';
 
 /**
  * A modal to save a dashboard as a JSON text string.
- * The button to open the modal is intended to use in a drawer at the side of the page.
+ * The button to open the modal is renderedd as:
+ * - a ListItem to use in a drawer at the side of the page if the app is in Editor Mode.
+ * - a Button to be diplayed by itself if the app is in Standalone Mode.
  */
 
 export const NeoLoadModal = ({
   loadDashboard,
   loadDatabaseListFromNeo4j,
   loadDashboardFromNeo4j,
   loadDashboardListFromNeo4j,
+  isStandalone,
+  standaloneSettings
 }) => {
   const [loadModalOpen, setLoadModalOpen] = React.useState(false);
   const [loadFromNeo4jModalOpen, setLoadFromNeo4jModalOpen] = React.useState(false);
   const [text, setText] = React.useState('');
   const [rows, setRows] = React.useState([]);
   const { driver } = useContext<Neo4jContextState>(Neo4jContext);
-  const [dashboardDatabase, setDashboardDatabase] = React.useState('neo4j');
-  const [databases, setDatabases] = React.useState(['neo4j']);
+  //database values are initialized using standalone settings if the app is running in standalone mode
+  const [dashboardDatabase, setDashboardDatabase] = React.useState(standaloneSettings.standalone ? standaloneSettings.standaloneDashboardDatabase : 'neo4j');
+  const [databases, setDatabases] = React.useState([standaloneSettings.standalone? standaloneSettings.standaloneDatabase : 'neo4j']);
   const loadFromFile = useRef(null);
 
   const handleClickOpen = () => {
@@ -97,7 +104,17 @@ export const NeoLoadModal = ({
 
   return (
     <>
-      <MenuItem title='Load' onClick={handleClickOpen} icon={<CloudArrowUpIconOutline />} />
+      {!isStandalone?
+        (
+          <MenuItem title='Load' onClick={handleClickOpen} icon={<CloudArrowUpIconOutline />} />
+        ):(
+          <Tooltip title={'Load Dashboard'}>
+            <IconButton className='n-mx-1' aria-label='Extensions' onClick={handleClickOpen}>
+              <CloudArrowUpIconOutline />
+            </IconButton>
+          </Tooltip>
+        )
+      }
 
       <Dialog size='large' open={loadModalOpen == true} onClose={handleClose} aria-labelledby='form-dialog-title'>
         <Dialog.Header id='form-dialog-title'>
@@ -123,6 +140,7 @@ export const NeoLoadModal = ({
               Select from Neo4j
               <DatabaseAddCircleIcon className='btn-icon-base-r' />
             </Button>
+            {!isStandalone ? 
             <Button
               onClick={() => {
                 loadFromFile.current.click();
@@ -135,8 +153,8 @@ export const NeoLoadModal = ({
               <input type='file' ref={loadFromFile} onChange={(e) => uploadDashboard(e)} hidden />
               Select From File
               <DocumentPlusIconOutline className='btn-icon-base-r' />
-            </Button>
-
+            </Button> : <></>
+            }
             <Button
               onClick={text.length > 0 ? handleCloseAndLoad : null}
               style={{
@@ -198,6 +216,8 @@ export const NeoLoadModal = ({
                   setRows(result);
                 });
               },
+              //if application is running standalone and standaloneLoadFromOtherDatabases is not enabled, we do not allow changing database
+              isDisabled: standaloneSettings.standalone&&!standaloneSettings.standaloneLoadFromOtherDatabases?true:false, 
               options: databases.map((database) => ({ label: database, value: database })),
               value: { label: dashboardDatabase, value: dashboardDatabase },
               menuPlacement: 'auto',
@@ -210,7 +230,10 @@ export const NeoLoadModal = ({
   );
 };
 
-const mapStateToProps = () => ({});
+const mapStateToProps = (state) => ({
+  isStandalone: applicationIsStandalone(state),
+  standaloneSettings: applicationGetStandaloneSettings(state),
+});
 
 const mapDispatchToProps = (dispatch) => ({
   loadDashboard: (text) => dispatch(loadDashboardThunk(text)),