Skip to content

Commit 275dfb5

Browse files
mattrwangmattrwang
committed
Merge branch '#1644-proposed-solution-redesign' of https://github.com/Northeastern-Electric-Racing/FinishLine into #1644-proposed-solution-redesign
2 parents 5fc77a0 + 2cd0b65 commit 275dfb5

7 files changed

Lines changed: 109 additions & 87 deletions

File tree

‎src/frontend/src/components/InfoBlock.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* This file is part of NER's FinishLine and licensed under GNU AGPLv3.
3+
* See the LICENSE file in the repository root folder for details.
4+
*/
5+
6+
import Typography from '@mui/material/Typography';
7+
import { Grid } from '@mui/material';
8+
9+
interface InfoBlockProps {
10+
title: string;
11+
}
12+
13+
/**
14+
* Custom component for a consistent page-building block.
15+
* @param title The title of the block on the page
16+
* @param children The children of the block
17+
*/
18+
const InfoBlock: React.FC<InfoBlockProps> = ({ title, children }) => {
19+
return (
20+
<Grid container spacing={1}>
21+
<Grid item xs={12}>
22+
<Typography sx={{ fontWeight: 'bold', fontSize: '19px' }}>{title}</Typography>
23+
</Grid>
24+
<Grid item xs={12}>
25+
{children}
26+
</Grid>
27+
</Grid>
28+
);
29+
};
30+
31+
export default InfoBlock;

‎src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestDetailsView.tsx‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -108,45 +108,47 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
108108
/>
109109
}
110110
>
111-
<PageBlock title={'Change Request Details'} headerRight={<b>{changeRequest.status}</b>}>
112-
<Grid container spacing={1}>
113-
<Grid item xs={2}>
114-
<Typography sx={{ maxWidth: '140px', fontWeight: 'bold' }}>Type: </Typography>
111+
<Grid container rowGap={3}>
112+
<Grid container columnSpacing={3}>
113+
<Grid item xs={'auto'}>
114+
<Typography sx={{ fontWeight: 'normal', fontSize: '21px' }}>
115+
<b>WBS: </b>
116+
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
117+
{wbsPipe(changeRequest.wbsNum)} - {projectName}
118+
{isProject(changeRequest.wbsNum) ? '' : ' - ' + changeRequest.wbsName}
119+
</Link>
120+
</Typography>
115121
</Grid>
116-
<Grid item xs={10}>
117-
{changeRequest.type}
122+
<Grid item xs={'auto'}>
123+
<Typography sx={{ fontWeight: 'normal', fontSize: '21px' }}>
124+
<b>Submitter: </b>
125+
{fullNamePipe(changeRequest.submitter)} on {datePipe(changeRequest.dateSubmitted)}
126+
</Typography>
118127
</Grid>
119-
<Grid item xs={2}>
120-
<Typography sx={{ fontWeight: 'bold' }}>WBS #: </Typography>
121-
</Grid>
122-
<Grid item xs={10}>
123-
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
124-
{wbsPipe(changeRequest.wbsNum)} - {projectName}
125-
{isProject(changeRequest.wbsNum) ? '' : ' - ' + changeRequest.wbsName}
126-
</Link>
128+
</Grid>
129+
<Grid container rowSpacing={2} columnSpacing={2}>
130+
<Grid item xs={12}>
131+
{buildDetails(changeRequest)}
127132
</Grid>
128-
<Grid item xs={3} md={2}>
129-
<Typography sx={{ fontWeight: 'bold' }}>Submitted By: </Typography>
133+
<Grid item xs={12}>
134+
{buildProposedSolutions(changeRequest)}
130135
</Grid>
131-
<Grid item xs={2}>
132-
<Typography>{fullNamePipe(changeRequest.submitter)}</Typography>
136+
<Grid item md={5}>
137+
<ReviewNotes
138+
reviewer={changeRequest.reviewer}
139+
reviewNotes={changeRequest.reviewNotes}
140+
dateReviewed={changeRequest.dateReviewed}
141+
/>
133142
</Grid>
134-
<Grid item xs={2}>
135-
<Typography>{datePipe(changeRequest.dateSubmitted)}</Typography>
143+
<Grid item md={6}>
144+
<ImplementedChangesList
145+
changes={changeRequest.implementedChanges || []}
146+
overallDateImplemented={changeRequest.dateImplemented}
147+
/>
136148
</Grid>
137149
</Grid>
138-
</PageBlock>
139-
{buildDetails(changeRequest)}
140-
{buildProposedSolutions(changeRequest)}
141-
<ReviewNotes
142-
reviewer={changeRequest.reviewer}
143-
reviewNotes={changeRequest.reviewNotes}
144-
dateReviewed={changeRequest.dateReviewed}
145-
/>
146-
<ImplementedChangesList
147-
changes={changeRequest.implementedChanges || []}
148-
overallDateImplemented={changeRequest.dateImplemented}
149-
/>
150+
</Grid>
151+
150152
{reviewModalShow && (
151153
<ReviewChangeRequest modalShow={reviewModalShow} handleClose={handleReviewClose} cr={changeRequest} />
152154
)}

