feat: [PROD-14973] add breadcrumb bar and status-bar

public/locales/en/translation.json

@@ -95,6 +95,14 @@
         }
       }
     },
+    "tabLayout": {
+      "statusBar": {
+        "prerun": {
+          "message": "This scenario has not been run yet.",
+          "tooltip": "This scenario has not been run yet."
+        }
+      }
+    },
     "cytoviz": {
       "elementDetails": "Details",
       "loading": "Loading...",

src/components/AppBar/AppBar.js

@@ -1,33 +1,47 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
+import { Bot, Languages } from 'lucide-react';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AppBar as MuiAppBar, Toolbar } from '@mui/material';
-import { HelpMenuWrapper, Logo, ThemeSwitch, UserInfoWrapper, WorkspaceInfo } from './components';
+import { Button, AppBar as MuiAppBar, Toolbar } from '@mui/material';
+import { StatusBar } from '../';
+import { useCurrentSimulationRunner } from '../../state/runner/hooks';
+import { ThemeSwitch } from './components';
 
 export const AppBar = ({ children }) => {
+  const currentScenario = useCurrentSimulationRunner();
+
   return (
     <MuiAppBar
       position="sticky"
       sx={{
-        backgroundColor: (theme) => theme.palette.appbar.main,
-        color: (theme) => theme.palette.appbar.contrastText,
+        backgroundColor: (theme) => theme.palette.background.background01.main,
+        color: (theme) => theme.palette.neutral.neutral02.main,
+        boxShadow: 'none',
+        borderBottom: (theme) => `1px solid ${theme.palette.background.background02.main}`,
       }}
     >
-      <Toolbar variant="dense" disableGutters={true}>
-        <WorkspaceInfo />
-        <div style={{ flexGrow: 1 }}>{children}</div>
+      <Toolbar variant="dense" disableGutters={true} sx={{ px: 1 }}>
+        <div style={{ flexGrow: 1, display: 'flex', alignItems: 'center', gap: '8px' }}>{children}</div>
+        {currentScenario?.data?.name && (
+          <StatusBar status="valid" size="medium" tooltip="This scenario has not been run yet." />
+        )}
+        <Button sx={{ ml: 1 }} variant="copilot" state="enabled" startIcon={<Bot />}>
+          CoPilot
+        </Button>
         <ThemeSwitch />
-        <HelpMenuWrapper />
-        <UserInfoWrapper />
-        <Logo />
+        <Button
+          sx={{ ml: 1, backgroundColor: (theme) => theme.palette.neutral.neutral04.main }}
+          variant="default"
+          state="enabled"
+          startIcon={<Languages />}
+        >
+          English
+        </Button>
       </Toolbar>
     </MuiAppBar>
   );
 };
 AppBar.propTypes = {
-  /**
-   * React component to be implemented in dynamic part of the app bar
-   */
   children: PropTypes.node,
 };

src/components/AppBar/components/ThemeSwitch.js

