Skip to content

Commit

Permalink
[EASI-4466] [FE] TRB linking - Update Admin View Header (#2766)
Browse files Browse the repository at this point in the history
* System name field prop pass

* Crumb text

* Snap

* AdminRequestHeaderSummary

* Trb header

* Itgov header

* Cleanup

* Uniform test references
  • Loading branch information
adamodd committed Aug 20, 2024
1 parent 9f0b918 commit a63ce54
Show file tree
Hide file tree
Showing 12 changed files with 225 additions and 117 deletions.
89 changes: 89 additions & 0 deletions src/components/shared/AdminRequestHeaderSummary/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Grid } from '@trussworks/react-uswds';

import { SystemIntake_systems as System } from 'queries/types/SystemIntake';
import { RequestRelationType } from 'types/graphql-global-types';
import { formatDateLocal } from 'utils/date';
import getSystemOrContractName from 'utils/getSystemOrContractName';

// Some properties are just display strings passed in after any parsing,
// because original ITG & TRB objects are different.
type AdminRequestHeaderSummaryProps = {
requestName: string;
submittedAt: string;
requestType: string;
relationType: RequestRelationType | null;
contractName: string | null;
systems: System[];
requester: string;
trbRequesterTestId?: string;
contractNumbers: string[];
};

function AdminRequestHeaderSummary({
requestName,
submittedAt,
requestType,
relationType,
contractName,
systems,
requester,
trbRequesterTestId = '',
contractNumbers
}: AdminRequestHeaderSummaryProps) {
const { t } = useTranslation('governanceReviewTeam');
return (
<>
{/* Request summary */}
<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"
data-testid="summary-submissionDate"
>
{t('submittedOn', {
date: formatDateLocal(submittedAt, 'MM/dd/yyyy')
})}
</p>
</div>

<Grid row gap>
<Grid tablet={{ col: 8 }}>
<h5 className="text-normal margin-y-0">{t('requestType')}</h5>
<h4 className="margin-top-05 margin-bottom-2">{requestType}</h4>

<h5 className="text-normal margin-y-0">
{t('systemServiceContractName')}
</h5>
<h4 className="margin-top-05 margin-bottom-2">
{getSystemOrContractName(relationType, contractName, systems)}
</h4>
</Grid>

<Grid tablet={{ col: 4 }}>
<h5 className="text-normal margin-y-0">
{t('intake:contactDetails.requester')}
</h5>
<h4
className="margin-top-05 margin-bottom-2"
data-testid={trbRequesterTestId}
>
{requester}
</h4>

<h5 className="text-normal margin-y-0">
{t('intake:review.contractNumber')}
</h5>
<h4 className="margin-top-05 margin-bottom-2">
{contractNumbers.join(', ') || t('noneSpecified')}
</h4>
</Grid>
</Grid>
</>
);
}