‎src/frontend/src/pages/ChangeRequestDetailPage/ImplementedChangesList.tsx‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
*/
55

66
import { ImplementedChange } from 'shared';
7-
import { datePipe, emDashPipe, fullNamePipe, wbsPipe } from '../../utils/pipes';
7+
import { datePipe, fullNamePipe, wbsPipe } from '../../utils/pipes';
88
import { routes } from '../../utils/routes';
99
import { Link, ListItem, List, Typography } from '@mui/material';
10-
import PageBlock from '../../layouts/PageBlock';
1110
import { Link as RouterLink } from 'react-router-dom';
1211
import DynamicTooltip from '../../components/DynamicTooltip';
12+
import InfoBlock from '../../components/InfoBlock';
1313

1414
interface ImplementedChangesListProps {
1515
changes: ImplementedChange[];
@@ -18,30 +18,31 @@ interface ImplementedChangesListProps {
1818

1919
const ImplementedChangesList: React.FC<ImplementedChangesListProps> = ({ changes, overallDateImplemented }) => {
2020
return (
21-
<PageBlock
22-
title={'Implemented Changes'}
23-
headerRight={<>{overallDateImplemented ? datePipe(overallDateImplemented) : emDashPipe('')}</>}
24-
>
21+
<InfoBlock title={`Implemented Changes — ${overallDateImplemented ? datePipe(overallDateImplemented) : 'N/A'}`}>
2522
<List>
26-
{changes.map((ic, idx) => (
27-
<ListItem key={idx}>
28-
<DynamicTooltip title={`${fullNamePipe(ic.implementer)} - ${datePipe(ic.dateImplemented)}`}>
29-
{
30-
<Typography>
31-
[
32-
{
33-
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(ic.wbsNum)}`}>
34-
{wbsPipe(ic.wbsNum)}
35-
</Link>
36-
}
37-
] {ic.detail}
38-
</Typography>
39-
}
40-
</DynamicTooltip>
41-
</ListItem>
42-
))}
23+
{changes.length === 0 ? (
24+
<Typography>— — There are no implemented changes for this change request.</Typography>
25+
) : (
26+
changes.map((ic, idx) => (
27+
<ListItem key={idx}>
28+
<DynamicTooltip title={`${fullNamePipe(ic.implementer)} - ${datePipe(ic.dateImplemented)}`}>
29+
{
30+
<Typography>
31+
[
32+
{
33+
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(ic.wbsNum)}`}>
34+
{wbsPipe(ic.wbsNum)}
35+
</Link>
36+
}
37+
] {ic.detail}
38+
</Typography>
39+
}
40+
</DynamicTooltip>
41+
</ListItem>
42+
))
43+
)}
4344
</List>
44-
</PageBlock>
45+
</InfoBlock>
4546
);
4647
};
4748

‎src/frontend/src/pages/ChangeRequestDetailPage/ReviewNotes.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55

66
import { User } from 'shared';
77
import { datePipe, emDashPipe, fullNamePipe } from '../../utils/pipes';
8-
import PageBlock from '../../layouts/PageBlock';
98
import { Tooltip, Typography } from '@mui/material';
9+
import InfoBlock from '../../components/InfoBlock';
1010

