#1640: reformat the layout and modify tests

Author: martin0he

src/frontend/src/layouts/CRBlock.tsx src/frontend/src/layouts/InfoBlock.tsxsrc/frontend/src/layouts/CRBlock.tsx renamed to src/frontend/src/layouts/InfoBlock.tsx

@@ -6,7 +6,7 @@
 import Typography from '@mui/material/Typography';
 import { Grid } from '@mui/material';
 
-interface CRBlockProps {
+interface InfoBlockProps {
   title: string;
 }
 
@@ -15,17 +15,17 @@ interface CRBlockProps {
  * @param title The title of the block on the page
  * @param children The children of the block
  */
-const CRBlock: React.FC<CRBlockProps> = ({ title, children }) => {
+const InfoBlock: React.FC<InfoBlockProps> = ({ title, children }) => {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12}>
-        <Typography sx={{ fontWeight: 'bold', fontSize: '22px' }}>{title}</Typography>
+        <Typography sx={{ fontWeight: 'bold', fontSize: '19px' }}>{title}</Typography>
       </Grid>
       <Grid item xs={12}>
-        <Typography sx={{ fontSize: '15px' }}>{children}</Typography>
+        {children}
       </Grid>
     </Grid>
   );
 };
 
-export default CRBlock;
+export default InfoBlock;

src/frontend/src/layouts/PageTitle/PageTitle.tsx

@@ -27,7 +27,7 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight
     <>
       <PageBreadcrumbs currentPageTitle={title} previousPages={previousPages} />
       <Box sx={{ mb: 2 }}>
-        <Grid container>
+        <Grid container alignItems="center">
           <Grid item xs={6} md={8}>
             <Typography variant="h4" fontSize={30}>
               {title}

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

@@ -107,19 +107,19 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
         />
       }
     >
-      <Grid container rowGap={4}>
+      <Grid container rowGap={3}>
         <Grid container columnSpacing={3}>
           <Grid item xs={'auto'}>
-            <Typography sx={{ fontWeight: 'normal', fontSize: '24px' }}>
-              <b>WBS: </b>{' '}
+            <Typography sx={{ fontWeight: 'normal', fontSize: '21px' }}>
+              <b>WBS: </b>
               <Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
                 {wbsPipe(changeRequest.wbsNum)} - {projectName}
                 {isProject(changeRequest.wbsNum) ? '' : ' - ' + changeRequest.wbsName}
               </Link>
             </Typography>
           </Grid>
           <Grid item xs={'auto'}>
-            <Typography sx={{ fontWeight: 'normal', fontSize: '24px' }}>
+            <Typography sx={{ fontWeight: 'normal', fontSize: '21px' }}>
               <b>Submitter: </b>
               {fullNamePipe(changeRequest.submitter)} on {datePipe(changeRequest.dateSubmitted)}
             </Typography>
@@ -132,14 +132,14 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
           <Grid item xs={12}>
             {buildProposedSolutions(changeRequest)}
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={5}>
             <ReviewNotes
               reviewer={changeRequest.reviewer}
               reviewNotes={changeRequest.reviewNotes}
               dateReviewed={changeRequest.dateReviewed}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={6}>
             <ImplementedChangesList
               changes={changeRequest.implementedChanges || []}
               overallDateImplemented={changeRequest.dateImplemented}

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

