#1650 - rough draft

Author: RChandler234

src/frontend/src/components/ChangeRequestDetailCard.tsx

@@ -4,8 +4,6 @@
  */
 
 import { Card, CardContent, Grid, Typography, useTheme } from '@mui/material';
-import Chip from '@mui/material/Chip';
-import { green, blue, red, grey, purple } from '@mui/material/colors';
 import { Box, Stack } from '@mui/system';
 import { Link } from '@mui/material';
 import {
@@ -19,55 +17,8 @@ import {
 import { routes } from '../utils/routes';
 import { Link as RouterLink } from 'react-router-dom';
 import { fullNamePipe } from '../utils/pipes';
-import { ChangeRequestTypeTextPipe, ChangeRequestStatusTextPipe } from '../utils/enum-pipes';
-
-const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
-  switch (status) {
-    case ChangeRequestStatus.Implemented:
-      return blue[600];
-    case ChangeRequestStatus.Accepted:
-      return green[600];
-    case ChangeRequestStatus.Denied:
-      return red[400];
-    case ChangeRequestStatus.Open:
-      return purple[400];
-    default:
-      return grey[500];
-  }
-};
-
-const ChangeRequestTypePill = ({ type }: { type: ChangeRequestType }) => {
-  return (
-    <Chip
-      size="small"
-      label={ChangeRequestTypeTextPipe(type)}
-      variant="filled"
-      sx={{
-        fontSize: 12,
-        color: 'white',
-        backgroundColor: red[600],
-        width: 100
-      }}
-    />
-  );
-};
-
-const ChangeRequestStatusPill = ({ status }: { status: ChangeRequestStatus }) => {
-  const statusPillColor = determineChangeRequestStatusPillColor(status);
-  return (
-    <Chip
-      size="small"
-      label={ChangeRequestStatusTextPipe(status)}
-      variant="filled"
-      sx={{
-        fontSize: 12,
-        color: 'white',
-        backgroundColor: statusPillColor,
-        width: 100
-      }}
-    />
-  );
-};
+import ChangeRequestTypePill from './ChangeRequestTypePill';
+import ChangeRequestStatusPill from './ChangeRequestStatusPill';
 
 const CRCardDescription = ({ cr }: { cr: ChangeRequest }) => {
   const theme = useTheme();

src/frontend/src/components/InfoBlock.tsx

@@ -5,21 +5,24 @@
 
 import Typography from '@mui/material/Typography';
 import { Grid } from '@mui/material';
+import { ReactNode } from 'react';
 
 interface InfoBlockProps {
   title: string;
+  icon?: ReactNode;
 }
 
 /**
  * Custom component for a consistent page-building block.
  * @param title The title of the block on the page
  * @param children The children of the block
  */
-const InfoBlock: React.FC<InfoBlockProps> = ({ title, children }) => {
+const InfoBlock: React.FC<InfoBlockProps> = ({ title, icon, children }) => {
   return (
     <Grid container spacing={1}>
-      <Grid item xs={12}>
+      <Grid item xs={12} display="flex" gap="5px" alignItems="center">
         <Typography sx={{ fontWeight: 'bold', fontSize: '19px' }}>{title}</Typography>
+        {icon}
       </Grid>
       <Grid item xs={12}>
         {children}

src/frontend/src/components/PageLayout.tsx

@@ -11,6 +11,7 @@ import { Box } from '@mui/system';
 
 interface PageLayoutProps {
   title?: string;
+  chips?: ReactNode;
   hidePageTitle?: boolean;
   previousPages?: LinkItem[];
   headerRight?: ReactNode;
@@ -21,6 +22,7 @@ interface PageLayoutProps {
 const PageLayout: React.FC<PageLayoutProps> = ({
   children,
   title,
+  chips,
   hidePageTitle = false,
   previousPages = [],
   headerRight,
@@ -33,7 +35,9 @@ const PageLayout: React.FC<PageLayoutProps> = ({
         <title>{`FinishLine ${title && `| ${title}`}`}</title>
         <meta name="description" content="FinishLine Project Management Dashboard" />
       </Helmet>
-      {!hidePageTitle && title && <PageTitle sticky={stickyHeader} {...{ title, previousPages, headerRight, tabs }} />}
+      {!hidePageTitle && title && (
+        <PageTitle sticky={stickyHeader} {...{ title, chips, previousPages, headerRight, tabs }} />
+      )}
       {children}
     </Box>
   );

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

@@ -10,6 +10,7 @@ import PageBreadcrumbs from './PageBreadcrumbs';
 
 interface PageTitleProps {
   title: string;
+  chips?: ReactNode;
   previousPages: LinkItem[];
   headerRight?: ReactNode;
   tabs?: ReactElement;
@@ -23,7 +24,7 @@ interface PageTitleProps {
  * @param headerRight The button to display on the right side of the page title
  * @param tabs The tabs on the page to display.
  */
-const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight, tabs, sticky }) => {
+const PageTitle: React.FC<PageTitleProps> = ({ title, chips, previousPages, headerRight, tabs, sticky }) => {
   const theme = useTheme();
 
   return (
@@ -40,12 +41,13 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight
         bgcolor={theme.palette.background.default}
       >
         <Grid container>
-          <Grid item xs={6} md={4}>
+          <Grid item xs={6} md={tabs ? 4 : 8} display="flex" alignItems={'center'}>
             <Typography variant="h4" fontSize={30}>
               {title}
             </Typography>
+            {chips}
           </Grid>
-          <Grid item xs={0} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
+          <Grid item xs={0} md={tabs ? 4 : 0} sx={{ display: { xs: 'none', md: 'block' } }}>
             {tabs}
           </Grid>
           <Grid item xs={6} md={4} textAlign={['left', 'right']}>

src/frontend/src/pages/ChangeRequestDetailPage/ActivationDetails.tsx

@@ -8,26 +8,29 @@ import { datePipe, fullNamePipe } from '../../utils/pipes';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import InfoBlock from '../../components/InfoBlock';
+import HandymanIcon from '@mui/icons-material/Handyman';
+import WorkIcon from '@mui/icons-material/Work';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 
 interface ActivationDetailsProps {
   cr: ActivationChangeRequest;
 }
 
 const ActivationDetails: React.FC<ActivationDetailsProps> = ({ cr }) => {
   return (
-    <Grid container>
-      <Grid item xs={6} md={2}>
-        <InfoBlock title={'Project Lead'}>
+    <Grid container rowSpacing={'10px'} mb="10px">
+      <Grid item xs={6} md={3}>
+        <InfoBlock title={'Project Lead'} icon={<HandymanIcon />}>
           <Typography>{fullNamePipe(cr.projectLead)}</Typography>
         </InfoBlock>
       </Grid>
-      <Grid item xs={6} md={2}>
-        <InfoBlock title={'Project Manager'}>
+      <Grid item xs={6} md={3}>
+        <InfoBlock title={'Project Manager'} icon={<WorkIcon />}>
           <Typography>{fullNamePipe(cr.projectManager)}</Typography>
         </InfoBlock>
       </Grid>
-      <Grid item xs={6} md={2}>
-        <InfoBlock title={'Start Date'}>
+      <Grid item xs={6} md={3}>
+        <InfoBlock title={'Start Date'} icon={<CalendarTodayIcon />}>
           <Typography>{datePipe(cr.startDate)}</Typography>
         </InfoBlock>
       </Grid>

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

@@ -5,57 +5,36 @@
 
 import { ReactElement, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import {
-  ActivationChangeRequest,
-  ChangeRequest,
-  ChangeRequestType,
-  StageGateChangeRequest,
-  StandardChangeRequest,
-  isProject
-} from 'shared';
+import { ActivationChangeRequest, ChangeRequest, ChangeRequestType, StandardChangeRequest, isProject } from 'shared';
 import { routes } from '../../utils/routes';
 import { datePipe, fullNamePipe, wbsPipe } from '../../utils/pipes';
 import ActivationDetails from './ActivationDetails';
-import StageGateDetails from './StageGateDetails';
 import ImplementedChangesList from './ImplementedChangesList';
 import StandardDetails from './StandardDetails';
 import ReviewChangeRequest from './ReviewChangeRequest';
 import ReviewNotes from './ReviewNotes';
 import ProposedSolutionsList from './ProposedSolutionsList';
-import { Grid, Typography, Link } from '@mui/material';
+import { Grid, Typography, Link, Box } from '@mui/material';
 import DeleteChangeRequest from './DeleteChangeRequest';
 import { useSingleProject } from '../../hooks/projects.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import PageLayout from '../../components/PageLayout';
 import ChangeRequestActionMenu from './ChangeRequestActionMenu';
 import OtherChangeRequestsPopupTabs from './OtherChangeRequestsPopupTabs';
+import ChangeRequestTypePill from '../../components/ChangeRequestTypePill';
+import ChangeRequestStatusPill from '../../components/ChangeRequestStatusPill';
 
 const buildDetails = (cr: ChangeRequest): ReactElement => {
   switch (cr.type) {
     case ChangeRequestType.Activation:
       return <ActivationDetails cr={cr as ActivationChangeRequest} />;
     case ChangeRequestType.StageGate:
-      return <StageGateDetails cr={cr as StageGateChangeRequest} />;
+      return <></>;
     default:
       return <StandardDetails cr={cr as StandardChangeRequest} />;
   }
 };
-
-const buildProposedSolutions = (cr: ChangeRequest): ReactElement => {
-  if (cr.type !== ChangeRequestType.Activation && cr.type !== ChangeRequestType.StageGate) {
-    return (
-      <ProposedSolutionsList
-        proposedSolutions={(cr as StandardChangeRequest).proposedSolutions}
-        crReviewed={cr.accepted}
-        crId={cr.crId}
-      />
-    );
-  } else {
-    return <></>;
-  }
-};
-
 interface ChangeRequestDetailsProps {
   isUserAllowedToReview: boolean;
   isUserAllowedToImplement: boolean;
@@ -90,9 +69,18 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
 
   const { name: projectName } = project;
 
+  const isStandard =
+    changeRequest.type !== ChangeRequestType.Activation && changeRequest.type !== ChangeRequestType.StageGate;
+
   return (
     <PageLayout
       title={`Change Request #${changeRequest.crId}`}
+      chips={
+        <Box display="flex" mx="20px" gap="20px">
+          <ChangeRequestTypePill type={changeRequest.type} />
+          <ChangeRequestStatusPill status={changeRequest.status} />
+        </Box>
+      }
       previousPages={[{ name: 'Change Requests', route: routes.CHANGE_REQUESTS }]}
       headerRight={
         <ChangeRequestActionMenu
@@ -124,24 +112,30 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
           </Grid>
         </Grid>
         <Grid container rowSpacing={2} columnSpacing={2}>
-          <Grid item xs={12}>
+          <Grid container item xs={isStandard ? 7 : 12}>
             {buildDetails(changeRequest)}
+            <Grid item md={isStandard ? 12 : 5}>
+              <ReviewNotes
+                reviewer={changeRequest.reviewer}
+                reviewNotes={changeRequest.reviewNotes}
+                dateReviewed={changeRequest.dateReviewed}
+              />
+            </Grid>
+            <Grid item md={isStandard ? 12 : 6}>
+              <ImplementedChangesList
+                changes={changeRequest.implementedChanges || []}
+                overallDateImplemented={changeRequest.dateImplemented}
+              />
+            </Grid>
           </Grid>
-          <Grid item xs={12}>
-            {buildProposedSolutions(changeRequest)}
-          </Grid>
-          <Grid item md={5}>
-            <ReviewNotes
-              reviewer={changeRequest.reviewer}
-              reviewNotes={changeRequest.reviewNotes}
-              dateReviewed={changeRequest.dateReviewed}
-            />
-          </Grid>
-          <Grid item md={6}>
-            <ImplementedChangesList
-              changes={changeRequest.implementedChanges || []}
-              overallDateImplemented={changeRequest.dateImplemented}
-            />
+          <Grid item xs={isStandard ? 5 : 0}>
+            {isStandard && (
+              <ProposedSolutionsList
+                proposedSolutions={(changeRequest as StandardChangeRequest).proposedSolutions}
+                crReviewed={changeRequest.accepted}
+                crId={changeRequest.crId}
+              />
+            )}
           </Grid>
         </Grid>
       </Grid>

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

@@ -18,7 +18,7 @@ interface ImplementedChangesListProps {
 
 const ImplementedChangesList: React.FC<ImplementedChangesListProps> = ({ changes, overallDateImplemented }) => {
   return (
-    <InfoBlock title={`Implemented Changes — ${overallDateImplemented ? datePipe(overallDateImplemented) : 'N/A'}`}>
+    <InfoBlock title={`Implemented Changes${overallDateImplemented ? ' — ' + datePipe(overallDateImplemented) : ''}`}>
       <List>
         {changes.length === 0 ? (
           <Typography>— — There are no implemented changes for this change request.</Typography>