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/pages/StateSubmission/FormContainer.tsx → services/app-web/src/components/FormContainer/FormContainer.tsx

@@ -1,5 +1,5 @@
 import { GridContainer } from '@trussworks/react-uswds'
-import styles from './StateSubmissionForm.module.scss'
+import styles from './FormContainer.module.scss'
 
 type FormContainerProps = {
     id: string

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,32 +1,13 @@
 @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 {
+    border: 0;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    background: custom.$mcr-foundation-white;
     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');
-    }
+    padding: 2rem;
 
     h2 {
         margin-top: 0;
@@ -35,15 +16,9 @@
     > div[class^='usa-form-group']:not(:first-of-type) {
         margin-top: 2.5rem;
     }
-
-    &[class^='usa-form'] {
-        min-width: 100%;
-        max-width: 100%;
-
-        @include uswds.at-media(tablet) {
-            min-width: 40rem;
-            max-width: 20rem;
-            margin: 0 auto;
-        }
+    >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">
                 {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.formContainer}>
                             <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

@@ -75,7 +75,7 @@ import {
     StatutoryRegulatoryAttestationDescription,
     StatutoryRegulatoryAttestationQuestion,
 } from '../../../constants/statutoryRegulatoryAttestation'
-import { FormContainer } from '../FormContainer'
+import { FormContainer } from '../../../components/FormContainer/FormContainer'
 import {
     useCurrentRoute,
     useHealthPlanPackageForm,

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

@@ -41,7 +41,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 { useHealthPlanPackageForm } from '../../../hooks/useHealthPlanPackageForm'
 import { useCurrentRoute } from '../../../hooks'
 import { ErrorOrLoadingPage } from '../ErrorOrLoadingPage'