CMDCT-4065: doing horrible things

services/ui-src/src/components/fields/DateField.tsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { Box } from "@chakra-ui/react";
-import { checkDateCompleteness, parseCustomHtml, useStore } from "utils";
+import { checkDateCompleteness, parseCustomHtml } from "utils";
 import { SingleInputDateField as CmsdsDateField } from "@cmsgov/design-system";
 import { PageElementProps } from "../report/Elements";
 import { DateTemplate } from "../../types/report";
 
 export const DateField = (props: PageElementProps) => {
   const dateTextbox = props.element as DateTemplate;
+  // This is a hack to get the custom design system component to accept the
+  // disabled prop, if used directly in the component, it will throw a ts error
+  const disabled = { disabled: props.disabled };
   const defaultValue = dateTextbox.answer ?? "";
   const [displayValue, setDisplayValue] = useState<string>(defaultValue);
 
-  const { userIsEndUser } = useStore().user || {};
-
   // get form context and register form field
   const form = useFormContext();
   const key = `${props.formkey}.answer`;
@@ -50,7 +51,7 @@ export const DateField = (props: PageElementProps) => {
         value={displayValue}
         hint={parsedHint}
         errorMessage={errorMessage}
-        disabled={!userIsEndUser}
+        {...disabled}
       />
     </Box>
   );

services/ui-src/src/components/fields/RadioField.tsx

@@ -3,7 +3,7 @@ import { Box } from "@chakra-ui/react";
 import { PageElementProps } from "components/report/Elements";
 import { useFormContext } from "react-hook-form";
 import { ChoiceTemplate, RadioTemplate } from "types";
-import { parseCustomHtml, useStore } from "utils";
+import { parseCustomHtml } from "utils";
 import { ChoiceList as CmsdsChoiceList } from "@cmsgov/design-system";
 import { Page } from "components/report/Page";
 
@@ -25,8 +25,6 @@ export const formatChoices = (choices: ChoiceTemplate[], answer?: string) => {
 };
 
 export const RadioField = (props: PageElementProps) => {
-  const { userIsEndUser } = useStore().user || {};
-
   const radio = props.element as RadioTemplate;
   const [displayValue, setDisplayValue] = useState<ChoiceTemplate[]>(
     formatChoices(radio.value, radio.answer) ?? []
@@ -72,7 +70,6 @@ export const RadioField = (props: PageElementProps) => {
         errorMessage={errorMessage}
         onChange={onChangeHandler}
         onComponentBlur={onBlurHandler}
-        disabled={!userIsEndUser}
         {...props}
       />
     </Box>

services/ui-src/src/components/fields/TextField.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import { TextField as CmsdsTextField } from "@cmsgov/design-system";
 import { Box } from "@chakra-ui/react";
-import { parseCustomHtml, useStore } from "utils";
+import { parseCustomHtml } from "utils";
 import { TextboxTemplate } from "../../types/report";
 import { PageElementProps } from "../report/Elements";
 
@@ -11,8 +11,6 @@ export const TextField = (props: PageElementProps) => {
   const defaultValue = textbox.answer ?? "";
   const [displayValue, setDisplayValue] = useState<string>(defaultValue);
 
-  const { userIsEndUser } = useStore().user || {};
-
   // get form context and register field
   const form = useFormContext();
   const key = `${props.formkey}.answer`;
@@ -50,7 +48,6 @@ export const TextField = (props: PageElementProps) => {
         value={displayValue}
         errorMessage={errorMessage}
         {...props}
-        disabled={!userIsEndUser}
       />
     </Box>
   );

services/ui-src/src/components/report/Elements.tsx

@@ -15,6 +15,7 @@ export interface PageElementProps {
   element: PageElement;
   index?: number;
   formkey: string;
+  disabled?: boolean;
 }
 
 export const headerElement = (props: PageElementProps) => {

services/ui-src/src/components/report/Page.tsx

@@ -11,12 +11,14 @@ import { MeasureTableElement } from "./MeasureTable";
 import { QualityMeasureTableElement } from "./QualityMeasureTable";
 import { StatusTableElement } from "./StatusTable";
 import { TextField, DateField, RadioField } from "components";
+import { useStore } from "utils";
 
 interface Props {
   elements: PageElement[];
 }
 
 export const Page = ({ elements }: Props) => {
+  const { userIsEndUser } = useStore().user || {};
   const renderElement = (element: PageElement) => {
     const elementType = element.type;
     switch (elementType) {
@@ -55,6 +57,7 @@ export const Page = ({ elements }: Props) => {
         formkey={buildFormKey(index)}
         key={index}
         element={element}
+        disabled={!userIsEndUser}
       />
     );
   });