Skip to content

Commit 182d8ee

Browse files
arianber7arianber7
committed
fix: resolve issues in status-bars and breadcrumbars
fix: remove default props from status-bar
1 parent 1355afd commit 182d8ee

File tree

6 files changed

+160
-49
lines changed

6 files changed

+160
-49
lines changed

‎.storybook/main.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { dirname, resolve as resolvePath } from 'path';
2+
import { fileURLToPath } from 'url';
3+
import webpack from 'webpack';
4+
5+
const __dirname = dirname(fileURLToPath(import.meta.url));
6+
17
const config = {
28
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
39

@@ -23,6 +29,18 @@ const config = {
2329
(plugin) => !(plugin.constructor && plugin.constructor.name === 'ESLintWebpackPlugin')
2430
);
2531

32+
config.resolve.fallback = {
33+
...config.resolve.fallback,
34+
stream: resolvePath(__dirname, '../node_modules/stream-browserify'),
35+
process: resolvePath(__dirname, '../node_modules/process/browser'),
36+
};
37+
38+
config.plugins.push(
39+
new webpack.DefinePlugin({
40+
'process.env': '{}',
41+
})
42+
);
43+
2644
return config;
2745
},
2846
};

‎src/components/AppBar/AppBar.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33
import { Bot, Languages } from 'lucide-react';
44
import React from 'react';
55
import PropTypes from 'prop-types';
6-
import { Button, AppBar as MuiAppBar, Toolbar } from '@mui/material';
6+
import { Box, Button, AppBar as MuiAppBar, Toolbar } from '@mui/material';
77
import { StatusBar } from '../';
8-
import { useCurrentSimulationRunner } from '../../state/runner/hooks';
98
import { ThemeSwitch } from './components';
109

11-
export const AppBar = ({ children }) => {
12-
const currentScenario = useCurrentSimulationRunner();
13-
10+
export const AppBar = ({ children, currentScenario }) => {
1411
return (
1512
<MuiAppBar
1613
position="sticky"
@@ -21,27 +18,30 @@ export const AppBar = ({ children }) => {
2118
borderBottom: (theme) => `1px solid ${theme.palette.background.background02.main}`,
2219
}}
2320
>
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>
32-
<ThemeSwitch />
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>
21+
<Toolbar variant="dense" disableGutters={true} sx={{ px: 1, gap: 3 }}>
22+
<Box sx={{ width: '70%', display: 'flex', alignItems: 'center', gap: 1, overflow: 'hidden' }}>{children}</Box>
23+
<Box sx={{ display: 'flex', alignItems: 'center', width: '30%', justifyContent: 'flex-end' }}>
24+
{currentScenario?.data?.name && (
25+
<StatusBar status="valid" size="medium" tooltip="This scenario has not been run yet." />
26+
)}
27+
<Button sx={{ ml: 1 }} variant="copilot" state="enabled" startIcon={<Bot />}>
28+
CoPilot
29+
</Button>
30+
<ThemeSwitch />
31+
<Button
32+
sx={{ ml: 1, backgroundColor: (theme) => theme.palette.neutral.neutral04.main }}
33+
variant="default"
34+
state="enabled"
35+
startIcon={<Languages />}
36+
>
37+
English
38+
</Button>
39+
</Box>
4140
</Toolbar>
4241
</MuiAppBar>
4342
);
4443
};
4544
AppBar.propTypes = {
4645
children: PropTypes.node,
46+
currentScenario: PropTypes.object,
4747
};

‎src/components/AppBar/components/BreadcrumbItem.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Typography, Link as MuiLink } from '@mui/material';
4+
5+
export const BreadcrumbItem = ({ href, children, maxWidth = '100%' }) => {
6+
return (
7+
<MuiLink underline="hover" color="inherit" href={href} sx={{ display: 'inline-block', maxWidth }}>
8+
<Typography
9+
fontSize={14}
10+
sx={{
11+
overflow: 'hidden',
12+
textOverflow: 'ellipsis',
13+
whiteSpace: 'nowrap',
14+
minWidth: 0,
15+
}}
16+
title={children}
17+
>
18+
{children}
19+
</Typography>
20+
</MuiLink>
21+
);
22+
};
23+
24+
BreadcrumbItem.propTypes = {
25+
href: PropTypes.string.isRequired,
26+
children: PropTypes.node.isRequired,
27+
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
28+
};

