Merge branch 'mvp-2.1.0' into CRDCDH-860

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.18.2-alpine3.18  as build
+FROM node:20.11.1-alpine3.19  as build
 
 WORKDIR /usr/src/app
 
@@ -8,7 +8,7 @@ RUN NODE_OPTIONS="--max-old-space-size=4096" npm ci
 
 RUN NODE_OPTIONS="--max-old-space-size=4096" npm run build
 
-FROM nginx:1.25.3-alpine3.18-slim as prod
+FROM nginx:1.25.4-alpine3.18-slim as prod
 
 COPY --from=build /usr/src/app/build /usr/share/nginx/html
 COPY --from=build /usr/src/app/conf/inject.template.js /usr/share/nginx/html/inject.template.js

src/components/Questionnaire/LabelCheckbox.tsx

@@ -0,0 +1,90 @@
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControlLabelProps,
+  styled,
+} from "@mui/material";
+import { FC } from "react";
+import { ReactComponent as CheckboxCheckedIcon } from "../../assets/icons/checkbox_checked.svg";
+
+const StyledCheckboxCheckedIcon = styled(CheckboxCheckedIcon)<{
+  readOnly?: boolean;
+}>(({ readOnly }) => ({
+  width: "16px",
+  height: "16px",
+  color: "#1D91AB",
+  backgroundColor: readOnly ? "#E5EEF4" : "initial",
+  cursor: readOnly ? "not-allowed" : "pointer",
+}));
+
+const StyledCheckboxUncheckedIcon = styled("div")<{ readOnly?: boolean }>(
+  ({ readOnly }) => ({
+    width: "16px",
+    height: "16px",
+    color: "#083A50",
+    outline: "2px solid #1D91AB",
+    outlineOffset: -2,
+    backgroundColor: readOnly ? "#E5EEF4" : "initial",
+    cursor: readOnly ? "not-allowed" : "pointer",
+  })
+);
+
+const StyledCheckbox = styled(Checkbox)<{ readOnly?: boolean }>(
+  ({ readOnly }) => ({
+    padding: "2px 8px 2px 0",
+    cursor: readOnly ? "not-allowed" : "pointer",
+  })
+);
+
+export const UncheckedIcon = styled("div")<{ readOnly?: boolean }>(
+  ({ readOnly }) => ({
+    outline: "2px solid #1D91AB",
+    outlineOffset: -2,
+    width: "16px",
+    height: "16px",
+    backgroundColor: readOnly ? "#E5EEF4" : "initial",
+    color: "#083A50",
+    cursor: readOnly ? "not-allowed" : "pointer",
+  })
+);
+
+type Props = {
+  idPrefix?: string;
+  formControlLabelProps?: FormControlLabelProps;
+} & CheckboxProps;
+
+const LabelCheckbox: FC<Props> = ({
+  idPrefix,
+  formControlLabelProps,
+  checked,
+  name,
+  value,
+  onChange,
+  readOnly,
+  ...rest
+}) => (
+  <>
+    <StyledCheckbox
+      id={idPrefix?.concat(`-label-checkbox`)}
+      checked={checked}
+      onChange={(e, checked) => !readOnly && onChange(e, checked)}
+      readOnly={readOnly}
+      icon={<StyledCheckboxUncheckedIcon readOnly={readOnly} />}
+      checkedIcon={<StyledCheckboxCheckedIcon readOnly={readOnly} />}
+      {...rest}
+    />
+    {/* NOTE: This is a proxy element for form parsing purposes. */}
+    <input
+      name={name}
+      type="checkbox"
+      data-type="boolean"
+      value={checked ? "true" : "false"}
+      onChange={() => { }}
+      aria-labelledby={`${idPrefix}-label`}
+      checked
+      hidden
+    />
+  </>
+);
+
+export default LabelCheckbox;

src/components/Questionnaire/SelectInput.tsx

@@ -129,6 +129,11 @@ const StyledSelect = styled(Select, {
   },
 }));
 
