[EASI-4556] IT Gov admin header updates (#2746)

* Update breadcrumb

* Admin header updates

* Responsive styling

* Move system/contract name function to util

* Updated additional information text

* Util filename update

src/i18n/en-US/admin.ts

@@ -1,7 +1,7 @@
 const admin = {
   title: 'Additional information',
   description:
-    'This request is a part of the system, service, or contract indicated below. Any related requests are displayed because they are linked to the same system or service, or because they include the same contract number as this request.',
+    'This request is a part of the system, service, or contract indicated below. Any related requests are displayed because they are linked to the same system.',
   somethingIncorrect: 'See something incorrect?',
   editInformation: 'Edit information',
   component: 'CMS component owner',

src/i18n/en-US/articles/governanceReviewTeam.ts

@@ -297,8 +297,13 @@ const governanceReviewTeam = {
       'Feedback and recommendations have moved! Use the Feedback tab in the navigation to the left to view feedback and recommendations that have been sent to the requester and project team.'
   },
   governanceRequestDetails: 'Governance request details',
+  itGovernanceRequestDetails: 'IT Governance request details',
+  systemServiceContractName: 'System, service, or contract name',
+  noneSpecified: 'None specified',
   actions: 'Actions',
+  submittedOn: 'Submitted on {{date}}',
   requestType: 'Request type',
+  systemNamePlural: '{{name}}, +{{count}} more',
   status: {
     label: 'Status',
     open: 'Open',

src/utils/getSystemOrContractName.ts

@@ -0,0 +1,31 @@
+import i18next from 'i18next';
+
+import { SystemIntake_systems as System } from 'queries/types/SystemIntake';
+import { RequestRelationType } from 'types/graphql-global-types';
+
+/** Returns linked contract or system name for display */
+const getSystemOrContractName = (
+  relationType: RequestRelationType | null,
+  contractName: string | null,
+  systems: System[]
+) => {
+  if (relationType === RequestRelationType.EXISTING_SERVICE && contractName) {
+    return contractName;
+  }
+
+  if (relationType === RequestRelationType.EXISTING_SYSTEM) {
+    if (systems.length === 1) {
+      return systems[0].name;
+    }
+
+    // If more than one system, returns `[name], +[count]`
+    return i18next.t('governanceReviewTeam:systemNamePlural', {
+      name: systems[0].name,
+      count: systems.length - 1
+    });
+  }
+
+  return i18next.t('governanceReviewTeam:noneSpecified');
+};
+
+export default getSystemOrContractName;

src/views/GovernanceReviewTeam/RequestOverview.tsx

@@ -99,18 +99,11 @@ const RequestOverview = ({ grbReviewers }: RequestOverviewProps) => {
     <MainContent className="easi-grt" data-testid="grt-request-overview">
       {systemIntake && !fullPageLayout && (
         <Summary
-          id={systemIntake.id}
-          requester={systemIntake.requester}
+          {...systemIntake}
           requestName={systemIntake.requestName || ''}
-          requestType={systemIntake.requestType}
-          statusAdmin={systemIntake.statusAdmin}
-          adminLead={systemIntake.adminLead}
-          submittedAt={systemIntake.submittedAt}
-          lcid={systemIntake.lcid}
           contractNumbers={
             systemIntake?.contractNumbers?.map(c => c.contractNumber) || []
           }
-          state={systemIntake?.state}
         />
       )}
       {!fullPageLayout && (

src/views/GovernanceReviewTeam/Summary/index.test.tsx

@@ -7,14 +7,15 @@ import { DateTime } from 'luxon';
 import users from 'data/mock/users';
 import { GetSystemIntake_systemIntake_requester as Requester } from 'queries/types/GetSystemIntake';
 import {
+  RequestRelationType,
   SystemIntakeRequestType,
   SystemIntakeState,
   SystemIntakeStatusAdmin
 } from 'types/graphql-global-types';
 
 import IsGrbViewContext from '../IsGrbViewContext';
 
-import Summary from '.';
+import Summary, { RequestSummaryProps } from '.';
 
 vi.mock('@okta/okta-react', () => ({
   useOktaAuth: () => {
@@ -40,7 +41,7 @@ const requester: Requester = {
   component: 'Office of Information Technology'
 };
 
-const summaryProps = {
+const summaryProps: RequestSummaryProps = {
   id: 'ccdfdcf5-5085-4521-9f77-fa1ea324502b',
   requestName: 'Request Name',
   requestType: SystemIntakeRequestType.NEW,
@@ -50,7 +51,10 @@ const summaryProps = {
   lcid: null,
   requester,
   contractNumbers: ['123456'],
-  state: SystemIntakeState.OPEN
+  state: SystemIntakeState.OPEN,
+  relationType: RequestRelationType.NEW_SYSTEM,
+  contractName: null,
+  systems: []
 };
 
 describe('The GRT Review page', () => {

src/views/GovernanceReviewTeam/Summary/index.tsx

@@ -20,22 +20,25 @@ import { ErrorAlert, ErrorAlertMessage } from 'components/shared/ErrorAlert';
 import { RadioField, RadioGroup } from 'components/shared/RadioField';
 import StateTag from 'components/StateTag';
 import { GetSystemIntake_systemIntake_requester as Requester } from 'queries/types/GetSystemIntake';
+import { SystemIntake_systems as System } from 'queries/types/SystemIntake';
 import { UpdateSystemIntakeAdminLead } from 'queries/types/UpdateSystemIntakeAdminLead';
 import UpdateSystemIntakeAdminLeadQuery from 'queries/UpdateSystemIntakeAdminLeadQuery';
 import {
+  RequestRelationType,
   SystemIntakeState,
   SystemIntakeStatusAdmin
 } from 'types/graphql-global-types';
 import { RequestType } from 'types/systemIntake';
 import { formatDateLocal } from 'utils/date';
 import { getPersonNameAndComponentAcronym } from 'utils/getPersonNameAndComponent';
+import getSystemOrContractName from 'utils/getSystemOrContractName';
 import { translateRequestType } from 'utils/systemIntake';
 
 import IsGrbViewContext from '../IsGrbViewContext';
 
 import './index.scss';
 
-type RequestSummaryProps = {
+export type RequestSummaryProps = {
   id: string;
   requester: Requester;
   requestName: string;
@@ -46,6 +49,9 @@ type RequestSummaryProps = {
   lcid: string | null;
   contractNumbers: string[];
   state: SystemIntakeState;
+  contractName: string | null;
+  relationType: RequestRelationType | null;
+  systems: System[];
 };
 
 const RequestSummary = ({
@@ -58,7 +64,10 @@ const RequestSummary = ({
   submittedAt,
   lcid,
   contractNumbers = [],
-  state
+  state,
+  contractName,
+  relationType,
+  systems
 }: RequestSummaryProps) => {
   const { t } = useTranslation('governanceReviewTeam');
   const [isModalOpen, setModalOpen] = useState(false);
@@ -155,11 +164,20 @@ const RequestSummary = ({
                 {t('header:home')}
               </BreadcrumbLink>
             </Breadcrumb>
-            <Breadcrumb current>{t('governanceRequestDetails')}</Breadcrumb>
+            <Breadcrumb current>{t('itGovernanceRequestDetails')}</Breadcrumb>
           </BreadcrumbBar>
 
           {/* Request summary */}
-          <h2 className="margin-top-05 margin-bottom-2">{requestName}</h2>
+          <div className="display-flex flex-align-end flex-wrap margin-bottom-2">
+            <h2 className="margin-top-05 margin-bottom-0 margin-right-2">
+              {requestName}
+            </h2>
+            <p className="margin-y-05 text-primary-light">
+              {t('submittedOn', {
+                date: formatDateLocal(submittedAt, 'MM/dd/yyyy')
+              })}
+            </p>
+          </div>
 
           <Grid row gap>
             <Grid tablet={{ col: 8 }}>
@@ -169,12 +187,10 @@ const RequestSummary = ({
               </h4>
 
               <h5 className="text-normal margin-y-0">
-                {t('intake:review.contractNumber')}
+                {t('systemServiceContractName')}
               </h5>
               <h4 className="margin-top-05 margin-bottom-2">
-                {/* TODO: (Sam) review */}
-                {contractNumbers.join(', ') ||
-                  t('intake:review.noContractNumber')}
+                {getSystemOrContractName(relationType, contractName, systems)}
               </h4>
             </Grid>
 
@@ -190,12 +206,11 @@ const RequestSummary = ({
               </h4>
 
               <h5 className="text-normal margin-y-0">
-                {t('intake:fields.submissionDate')}
+                {t('intake:review.contractNumber')}
               </h5>
               <h4 className="margin-top-05 margin-bottom-2">
-                {submittedAt
-                  ? formatDateLocal(submittedAt, 'MMMM d, yyyy')
-                  : 'N/A'}
+                {/* TODO: (Sam) review */}
+                {contractNumbers.join(', ') || t('noneSpecified')}
               </h4>
             </Grid>
           </Grid>