1111
interface ReviewNotesProps {
1212
reviewer?: User;
@@ -16,13 +16,12 @@ interface ReviewNotesProps {
1616

1717
const ReviewNotes: React.FC<ReviewNotesProps> = ({ reviewer, reviewNotes, dateReviewed }: ReviewNotesProps) => {
1818
return (
19-
<PageBlock
20-
title={'Review Notes'}
21-
headerRight={
19+
<InfoBlock title={'Review Notes'}>
20+
<Typography>
2221
<Tooltip
2322
id="tooltip"
2423
arrow
25-
placement="left"
24+
placement="bottom"
2625
title={
2726
<Typography
2827
sx={{
@@ -33,12 +32,11 @@ const ReviewNotes: React.FC<ReviewNotesProps> = ({ reviewer, reviewNotes, dateRe
3332
</Typography>
3433
}
3534
>
36-
<span>{fullNamePipe(reviewer)}</span>
35+
<span>{fullNamePipe(reviewer)} — </span>
3736
</Tooltip>
38-
}
39-
>
40-
{reviewNotes ? reviewNotes : 'There are no review notes for this change request.'}
41-
</PageBlock>
37+
{reviewNotes ?? 'There are no review notes for this change request.'}
38+
</Typography>
39+
</InfoBlock>
4240
);
4341
};
4442

‎src/frontend/src/pages/ChangeRequestDetailPage/StageGateDetails.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,20 @@
33
* See the LICENSE file in the repository root folder for details.
44
*/
55

6-
import { Grid, Typography } from '@mui/material';
76
import { StageGateChangeRequest } from 'shared';
87
import { booleanPipe } from '../../utils/pipes';
9-
import PageBlock from '../../layouts/PageBlock';
8+
import InfoBlock from '../../components/InfoBlock';
9+
import { Typography } from '@mui/material';
1010

1111
interface StageGateDetailsProps {
1212
cr: StageGateChangeRequest;
1313
}
1414

1515
const StageGateDetails: React.FC<StageGateDetailsProps> = ({ cr }) => {
1616
return (
17-
<PageBlock title={'Stage Gate Change Request Details'}>
18-
<Grid container spacing={1}>
19-
<Grid item xs={3}>
20-
<Typography sx={{ fontWeight: 'bold' }}>Confirm WP Completed</Typography>
21-
</Grid>
22-
<Grid item xs={9}>
23-
<Typography>{booleanPipe(cr.confirmDone)}</Typography>
24-
</Grid>
25-
</Grid>
26-
</PageBlock>
17+
<InfoBlock title={'Confirm WP Completed'}>
18+
<Typography>{booleanPipe(cr.confirmDone)}</Typography>
19+
</InfoBlock>
2720
);
2821
};
2922

‎src/frontend/src/tests/pages/ChangeRequestDetailPage/ImplementedChangesList.test.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,12 @@ const renderComponent = (changes: ImplementedChange[] = [], overallDate?: Date)
2222

2323
describe('Rendering Implemented Changes List Component', () => {
2424
it('renders everything', () => {
25-
renderComponent(exampleStandardImplementedChangeRequest.implementedChanges, new Date('2020-01-02 12:00:00'));
26-
27-
expect(screen.getByText(`Implemented Changes`)).toBeInTheDocument();
25+
renderComponent(exampleStandardImplementedChangeRequest.implementedChanges);
2826

27+
expect(screen.getByText('Implemented Changes — N/A')).toBeInTheDocument();
2928
expect(screen.getByText('1.23.3')).toBeInTheDocument();
3029
expect(screen.getByText(/Increase budget to 200/i)).toBeInTheDocument();
3130
expect(screen.getByText('1.23.4')).toBeInTheDocument();
3231
expect(screen.getByText(/Adjust description/i)).toBeInTheDocument();
33-
34-
expect(screen.getByText('01/02/2020')).toBeInTheDocument();
3532
});
3633
});

‎src/frontend/src/tests/pages/ChangeRequestDetailPage/ReviewNotes.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('Change request review notes test', () => {
2828

2929
expect(screen.getByText('Review Notes')).toBeInTheDocument();
3030
expect(screen.getByText(cr[0].reviewNotes ? cr[0].reviewNotes! : NO_REVIEW_NOTES_MSG)).toBeInTheDocument();
31-
expect(screen.getByText(fullNamePipe(exampleAppAdminUser))).toBeInTheDocument();
31+
expect(screen.getByText(`${fullNamePipe(exampleAppAdminUser)} —`)).toBeInTheDocument();
3232
});
3333

3434
it('activation change request render review notes', () => {
@@ -47,21 +47,21 @@ describe('Change request review notes test', () => {
4747

4848
it('renders tooltip on hover', async () => {
4949
renderComponent(cr[0]);
50-
fireEvent.mouseOver(screen.getByText(fullNamePipe(exampleAppAdminUser)));
50+
fireEvent.mouseOver(screen.getByText(`${fullNamePipe(exampleAppAdminUser)} —`));
5151

5252
expect(await screen.findByText(/Reviewed On: /i)).toBeInTheDocument();
5353
});
5454

5555
it('renders no date tooltip on hover', async () => {
5656
renderComponent(cr[2]);
57-
fireEvent.mouseOver(screen.getByText('—'));
57+
fireEvent.mouseOver(screen.getByText('— —'));
5858

5959
expect(await screen.findByText('Reviewed on: —')).toBeInTheDocument();
6060
});
6161

6262
it('renders review date tooltip on hover', async () => {
6363
renderComponent(cr[0]);
64-
fireEvent.mouseOver(screen.getByText(fullNamePipe(exampleAppAdminUser)));
64+
fireEvent.mouseOver(screen.getByText(`${fullNamePipe(exampleAppAdminUser)} —`));
6565

6666
expect(
6767
await screen.findByText(`Reviewed on: ${datePipe(exampleStandardChangeRequest.dateReviewed!)}`)

0 commit comments

Comments
 (0)