Add Other textbox to race breakdown

Recidiviz · Oct 17, 2024 · 8387bba · 8387bba
1 parent 6ed810d
commit 8387bba
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
@@ -170,3 +170,11 @@ export const ContextLabel = styled.div`
   color: ${palette.highlight.grey8};
   margin-bottom: 16px;
 `;
+
+export const InputWrapper = styled.div`
+  margin-bottom: 16px;
+
+  textarea {
+    height: 100px;
+  }
+`;
diff --git a/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx b/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
@@ -21,6 +21,7 @@ import {
   CheckboxOption,
   CheckboxOptions,
 } from "@justice-counts/common/components/CheckboxOptions";
+import { NewInput } from "@justice-counts/common/components/Input";
 import {
   RadioButton,
   RadioButtonsWrapper,
@@ -144,6 +145,9 @@ function RaceEthnicitiesModalForm({
     return "NO_ETHNICITY_HISPANIC_NOT_SPECIFIED";
   };
 
+  const [isOtherChecked, setOtherChecked] = useState(false);
+  const [otherDescription, setOtherDescription] = useState("");
+
   const handleUpdateRacesDimensions = () => {
     if (!systemSearchParam || !metricSearchParam) return;
     const currentState = determineCurrentState();
@@ -160,7 +164,8 @@ function RaceEthnicitiesModalForm({
       currentState,
       raceEthnicityGridStates,
       systemSearchParam,
-      metricSearchParam
+      metricSearchParam,
+      otherDescription
     );
     saveMetricSettings(updatedDimensions, agencyId);
   };
@@ -207,9 +212,25 @@ function RaceEthnicitiesModalForm({
             capture for race?
           </Styled.ToggleSwitchesListHeader>
           <Styled.CheckboxWrapper>
+            {isOtherChecked && (
+              <Styled.InputWrapper>
+                <NewInput
+                  type="text"
+                  label=""
+                  placeholder={`If the listed categories do not adequately describe this breakdown, please describe additional definition/clarification of the "Other" selection.`}
+                  value={otherDescription}
+                  multiline
+                  onChange={(e) => setOtherDescription(e.target.value)}
+                  fullWidth
+                />
+              </Styled.InputWrapper>
+            )}
             <CheckboxOptions
               options={raceEthnicityOptions}
               onChange={({ key, checked }) => {
+                if (key === "Other") {
+                  setOtherChecked(!checked);
+                }
                 setRacesStatusObject({
                   ...racesStatusObject,
                   [key]: !checked,

diff --git a/publisher/src/components/MetricsConfiguration/types.ts b/publisher/src/components/MetricsConfiguration/types.ts
@@ -80,6 +80,7 @@ export type Dimensions = {
     enabled?: boolean | null;
     label?: string;
     description?: string;
+    other_description?: string;
     key?: string;
     race?: Races;
     ethnicity?: Ethnicities;
@@ -101,6 +102,7 @@ export type UpdatedDimension = {
   enabled: boolean;
   race: Races;
   ethnicity: Ethnicities;
+  other_description?: string;
 };
 
 export type UpdatedDisaggregation = {

diff --git a/publisher/src/stores/MetricConfigStore.tsx b/publisher/src/stores/MetricConfigStore.tsx
@@ -1149,7 +1149,8 @@ class MetricConfigStore {
     state: StateKeys,
     gridStates: RaceEthnicitiesGridStates,
     system: AgencySystem,
-    metricKey: string
+    metricKey: string,
+    otherDescription?: string
   ): UpdatedDisaggregation => {
     const ethnicitiesByRace = this.getEthnicitiesByRace(system, metricKey);
 
@@ -1192,6 +1193,15 @@ class MetricConfigStore {
       raceEthnicitiesDimensions &&
       (Object.values(raceEthnicitiesDimensions) as UpdatedDimension[]);
 
+    if (otherDescription) {
+      const otherDimension = dimensions.find(
+        (dimension) => dimension.race === "Other" && dimension.enabled
+      );
+      if (otherDimension) {
+        otherDimension.other_description = otherDescription;
+      }
+    }
+
     /** Return an object w/ all dimensions in the desired backend data structure for saving purposes */
     return {
       key: metricKey,