+const StyledHelperText = styled(FormHelperText)(() => ({
+  marginTop: "4px",
+  minHeight: "20px",
+}));
+
 type Props = {
   value: string | string[];
   options: SelectOption[];
@@ -138,7 +143,8 @@ type Props = {
   helpText?: string;
   tooltipText?: string | ReactNode;
   gridWidth?: 2 | 4 | 6 | 8 | 10 | 12;
-  onChange?: (value: string) => void;
+  onChange?: (value: string | string[]) => void;
+  filter?: (input: string | string[]) => string | string[];
 } & Omit<SelectProps, "onChange">;
 
 /**
@@ -157,6 +163,7 @@ const SelectInput: FC<Props> = ({
   tooltipText,
   gridWidth,
   onChange,
+  filter,
   multiple,
   placeholder,
   readOnly,
@@ -191,11 +198,15 @@ const SelectInput: FC<Props> = ({
   };
 
   const onChangeWrapper = (newVal) => {
+    let filteredVal = newVal;
+    if (typeof filter === "function") {
+      filteredVal = filter(newVal);
+    }
     if (typeof onChange === "function") {
-      onChange(newVal);
+      onChange(filteredVal);
     }
 
-    processValue(newVal);
+    processValue(filteredVal);
     setError(false);
   };
 
@@ -255,7 +266,7 @@ const SelectInput: FC<Props> = ({
             <option key={option.value} value={option.value} aria-label={`${option.value}`} />
           ))}
         </ProxySelect>
-        <FormHelperText>{!readOnly && error ? helperText : " "}</FormHelperText>
+        <StyledHelperText>{!readOnly && error ? helperText : " "}</StyledHelperText>
       </FormControl>
     </GridItem>
   );

src/components/Questionnaire/TextInput.tsx

@@ -28,13 +28,21 @@ const StyledFormControl = styled(FormControl)(() => ({
   justifyContent: "end",
 }));
 
-const StyledLabel = styled("label")(() => ({
+export const StyledLabelWrapper = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  minHeight: "20px",
+  color: "#083A50",
+  marginBottom: "4px",
+}));
+
+export const StyledLabel = styled("label")(() => ({
   fontWeight: 700,
   fontSize: "16px",
   lineHeight: "19.6px",
   minHeight: "20px",
   color: "#083A50",
-  marginBottom: "4px",
 }));
 
 const StyledAsterisk = styled("span")(() => ({
@@ -99,7 +107,8 @@ const StyledOutlinedInput = styled(OutlinedInput)(() => ({
 }));
 
 type Props = {
-  label?: string;
+  label?: string | ReactNode;
+  labelStartAddornment?: ReactNode;
   infoText?: string;
   errorText?: string;
   tooltipText?: string | ReactNode;
@@ -126,6 +135,7 @@ const TextInput: FC<Props> = ({
   classes,
   value,
   label,
+  labelStartAddornment,
   required = false,
   gridWidth,
   maxLength,
@@ -193,13 +203,16 @@ const TextInput: FC<Props> = ({
   return (
     <StyledGridWrapper md={gridWidth || 6} xs={12} item>
       <StyledFormControl fullWidth error={error}>
-        {label && (
-          <StyledLabel htmlFor={id}>
-            {label}
-            {required && label ? <StyledAsterisk>*</StyledAsterisk> : ""}
-            {tooltipText && <Tooltip placement="right" title={tooltipText} />}
-          </StyledLabel>
-        )}
+        <StyledLabelWrapper>
+          {labelStartAddornment}
+          {label && (
+            <StyledLabel htmlFor={id}>
+              {label}
+              {required && label ? <StyledAsterisk>*</StyledAsterisk> : ""}
+              {tooltipText && <Tooltip placement="right" title={tooltipText} />}
+            </StyledLabel>
+          )}
+        </StyledLabelWrapper>
         <StyledOutlinedInput
           inputRef={inputRef}
           type={type || "text"}

src/components/Questionnaire/UnsavedChangesDialog.tsx

@@ -31,7 +31,7 @@ const UnsavedChangesDialog: FC<Props> = ({
     title={title || "Unsaved Changes"}
     message={
       message
-      || "You have unsaved changes. Your changes will be lost if you leave this section without saving. Do you want to save your data?"
+      || "Validation errors have been detected. Do you wish to save your changes or discard them before leaving this page?"
     }
     actions={(
       <>

src/config/CancerTypesConfig.ts

@@ -1,8 +1,17 @@
+/**
+ * Custom Cancer Type options for Questionnaire Section C Cancer Types dropdown
+ *
+ */
+export const CUSTOM_CANCER_TYPES = {
+  NOT_APPLICABLE: "Not Applicable"
+};
+
 /**
  * Configuration for Questionnaire Section C Cancer Types
  *
  */
 const options: string[] = [
+  ...Object.values(CUSTOM_CANCER_TYPES),
   "Adrenal Gland, Adrenocortical Carcinoma",
   "Adrenal Gland, Pheochromocytoma",
   "Bile Duct, Cholangiocarcinoma",

src/config/DataCommons.ts

@@ -111,7 +111,7 @@ export const DataCommons: DataCommon[] = [
           isExpanded: true,
         },
         'Filter By Property': {
-          color: '#94C0EC',
+          color: '#0D71A3',
           checkBoxColorsOne: '#E3F4FD',
           checkBoxColorsTwo: '#f0f8ff',
           checkBoxBorderColor: '#0D71A3',

src/config/InitialValues.ts

@@ -62,10 +62,12 @@ export const InitialQuestionnaire: QuestionnaireData = {
   timeConstraints: [],
   cancerTypes: [],
   otherCancerTypes: "",
-  preCancerTypes: [],
-  otherPreCancerTypes: "",
+  otherCancerTypesEnabled: false,
+  preCancerTypes: "",
   numberOfParticipants: null,
   species: [],
+  otherSpeciesEnabled: false,
+  otherSpeciesOfSubjects: "",
   cellLines: false,
   modelSystems: false,
   imagingDataDeIdentified: null,

src/config/SectionMetadata.tsx

@@ -121,7 +121,7 @@ const sectionMetadata = {
         ),
       },
       ADDITIONAL_COMMENTS: {
-        title: "ADDITIONAL COMMENTS",
+        title: "ADDITIONAL INFORMATION",
         description: "Additional Comments or Information about this submission.",
       },
     }

src/config/SpeciesConfig.ts

@@ -3,10 +3,10 @@
  *
  */
 const options: string[] = [
-    "Homo sapiens",
-    "Mus musculus",
-    "Canis lupus familiaris",
-    "Rattus norvegicus",
-  ];
+  "Homo sapiens",
+  "Mus musculus",
+  "Canis lupus familiaris",
+  "Rattus norvegicus",
+];
 
-  export default options;
+export default options;

src/content/dataSubmissions/DataSubmissionsListView.tsx

@@ -611,14 +611,14 @@ const ListingView: FC = () => {
               label="Data Commons"
               required
               value={dataCommons}
-              onChange={(value) => setDataCommons(value)}
+              onChange={(value: string) => setDataCommons(value)}
             />
             <SelectInput
               options={approvedStudiesAbbrvList}
               label="Study"
               required
               value={study}
-              onChange={(value) => {
+              onChange={(value: string) => {
                 setStudy(value);
                 setDbgapid(approvedStudiesMapToDbGaPID[value]);
               }}