Merge in main and fix conflicts

Enterprise-CMCS · May 13, 2024 · 1ef4ceb · 1ef4ceb
2 parents 89d4f7b + a18274d
commit 1ef4ceb
Show file tree

Hide file tree

Showing 8 changed files with 639 additions and 113 deletions.
diff --git a/services/app-web/package.json b/services/app-web/package.json
@@ -136,7 +136,7 @@
         "@storybook/react": "^6.5.15",
         "@testing-library/cypress": "^10.0.1",
         "@testing-library/jest-dom": "^6.1.3",
-        "@testing-library/react": "^14.0.0",
+        "@testing-library/react": "^15.0.7",
         "@testing-library/user-event": "^14.4.3",
         "@types/classnames": "^2.2.11",
         "@types/jest": "^29.5.6",

diff --git a/services/app-web/src/pages/LinkYourRates/LinkRateSelect.tsx b/services/app-web/src/pages/LinkYourRates/LinkRateSelect.tsx
@@ -1,5 +1,12 @@
 import React from 'react'
-import Select, { ActionMeta, AriaOnFocus, Props } from 'react-select'
+import Select, {
+    ActionMeta,
+    AriaOnFocus,
+    Props,
+    FormatOptionLabelMeta,
+    SingleValue,
+    createFilter,
+} from 'react-select'
 import styles from '../../components/Select/RateSelect/RateSelect.module.scss'
 import { StateUser, useIndexRatesQuery } from '../../gen/gqlClient'
 import { useAuth } from '../../contexts/AuthContext'