@@ -9,16 +9,16 @@ import { routes } from '../../utils/routes';
 import { Link, ListItem, List, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import DynamicTooltip from '../../components/DynamicTooltip';
-import CRBlock from '../../layouts/CRBlock';
+import InfoBlock from '../../layouts/InfoBlock';
 
 interface ImplementedChangesListProps {
   changes: ImplementedChange[];
   overallDateImplemented?: Date;
 }
 
-const ImplementedChangesList: React.FC<ImplementedChangesListProps> = ({ changes, overallDateImplemented }) => {
+const ImplementedChangesList: React.FC<ImplementedChangesListProps> = ({ changes }) => {
   return (
-    <CRBlock
+    <InfoBlock
       title={'Implemented Changes'}
       children={
         <List>
@@ -45,7 +45,7 @@ const ImplementedChangesList: React.FC<ImplementedChangesListProps> = ({ changes
           )}
         </List>
       }
-    ></CRBlock>
+    ></InfoBlock>
   );
 };
 

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

@@ -6,7 +6,7 @@
 import { User } from 'shared';
 import { datePipe, emDashPipe, fullNamePipe } from '../../utils/pipes';
 import { Tooltip, Typography } from '@mui/material';
-import CRBlock from '../../layouts/CRBlock';
+import InfoBlock from '../../layouts/InfoBlock';
 
 interface ReviewNotesProps {
   reviewer?: User;
@@ -16,7 +16,7 @@ interface ReviewNotesProps {
 
 const ReviewNotes: React.FC<ReviewNotesProps> = ({ reviewer, reviewNotes, dateReviewed }: ReviewNotesProps) => {
   return (
-    <CRBlock
+    <InfoBlock
       title={'Review Notes'}
       children={
         <Typography>
@@ -36,10 +36,10 @@ const ReviewNotes: React.FC<ReviewNotesProps> = ({ reviewer, reviewNotes, dateRe
           >
             <span>{fullNamePipe(reviewer)}— </span>
           </Tooltip>
-          {reviewNotes ? reviewNotes : 'There are no review notes for this change request.'}
+          {reviewNotes ?? 'There are no review notes for this change request.'}
         </Typography>
       }
-    ></CRBlock>
+    ></InfoBlock>
   );
 };
 

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

@@ -5,14 +5,17 @@
 
 import { StageGateChangeRequest } from 'shared';
 import { booleanPipe } from '../../utils/pipes';
-import CRBlock from '../../layouts/CRBlock';
+import InfoBlock from '../../layouts/InfoBlock';
+import { Typography } from '@mui/material';
 
 interface StageGateDetailsProps {
   cr: StageGateChangeRequest;
 }
 
 const StageGateDetails: React.FC<StageGateDetailsProps> = ({ cr }) => {
-  return <CRBlock title={'Confirm WP Completed'} children={booleanPipe(cr.confirmDone)}></CRBlock>;
+  return (
+    <InfoBlock title={'Confirm WP Completed'} children={<Typography>{booleanPipe(cr.confirmDone)}</Typography>}></InfoBlock>
+  );
 };
 
 export default StageGateDetails;

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

@@ -22,7 +22,7 @@ const renderComponent = (changes: ImplementedChange[] = [], overallDate?: Date)
 
 describe('Rendering Implemented Changes List Component', () => {
   it('renders everything', () => {
-    renderComponent(exampleStandardImplementedChangeRequest.implementedChanges, new Date('2020-01-02 12:00:00'));
+    renderComponent(exampleStandardImplementedChangeRequest.implementedChanges);
 
     expect(screen.getByText(`Implemented Changes`)).toBeInTheDocument();
 
@@ -31,6 +31,6 @@ describe('Rendering Implemented Changes List Component', () => {
     expect(screen.getByText('1.23.4')).toBeInTheDocument();
     expect(screen.getByText(/Adjust description/i)).toBeInTheDocument();
 
-    expect(screen.getByText('01/02/2020')).toBeInTheDocument();
+    
   });
 });

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

@@ -47,21 +47,21 @@ describe('Change request review notes test', () => {
 
   it('renders tooltip on hover', async () => {
     renderComponent(cr[0]);
-    fireEvent.mouseOver(screen.getByText(fullNamePipe(exampleAppAdminUser)));
+    fireEvent.mouseOver(screen.getByText(`${fullNamePipe(exampleAppAdminUser)}—`));
 
     expect(await screen.findByText(/Reviewed On: /i)).toBeInTheDocument();
   });
 
   it('renders no date tooltip on hover', async () => {
     renderComponent(cr[2]);
-    fireEvent.mouseOver(screen.getByText('—'));
+    fireEvent.mouseOver(screen.getByText('——'));
 
     expect(await screen.findByText('Reviewed on: —')).toBeInTheDocument();
   });
 
   it('renders review date tooltip on hover', async () => {
     renderComponent(cr[0]);
-    fireEvent.mouseOver(screen.getByText(fullNamePipe(exampleAppAdminUser)));
+    fireEvent.mouseOver(screen.getByText(`${fullNamePipe(exampleAppAdminUser)}—`));
 
     expect(
       await screen.findByText(`Reviewed on: ${datePipe(exampleStandardChangeRequest.dateReviewed!)}`)