export default AdminRequestHeaderSummary;
2 changes: 1 addition & 1 deletion src/i18n/en-US/technicalAssistance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -816,7 +816,7 @@ const technicalAssistance = {
},
adminHome: {
home: 'Home',
breadcrumb: 'Request details',
breadcrumb: 'TRB request details',
requestType: 'Request type',
requester: 'Requester',
submissionDate: 'Submission Date',
Expand Down
63 changes: 14 additions & 49 deletions src/views/GovernanceReviewTeam/Summary/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@trussworks/react-uswds';

import Modal from 'components/Modal';
import AdminRequestHeaderSummary from 'components/shared/AdminRequestHeaderSummary';
import { ErrorAlert, ErrorAlertMessage } from 'components/shared/ErrorAlert';
import { RadioField, RadioGroup } from 'components/shared/RadioField';
import StateTag from 'components/StateTag';
Expand All @@ -29,9 +30,7 @@ import {
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';
Expand Down Expand Up @@ -167,53 +166,19 @@ const RequestSummary = ({
<Breadcrumb current>{t('itGovernanceRequestDetails')}</Breadcrumb>
</BreadcrumbBar>

{/* Request summary */}
<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 }}>
<h5 className="text-normal margin-y-0">{t('requestType')}</h5>
<h4 className="margin-top-05 margin-bottom-2">
{translateRequestType(requestType)}
</h4>

<h5 className="text-normal margin-y-0">
{t('systemServiceContractName')}
</h5>
<h4 className="margin-top-05 margin-bottom-2">
{getSystemOrContractName(relationType, contractName, systems)}
</h4>
</Grid>

<Grid tablet={{ col: 4 }}>
<h5 className="text-normal margin-y-0">
{t('intake:contactDetails.requester')}
</h5>
<h4 className="margin-top-05 margin-bottom-2">
{getPersonNameAndComponentAcronym(
requester?.name || '',
requester?.component
)}
</h4>

<h5 className="text-normal margin-y-0">
{t('intake:review.contractNumber')}
</h5>
<h4 className="margin-top-05 margin-bottom-2">
{/* TODO: (Sam) review */}
{contractNumbers.join(', ') || t('noneSpecified')}
</h4>
</Grid>
</Grid>
<AdminRequestHeaderSummary
requestName={requestName}
submittedAt={submittedAt || ''}
requestType={translateRequestType(requestType)}
relationType={relationType}
contractName={contractName}
systems={systems}
requester={getPersonNameAndComponentAcronym(
requester?.name || '',
requester?.component
)}
contractNumbers={contractNumbers}
/>
</GridContainer>
</section>

Expand Down
24 changes: 24 additions & 0 deletions src/views/TechnicalAssistance/AdminHome/CloseRequest.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,18 @@ describe('Trb Admin: Action: Close & Re-open Request', () => {
id: '123'
}
],
contractNumbers: [
{
id: 'd547c413-00d7-4bd4-a43e-5a2c45fbb98d',
contractNumber: '00004',
__typename: 'TRBRequestContractNumber'
},
{
id: '74c53a09-506d-4be4-a781-c999c1a52c5c',
contractNumber: '00005',
__typename: 'TRBRequestContractNumber'
}
],
__typename: 'TRBRequest'
}
}
Expand Down Expand Up @@ -316,6 +328,18 @@ describe('Trb Admin: Action: Close & Re-open Request', () => {
id: '123'
}
],
contractNumbers: [
{
id: 'd547c413-00d7-4bd4-a43e-5a2c45fbb98d',
contractNumber: '00004',
__typename: 'TRBRequestContractNumber'
},
{
id: '74c53a09-506d-4be4-a781-c999c1a52c5c',
contractNumber: '00005',
__typename: 'TRBRequestContractNumber'
}
],
__typename: 'TRBRequest'
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`Trb Admin: Action: Request Edits > submits a feedback message 1`] = `
href="/trb/d8ebedca-0031-4ccd-9690-37390726c50e/initial-request-form"
>
<span>
Request details
TRB request details
</span>
</a>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,25 @@ exports[`TRB admin home > matches the snapshot 1`] = `
aria-current="page"
class="usa-breadcrumb__list-item usa-current"
>
Request details
TRB request details
</li>
</ol>
</nav>
<h2
class="margin-top-05 margin-bottom-2"
<div
class="display-flex flex-align-end flex-wrap margin-bottom-2"
>
Mock TRB Request
</h2>
<h2
class="margin-top-05 margin-bottom-0 margin-right-2"
>
Mock TRB Request
</h2>
<p
class="margin-y-05 text-primary-light"
data-testid="summary-submissionDate"
>
Submitted on 01/05/2023
</p>
</div>
<div
class="grid-row grid-gap"
data-testid="grid"
Expand All @@ -63,6 +73,16 @@ exports[`TRB admin home > matches the snapshot 1`] = `
>
I’m having a problem with my system
</h4>
<h5
class="text-normal margin-y-0"
>
System, service, or contract name
</h5>
<h4
class="margin-top-05 margin-bottom-2"
>
None specified
</h4>
</div>
<div
class="tablet:grid-col-4"
Expand All @@ -82,13 +102,12 @@ exports[`TRB admin home > matches the snapshot 1`] = `
<h5
class="text-normal margin-y-0"
>
Submission Date
Contract number
</h5>
<h4
class="margin-top-05 margin-bottom-2"
data-testid="trbSummary-submissionDate"
>
January 5, 2023
123124455432
</h4>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`Email recipient fields component > renders recipients 1`] = `
href="/trb/undefined/initial-request-form"
>
<span>
Request details
TRB request details
</span>
</a>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,25 @@ exports[`TRB Admin Home summary > renders TRB request details 1`] = `
aria-current="page"
class="usa-breadcrumb__list-item usa-current"
>
Request details
TRB request details
</li>
</ol>
</nav>
<h2
class="margin-top-05 margin-bottom-2"
<div
class="display-flex flex-align-end flex-wrap margin-bottom-2"
>
Mock TRB Request
</h2>
<h2
class="margin-top-05 margin-bottom-0 margin-right-2"
>
Mock TRB Request
</h2>
<p
class="margin-y-05 text-primary-light"
data-testid="summary-submissionDate"
>
Submitted on 01/05/2023
</p>
</div>
<div
class="grid-row grid-gap"
data-testid="grid"
Expand All @@ -60,6 +70,16 @@ exports[`TRB Admin Home summary > renders TRB request details 1`] = `
>
I’m having a problem with my system
</h4>
<h5
class="text-normal margin-y-0"
>
System, service, or contract name
</h5>
<h4
class="margin-top-05 margin-bottom-2"
>
None specified
</h4>
</div>
<div
class="tablet:grid-col-4"
Expand All @@ -79,13 +99,12 @@ exports[`TRB Admin Home summary > renders TRB request details 1`] = `
<h5
class="text-normal margin-y-0"
>
Submission Date
Contract number
</h5>
<h4
class="margin-top-05 margin-bottom-2"
data-testid="trbSummary-submissionDate"
>
January 5, 2023
123124455432
</h4>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,15 @@ describe('TRB Admin Home summary', () => {
trbLead={trbRequestSummary.trbLeadInfo.commonName}
requester={requester}
requesterString="Adeline Aarons, CMS"
submissionDate="January 5, 2023"
submittedAt={trbRequestSummary.createdAt}
assignLeadModalRef={modalRef}
assignLeadModalTrbRequestIdRef={trbRequestIdRef}
contractName={trbRequestSummary.contractName}
relationType={trbRequestSummary.relationType}
systems={trbRequestSummary.systems}
contractNumbers={trbRequestSummary.contractNumbers.map(
c => c.contractNumber
)}
/>
</Provider>
</MockedProvider>
Expand All @@ -60,8 +66,8 @@ describe('TRB Admin Home summary', () => {
expect(requesterString).toHaveTextContent('Adeline Aarons, CMS');

// Check that submission date is formatted correctly
expect(getByTestId('trbSummary-submissionDate')).toHaveTextContent(
'January 5, 2023'
expect(getByTestId('summary-submissionDate')).toHaveTextContent(
'Submitted on 01/05/2023'
);

// Check that correct task status is rendered
Expand Down
Loading

0 comments on commit a63ce54

Please sign in to comment.