Design review: Redundant Rates display cleanup

services/app-api/src/resolvers/rate/generateRateCertificationName.ts

@@ -7,6 +7,16 @@ const naturalSort = (a: string, b: string): number => {
     return a.localeCompare(b, 'en', { numeric: true })
 }
 
+const formatProgramNamesForDisplay  = (statePrograms: ProgramArgType[],
+ rateProgramIDs: string[]): string[] => programNames(statePrograms, rateProgramIDs)
+.sort(naturalSort)
+.map((n) =>
+    n
+        .replace(/\s/g, '-')
+        .replace(/[^a-zA-Z0-9+]/g, '')
+        .toUpperCase()
+)
+
 const generateRateCertificationName = (
     rateFormData: RateFormEditableType,
     stateCode: string,
@@ -35,15 +45,7 @@ const generateRateCertificationName = (
     const certifiedDate = rateDateCertified
         ? `-${formatRateNameDate(rateDateCertified)}`
         : ''
-    const pNames = programNames(statePrograms, rateProgramIDs)
-        .sort(naturalSort)
-        .map((n) =>
-            n
-                .replace(/\s/g, '-')
-                .replace(/[^a-zA-Z0-9+]/g, '')
-                .toUpperCase()
-        )
-        .join('-')
+    const pNames = formatProgramNamesForDisplay(statePrograms, rateProgramIDs).join('-')
 
     let rateName = `MCR-${stateCode.toUpperCase()}`
 
@@ -71,4 +73,4 @@ const generateRateCertificationName = (
     return rateName
 }
 
-export { generateRateCertificationName }
+export { generateRateCertificationName, formatProgramNamesForDisplay  }

services/app-web/src/components/FormContainer/FormContainer.module.scss

@@ -0,0 +1,8 @@
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
+
+.formPage {
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+}

services/app-web/src/components/FormContainer/FormContainer.test.tsx

@@ -0,0 +1,20 @@
+import { screen } from '@testing-library/react'
+import { FormContainer } from "./FormContainer"
+import { renderWithProviders } from '../../testHelpers'
+
+describe('FormContainer', () => {
+    it('render children and custom classses on container element', ()=>{
+        renderWithProviders(<FormContainer id="hasTestID" className='test-class' ><h1>test heading</h1></FormContainer>)
+    expect(
+        screen.getByRole('heading', {
+            name: 'test heading',
+        })
+    ).toBeInTheDocument()
+    expect(
+        screen.getByTestId("hasTestID")
+    ).toBeInTheDocument()
+    expect(
+        screen.getByTestId("hasTestID")
+    ).toHaveClass('test-class')
+    })
+})

services/app-web/src/pages/StateSubmission/FormContainer.tsx → services/app-web/src/components/FormContainer/FormContainer.tsx

@@ -1,17 +1,21 @@
 import { GridContainer } from '@trussworks/react-uswds'
-import styles from './StateSubmissionForm.module.scss'
+import classnames from 'classnames'
+import styles from './FormContainer.module.scss'
 
 type FormContainerProps = {
     id: string
     children: React.ReactNode & JSX.IntrinsicElements['div']
+    className?: string
 }
 
 export const FormContainer = (
     props: FormContainerProps
 ): React.ReactElement => {
-    const { id, children } = props
+    const { id, className, children } = props
+
+    const classes = classnames(styles.formPage, className)
     return (
-        <GridContainer data-testid={id} className={styles.formPage}>
+        <GridContainer data-testid={id} className={classes}>
             {children}
         </GridContainer>
     )

services/app-web/src/pages/LinkYourRates/LinkRateSelect/LinkRateSelect.tsx

@@ -70,6 +70,8 @@ export const LinkRateSelect = ({
 
     const rateNames: LinkRateOptionType[] = rates.map((rate) => {
         const revision = rate.revisions[0]
+        const rateProgramIDs = revision.formData.rateProgramIDs.length > 0 ? revision.formData.rateProgramIDs:  revision.formData.deprecatedRateProgramIDs
+
         return {
             value: rate.id,
             label:
@@ -80,7 +82,7 @@ export const LinkRateSelect = ({
                 'Unknown rate certification',
             rateProgramIDs: programNames(
                 rate.state.programs,
-                revision.formData.rateProgramIDs
+                rateProgramIDs,
             ).join(', '),
             rateDateStart: formatCalendarDate(revision.formData.rateDateStart),
             rateDateEnd: formatCalendarDate(revision.formData.rateDateEnd),

services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss

@@ -1,49 +1,43 @@
 @use '../../styles/custom.scss' as custom;
 @use '../../styles/uswdsImports.scss' as uswds;
 
-.background {
-    width: 100%;
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    background-color: none;
-    align-items: center;
-}
-.gridContainer {
-    @include custom.default-page-container;
-    max-width: custom.$mcr-container-standard-width-fixed;
-    flex-direction: column;
-    margin: 2rem;
-    padding: 1rem;
-}
-
-.formContainer {
-    max-width: custom.$mcr-container-standard-width-fixed;
-    > [class^='usa-fieldset'] {
-        padding: uswds.units(4);
-        margin-bottom: uswds.units(2);
-        margin-top: uswds.units(2);
-        background: custom.$mcr-foundation-white;
-        border: 1px solid custom.$mcr-gray-lighter;
-        @include uswds.u-radius('md');
-    }
+$mcr-single-page-width: 40rem;
 
-    h2 {
-        margin-top: 0;
-    }
+// Notes for future refactor to single page UI
+// We should be overriding usa-form max-width across the application, rather than per form page.  Let uswds always take the width of its parent by default
+// From figma seems like like single page page width is 40rem but we have  $mcr-container-standard-width-fixed set to 50rem - look at this in future refactor - cross check with design.
+// Are single page forms supposed to be the same width as the state submission form? Probably - in which case we should be sharing as many styles tokens as possible.
+.replaceRatePage {
+    justify-content: center;
+    flex-direction: row;
 
-    > div[class^='usa-form-group']:not(:first-of-type) {
-        margin-top: 2.5rem;
-    }
+   form[class^='usa-form']{
+        max-width: 100% !important;
+        display: flex;
+        flex-direction: column;
+        width: $mcr-single-page-width;
+   }
+    .formInnerContainer {
+        border: 0;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        background: custom.$mcr-foundation-white;
+        padding: 2rem;
+        width: $mcr-single-page-width;
 
-    &[class^='usa-form'] {
-        min-width: 100%;
-        max-width: 100%;
+        h2 {
+            margin-top: 0;
+        }
 
-        @include uswds.at-media(tablet) {
-            min-width: 40rem;
-            max-width: 20rem;
-            margin: 0 auto;
+        > div[class^='usa-form-group']:not(:first-of-type) {
+            margin-top: 2.5rem;
+        }
+        >fieldset{
+           border: 0;
+           margin: 0;
+           padding:0
         }
     }
+
 }
+

services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx

@@ -1,7 +1,6 @@
 import {
     ButtonGroup,
     FormGroup,
-    GridContainer,
     Label,
 } from '@trussworks/react-uswds'
 import React, { useEffect } from 'react'
@@ -35,6 +34,8 @@ import {
     ErrorSummaryProps,
     ErrorSummary,
 } from '../../components/Form/ErrorSummary/ErrorSummary'
+import { FormContainer } from '../../components/FormContainer/FormContainer'
+import { LinkedRateSummary } from '../StateSubmission/RateDetails/LinkedRateSummary'
 
 export interface ReplaceRateFormValues {
     replacementRateID: string
@@ -155,8 +156,7 @@ export const ReplaceRate = (): React.ReactElement => {
     }
 
     return (
-        <div className={styles.background}>
-            <GridContainer className={styles.gridContainer}>
+        <FormContainer id="ReplaceRate" className={styles.replaceRatePage}>
                 {replaceError && <GenericApiErrorBanner />}
                 <Formik
                     initialValues={formInitialValues}
@@ -165,7 +165,6 @@ export const ReplaceRate = (): React.ReactElement => {
                 >
                     {({ errors, values, handleSubmit }) => (
                         <UswdsForm
-                            className={styles.formContainer}
                             id="ReplaceRateForm"
                             aria-label={'Withdraw and replace rate on contract'}
                             aria-describedby="form-guidance"
@@ -181,14 +180,14 @@ export const ReplaceRate = (): React.ReactElement => {
                                     headingRef={errorSummaryHeadingRef}
                                 />
                             )}
-
+                            <div className={styles.formInnerContainer}>
                             <h2>Replace a rate review</h2>
 
                             <DataDetail id="withdrawnRate" label="Current rate">
                                 {withdrawnRateRevisionName}
                             </DataDetail>
 
-                            <fieldset className="usa-fieldset">
+                            <fieldset>
                                 <legend className="srOnly">
                                     Withdraw and replace rate on contract
                                 </legend>
@@ -252,7 +251,9 @@ export const ReplaceRate = (): React.ReactElement => {
                                     />
                                 </FormGroup>
                             </fieldset>
-                            <PageActionsContainer>
+                            </div>
+
+                        <PageActionsContainer>
                                 <ButtonGroup type="default">
                                     <ActionButton
                                         type="button"
@@ -280,11 +281,11 @@ export const ReplaceRate = (): React.ReactElement => {
                                     </ActionButton>
                                 </ButtonGroup>
                             </PageActionsContainer>
-                        </UswdsForm>
+                            </UswdsForm>
                     )}
+
                 </Formik>
-            </GridContainer>
-        </div>
+         </FormContainer>
     )
 }
 

services/app-web/src/pages/StateSubmission/Contacts/Contacts.tsx

@@ -29,7 +29,7 @@ import {
     DynamicStepIndicator,
     SectionCard,
 } from '../../../components'
-import { FormContainer } from '../FormContainer'
+import { FormContainer } from '../../../components/FormContainer/FormContainer'
 import {
     useCurrentRoute,
     useHealthPlanPackageForm,

services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx

@@ -80,8 +80,11 @@ import {
     StatutoryRegulatoryAttestationDescription,
     StatutoryRegulatoryAttestationQuestion,
 } from '../../../constants/statutoryRegulatoryAttestation'
-import { FormContainer } from '../FormContainer'
-import { useCurrentRoute, useRouteParams } from '../../../hooks'
+import { FormContainer } from '../../../components/FormContainer/FormContainer'
+import {
+    useCurrentRoute,
+    useRouteParams,
+} from '../../../hooks'
 import { useAuth } from '../../../contexts/AuthContext'
 import { ErrorOrLoadingPage } from '../ErrorOrLoadingPage'
 import { PageBannerAlerts } from '../PageBannerAlerts'

services/app-web/src/pages/StateSubmission/Documents/Documents.tsx

@@ -18,7 +18,7 @@ import classNames from 'classnames'
 import { ErrorSummary } from '../../../components/Form'
 import { activeFormPages } from '../StateSubmissionForm'
 import { RoutesRecord } from '../../../constants'
-import { FormContainer } from '../FormContainer'
+import { FormContainer } from '../../../components/FormContainer/FormContainer'
 import { useAuth } from '../../../contexts/AuthContext'
 import {
     useCurrentRoute,

services/app-web/src/pages/StateSubmission/New/NewStateSubmissionForm.tsx

@@ -4,7 +4,7 @@ import { DynamicStepIndicator } from '../../../components/DynamicStepIndicator'
 import { STATE_SUBMISSION_FORM_ROUTES } from '../../../constants/routes'
 import stylesForm from '../StateSubmissionForm.module.scss'
 import stylesSideNav from '../../SubmissionSideNav/SubmissionSideNav.module.scss'
-import { FormContainer } from '../FormContainer'
+import { FormContainer } from '../../../components/FormContainer/FormContainer'
 import { SubmissionType } from '../SubmissionType/SubmissionType'
 import { GridContainer } from '@trussworks/react-uswds'
 

services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx

@@ -25,7 +25,7 @@ import { SubmissionType } from './SubmissionType'
 import { UnlockedHealthPlanFormDataType } from '../../common-code/healthPlanFormDataType'
 import { ContractFormData } from '../../gen/gqlClient'
 import { RateDetails } from './RateDetails'
-import styles from './StateSubmissionForm.module.scss'
+import formContainerStyles from '../../components/FormContainer/FormContainer.module.scss'
 import { SideNavOutletContextType } from '../SubmissionSideNav/SubmissionSideNav'
 
 // Can move this AppRoutes on future pass - leaving it here now to make diff clear
@@ -45,7 +45,7 @@ export const StateSubmissionForm = (): React.ReactElement => {
     return (
         <div
             data-testid="state-submission-form-page"
-            className={styles.formPage}
+            className={formContainerStyles.formPage}
         >
             <Routes>
                 <Route

services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx

@@ -44,7 +44,7 @@ import {
 } from '../../../components/Form/FieldYesNo/FieldYesNo'
 import { SubmissionTypeFormSchema } from './SubmissionTypeSchema'
 import { RoutesRecord, STATE_SUBMISSION_FORM_ROUTES } from '../../../constants'
-import { FormContainer } from '../FormContainer'
+import { FormContainer } from '../../../components/FormContainer/FormContainer'
 import { useCurrentRoute } from '../../../hooks'
 import { ErrorOrLoadingPage } from '../ErrorOrLoadingPage'
 import { useAuth } from '../../../contexts/AuthContext'