Skip to content

Commit 00310c6

Browse files
suhasmatapathisuhasmatapathi
authored
Merge pull request #216 from mercedes-benz/develop
Sprint 63: Dev to prod deployment
2 parents cf0cf2d + b7d206c commit 00310c6

25 files changed

+694
-267
lines changed

‎public/Update_Paths_Tool_logo_Inverted.png‎

46.3 KB
Loading

‎public/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,10 @@
105105
color: rgb(222, 222, 222);
106106
}
107107

108+
.no-options-text {
109+
color: #787da4 !important;
110+
}
111+
108112
.MuiDataGrid-footerContainer {
109113
border: none !important;
110114
}

‎public/support-dark.png‎

1.83 KB
Loading

‎public/support-light.png‎

1.05 KB
Loading

‎src/application/Application.tsx‎

Lines changed: 74 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { Suspense, useEffect } from 'react';
2+
import { ThemeProvider } from '@mui/material/styles';
3+
import { lightTheme, darkTheme } from '../component/theme/Themes';
24
import NeoWelcomeScreenModal from '../modal/WelcomeScreenModal';
35
import { connect } from 'react-redux';
46
import {
@@ -101,15 +103,15 @@ const Application = ({
101103
useEffect(() => {
102104
if (!initialized) {
103105
// Tell Neo4j Desktop to disable capturing right clicking
104-
window.neo4jDesktopApi &&
105-
window.neo4jDesktopApi.showMenuOnRightClick &&
106-
window.neo4jDesktopApi.showMenuOnRightClick(false);
106+
(window as any).neo4jDesktopApi &&
107+
(window as any).neo4jDesktopApi.showMenuOnRightClick &&
108+
(window as any).neo4jDesktopApi.showMenuOnRightClick(false);
107109
setInitialized(true);
108110
initializeApplication(initialized);
109111
}
110112
}, []);
111113

112-
const ref = React.useRef();
114+
const ref = React.useRef<HTMLDivElement | null>(null);
113115

114116
useEffect(() => {
115117
if (themeMode === 'dark') {
@@ -124,73 +126,77 @@ const Application = ({
124126
};
125127

126128
// Only render the dashboard component if we have an active Neo4j connection.
129+
const muiTheme = themeMode === 'dark' ? darkTheme : lightTheme;
130+
127131
return (
128-
<div
129-
onContextMenu={disableContextMenu}
130-
ref={ref}
131-
className={`n-bg-palette-neutral-bg-default n-h-screen n-w-screen n-flex n-flex-col n-overflow-hidden`}
132-
>
133-
{connected ? (
132+
<ThemeProvider theme={muiTheme}>
133+
<div
134+
onContextMenu={disableContextMenu}
135+
ref={ref}
136+
className={`n-bg-palette-neutral-bg-default n-h-screen n-w-screen n-flex n-flex-col n-overflow-hidden`}
137+
>
138+
{connected ? (
139+
<Suspense fallback=''>
140+
<Dashboard
141+
onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}
142+
onAboutModalOpen={onAboutModalOpen}
143+
resetApplication={resetApplication}
144+
></Dashboard>
145+
</Suspense>
146+
) : (
147+
<NeoDashboardPlaceholder></NeoDashboardPlaceholder>
148+
)}
149+
{/* TODO - move all models into a pop-ups (or modals) component. */}
150+
<Suspense fallback=''>
151+
<NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
152+
</Suspense>
153+
<NeoConnectionModal
154+
open={connectionModalOpen}
155+
connected={connected}
156+
dismissable={!standalone}
157+
connection={connection}
158+
ssoSettings={ssoSettings}
159+
standalone={standaloneSettings.standalone}
160+
standaloneSettings={standaloneSettings}
161+
createConnection={createConnection}
162+
onSSOAttempt={onSSOAttempt}
163+
setConnectionProperties={setConnectionDetails}
164+
onConnectionModalClose={onConnectionModalClose}
165+
setWelcomeScreenOpen={setWelcomeScreenOpen}
166+
></NeoConnectionModal>
167+
<NeoWelcomeScreenModal
168+
welcomeScreenOpen={welcomeScreenOpen}
169+
setWelcomeScreenOpen={setWelcomeScreenOpen}
170+
hasCachedDashboard={hasCachedDashboard}
171+
hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
172+
onConnectionModalOpen={onConnectionModalOpen}
173+
createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
174+
onAboutModalOpen={onAboutModalOpen}
175+
resetDashboard={resetDashboard}
176+
></NeoWelcomeScreenModal>
177+
<Suspense fallback=''>
178+
<NeoUpgradeOldDashboardModal
179+
open={oldDashboard}
180+
text={oldDashboard}
181+
loadDashboard={loadDashboard}
182+
clearOldDashboard={clearOldDashboard}
183+
/>
184+
</Suspense>
185+
<Suspense fallback=''>
186+
<NeoLoadSharedDashboardModal
187+
shareDetails={shareDetails}
188+
onResetShareDetails={onResetShareDetails}
189+
onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
190+
/>
191+
</Suspense>
192+
<Suspense fallback=''>
193+
<NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
194+
</Suspense>
134195
<Suspense fallback=''>
135-
<Dashboard
136-
onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}
137-
onAboutModalOpen={onAboutModalOpen}
138-
resetApplication={resetApplication}
139-
></Dashboard>
196+
<NeoNotificationModal></NeoNotificationModal>
140197
</Suspense>
141-
) : (
142-
<NeoDashboardPlaceholder></NeoDashboardPlaceholder>
143-
)}
144-
{/* TODO - move all models into a pop-ups (or modals) component. */}
145-
<Suspense fallback=''>
146-
<NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
147-
</Suspense>
148-
<NeoConnectionModal
149-
open={connectionModalOpen}
150-
connected={connected}
151-
dismissable={!standalone}
152-
connection={connection}
153-
ssoSettings={ssoSettings}
154-
standalone={standaloneSettings.standalone}
155-
standaloneSettings={standaloneSettings}
156-
createConnection={createConnection}
157-
onSSOAttempt={onSSOAttempt}
158-
setConnectionProperties={setConnectionDetails}
159-
onConnectionModalClose={onConnectionModalClose}
160-
setWelcomeScreenOpen={setWelcomeScreenOpen}
161-
></NeoConnectionModal>
162-
<NeoWelcomeScreenModal
163-
welcomeScreenOpen={welcomeScreenOpen}
164-
setWelcomeScreenOpen={setWelcomeScreenOpen}
165-
hasCachedDashboard={hasCachedDashboard}
166-
hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
167-
onConnectionModalOpen={onConnectionModalOpen}
168-
createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
169-
onAboutModalOpen={onAboutModalOpen}
170-
resetDashboard={resetDashboard}
171-
></NeoWelcomeScreenModal>
172-
<Suspense fallback=''>
173-
<NeoUpgradeOldDashboardModal
174-
open={oldDashboard}
175-
text={oldDashboard}
176-
loadDashboard={loadDashboard}
177-
clearOldDashboard={clearOldDashboard}
178-
/>
179-
</Suspense>
180-
<Suspense fallback=''>
181-
<NeoLoadSharedDashboardModal
182-
shareDetails={shareDetails}
183-
onResetShareDetails={onResetShareDetails}
184-
onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
185-
/>
186-
</Suspense>
187-
<Suspense fallback=''>
188-
<NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
189-
</Suspense>
190-
<Suspense fallback=''>
191-
<NeoNotificationModal></NeoNotificationModal>
192-
</Suspense>
193-
</div>
198+
</div>
199+
</ThemeProvider>
194200
);
195201
};
196202

‎src/card/view/CardView.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const NeoCardView = ({
4949
}) => {
5050
const reportHeight = heightPx - CARD_FOOTER_HEIGHT - CARD_HEADER_HEIGHT + 20;
5151
const cardHeight = heightPx - CARD_FOOTER_HEIGHT + 23;
52-
const ref = React.useRef();
52+
const ref = React.useRef<HTMLDivElement | null>(null);
5353

5454
const settingsSelector = Object.keys(
5555
Object.fromEntries(Object.entries(REPORT_TYPES[type]?.settings || {}).filter(([_, value]) => value.refresh))
@@ -279,12 +279,28 @@ const NeoCardView = ({
279279
</CardContent>
280280
);
281281

282+
const isDark = dashboardSettings?.theme === 'dark';
283+
// Default: in light mode respect per-card backgroundColor; in dark mode
284+
// ignore per-card backgrounds to let the global dark theme apply.
285+
// Special case: expanded view has a CSS rule `.card-view.expanded { background: white; }`
286+
// which would force a white background even in dark mode. To override that
287+
// we apply a dark inline background when expanded + dark theme so the card
288+
// remains dark.
289+
let cardStyle: any = undefined;
290+
if (isDark) {
291+
if (expanded) {
292+
cardStyle = { backgroundColor: 'var(--palette-dark-surface, #111827)' };
293+
}
294+
} else if (settings?.backgroundColor) {
295+
cardStyle = { backgroundColor: settings.backgroundColor };
296+
}
297+
282298
return (
283299
<div
284300
className={`card-view n-bg-palette-neutral-bg-weak n-text-palette-neutral-text-default ${
285301
expanded ? 'expanded' : ''
286302
}`}
287-
style={settings && settings.backgroundColor ? { backgroundColor: settings.backgroundColor } : {}}
303+
style={cardStyle}
288304
>
289305
{reportHeader}
290306
{/* if there's no selection for this report, we don't have a footer, so the report can be taller. */}

‎src/card/view/CardViewHeader.tsx‎

Lines changed: 52 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import { Badge, CardHeader, Dialog, DialogContent, DialogTitle, TextField, Tooltip } from '@mui/material';
2+
import { CardHeader, Dialog, DialogContent, DialogTitle, TextField, Tooltip } from '@mui/material';
33
import debounce from 'lodash/debounce';
44
import { useCallback } from 'react';
55
import ReactMarkdown from 'react-markdown';
@@ -18,7 +18,6 @@ import {
1818
XMarkIconOutline,
1919
MinusIconOutline,
2020
} from '@neo4j-ndl/react/icons';
21-
import { createTheme, ThemeProvider } from '@mui/material/styles';
2221

2322
const NeoCardViewHeader = ({
2423
title,
@@ -65,75 +64,58 @@ const NeoCardViewHeader = ({
6564
}
6665
}, [title]);
6766

68-
const theme = createTheme({
69-
typography: {
70-
fontFamily: "'Nunito Sans', sans-serif !important",
71-
allVariants: { color: 'rgb(var(--palette-neutral-text-weak))' },
72-
},
73-
palette: {
74-
text: {
75-
primary: 'rgb(var(--palette-neutral-text))',
76-
},
77-
action: {
78-
disabled: 'rgb(var(--palette-neutral-text-weak))',
79-
},
80-
},
81-
});
82-
8367
const cardTitle = (
84-
<ThemeProvider theme={theme}>
85-
<table style={{ width: '100%' }}>
86-
<tbody>
87-
<tr>
88-
{editable ? (
89-
<td>
90-
<IconButton
91-
className='n-mb-3 n-relative -n-left-3 drag-handle'
92-
clean
93-
size='medium'
94-
aria-label={'drag'}
95-
onClick={() => {}}
96-
>
97-
<DragIcon />
98-
</IconButton>
99-
</td>
100-
) : (
101-
<></>
102-
)}
103-
<td style={{ width: '100%' }}>
104-
<TextField
105-
id='standard-outlined'
106-
onFocus={() => {
107-
setEditing(true);
108-
}}
109-
onBlur={() => {
110-
setEditing(false);
111-
}}
112-
className={'no-underline large'}
113-
label=''
114-
disabled={!editable}
115-
placeholder='Report name...'
116-
fullWidth
117-
maxRows={4}
118-
value={editing ? text : parsedText !== ' ' ? parsedText : ''}
119-
onChange={(event) => {
120-
setText(event.target.value);
121-
debouncedTitleUpdate(event.target.value);
122-
}}
123-
size={'small'}
124-
style={{ paddingTop: '0px important!' }}
125-
variant={'standard'}
126-
sx={{
127-
'& .MuiInputBase-input.Mui-disabled': {
128-
WebkitTextFillColor: 'inherit',
129-
},
130-
}}
131-
/>
68+
<table style={{ width: '100%' }}>
69+
<tbody>
70+
<tr>
71+
{editable ? (
72+
<td>
73+
<IconButton
74+
className='n-mb-3 n-relative -n-left-3 drag-handle'
75+
clean
76+
size='medium'
77+
aria-label={'drag'}
78+
onClick={() => {}}
79+
>
80+
<DragIcon />
81+
</IconButton>
13282
</td>
133-
</tr>
134-
</tbody>
135-
</table>
136-
</ThemeProvider>
83+
) : (
84+
<></>
85+
)}
86+
<td style={{ width: '100%' }}>
87+
<TextField
88+
id='standard-outlined'
89+
onFocus={() => {
90+
setEditing(true);
91+
}}
92+
onBlur={() => {
93+
setEditing(false);
94+
}}
95+
className={'no-underline large'}
96+
label=''
97+
disabled={!editable}
98+
placeholder='Report name...'
99+
fullWidth
100+
maxRows={4}
101+
value={editing ? text : parsedText !== ' ' ? parsedText : ''}
102+
onChange={(event) => {
103+
setText(event.target.value);
104+
debouncedTitleUpdate(event.target.value);
105+
}}
106+
size={'small'}
107+
style={{ paddingTop: '0px important!' }}
108+
variant={'standard'}
109+
sx={{
110+
'& .MuiInputBase-input.Mui-disabled': {
111+
WebkitTextFillColor: 'inherit',
112+
},
113+
}}
114+
/>
115+
</td>
116+
</tr>
117+
</tbody>
118+
</table>
137119
);
138120

139121
const descriptionEnabled = description && description.length > 0;
@@ -214,7 +196,7 @@ const NeoCardViewHeader = ({
214196
</DialogTitle>
215197
<DialogContent style={{ minWidth: '400px' }}>
216198
<div>
217-
<base target='_blank' /> <ReactMarkdown plugins={[gfm]} children={description} />
199+
<base target='_blank' /> <ReactMarkdown remarkPlugins={[gfm]}>{description}</ReactMarkdown>
218200
</div>
219201
</DialogContent>
220202
</Dialog>

‎src/chart/graph/GraphChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,12 +152,12 @@ const NeoGraphChart = (props: GraphChartProps) => {
152152
style: {
153153
width: width,
154154
height: height,
155-
backgroundColor: theme == 'dark' && settings.backgroundColor == '#fafafa' ? '#040404' : settings.backgroundColor, // Temporary fix for default color adjustment in dark mode
155+
backgroundColor: theme == 'dark' ? '#23262b' : settings.backgroundColor, // Temporary fix for default color adjustment in dark mode
156156
linkDirectionalParticles: linkDirectionalParticles,
157157
linkDirectionalArrowLength: arrowLengthProp,
158158
linkDirectionalParticleSpeed: settings.linkDirectionalParticleSpeed,
159159
nodeLabelFontSize: settings.nodeLabelFontSize,
160-
nodeLabelColor: theme == 'dark' && settings.nodeLabelColor == 'black' ? 'white' : settings.nodeLabelColor, // Temporary fix for default color adjustment in dark mode
160+
nodeLabelColor: theme == 'dark' ? 'white' : settings.nodeLabelColor, // Temporary fix for default color adjustment in dark mode
161161
relLabelFontSize: settings.relLabelFontSize,
162162
relLabelColor: settings.relLabelColor,
163163
defaultNodeSize: settings.defaultNodeSize,

0 commit comments

Comments
 (0)