@@ -1,30 +1,33 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
+import { Moon, Sun } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Brightness2 as Brightness2Icon, WbSunny as WbSunnyIcon } from '@mui/icons-material';
-import { Fade, IconButton, Tooltip } from '@mui/material';
+import { Button, Fade, Tooltip } from '@mui/material';
 import { useApplicationTheme } from '../../../state/app/hooks';
 
 export const ThemeSwitch = () => {
   const { t } = useTranslation();
   const { isDarkTheme, toggleTheme } = useApplicationTheme();
 
-  const { tooltipText, icon } = useMemo(
+  const { tooltipText } = useMemo(
     () => ({
       tooltipText: isDarkTheme
         ? t('genericcomponent.switchtheme.light', 'Switch to light')
         : t('genericcomponent.switchtheme.dark', 'Switch to dark'),
-      icon: isDarkTheme ? <WbSunnyIcon /> : <Brightness2Icon />,
     }),
     [t, isDarkTheme]
   );
 
   return (
     <Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title={tooltipText}>
-      <IconButton sx={{ color: (theme) => theme.palette.appbar.contrastText }} onClick={toggleTheme} size="large">
-        {icon}
-      </IconButton>
+      <Button
+        sx={{ ml: 1 }}
+        variant="outlined"
+        state="enabled"
+        startIcon={isDarkTheme ? <Moon /> : <Sun />}
+        onClick={toggleTheme}
+      />
     </Tooltip>
   );
 };

src/components/CreateScenarioButton/CreateScenarioButtonHook.js

@@ -26,7 +26,7 @@ export const useCreateScenarioButton = ({ disabled, onScenarioCreated }) => {
   const solution = useSolution();
 
   const workspaceData = useWorkspaceData();
-  const workspaceId = workspaceData.id;
+  const workspaceId = workspaceData?.id;
   const workspaceDatasets = useWorkspaceDatasets();
   const usableDatasets = workspaceDatasets.filter(
     (dataset) =>

src/components/MainNavigation/MainNavigation.js

@@ -44,19 +44,19 @@ export const MainNavigation = ({ activeSection, onSectionChange, onDrawerWidthCh
   const isUserMenuOpen = Boolean(userMenuAnchor);
   const [activeUserMenuItem, setActiveUserMenuItem] = useState('profile');
 
-  const navigationPalette = theme.palette?.navigation;
+  const navigationPalette = theme.palette;
   const navColors = {
-    background: navigationPalette?.background,
-    border: navigationPalette?.border,
-    text: navigationPalette?.text,
-    hoverBg: navigationPalette?.hoverBg,
-    mutedBg: navigationPalette?.mutedBg,
-    activeBg: navigationPalette?.activeBg,
-    activeText: navigationPalette?.activeText,
-    icon: navigationPalette?.icon,
-    menuBackground: navigationPalette?.menuBackground,
-    scrollbarThumb: navigationPalette?.scrollbarThumb,
-    scrollbarThumbHover: navigationPalette?.scrollbarThumbHover,
+    background: navigationPalette?.background.background01.main,
+    border: navigationPalette?.background.background02.main,
+    text: navigationPalette?.secondary.main,
+    hoverBg: navigationPalette?.background.background02.main,
+    mutedBg: navigationPalette?.neutral.neutral05.main,
+    activeBg: navigationPalette?.neutral.neutral04.main,
+    activeText: navigationPalette?.neutral.neutral04.main,
+    icon: navigationPalette?.secondary.main,
+    menuBackground: navigationPalette?.neutral.neutral04.main,
+    scrollbarThumb: navigationPalette?.neutral.neutral06.main,
+    scrollbarThumbHover: navigationPalette?.neutral.neutral07.main,
   };
 
   const publicUrl = ConfigService.getParameterValue('PUBLIC_URL') ?? '';

src/components/MainNavigation/components/ScenarioList.js

@@ -39,7 +39,7 @@ const buildScenarioTree = (scenarios) => {
 
 export const ScenarioList = ({ disabled, scenarios, activeScenarioId, onScenarioChange, isCollapsed }) => {
   const theme = useTheme();
-  const navColors = theme.palette?.navigation ?? {};
+  const navColors = theme.palette ?? {};
   const scenarioTree = useMemo(() => buildScenarioTree(scenarios), [scenarios]);
 
   const handleScenarioClick = (scenarioId) => {
@@ -67,16 +67,16 @@ export const ScenarioList = ({ disabled, scenarios, activeScenarioId, onScenario
         mb: 0.5,
         '&::-webkit-scrollbar': {
           width: 8,
-          border: `1px solid ${navColors.border}`,
+          border: `1px solid ${navColors.background.background02.main}`,
         },
         '&::-webkit-scrollbar-track': {
           background: 'transparent',
         },
         '&::-webkit-scrollbar-thumb': {
-          background: navColors.scrollbarThumb,
+          background: navColors.neutral.neutral06.main,
           borderRadius: '4px',
           '&:hover': {
-            background: navColors.scrollbarThumbHover,
+            background: navColors.neutral.neutral07.main,
           },
         },
       }}

src/components/MainNavigation/components/UserMenu.js

@@ -8,7 +8,7 @@ import { useTheme } from '@mui/material/styles';
 
 export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeUserMenuItem, onMenuAction }) => {
   const theme = useTheme();
-  const navColors = theme.palette?.navigation ?? {};
+  const navColors = theme.palette ?? {};
   const menuItems = [
     { id: 'settings', label: 'Settings', icon: Settings },
     { id: 'profile', label: 'Profile', icon: User },
@@ -39,8 +39,8 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
         paper: {
           sx: {
             borderRadius: '4px',
-            border: `1px solid ${navColors.border}`,
-            backgroundColor: navColors.menuBackground,
+            border: `1px solid ${navColors.background.background02.main}`,
+            backgroundColor: navColors.neutral.neutral04.main,
             minWidth: 200,
             mt: 1,
             p: 0,
@@ -54,13 +54,13 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
           px: 2,
           pt: 2,
           pb: 1,
-          borderBottom: `1px solid ${navColors.border}`,
+          borderBottom: `1px solid ${navColors.background.background02.main}`,
         }}
       >
         <Typography
           variant="subtitle2"
           sx={{
-            color: navColors.text,
+            color: navColors.secondary.main,
             mb: 0.5,
           }}
         >
@@ -69,7 +69,7 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
         <Typography
           variant="body2"
           sx={{
-            color: navColors.text,
+            color: navColors.secondary.main,
           }}
         >
           {userEmail || 'Anonymous'}
@@ -90,18 +90,18 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
                 py: 1.25,
                 minHeight: 48,
                 gap: 1.5,
-                color: navColors.text,
+                color: navColors.secondary.main,
                 borderRadius: 0,
-                backgroundColor: isActive ? navColors.mutedBg : navColors.menuBackground,
+                backgroundColor: isActive ? navColors.neutral.neutral05.main : navColors.neutral.neutral04.main,
                 '&:hover': {
-                  backgroundColor: navColors.mutedBg,
+                  backgroundColor: navColors.neutral.neutral05.main,
                 },
               }}
             >
               <ListItemIcon
                 sx={{
                   minWidth: 24,
-                  color: navColors.icon,
+                  color: navColors.secondary.main,
                   display: 'flex',
                   justifyContent: 'center',
                 }}
@@ -112,15 +112,15 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
                 primary={item.label}
                 primaryTypographyProps={{
                   variant: 'subtitle2',
-                  color: navColors.text,
+                  color: navColors.secondary.main,
                 }}
               />
             </MenuItem>
           );
         })}
       </Box>
 
-      <Divider sx={{ borderColor: navColors.border }} />
+      <Divider sx={{ borderColor: navColors.background.background02.main }} />
 
       <MenuItem
         variant="navigation"
@@ -130,17 +130,17 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
           py: 1.25,
           minHeight: 48,
           gap: 1.5,
-          color: navColors.text,
+          color: navColors.secondary.main,
           borderRadius: 0,
           '&:hover': {
-            backgroundColor: navColors.mutedBg,
+            backgroundColor: navColors.neutral.neutral05.main,
           },
         }}
       >
         <ListItemIcon
           sx={{
             minWidth: 24,
-            color: navColors.icon,
+            color: navColors.secondary.main,
             display: 'flex',
             justifyContent: 'center',
           }}
