Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MCR-3547] Add view for adding a mccrs record number #1996

Merged
merged 31 commits into from
Oct 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
b3c7147
routing for mccrsid field established, bare bones form
pearl-truss Oct 17, 2023
519fe51
Add validation schema
pearl-truss Oct 18, 2023
59237d0
wip calling updateContract api onsubmit
pearl-truss Oct 18, 2023
5e413ca
Merge branch 'main' of https://github.com/Enterprise-CMCS/managed-car…
pearl-truss Oct 18, 2023
028664a
update styling on add mccrs id page
pearl-truss Oct 19, 2023
afaccff
finalize styling on the summary page
pearl-truss Oct 19, 2023
f6dc708
add unit test for mccrsID form and submission summary pages
pearl-truss Oct 20, 2023
88a4606
additional styling
pearl-truss Oct 20, 2023
52d699d
code cleanup
pearl-truss Oct 20, 2023
f3eaa81
Merge branch 'main' of https://github.com/Enterprise-CMCS/managed-car…
pearl-truss Oct 20, 2023
5718bcf
resolving bad merge
pearl-truss Oct 20, 2023
320c017
remove unneeded code in submission summary
pearl-truss Oct 20, 2023
cd98ba4
update the custom heading for mccrs page and update validation messag…
pearl-truss Oct 23, 2023
43e4c36
update useEffect code for setting the header
pearl-truss Oct 23, 2023
a5087ca
fix existing unit test
pearl-truss Oct 23, 2023
1cb5d8d
PR fixes
pearl-truss Oct 23, 2023
6121942
add link change for mccrs website
pearl-truss Oct 23, 2023
90f7ac0
add feature flag
pearl-truss Oct 23, 2023
0f5fa3d
cypress re-run
pearl-truss Oct 24, 2023
5e563eb
cypress re-run
pearl-truss Oct 24, 2023
df44654
remove character limit on mcccrs id field
pearl-truss Oct 24, 2023
a44304f
cypress re-run
pearl-truss Oct 24, 2023
31d7bff
trim possible whitespace
pearl-truss Oct 25, 2023
efcf16d
Merge branch 'main' of https://github.com/Enterprise-CMCS/managed-car…
pearl-truss Oct 25, 2023
df1245a
cypress re-run
pearl-truss Oct 25, 2023
a787975
cypress re-run
pearl-truss Oct 25, 2023
6bace5e
rerun all jobs
pearl-truss Oct 25, 2023
099ef61
hide delete button
pearl-truss Oct 25, 2023
ba5e2e4
hide delete button
pearl-truss Oct 25, 2023
7130786
remove mccrs-record-number flag, delete button and blank entry valida…
pearl-truss Oct 25, 2023
40b30d6
cypress re-run
pearl-truss Oct 25, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const CMSUserRow = ({
heading,
}: {
user: CmsUser | AdminUser | HelpdeskUser | BusinessOwnerUser
heading?: string
heading?: string | React.ReactElement
}) => {
return (
<div className={styles.dashboardHeading}>
Expand Down Expand Up @@ -46,7 +46,7 @@ const StateUserRow = ({
heading,
}: {
user: StateUser
heading?: string
heading?: string | React.ReactElement
}) => {
return (
<div className={styles.dashboardHeading}>
Expand Down Expand Up @@ -99,7 +99,7 @@ const LandingRow = ({ isLoading }: { isLoading: boolean }) => {
type PageHeadingProps = {
isLoading?: boolean
loggedInUser?: User
heading?: string
heading?: string | React.ReactElement
route?: string
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@
align-items: center;
padding-bottom: units(1);
min-height: 3rem;

&.alignTop {
align-items: start;
}

a {
display: block;
margin-top: 17.5px;
padding-bottom: units(1);
}
}

.summarySectionHeaderBorder {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ export type SectionHeaderProps = {
header: string
navigateTo?: string
children?: React.ReactNode
subHeaderComponent?: React.ReactNode
sectionId?: string
headerId?: string
hideBorder?: boolean
}

export const SectionHeader = ({
header,
subHeaderComponent,
navigateTo,
children,
sectionId,
Expand All @@ -23,10 +25,14 @@ export const SectionHeader = ({
const classes = classNames({
[styles.summarySectionHeader]: true,
[styles.summarySectionHeaderBorder]: !hideBorder,
[styles.alignTop]: subHeaderComponent,
})
return (
<div className={classes} id={sectionId}>
<h2 id={headerId}>{header}</h2>
<div>
<h2 id={headerId}>{header}</h2>
{subHeaderComponent}
</div>
<div>
{navigateTo && (
<Link
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type SubmissionTypeSummarySectionProps = {
statePrograms: Program[]
navigateTo?: string
headerChildComponent?: React.ReactElement
subHeaderComponent?: React.ReactElement
initiallySubmittedAt?: Date
submissionName: string
}
Expand All @@ -27,6 +28,7 @@ export const SubmissionTypeSummarySection = ({
submission,
statePrograms,
navigateTo,
subHeaderComponent,
headerChildComponent,
initiallySubmittedAt,
submissionName,
Expand All @@ -41,6 +43,7 @@ export const SubmissionTypeSummarySection = ({
<section id="submissionTypeSection" className={styles.summarySection}>
<SectionHeader
header={submissionName}
subHeaderComponent={subHeaderComponent}
navigateTo={navigateTo}
headerId={'submissionName'}
>
Expand Down
3 changes: 3 additions & 0 deletions services/app-web/src/constants/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const ROUTES = [
'SUBMISSIONS_REVIEW_SUBMIT',
'SUBMISSIONS_REVISION',
'SUBMISSIONS_SUMMARY',
'SUBMISSIONS_MCCRSID',
'SUBMISSIONS_QUESTIONS_AND_ANSWERS',
'SUBMISSIONS_UPLOAD_QUESTION',
'SUBMISSIONS_UPLOAD_RESPONSE',
Expand Down Expand Up @@ -58,6 +59,7 @@ const RoutesRecord: Record<RouteT, string> = {
SUBMISSIONS_DOCUMENTS: '/submissions/:id/edit/documents',
SUBMISSIONS_REVIEW_SUBMIT: '/submissions/:id/edit/review-and-submit',
SUBMISSIONS_SUMMARY: '/submissions/:id',
SUBMISSIONS_MCCRSID: '/submissions/:id/mccrs-record-number',
SUBMISSIONS_REVISION: '/submissions/:id/revisions/:revisionVersion',
SUBMISSIONS_QUESTIONS_AND_ANSWERS: '/submissions/:id/question-and-answers',
SUBMISSIONS_UPLOAD_QUESTION:
Expand Down Expand Up @@ -131,6 +133,7 @@ const PageTitlesRecord: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
SUBMISSIONS_RATE_DETAILS: 'Rate details',
SUBMISSIONS_CONTACTS: 'Contacts',
SUBMISSIONS_DOCUMENTS: 'Supporting documents',
SUBMISSIONS_MCCRSID: 'Add MC-CRS record number',
SUBMISSIONS_REVIEW_SUBMIT: 'Review and submit',
SUBMISSIONS_REVISION: 'Submission revision',
SUBMISSIONS_SUMMARY: 'Submission summary',
Expand Down
5 changes: 3 additions & 2 deletions services/app-web/src/constants/tealium.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const CONTENT_TYPE_BY_ROUTE: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
SUBMISSIONS_SUMMARY: 'summary',
SUBMISSIONS_REVISION: 'summary',
SUBMISSIONS_QUESTIONS_AND_ANSWERS: 'summary',
SUBMISSIONS_MCCRSID: 'form',
SUBMISSIONS_UPLOAD_QUESTION: 'form',
SUBMISSIONS_UPLOAD_RESPONSE: 'form',
UNKNOWN_ROUTE: '404',
Expand Down Expand Up @@ -83,7 +84,7 @@ const getTealiumPageName = ({
user,
}: {
route: RouteT | 'UNKNOWN_ROUTE'
heading: string | undefined
heading: string | React.ReactElement | undefined
user: User | undefined
}) => {
const addSubmissionNameHeading =
Expand All @@ -95,7 +96,7 @@ const getTealiumPageName = ({
title,
}: {
title: string
heading?: string
heading?: string | React.ReactElement
}) => {
const headingPrefix =
heading && addSubmissionNameHeading ? `${heading}: ` : ''
Expand Down
8 changes: 4 additions & 4 deletions services/app-web/src/contexts/PageContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { useCurrentRoute } from '../hooks/useCurrentRoute'
Intended for page specific context that must be shared across the application, not for data that can be fetched from the api.
*/
type PageContextType = {
heading?: string
updateHeading: ({ customHeading }: { customHeading?: string }) => void
heading?: string | React.ReactElement
updateHeading: ({ customHeading }: { customHeading?: string | React.ReactElement }) => void
}

const PageContext = React.createContext(null as unknown as PageContextType)
Expand All @@ -21,14 +21,14 @@ const PageProvider: React.FC<
React.PropsWithChildren<React.PropsWithChildren<unknown>>
>
> = ({ children }) => {
const [heading, setHeading] = React.useState<string | undefined>(undefined)
const [heading, setHeading] = React.useState<string | React.ReactElement | undefined>(undefined)
const { currentRoute: routeName } = useCurrentRoute()
/*
Set headings in priority order
1. If there a custom heading, use that (relevant for heading related to the api loaded resource, such as the submission name)
2. Otherwise, use default static headings for the current location when defined.
*/
const updateHeading = ({ customHeading }: { customHeading?: string }) => {
const updateHeading = ({ customHeading }: { customHeading?: string | React.ReactElement }) => {
const defaultHeading = PageHeadingsRecord[routeName]
? PageHeadingsRecord[routeName]
: undefined
Expand Down
8 changes: 8 additions & 0 deletions services/app-web/src/pages/App/AppRoutes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { AuthenticatedRouteWrapper } from '../Wrapper/AuthenticatedRouteWrapper'
import { Error404 } from '../Errors/Error404Page'
import { Help } from '../Help/Help'
import { Landing } from '../Landing/Landing'
import { MccrsId } from '../MccrsId/MccrsId'
import { NewStateSubmissionForm, StateSubmissionForm } from '../StateSubmission'
import { SubmissionSummary } from '../SubmissionSummary'
import { SubmissionRevisionSummary } from '../SubmissionRevisionSummary'
Expand Down Expand Up @@ -158,6 +159,7 @@ const CMSUserRoutes = ({
featureFlags.RATE_REVIEWS_DASHBOARD.flag,
featureFlags.RATE_REVIEWS_DASHBOARD.defaultValue
)

return (
<AuthenticatedRouteWrapper authMode={authMode} setAlert={setAlert}>
<Routes>
Expand Down Expand Up @@ -205,6 +207,12 @@ const CMSUserRoutes = ({
path={RoutesRecord.SUBMISSIONS_SUMMARY}
element={<SubmissionSummary />}
/>
{
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change caused a flicker of the 404 not found page before going to the MCCRSID page.

Screen.Recording.2023-10-24.at.3.21.17.PM.mov

Copy link
Contributor

@JasonLin0991 JasonLin0991 Oct 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be a tricky fix. I think it's because we use a hook for feature flags inside the route's component, and that toggles what routes are valid. I wouldn't be opposed to moving this into a separate bug ticket.

Thoughts? @macrael @haworku

Copy link
Contributor

@haworku haworku Oct 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ughhh! And also yes this shouldn't block this PR. To me the flicker is a follow on bug ticket (sure) or just can be wrapped into edit work as we finish out this epic. @pearl-truss happy to take a look at this - lmk

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think an answer is to only display the blank page until flags have been loaded

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't been able to reproduce this yet. I tried switching the flag on and off and loading the app in an incognito window. If there's anything else I can try, that would be helpful. And I can include a fix for this in the edit ticket.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think locally, it happens so fast that you might not see it. If you visit the deployed app for this PR you should be able to see it there

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On local, throttling network speeds might get the bug to show up.
Screenshot 2023-10-24 at 10 41 12 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, thanks Jason :)

/>
}
</Route>

<Route
Expand Down
92 changes: 92 additions & 0 deletions services/app-web/src/pages/MccrsId/MccrsId.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';

.formPage {
width: 100%;
}

.formContainer.tableContainer {

&[class^='usa-form'] {
max-width: 100%;
width: 75rem;
}
}

.formHeader {
text-align: center;
width: 100%;
padding: units(4) 0;
}

.formContainer {
> [class^='usa-fieldset'] {
padding: units(4);
margin-bottom: units(2);
margin-top: units(2);
background: $cms-color-white;
border: 1px solid $theme-color-base-lighter;
@include u-radius('md');
}

h3 {
font-size: 22px;
}

> div[class^='usa-form-group']:not(:first-of-type) {
margin-top: 2.5rem;
}

&[class^='usa-form'] {

min-width: 100%;
max-width: 100%;

@include at-media(tablet){
min-width: 40rem;
max-width: 20rem;
margin: 0 auto;
}
}
}

[class^='usa-legend'] {
margin-top: 0;
}

div[class^='usa-form-group'] {
margin-top: 24px;
label[class^='usa-label'] {
font-size: 16px;
max-width: 100%;
}
}

.customHeading {
font-weight: 700;

span {
font-weight: normal;
margin-left: 16px;
}
}

div[class^='usa-hint'] span {
span {
display: inline;
font-weight: bold;
}
}

ul[class^='usa-button-group'] {
justify-content: end;
li[class^='usa-button-group__item'] {
margin-top: 0;
button {
margin-top: 16px;
margin-bottom: 44px;
margin-right: .25rem;
}
}
}

Loading
Loading