‎src/components/StatusBar/StatusBar.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ const STATUS_CONFIG = (theme) => ({
3939
});
4040

4141
const SIZE_CONFIG = {
42-
small: { height: 36, padding: '0 8px', fontSize: '14px' },
43-
medium: { height: 36, padding: '0 8px', fontSize: '14px' },
44-
full: { height: 44, padding: '0 16px', fontSize: '14px' },
42+
small: { height: 36, padding: '0 8px', fontSize: '12px' },
43+
medium: { height: 36, padding: '0 8px', fontSize: '12px' },
44+
full: { height: 44, padding: '0 16px', fontSize: '12px' },
4545
};
4646

4747
export const StatusBar = ({ status, size, message, tooltip }) => {
@@ -61,7 +61,7 @@ export const StatusBar = ({ status, size, message, tooltip }) => {
6161
borderRadius: size === 'full' ? '0px' : '17px',
6262
backgroundColor: statusConfig.bg,
6363
border: `1px solid ${statusConfig.bg}`,
64-
width: size === 'full' ? '100%' : 'auto',
64+
width: size === 'full' ? '100%' : 'fit-content',
6565
}}
6666
>
6767
{statusConfig.icon}
@@ -99,7 +99,7 @@ export const StatusBar = ({ status, size, message, tooltip }) => {
9999
<Typography
100100
sx={{
101101
fontWeight: 600,
102-
fontSize: 14,
102+
fontSize: 12,
103103
lineHeight: 0,
104104
marginRight: 0.5,
105105
color: (theme) => theme.palette.secondary.main,
@@ -117,13 +117,20 @@ export const StatusBar = ({ status, size, message, tooltip }) => {
117117
sx: {
118118
backgroundColor: (theme) => theme.palette.neutral.neutral04.main,
119119
color: (theme) => theme.palette.secondary.main,
120+
padding: '8px 12px',
121+
borderRadius: '6px',
122+
boxShadow: (theme) => theme.shadows[3],
123+
124+
'& .MuiTooltip-arrow': {
125+
color: (theme) => theme.palette.neutral.neutral04.main,
126+
},
120127
},
121128
},
122129
}}
123130
>
124-
<span style={{ marginLeft: size === 'small' ? 8 : 0 }}>
131+
<Box sx={{ ml: size === 'small' ? 1 : 0, display: 'flex', alignItems: 'center', width: 12 }}>
125132
<CircleHelp size={12} color={theme.palette.secondary.main} />
126-
</span>
133+
</Box>
127134
</Tooltip>
128135
</Box>
129136
);
@@ -135,8 +142,3 @@ StatusBar.propTypes = {
135142
message: PropTypes.string,
136143
tooltip: PropTypes.string,
137144
};
138-
139-
StatusBar.defaultProps = {
140-
size: 'medium',
141-
message: '',
142-
};

‎src/layouts/TabLayout/TabLayout.js‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { CircleArrowRight } from 'lucide-react';
44
import React, { Fragment, useEffect } from 'react';
55
import { useTranslation } from 'react-i18next';
66
import { useLocation, Outlet, useParams, useNavigate } from 'react-router-dom';
7-
import { Link as MuiLink, Box, Stack, Typography } from '@mui/material';
7+
import { Box, Stack } from '@mui/material';
88
import { ApplicationErrorBanner, StatusBar } from '../../components';
99
import { AppBar } from '../../components/AppBar';
10+
import { BreadcrumbItem } from '../../components/AppBar/components/BreadcrumbItem';
1011
import { MainNavigation } from '../../components/MainNavigation';
1112
import { useCurrentSimulationRunner, useGetRunner } from '../../state/runner/hooks';
1213
import { useSelectWorkspace, useWorkspace } from '../../state/workspaces/hooks';
@@ -52,24 +53,20 @@ export const TabLayout = () => {
5253
);
5354