@@ -151,7 +151,7 @@ export const UserMenu = ({ anchorEl, open, onClose, userName, userEmail, activeU
           primary="Log out"
           primaryTypographyProps={{
             variant: 'subtitle2',
-            color: navColors.text,
+            color: navColors.secondary.main,
           }}
         />
       </MenuItem>

src/components/MainNavigation/components/UserProfile.js

@@ -10,7 +10,7 @@ import { getNavigationItemStyles, getListItemIconStyles, getListItemTextStyles }
 
 export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed, onUserMenuClick, isUserMenuOpen }) => {
   const theme = useTheme();
-  const navColors = theme.palette?.navigation ?? {};
+  const navColors = theme.palette ?? {};
   const truncatedEmail = React.useMemo(() => {
     if (!userEmail) return 'Anonymous';
     if (userEmail.length > 25) {
@@ -55,7 +55,7 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
 
       <Box
         sx={{
-          borderTop: `1px solid ${navColors.border}`,
+          borderTop: `1px solid ${navColors.background.background02.main}`,
           mt: 1,
           pt: 2,
           mx: isCollapsed ? -1 : -2,
@@ -113,7 +113,7 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
                 <Typography
                   variant="subtitle2"
                   sx={{
-                    color: navColors.text,
+                    color: navColors.secondary.main,
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -124,7 +124,7 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
                 <Typography
                   variant="caption"
                   sx={{
-                    color: navColors.text,
+                    color: navColors.secondary.main,
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -143,13 +143,13 @@ export const UserProfile = ({ userName, userEmail, userProfilePic, isCollapsed,
               aria-haspopup="true"
               aria-expanded={isUserMenuOpen ? 'true' : undefined}
               sx={{
-                color: navColors.text,
+                color: navColors.secondary.main,
                 paddingX: 1,
                 borderRadius: '8px',
-                backgroundColor: navColors.menuBackground,
+                backgroundColor: navColors.neutral.neutral04.main,
                 '&:hover': {
-                  backgroundColor: navColors.hoverBg,
-                  color: navColors.text,
+                  backgroundColor: navColors.background.background02.main,
+                  color: navColors.secondary.main,
                 },
               }}
             >

src/components/ShareCurrentScenarioButton/ShareCurrentScenarioButtonHook.js

@@ -40,7 +40,7 @@ export const useShareCurrentScenarioButton = () => {
     return SecurityUtils.getScenarioPermissionsLabels(t, permissionsNames);
   }, [permissions.runner, t]);
 
-  const workspaceUsers = useMemo(() => workspaceData.users.map((user) => ({ id: user })), [workspaceData.users]);
+  const workspaceUsers = useMemo(() => workspaceData?.users?.map((user) => ({ id: user })), [workspaceData?.users]);
 
   const accessListSpecific = useMemo(
     () => currentScenarioData?.security?.accessControlList ?? [],