Skip to content

Commit 68da534

Browse files
arianber7arianber7
committed
feat: [PROD-14973] add breadcrumb bar and status-bar
feat: [PROD-14973] eslint fix feat: [PROD-14973] add new palette structure feat: [PROD-14981] add dataset-listing feat: [PROD-14981] add dataset-listing feat: [PROD-14981] add dataset-listing
1 parent 98f93dc commit 68da534

File tree

26 files changed

+450
-170
lines changed

26 files changed

+450
-170
lines changed

‎public/locales/en/translation.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,14 @@
9595
}
9696
}
9797
},
98+
"tabLayout": {
99+
"statusBar": {
100+
"prerun": {
101+
"message": "This scenario has not been run yet.",
102+
"tooltip": "This scenario has not been run yet."
103+
}
104+
}
105+
},
98106
"cytoviz": {
99107
"elementDetails": "Details",
100108
"loading": "Loading...",

‎src/components/AppBar/AppBar.js‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,47 @@
11
// Copyright (c) Cosmo Tech.
22
// Licensed under the MIT license.
3+
import { Bot, Languages } from 'lucide-react';
34
import React from 'react';
45
import PropTypes from 'prop-types';
5-
import { AppBar as MuiAppBar, Toolbar } from '@mui/material';
6-
import { HelpMenuWrapper, Logo, ThemeSwitch, UserInfoWrapper, WorkspaceInfo } from './components';
6+
import { Button, AppBar as MuiAppBar, Toolbar } from '@mui/material';
7+
import { StatusBar } from '../';
8+
import { useCurrentSimulationRunner } from '../../state/runner/hooks';
9+
import { ThemeSwitch } from './components';
710

811
export const AppBar = ({ children }) => {
12+
const currentScenario = useCurrentSimulationRunner();
13+
914
return (
1015
<MuiAppBar
1116
position="sticky"
1217
sx={{
13-
backgroundColor: (theme) => theme.palette.appbar.main,
14-
color: (theme) => theme.palette.appbar.contrastText,
18+
backgroundColor: (theme) => theme.palette.background.background01.main,
19+
color: (theme) => theme.palette.neutral.neutral02.main,
20+
boxShadow: 'none',
21+
borderBottom: (theme) => `1px solid ${theme.palette.background.background02.main}`,
1522
}}
1623
>
17-
<Toolbar variant="dense" disableGutters={true}>
18-
<WorkspaceInfo />
19-
<div style={{ flexGrow: 1 }}>{children}</div>
24+
<Toolbar variant="dense" disableGutters={true} sx={{ px: 1 }}>
25+
<div style={{ flexGrow: 1, display: 'flex', alignItems: 'center', gap: '8px' }}>{children}</div>
26+
{currentScenario?.data?.name && (
27+
<StatusBar status="valid" size="medium" tooltip="This scenario has not been run yet." />
28+
)}
29+
<Button sx={{ ml: 1 }} variant="copilot" state="enabled" startIcon={<Bot />}>
30+
CoPilot
31+
</Button>
2032
<ThemeSwitch />
21-
<HelpMenuWrapper />
22-
<UserInfoWrapper />
23-
<Logo />
33+
<Button
34+
sx={{ ml: 1, backgroundColor: (theme) => theme.palette.neutral.neutral04.main }}
35+
variant="default"
36+
state="enabled"
37+
startIcon={<Languages />}
38+
>
39+
English
40+
</Button>
2441
</Toolbar>
2542
</MuiAppBar>
2643
);
2744
};
2845
AppBar.propTypes = {
29-
/**
30-
* React component to be implemented in dynamic part of the app bar
31-
*/
3246
children: PropTypes.node,
3347
};

‎src/components/AppBar/components/ThemeSwitch.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
// Copyright (c) Cosmo Tech.
22
// Licensed under the MIT license.
3+
import { Moon, Sun } from 'lucide-react';
34
import React, { useMemo } from 'react';
45
import { useTranslation } from 'react-i18next';
5-
import { Brightness2 as Brightness2Icon, WbSunny as WbSunnyIcon } from '@mui/icons-material';
6-
import { Fade, IconButton, Tooltip } from '@mui/material';
6+
import { Button, Fade, Tooltip } from '@mui/material';
77
import { useApplicationTheme } from '../../../state/app/hooks';
88

99
export const ThemeSwitch = () => {
1010
const { t } = useTranslation();
1111
const { isDarkTheme, toggleTheme } = useApplicationTheme();
1212

13-
const { tooltipText, icon } = useMemo(
13+
const { tooltipText } = useMemo(
1414
() => ({
1515
tooltipText: isDarkTheme
1616
? t('genericcomponent.switchtheme.light', 'Switch to light')
1717
: t('genericcomponent.switchtheme.dark', 'Switch to dark'),
18-
icon: isDarkTheme ? <WbSunnyIcon /> : <Brightness2Icon />,
1918
}),
2019
[t, isDarkTheme]
2120
);
2221

2322
return (
2423
<Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title={tooltipText}>
25-
<IconButton sx={{ color: (theme) => theme.palette.appbar.contrastText }} onClick={toggleTheme} size="large">
26-
{icon}
27-
</IconButton>
24+
<Button
25+
sx={{ ml: 1 }}
26+
variant="outlined"
27+
state="enabled"
28+
startIcon={isDarkTheme ? <Moon /> : <Sun />}
29+
onClick={toggleTheme}
30+
/>
2831
</Tooltip>
2932
);
3033
};

‎src/components/CreateScenarioButton/CreateScenarioButtonHook.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const useCreateScenarioButton = ({ disabled, onScenarioCreated }) => {
2626
const solution = useSolution();
2727

2828
const workspaceData = useWorkspaceData();
29-
const workspaceId = workspaceData.id;
29+
const workspaceId = workspaceData?.id;
3030
const workspaceDatasets = useWorkspaceDatasets();
3131
const usableDatasets = workspaceDatasets.filter(
3232
(dataset) =>

‎src/components/MainNavigation/MainNavigation.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,19 @@ export const MainNavigation = ({ activeSection, onSectionChange, onDrawerWidthCh
4444
const isUserMenuOpen = Boolean(userMenuAnchor);
4545
const [activeUserMenuItem, setActiveUserMenuItem] = useState('profile');
4646

47-
const navigationPalette = theme.palette?.navigation;
47+
const navigationPalette = theme.palette;
4848
const navColors = {
49-
background: navigationPalette?.background,
50-
border: navigationPalette?.border,
51-
text: navigationPalette?.text,
52-
hoverBg: navigationPalette?.hoverBg,
53-
mutedBg: navigationPalette?.mutedBg,
54-
activeBg: navigationPalette?.activeBg,
55-
activeText: navigationPalette?.activeText,
56-
icon: navigationPalette?.icon,
57-
menuBackground: navigationPalette?.menuBackground,
58-
scrollbarThumb: navigationPalette?.scrollbarThumb,
59-
scrollbarThumbHover: navigationPalette?.scrollbarThumbHover,
49+
background: navigationPalette?.background.background01.main,
50+
border: navigationPalette?.background.background02.main,
51+
text: navigationPalette?.secondary.main,
52+
hoverBg: navigationPalette?.background.background02.main,
53+
mutedBg: navigationPalette?.neutral.neutral05.main,
54+
activeBg: navigationPalette?.neutral.neutral04.main,
55+
activeText: navigationPalette?.neutral.neutral04.main,
56+
icon: navigationPalette?.secondary.main,
57+
menuBackground: navigationPalette?.neutral.neutral04.main,
58+
scrollbarThumb: navigationPalette?.neutral.neutral06.main,
59+
scrollbarThumbHover: navigationPalette?.neutral.neutral07.main,
6060
};
6161

6262
const publicUrl = ConfigService.getParameterValue('PUBLIC_URL') ?? '';

‎src/components/MainNavigation/components/ScenarioList.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const buildScenarioTree = (scenarios) => {
3939

4040
export const ScenarioList = ({ disabled, scenarios, activeScenarioId, onScenarioChange, isCollapsed }) => {
4141
const theme = useTheme();
42-
const navColors = theme.palette?.navigation ?? {};
42+
const navColors = theme.palette ?? {};
4343
const scenarioTree = useMemo(() => buildScenarioTree(scenarios), [scenarios]);
4444

4545
const handleScenarioClick = (scenarioId) => {
@@ -67,16 +67,16 @@ export const ScenarioList = ({ disabled, scenarios, activeScenarioId, onScenario
6767
mb: 0.5,
6868
'&::-webkit-scrollbar': {
6969
width: 8,
70-
border: `1px solid ${navColors.border}`,
70+
border: `1px solid ${navColors.background.background02.main}`,
7171
},
7272
'&::-webkit-scrollbar-track': {
7373
background: 'transparent',
7474
},
7575
'&::-webkit-scrollbar-thumb': {
76-
background: navColors.scrollbarThumb,
76+
background: navColors.neutral.neutral06.main,
7777
borderRadius: '4px',
7878
'&:hover': {
79-
background: navColors.scrollbarThumbHover,
79+
background: navColors.neutral.neutral07.main,
8080
},
8181
},
8282
}}

‎src/components/MainNavigation/components/UserMenu.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useTheme } from '@mui/material/styles';
88

99
export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeUserMenuItem, onMenuAction }) => {
1010
const theme = useTheme();
11-
const navColors = theme.palette?.navigation ?? {};
11+
const navColors = theme.palette ?? {};
1212
const menuItems = [
1313
{ id: 'settings', label: 'Settings', icon: Settings },
1414
{ id: 'profile', label: 'Profile', icon: User },
@@ -39,8 +39,8 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
3939
paper: {
4040
sx: {
4141
borderRadius: '4px',
42-
border: `1px solid ${navColors.border}`,
43-
backgroundColor: navColors.menuBackground,
42+
border: `1px solid ${navColors.background.background02.main}`,
43+
backgroundColor: navColors.neutral.neutral04.main,
4444
minWidth: 200,
4545
mt: 1,
4646
p: 0,
@@ -54,13 +54,13 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
5454
px: 2,
5555
pt: 2,
5656
pb: 1,
57-
borderBottom: `1px solid ${navColors.border}`,
57+
borderBottom: `1px solid ${navColors.background.background02.main}`,
5858
}}
5959
>
6060
<Typography
6161
variant="subtitle2"
6262
sx={{
63-
color: navColors.text,
63+
color: navColors.secondary.main,
6464
mb: 0.5,
6565
}}
6666
>
@@ -69,7 +69,7 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
6969
<Typography
7070
variant="body2"
7171
sx={{
72-
color: navColors.text,
72+
color: navColors.secondary.main,
7373
}}
7474
>
7575
{userEmail || 'Anonymous'}
@@ -90,18 +90,18 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
9090
py: 1.25,
9191
minHeight: 48,
9292
gap: 1.5,
93-
color: navColors.text,
93+
color: navColors.secondary.main,
9494
borderRadius: 0,
95-
backgroundColor: isActive ? navColors.mutedBg : navColors.menuBackground,
95+
backgroundColor: isActive ? navColors.neutral.neutral05.main : navColors.neutral.neutral04.main,
9696
'&:hover': {
97-
backgroundColor: navColors.mutedBg,
97+
backgroundColor: navColors.neutral.neutral05.main,
9898
},
9999
}}
100100
>
101101
<ListItemIcon
102102
sx={{
103103
minWidth: 24,
104-
color: navColors.icon,
104+
color: navColors.secondary.main,
105105
display: 'flex',
106106
justifyContent: 'center',
107107
}}
@@ -112,15 +112,15 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
112112
primary={item.label}
113113
primaryTypographyProps={{
114114
variant: 'subtitle2',
115-
color: navColors.text,
115+
color: navColors.secondary.main,
116116
}}
117117
/>
118118
</MenuItem>
119119
);
120120
})}
121121
</Box>
122122

123-
<Divider sx={{ borderColor: navColors.border }} />
123+
<Divider sx={{ borderColor: navColors.background.background02.main }} />
124124

125125
<MenuItem
126126
variant="navigation"
@@ -130,17 +130,17 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
130130
py: 1.25,
131131
minHeight: 48,
132132
gap: 1.5,
133-
color: navColors.text,
133+
color: navColors.secondary.main,
134134
borderRadius: 0,
135135
'&:hover': {
136-
backgroundColor: navColors.mutedBg,
136+
backgroundColor: navColors.neutral.neutral05.main,
137137
},
138138
}}
139139
>
140140
<ListItemIcon
141141
sx={{
142142
minWidth: 24,
143-
color: navColors.icon,
143+
color: navColors.secondary.main,
144144
display: 'flex',
145145
justifyContent: 'center',
146146
}}
@@ -151,7 +151,7 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
151151
primary="Log out"
152152
primaryTypographyProps={{
153153
variant: 'subtitle2',
154-
color: navColors.text,
154+
color: navColors.secondary.main,
155155
}}
156156
/>
157157
</MenuItem>

