Skip to content

Commit

Permalink
[EASI-2191] Clean up array helpers and radio button components (#913)
Browse files Browse the repository at this point in the history 
* remove arrayhelper in task list basic first page

* udpate snaps

* add comment to explain why onchange is still here

* update gen char authority page

* update gen char targets and options page

* removed array helper in opsevl and learning page

* remove array helper in evaluation page

* remove fieldarray in iddocc testing

* remove fieldarray in learning page

* remove field array in few more pages

* fixing the label htmlfor

* update snaps

* clean up radio button compoents

* fixing the htmlfor and scrollelement

* udpate snaps
  • Loading branch information
@garyjzhao
garyjzhao authored Jan 26, 2024
1 parent b894a4a commit deef6df
Show file tree
Hide file tree
Showing 24 changed files with 1,743 additions and 2,066 deletions.
542 changes: 268 additions & 274 deletions src/views/ModelPlan/TaskList/Basics/__snapshots__/index.test.tsx.snap
View file

Large diffs are not rendered by default.

109 changes: 39 additions & 70 deletions src/views/ModelPlan/TaskList/Basics/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Fragment, useRef, useState } from 'react';
import React, { Fragment, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, Route, Switch, useHistory, useParams } from 'react-router-dom';
import {
Expand All @@ -17,7 +17,7 @@ import {
TextInput
} from '@trussworks/react-uswds';
import classNames from 'classnames';
import { Field, FieldArray, Form, Formik, FormikProps } from 'formik';
import { Field, Form, Formik, FormikProps } from 'formik';
import {
CmsCenter,
GetBasicsQuery,
Expand Down Expand Up @@ -70,10 +70,6 @@ const BasicsContent = () => {

const history = useHistory();

const [areCmmiGroupsShown, setAreCmmiGroupsShown] = useState(
formikRef?.current?.values.basics.cmsCenters.includes(CmsCenter.CMMI)
);

const { data, loading, error } = useGetBasicsQuery({
variables: {
id: modelID
Expand Down Expand Up @@ -274,11 +270,11 @@ const BasicsContent = () => {
</FieldGroup>

<FieldGroup
scrollElement="abbreviation"
scrollElement="plan-basics-abbreviation"
error={!!flatErrors.abbreviation}
className="margin-top-4"
>
<Label htmlFor="plan-basics-model-name">
<Label htmlFor="plan-basics-abbreviation">
{modelPlanT('abbreviation.label')}
</Label>

Expand Down Expand Up @@ -331,7 +327,7 @@ const BasicsContent = () => {
<Grid row gap>
<Grid desktop={{ col: 6 }}>
<FieldGroup
scrollElement="basics.amsModelID"
scrollElement="plan-basics-ams-model-id"
error={!!flatErrors['basics.amsModelID']}
className="margin-top-0"
>
Expand All @@ -353,7 +349,7 @@ const BasicsContent = () => {
</Grid>
<Grid desktop={{ col: 6 }}>
<FieldGroup
scrollElement="basics.demoCode"
scrollElement="plan-basics-demo-code"
error={!!flatErrors['basics.demoCode']}
className="margin-top-0"
>
Expand All @@ -377,7 +373,7 @@ const BasicsContent = () => {
</div>

<FieldGroup
scrollElement="modelCategory"
scrollElement="plan-basics-model-category"
error={!!flatErrors['basics.modelCategory']}
className="margin-top-4"
>
Expand Down Expand Up @@ -421,6 +417,8 @@ const BasicsContent = () => {
}
value={key}
checked={values.basics.modelCategory === key}
// the onChange below is necessary to have a dynamic interaction
// with the Additional Model Categories question
onChange={() => {
setFieldValue('basics.modelCategory', key);
if (
Expand All @@ -443,13 +441,14 @@ const BasicsContent = () => {
</FieldGroup>

<FieldGroup
scrollElement="plan-basics-model-additional-category"
error={
!!flatErrors['basics.additionalModelCategories']
}
className="margin-top-4"
>
<Label
htmlFor="basics.additionalModelCategories"
htmlFor="plan-basics-model-additional-category"
className="text-normal"
>
{basicsT('additionalModelCategories.label')}
Expand Down Expand Up @@ -510,73 +509,43 @@ const BasicsContent = () => {
</FieldGroup>

<FieldGroup
scrollElement="cmsCenters"
scrollElement="new-plan-cmsCenters"
error={!!flatErrors['basics.cmsCenters']}
className="margin-top-4"
>
<Fieldset>
<FieldArray
name="basics.cmsCenters"
render={arrayHelpers => (
<>
<Label htmlFor="plan-basics-cmsCenters">
{basicsT('cmsCenters.label')}
<RequiredAsterisk />
</Label>

<FieldErrorMsg>
{flatErrors['basics.cmsCenters']}
</FieldErrorMsg>

{getKeys(cmsCentersConfig.options).map(
center => {
return (
<Field
key={center}
as={CheckboxField}
id={`new-plan-cmsCenters-${center}`}
name="basics.cmsCenters"
label={
cmsCentersConfig.options[center]
}
value={center}
checked={values.basics.cmsCenters.includes(
center
)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
arrayHelpers.push(e.target.value);
} else {
const idx = values.basics.cmsCenters.indexOf(
e.target.value as CmsCenter
);
arrayHelpers.remove(idx);
}
if (
e.target.value === CmsCenter.CMMI
) {
setAreCmmiGroupsShown(
!areCmmiGroupsShown
);
}
}}
/>
);
}
)}
</>
)}
/>
</Fieldset>
<Label htmlFor="new-plan-cmsCenters">
{basicsT('cmsCenters.label')}
<RequiredAsterisk />
</Label>

<FieldErrorMsg>
{flatErrors['basics.cmsCenters']}
</FieldErrorMsg>

{getKeys(cmsCentersConfig.options).map(center => {
return (
<Field
key={center}
as={CheckboxField}
id={`new-plan-cmsCenters-${center}`}
name="basics.cmsCenters"
label={cmsCentersConfig.options[center]}
value={center}
checked={values.basics.cmsCenters.includes(
center
)}
/>
);
})}
</FieldGroup>

<FieldGroup
scrollElement="new-plan-cmmiGroup"
error={!!flatErrors['basics.cmmiGroups']}
className="margin-top-4"
>
<Label
htmlFor="basics.cmmiGroups"
htmlFor="new-plan-cmmiGroup"
className="text-normal"
>
{basicsT('cmmiGroups.label')}
Expand Down
2 changes: 1 addition & 1 deletion src/views/ModelPlan/TaskList/Beneficiaries/PeopleImpact/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ exports[`Model Plan Beneficiaries > matches snapshot 1`] = `
>
<div
class="usa-form-group"
data-scroll="numberPeopleImpacted"
data-scroll="expected-people-impacted"
>
<label
class="usa-label"
Expand Down
5 changes: 1 addition & 4 deletions src/views/ModelPlan/TaskList/Beneficiaries/PeopleImpact/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ const PeopleImpact = () => {
>
<Fieldset disabled={!!error || loading}>
<FieldGroup
scrollElement="numberPeopleImpacted"
scrollElement="expected-people-impacted"
error={!!flatErrors.numberPeopleImpacted}
>
<Label htmlFor="expected-people-impacted">
Expand Down Expand Up @@ -293,9 +293,6 @@ const PeopleImpact = () => {
label={estimateConfidenceConfig.options[key]}
value={key}
checked={values.estimateConfidence === key}
onChange={() => {
setFieldValue('estimateConfidence', key);
}}
/>
)
)}
Expand Down
16 changes: 8 additions & 8 deletions ...ews/ModelPlan/TaskList/GeneralCharacteristics/Authority/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ exports[`Model Plan Characteristics > matches snapshot 1`] = `
>
<div
class="usa-form-group margin-y-4"
data-scroll="rulemakingRequired"
data-scroll="plan-characteristics-rulemaking-required"
>
<label
class="usa-label"
Expand Down Expand Up @@ -136,7 +136,7 @@ exports[`Model Plan Characteristics > matches snapshot 1`] = `
>
<div
class="usa-form-group flex-1"
data-scroll="rulemakingRequiredDescription"
data-scroll="plan-characteristics-rulemaking-required-description"
>
<label
class="usa-label margin-bottom-1 text-normal"
Expand Down Expand Up @@ -204,12 +204,15 @@ exports[`Model Plan Characteristics > matches snapshot 1`] = `
</div>
<div
class="usa-form-group"
data-scroll="plan-characteristics-authority-allowance"
>
<legend
<label
class="usa-label"
data-testid="label"
for="plan-characteristics-authority-allowance"
>
What authority allows CMMI to test the model?
</legend>
</label>
<div
class="mint-checkbox usa-checkbox"
>
Expand Down Expand Up @@ -318,7 +321,7 @@ exports[`Model Plan Characteristics > matches snapshot 1`] = `
</div>
<div
class="usa-form-group margin-y-4"
data-scroll="waiversRequired"
data-scroll="plan-characteristics-waivers-required"
>
<label
class="usa-label"
Expand Down Expand Up @@ -371,9 +374,6 @@ exports[`Model Plan Characteristics > matches snapshot 1`] = `
</div>
</fieldset>
</div>
<div
class="usa-form-group"
/>
<div
class="margin-top-4 margin-bottom-8"
>
Expand Down
Loading

0 comments on commit deef6df

Please sign in to comment.