feat: add status header for cbc

Author: AntBush

app/components/Analyst/ApplicationHeader.tsx

@@ -6,6 +6,7 @@ import ChangeStatus from 'components/Analyst/ChangeStatus';
 import { useFeature } from '@growthbook/growthbook-react';
 import EditProjectDescription from './EditProjectDescription';
 import StatusInformationIcon from './StatusInformationIcon';
+import StatusInformationModal from './StatusInformationModal';
 import AssignProjectType from './AssignProjectType';
 import PendingChangeRequest from './PendingChangeRequest/PendingChangeRequest';
 
@@ -174,7 +175,7 @@ const ApplicationHeader: React.FC<Props> = ({ query }) => {
             }
             statusList={allApplicationStatusTypes?.nodes}
           />
-          <StatusInformationIcon />
+          <StatusInformationIcon ModalComponent={StatusInformationModal} />
         </StyledItem>
         <StyledItem>
           <StyledLabel htmlFor="change-status">External Status</StyledLabel>

app/components/Analyst/CBC/CbcHeader.tsx

@@ -5,6 +5,8 @@ import PendingChangeRequest from '../PendingChangeRequest/PendingChangeRequest';
 import CbcEditProjectDescription from './CbcEditProjectDescription';
 import CbcAssignProjectType from './CbcAssignProjectType';
 import CbcEditProjectNumber from './CbcEditProjectNumber';
+import StatusInformationIcon from '../StatusInformationIcon';
+import CbcStatusInformationModal from './CbcStatusInformationModal';
 
 const StyledCallout = styled.div`
   margin-bottom: 0.5em;
@@ -140,6 +142,7 @@ const CbcHeader: React.FC<Props> = ({ query, isFormEditable = false }) => {
             ]}
             isFormEditable={isFormEditable}
           />
+          <StatusInformationIcon ModalComponent={CbcStatusInformationModal} />
         </StyledItem>
         <StyledProjectType>
           <StyledLabel htmlFor="assign-project-type">Project Type</StyledLabel>

app/components/Analyst/CBC/CbcStatusInformationModal.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+import Chip from '@mui/material/Chip';
+import Modal from 'components/Modal';
+
+interface Props {
+  id?: string;
+  title?: string;
+  close: () => void;
+  isOpen: boolean;
+}
+
+// Styled div whose children are split to two columns
+const TwoColumnDiv = styled.div`
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 16px;
+  align-items: center;
+`;
+
+const CbcStatusInformationModal: React.FC<Props> = ({
+  id = 'cbc-status-information-modal',
+  title = 'Description of Statuses and Triggers',
+  isOpen,
+  close,
+}) => {
+  const infoGraphicUrl = '/images/cbcStateMachine.svg';
+
+  return (
+    <Modal id={id} onClose={close} open={isOpen} title={title}>
+      <div>
+        <a href={infoGraphicUrl} target="_blank" rel="noopener noreferrer">
+          <Image
+            src={infoGraphicUrl}
+            alt="The happy path for a project until its completion. The external status is the only status applicable to a CBC project. Once the project is in the Connectivity portal, it will start at Conditionally Approved. From there it can continue to Funding Agreement Signed, Agreement Signed, Final Report Delivered, and finally Reporting Complete."
+            width={1000}
+            height={140}
+          />
+        </a>
+      </div>
+      <div style={{ paddingBottom: '8px' }}>
+        <span style={{ fontWeight: 800 }}>Other Statuses</span>
+      </div>
+      <TwoColumnDiv>
+        <Chip
+          label="Withdrawn"
+          sx={{
+            bgcolor: '#E8E8E8',
+            color: '#414141',
+            fontFamily: 'BCSans, Verdana, Arial, sans-serif',
+          }}
+        />
+        <span>Applicant has withdrawn their submitted application</span>
+      </TwoColumnDiv>
+    </Modal>
+  );
+};
+
+export default CbcStatusInformationModal;

app/components/Analyst/StatusInformationIcon.tsx

@@ -2,28 +2,27 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 import styled from 'styled-components';
 import useModal from 'lib/helpers/useModal';
-import StatusInformationModal from './StatusInformationModal';
 
 const StyledFontAwesome = styled(FontAwesomeIcon)`
-  margin-left: 4px; ;
+  margin-left: 4px;
 `;
 
-const StatusInformationIcon = () => {
-  const statusInformationModal = useModal();
+const StatusInformationIcon = ({ ModalComponent }) => {
+  const modalProps = useModal();
 
   const handleClick = () => {
-    statusInformationModal.open();
+    modalProps.open();
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleKeyDown = (event) => {
     if (event.key === 'Enter' || event.key === ' ') {
       handleClick();
     }
   };
 
   return (
     <>
-      <StatusInformationModal {...statusInformationModal} />
+      <ModalComponent {...modalProps} />
       <div
         role="button"
         tabIndex={0}

app/components/AnalystDashboard/AllDashboard.tsx

@@ -31,6 +31,7 @@ import type { AllDashboardTable_query$key } from '__generated__/AllDashboardTabl
 import { Box, IconButton, TableCellProps } from '@mui/material';
 import { useFeature } from '@growthbook/growthbook-react';
 import getConfig from 'next/config';
+import StatusInformationModal from 'components/Analyst/StatusInformationModal';
 import {
   filterZones,
   sortStatus,
@@ -632,7 +633,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     renderToolbarInternalActions: ({ table }) => (
       <Box>
         <IconButton size="small">
-          <StatusInformationIcon />
+          <StatusInformationIcon ModalComponent={StatusInformationModal} />
         </IconButton>
         <MRT_ToggleFiltersButton table={table} />
         <MRT_ShowHideColumnsButton table={table} />