@@ -47,9 +47,8 @@ import { NeoLoadSharedDashboardModal } from '../modal/LoadSharedDashboardModal';
4747import { downloadComponentAsImage } from '../chart/ChartUtils' ;
4848import NeoReportHelpModal from '../modal/ReportHelpModal' ;
4949import '@neo4j-ndl/base/lib/neo4j-ds-styles.css' ;
50- import { ThemeProvider } from '@mui/material/styles' ;
51- import lightTheme from '../component/theme/Themes' ;
5250import { resetSessionStorage } from '../sessionStorage/SessionStorageActions' ;
51+ import { getDashboardTheme } from '../dashboard/DashboardSelectors' ;
5352
5453/**
5554 * This is the main application component for NeoDash.
@@ -83,13 +82,15 @@ const Application = ({
8382 resetDashboard,
8483 onAboutModalOpen,
8584 onAboutModalClose,
85+ resetApplication,
8686 getDebugState,
8787 onReportHelpModalClose,
8888 welcomeScreenOpen,
8989 setWelcomeScreenOpen,
9090 onConnectionModalOpen,
9191 onConnectionModalClose,
9292 onSSOAttempt,
93+ themeMode,
9394} ) => {
9495 const [ initialized , setInitialized ] = React . useState ( false ) ;
9596
@@ -106,52 +107,67 @@ const Application = ({
106107
107108 const ref = React . useRef ( ) ;
108109
110+ useEffect ( ( ) => {
111+ if ( themeMode === 'dark' ) {
112+ document . body . classList . add ( 'ndl-theme-dark' ) ;
113+ } else {
114+ document . body . classList . remove ( 'ndl-theme-dark' ) ;
115+ }
116+ } , [ themeMode ] ) ;
117+
109118 // Only render the dashboard component if we have an active Neo4j connection.
110119 return (
111- < ThemeProvider theme = { lightTheme } >
112- < div ref = { ref } className = 'n-flex' >
113- { /* TODO - clean this up. Only draw the placeholder if the connection is not established. */ }
114- < NeoDashboardPlaceholder connected = { connected } > </ NeoDashboardPlaceholder >
115- { connected ? < Dashboard onDownloadDashboardAsImage = { ( _ ) => downloadComponentAsImage ( ref ) } > </ Dashboard > : < > </ > }
116- { /* TODO - move all models into a pop-ups (or modals) component. */ }
117- < NeoAboutModal open = { aboutModalOpen } handleClose = { onAboutModalClose } getDebugState = { getDebugState } />
118- < NeoConnectionModal
119- open = { connectionModalOpen }
120- dismissable = { connected }
121- connection = { connection }
122- ssoSettings = { ssoSettings }
123- standalone = { standaloneSettings . standalone }
124- standaloneSettings = { standaloneSettings }
125- createConnection = { createConnection }
126- onSSOAttempt = { onSSOAttempt }
127- setConnectionProperties = { setConnectionDetails }
128- onConnectionModalClose = { onConnectionModalClose }
129- > </ NeoConnectionModal >
130- < NeoWelcomeScreenModal
131- welcomeScreenOpen = { welcomeScreenOpen }
132- setWelcomeScreenOpen = { setWelcomeScreenOpen }
133- hasCachedDashboard = { hasCachedDashboard }
134- hasNeo4jDesktopConnection = { hasNeo4jDesktopConnection }
135- onConnectionModalOpen = { onConnectionModalOpen }
136- createConnectionFromDesktopIntegration = { createConnectionFromDesktopIntegration }
120+ < div
121+ ref = { ref }
122+ className = { `n-bg-palette-neutral-bg-default n-h-screen n-w-screen n-flex n-flex-col n-overflow-hidden` }
123+ >
124+ { connected ? (
125+ < Dashboard
126+ onDownloadDashboardAsImage = { ( _ ) => downloadComponentAsImage ( ref ) }
137127 onAboutModalOpen = { onAboutModalOpen }
138- resetDashboard = { resetDashboard }
139- > </ NeoWelcomeScreenModal >
140- < NeoUpgradeOldDashboardModal
141- open = { oldDashboard }
142- text = { oldDashboard }
143- loadDashboard = { loadDashboard }
144- clearOldDashboard = { clearOldDashboard }
145- />
146- < NeoLoadSharedDashboardModal
147- shareDetails = { shareDetails }
148- onResetShareDetails = { onResetShareDetails }
149- onConfirmLoadSharedDashboard = { onConfirmLoadSharedDashboard }
150- />
151- < NeoReportHelpModal open = { reportHelpModalOpen } handleClose = { onReportHelpModalClose } />
152- < NeoNotificationModal > </ NeoNotificationModal >
153- </ div >
154- </ ThemeProvider >
128+ resetApplication = { resetApplication }
129+ > </ Dashboard >
130+ ) : (
131+ < NeoDashboardPlaceholder > </ NeoDashboardPlaceholder >
132+ ) }
133+ { /* TODO - move all models into a pop-ups (or modals) component. */ }
134+ < NeoAboutModal open = { aboutModalOpen } handleClose = { onAboutModalClose } getDebugState = { getDebugState } />
135+ < NeoConnectionModal
136+ open = { connectionModalOpen }
137+ dismissable = { connected }
138+ connection = { connection }
139+ ssoSettings = { ssoSettings }
140+ standalone = { standaloneSettings . standalone }
141+ standaloneSettings = { standaloneSettings }
142+ createConnection = { createConnection }
143+ onSSOAttempt = { onSSOAttempt }
144+ setConnectionProperties = { setConnectionDetails }
145+ onConnectionModalClose = { onConnectionModalClose }
146+ > </ NeoConnectionModal >
147+ < NeoWelcomeScreenModal
148+ welcomeScreenOpen = { welcomeScreenOpen }
149+ setWelcomeScreenOpen = { setWelcomeScreenOpen }
150+ hasCachedDashboard = { hasCachedDashboard }
151+ hasNeo4jDesktopConnection = { hasNeo4jDesktopConnection }
152+ onConnectionModalOpen = { onConnectionModalOpen }
153+ createConnectionFromDesktopIntegration = { createConnectionFromDesktopIntegration }
154+ onAboutModalOpen = { onAboutModalOpen }
155+ resetDashboard = { resetDashboard }
156+ > </ NeoWelcomeScreenModal >
157+ < NeoUpgradeOldDashboardModal
158+ open = { oldDashboard }
159+ text = { oldDashboard }
160+ loadDashboard = { loadDashboard }
161+ clearOldDashboard = { clearOldDashboard }
162+ />
163+ < NeoLoadSharedDashboardModal
164+ shareDetails = { shareDetails }
165+ onResetShareDetails = { onResetShareDetails }
166+ onConfirmLoadSharedDashboard = { onConfirmLoadSharedDashboard }
167+ />
168+ < NeoReportHelpModal open = { reportHelpModalOpen } handleClose = { onReportHelpModalClose } />
169+ < NeoNotificationModal > </ NeoNotificationModal >
170+ </ div >
155171 ) ;
156172} ;
157173
@@ -171,6 +187,7 @@ const mapStateToProps = (state) => ({
171187 return applicationGetDebugState ( state ) ;
172188 } , // TODO - change this to be variable instead of a function?
173189 hasNeo4jDesktopConnection : applicationHasNeo4jDesktopConnection ( state ) ,
190+ themeMode : getDashboardTheme ( state ) ,
174191} ) ;
175192
176193const mapDispatchToProps = ( dispatch ) => ( {
@@ -212,6 +229,10 @@ const mapDispatchToProps = (dispatch) => ({
212229 onAboutModalOpen : ( _ ) => dispatch ( setAboutModalOpen ( true ) ) ,
213230 setWelcomeScreenOpen : ( open ) => dispatch ( setWelcomeScreenOpen ( open ) ) ,
214231 onAboutModalClose : ( _ ) => dispatch ( setAboutModalOpen ( false ) ) ,
232+ resetApplication : ( ) => {
233+ dispatch ( setWelcomeScreenOpen ( true ) ) ;
234+ dispatch ( setConnected ( false ) ) ;
235+ } ,
215236} ) ;
216237
217238Application . displayName = 'Application' ;
0 commit comments