5455
const BreadcrumbBar = () => (
55-
<AppBar>
56+
<AppBar currentScenario={currentScenario}>
5657
{currentWorkspace.data ? (
5758
<Fragment>
58-
<MuiLink underline="hover" color="inherit" href={`/${currentWorkspace?.data?.id}`}>
59-
<Typography fontSize={14}>{currentWorkspace?.data?.name}</Typography>
60-
</MuiLink>
59+
<BreadcrumbItem href={`/${currentWorkspace?.data?.id}`} maxWidth="33%">
60+
{currentWorkspace?.data?.name}
61+
</BreadcrumbItem>
6162
<CircleArrowRight size={14} />
62-
<MuiLink underline="hover" color="inherit" href="/scenarios">
63-
<Typography fontSize={14}>Scenarios</Typography>
64-
</MuiLink>
63+
<BreadcrumbItem href="/scenarios" maxWidth="33%">
64+
Scenarios
65+
</BreadcrumbItem>
6566
<CircleArrowRight size={14} />
66-
<MuiLink
67-
underline="hover"
68-
color="inherit"
69-
href={`/${currentWorkspace?.data?.id}/scenario/${currentScenario?.data?.id}`}
70-
>
71-
<Typography fontSize={14}>{currentScenario?.data?.name}</Typography>
72-
</MuiLink>
67+
<BreadcrumbItem href={`/${currentWorkspace?.data?.id}/scenario/${currentScenario?.data?.id}`} maxWidth="33%">
68+
{currentScenario?.data?.name}
69+
</BreadcrumbItem>
7370
</Fragment>
7471
) : (
7572
<Box>{t('genericcomponent.workspaceselector.homebutton')}</Box>

‎src/stories/molecules/BreadcrumBar/BreadcrumbBar.stories.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* eslint-disable react/prop-types */
2+
import { CircleArrowRight } from 'lucide-react';
3+
import React, { Fragment } from 'react';
4+
import { AppBar } from '../../../components/AppBar';
5+
import { BreadcrumbItem } from '../../../components/AppBar/components/BreadcrumbItem';
6+
7+
export default {
8+
title: 'Molecules/Breadcrumb Bar',
9+
component: AppBar,
10+
parameters: {
11+
layout: 'fullscreen',
12+
},
13+
};
14+
15+
const MockBreadcrumb = ({ workspaceName, scenarioName }) => (
16+
<Fragment>
17+
<BreadcrumbItem href="/scenarios" maxWidth="33%">
18+
{workspaceName}
19+
</BreadcrumbItem>
20+
21+
{scenarioName && (
22+
<Fragment>
23+
<CircleArrowRight size={14} />
24+
<BreadcrumbItem href="/scenarios" maxWidth="33%">
25+
Scenarios
26+
</BreadcrumbItem>
27+
</Fragment>
28+
)}
29+
30+
{scenarioName && (
31+
<>
32+
<CircleArrowRight size={14} />
33+
<BreadcrumbItem href="/scenarios" maxWidth="33%">
34+
{scenarioName}
35+
</BreadcrumbItem>
36+
</>
37+
)}
38+
</Fragment>
39+
);
40+
41+
const Template = (args) => (
42+
<AppBar currentScenario={args.currentScenario}>
43+
<MockBreadcrumb {...args} />
44+
</AppBar>
45+
);
46+
47+
export const Default = Template.bind({});
48+
Default.args = {
49+
workspaceName: 'Logistics Optimization',
50+
scenarioName: 'Baseline Scenario',
51+
currentScenario: { data: { name: 'Baseline Scenario' } },
52+
};
53+
54+
export const WorkspaceOnly = Template.bind({});
55+
WorkspaceOnly.args = {
56+
workspaceName: 'Asset Aip Workspaces',
57+
scenarioName: null,
58+
currentScenario: null,
59+
};
60+
61+
export const LongNames = Template.bind({});
62+
LongNames.args = {
63+
workspaceName: 'Very Long Workspace Name To Test UI Layout',
64+
scenarioName: 'Extremely Detailed Scenario',
65+
currentScenario: { data: { name: 'Extremely Detailed Scenario Title Mock For Visual Testing Purposes' } },
66+
};

0 commit comments

Comments
 (0)