@@ -15,9 +22,14 @@ import { useFormikContext } from 'formik'
 
 export interface LinkRateOptionType {
     readonly value: string
-    readonly label: React.ReactElement
+    readonly label: string
     readonly isFixed?: boolean
     readonly isDisabled?: boolean
+    readonly rateCertificationName: string
+    readonly rateProgramIDs: string
+    readonly rateDateStart: string
+    readonly rateDateEnd: string
+    readonly rateDateCertified: string
 }
 
 export type LinkRateSelectPropType = {
@@ -31,7 +43,7 @@ export const LinkRateSelect = ({
     initialValue,
     autofill,
     ...selectProps
-}: LinkRateSelectPropType & Props<LinkRateOptionType, true>) => {
+}: LinkRateSelectPropType & Props<LinkRateOptionType, false>) => {
     const { values }: { values: RateDetailFormConfig } = useFormikContext()
     const { data, loading, error } = useIndexRatesQuery()
     const { getKey } = useS3()
@@ -52,32 +64,20 @@ export const LinkRateSelect = ({
         const revision = rate.revisions[0]
         return {
             value: rate.id,
-            label: (
-                <>
-                    <strong>{revision.formData.rateCertificationName}</strong>
-                    <div style={{ lineHeight: '50%', fontSize: '14px' }}>
-                        <p>
-                            Programs:&nbsp;
-                            {programNames(
-                                statePrograms,
-                                revision.formData.rateProgramIDs
-                            ).join(', ')}
-                        </p>
-                        <p>
-                            Rating period:&nbsp;
-                            {formatCalendarDate(
-                                revision.formData.rateDateStart
-                            )}
-                            -{formatCalendarDate(revision.formData.rateDateEnd)}
-                        </p>
-                        <p>
-                            Certification date:&nbsp;
-                            {formatCalendarDate(
-                                revision.formData.rateDateCertified
-                            )}
-                        </p>
-                    </div>
-                </>
+            label:
+                revision.formData.rateCertificationName ??
+                'Unknown rate certification',
+            rateCertificationName:
+                revision.formData.rateCertificationName ??
+                'Unknown rate certification',
+            rateProgramIDs: programNames(
+                statePrograms,
+                revision.formData.rateProgramIDs
+            ).join(', '),
+            rateDateStart: formatCalendarDate(revision.formData.rateDateStart),
+            rateDateEnd: formatCalendarDate(revision.formData.rateDateEnd),
+            rateDateCertified: formatCalendarDate(
+                revision.formData.rateDateCertified
             ),
         }
     })
@@ -108,10 +108,10 @@ export const LinkRateSelect = ({
     }
 
     const onInputChange = (
-        newValue: LinkRateOptionType,
+        newValue: SingleValue<LinkRateOptionType>,
         { action }: ActionMeta<LinkRateOptionType>
     ) => {
-        if (action === 'select-option') {
+        if (action === 'select-option' && newValue) {
             const linkedRateID = newValue.value
             const linkedRate = rates.find((rate) => rate.id === linkedRateID)
             const linkedRateForm: FormikRateForm = convertGQLRateToRateForm(
@@ -132,12 +132,27 @@ export const LinkRateSelect = ({
         }
     }
 
-    //Need this to make the label searchable since the rate name is buried in a react element
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const filterOptions = ({ label }: any, input: string) =>
-        label.props.children[0].props.children
-            ?.toLowerCase()
-            .includes(input.toLowerCase())
+    const formatOptionLabel = (
+        data: LinkRateOptionType,
+        optionMeta: FormatOptionLabelMeta<LinkRateOptionType>
+    ) => {
+        if (optionMeta.context === 'menu') {
+            return (
+                <>
+                    <strong>{data.rateCertificationName}</strong>
+                    <div style={{ lineHeight: '50%' }}>
+                        <p>Programs: {data.rateProgramIDs}</p>
+                        <p>
+                            Rating period: {data.rateDateStart}-
+                            {data.rateDateEnd}
+                        </p>
+                        <p>Certification date: {data.rateDateCertified}</p>
+                    </div>
+                </>
+            )
+        }
+        return <div>{data.rateCertificationName}</div>
+    }
 
     //We track rates that have already been selected to remove them from the dropdown
     const selectedRates = values.rateForms.map((rate) => rate.id && rate.id)
@@ -153,6 +168,7 @@ export const LinkRateSelect = ({
                           (rate) => !selectedRates.includes(rate.value)
                       )
             }
+            formatOptionLabel={formatOptionLabel}
             isSearchable
             maxMenuHeight={400}
             aria-label="linked rate (required)"
@@ -168,11 +184,14 @@ export const LinkRateSelect = ({
             }
             loadingMessage={() => 'Loading rate certifications...'}
             name={name}
-            filterOption={filterOptions}
+            filterOption={createFilter({
+                ignoreCase: true,
+                trim: true,
+                matchFrom: 'any' as const,
+            })}
             {...selectProps}
             inputId={name}
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onChange={onInputChange as any} // TODO see why the types definitions are messed up for react-select "single" (not multi) onChange - may need to upgrade dep if this bug was fixed
+            onChange={onInputChange}
         />
     )
 }
diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx
@@ -577,12 +577,9 @@ const RateDetailsV2 = ({
                                                             Additional rate
                                                             certification
                                                         </h3>
-                                                        <Button
+                                                        <button
                                                             type="button"
-                                                            outline
-                                                            className={
-                                                                styles.addRateBtn
-                                                            }
+                                                            className={`usa-button usa-button--outline ${styles.addRateBtn}`}
                                                             onClick={() => {
                                                                 const newRate =
                                                                     convertGQLRateToRateForm(
@@ -600,7 +597,7 @@ const RateDetailsV2 = ({
                                                         >
                                                             Add another rate
                                                             certification
-                                                        </Button>
+                                                        </button>
                                                     </SectionCard>
                                                 )}
                                             </>

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx
@@ -536,18 +536,17 @@ export const SingleRateFormFields = ({
                                         </div>
                                     )
                                 )}
-                            <Button
+                            <button
                                 type="button"
-                                outline
-                                className={styles.addRateBtn}
+                                className={`usa-button usa-button--outline ${styles.addRateBtn}`}
                                 onClick={() => {
                                     push(emptyActuaryContact)
                                     setFocusNewActuaryContact(true)
                                 }}
                                 ref={newActuaryContactButtonRef}
                             >
                                 Add a certifying actuary
-                            </Button>
+                            </button>
                         </FormGroup>
                     )}
                 </FieldArray>