‎src/components/MainNavigation/components/UserProfile.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { getNavigationItemStyles, getListItemIconStyles, getListItemTextStyles }
1010

1111
export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed, onUserMenuClick, isUserMenuOpen }) => {
1212
const theme = useTheme();
13-
const navColors = theme.palette?.navigation ?? {};
13+
const navColors = theme.palette ?? {};
1414
const truncatedEmail = React.useMemo(() => {
1515
if (!userEmail) return 'Anonymous';
1616
if (userEmail.length > 25) {
@@ -55,7 +55,7 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
5555

5656
<Box
5757
sx={{
58-
borderTop: `1px solid ${navColors.border}`,
58+
borderTop: `1px solid ${navColors.background.background02.main}`,
5959
mt: 1,
6060
pt: 2,
6161
mx: isCollapsed ? -1 : -2,
@@ -113,7 +113,7 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
113113
<Typography
114114
variant="subtitle2"
115115
sx={{
116-
color: navColors.text,
116+
color: navColors.secondary.main,
117117
whiteSpace: 'nowrap',
118118
overflow: 'hidden',
119119
textOverflow: 'ellipsis',
@@ -124,7 +124,7 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
124124
<Typography
125125
variant="caption"
126126
sx={{
127-
color: navColors.text,
127+
color: navColors.secondary.main,
128128
whiteSpace: 'nowrap',
129129
overflow: 'hidden',
130130
textOverflow: 'ellipsis',
@@ -143,13 +143,13 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
143143
aria-haspopup="true"
144144
aria-expanded={isUserMenuOpen ? 'true' : undefined}
145145
sx={{
146-
color: navColors.text,
146+
color: navColors.secondary.main,
147147
paddingX: 1,
148148
borderRadius: '8px',
149-
backgroundColor: navColors.menuBackground,
149+
backgroundColor: navColors.neutral.neutral04.main,
150150
'&:hover': {
151-
backgroundColor: navColors.hoverBg,
152-
color: navColors.text,
151+
backgroundColor: navColors.background.background02.main,
152+
color: navColors.secondary.main,
153153
},
154154
}}
155155
>

‎src/components/ShareCurrentScenarioButton/ShareCurrentScenarioButtonHook.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const useShareCurrentScenarioButton = () => {
4040
return SecurityUtils.getScenarioPermissionsLabels(t, permissionsNames);
4141
}, [permissions.runner, t]);
4242

43-
const workspaceUsers = useMemo(() => workspaceData.users.map((user) => ({ id: user })), [workspaceData.users]);
43+
const workspaceUsers = useMemo(() => workspaceData?.users?.map((user) => ({ id: user })), [workspaceData?.users]);
4444

4545
const accessListSpecific = useMemo(
4646
() => currentScenarioData?.security?.accessControlList ?? [],

0 commit comments

Comments
 (0)