17132131774

Committed 21 Aug 2025 03:52PM UTC coverage: 77.592% (+1.7%) from 75.941%

Build # 17132131774

Build Type

Pull #806

github

Committed by

web-flow

Commit Message

Merge 6b88b37d9 into c10ceac73

Pull Request Pull Request #806: Submission Request Excel Import & Export CRDCDH-3033, CRDCDH-3045, CRDCDH-3063

Run Details

4841 of 5322 branches covered (90.96%)

Branch coverage included in aggregate %.

3122 of 3394 new or added lines in 32 files covered. (91.99%)

7 existing lines in 3 files now uncovered.

28996 of 38287 relevant lines covered (75.73%)

1856.98 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

11.45

/src/components/Questionnaire/RadioYesNoInput.tsx

import {
  Grid,
  FormControl,
  FormControlLabel,
  RadioGroup,
  RadioGroupProps,
  FormHelperText,
  styled,
  GridProps,
} from "@mui/material";
import React, { FC, useState, useRef, useEffect } from "react";

import { updateInputValidity } from "../../utils";

import StyledRadioButton from "./StyledRadioButton";

const GridStyled = styled(Grid, {
  shouldForwardProp: (prop) => prop !== "containerWidth",
})<GridProps & { containerWidth?: string }>(({ containerWidth }) => ({
  width: containerWidth,
  "& .formControl": {
    marginTop: "8px",
    marginBottom: "4px",
  },
  "& .css-hsm3ra-MuiFormLabel-root": {
    color: "rgba(0, 0, 0, 0.6) !important",
  },
  "& .MuiRadio-root": {
    color: "#1D91AB !important",
    marginLeft: "10px",
  },
  "& #invisibleRadioInput": {
    height: 0,
    border: "none",
    width: 0,
  },
  "& .MuiFormHelperText-root": {
    color: "#083A50",
    marginLeft: 0,
  },
  "& .MuiFormHelperText-root.Mui-error": {
    color: "#D54309 !important",
  },
  "& .displayNone": {
    display: "none !important",
  },
}));

const StyledFormLabel = styled("label")(() => ({
  fontWeight: 700,
  fontSize: "16px",
  lineHeight: "19.6px",
  minHeight: "20px",
  color: "#083A50",
  marginBottom: "4px",
}));

const StyledAsterisk = styled("span")(() => ({
  marginLeft: "2px",
  color: "#C93F08",
}));

type Props = {
  label: string;
  name: string;
  containerWidth?: string;
  value: string | boolean;
  id: string;
  helpText?: string;
  required?: boolean;
  readOnly?: boolean;
  gridWidth?: 2 | 4 | 6 | 8 | 10 | 12;
} & RadioGroupProps;

const RadioYesNoInput: FC<Props> = ({
  label,
  name,
  gridWidth,
  containerWidth,
  value,
  id,
  helpText,
  required,
  readOnly,
  ...rest
}) => {
  const [val, setVal] = useState<string>(
    value?.toString() === "" || value?.toString() === undefined ? null : value?.toString()
  );
  const [error, setError] = useState(false);
  const radioGroupInputRef = useRef<HTMLInputElement>(null);

  const onChangeWrapper = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (readOnly) {
      return;
    }
    const newValue = (event.target as HTMLInputElement).value;
    setVal(newValue === "" ? null : newValue);
    setError(false);
  };

  useEffect(() => {
    if (required && val === null) {
      updateInputValidity(radioGroupInputRef, "Please select an option");
    } else {
      updateInputValidity(radioGroupInputRef);
    }
  }, [val]);

  useEffect(() => {
    const invalid = () => setError(true);

    radioGroupInputRef.current?.addEventListener("invalid", invalid);
    return () => {
      radioGroupInputRef.current?.removeEventListener("invalid", invalid);
    };
  }, [radioGroupInputRef]);

  useEffect(() => {
    setVal(value?.toString() === "" || value?.toString() === undefined ? null : value?.toString());
  }, [value]);

  return (
    <GridStyled md={gridWidth || 6} xs={12} item containerWidth={containerWidth}>
      <FormControl className="formControl" error={error}>
        <StyledFormLabel>
          {label}
          {required ? <StyledAsterisk>*</StyledAsterisk> : ""}
        </StyledFormLabel>
        <RadioGroup
          name={name}
          value={val}
          onChange={onChangeWrapper}
          id={id}
          data-type="string"
          {...rest}
        >
          <FormControlLabel
            value="true"
            color="#1D91AB"
            control={
              <StyledRadioButton
                inputRef={radioGroupInputRef}
                id={id.concat("-yes-radio-button")}
                readOnly={readOnly}
                disabled={readOnly}
              />
            }
            label="Yes"
          />
          <FormControlLabel
            value="false"
            color="#1D91AB"
            control={
              <StyledRadioButton
                id={id.concat("-no-radio-button")}
                readOnly={readOnly}
                disabled={readOnly}
              />
            }
            label="No"
          />
        </RadioGroup>
        <FormHelperText className={(!readOnly && error ? "" : "displayNone") || ""}>
          {(!readOnly && error ? "This field is required" : null) || " "}
        </FormHelperText>
      </FormControl>
    </GridStyled>
  );
};

export default RadioYesNoInput;

1	import {	1✔
2	Grid,
3	FormControl,
4	FormControlLabel,
5	RadioGroup,
6	RadioGroupProps,
7	FormHelperText,
8	styled,
9	GridProps,
10	} from "@mui/material";
11	import React, { FC, useState, useRef, useEffect } from "react";	1✔
12
13	import { updateInputValidity } from "../../utils";	1✔
14
15	import StyledRadioButton from "./StyledRadioButton";	1✔
16
17	const GridStyled = styled(Grid, {	1✔
18	shouldForwardProp: (prop) => prop !== "containerWidth",	1✔
19	})<GridProps & { containerWidth?: string }>(({ containerWidth }) => ({	1✔
20	width: containerWidth,	×
21	"& .formControl": {	×
22	marginTop: "8px",	×
23	marginBottom: "4px",	×
24	},	×
25	"& .css-hsm3ra-MuiFormLabel-root": {	×
26	color: "rgba(0, 0, 0, 0.6) !important",	×
27	},	×
28	"& .MuiRadio-root": {	×
29	color: "#1D91AB !important",	×
30	marginLeft: "10px",	×
31	},	×
32	"& #invisibleRadioInput": {	×
33	height: 0,	×
34	border: "none",	×
35	width: 0,	×
36	},	×
37	"& .MuiFormHelperText-root": {	×
38	color: "#083A50",	×
39	marginLeft: 0,	×
40	},	×
41	"& .MuiFormHelperText-root.Mui-error": {	×
42	color: "#D54309 !important",	×
43	},	×
44	"& .displayNone": {	×
45	display: "none !important",	×
46	},	×
47	}));	1✔
48
49	const StyledFormLabel = styled("label")(() => ({	1✔
50	fontWeight: 700,	×
51	fontSize: "16px",	×
52	lineHeight: "19.6px",	×
53	minHeight: "20px",	×
54	color: "#083A50",	×
55	marginBottom: "4px",	×
56	}));	1✔
57
58	const StyledAsterisk = styled("span")(() => ({	1✔
59	marginLeft: "2px",	×
60	color: "#C93F08",	×
61	}));	1✔
62
63	type Props = {
64	label: string;
65	name: string;
66	containerWidth?: string;
67	value: string \| boolean;
68	id: string;
69	helpText?: string;
70	required?: boolean;
71	readOnly?: boolean;
72	gridWidth?: 2 \| 4 \| 6 \| 8 \| 10 \| 12;
73	} & RadioGroupProps;
74
75	const RadioYesNoInput: FC<Props> = ({	1✔
76	label,	×
77	name,	×
78	gridWidth,	×
79	containerWidth,	×
80	value,	×
81	id,	×
82	helpText,	×
83	required,	×
84	readOnly,	×
85	...rest	×
86	}) => {	×
87	const [val, setVal] = useState<string>(	×
88	value?.toString() === "" \|\| value?.toString() === undefined ? null : value?.toString()	×
89	);	×
90	const [error, setError] = useState(false);	×
91	const radioGroupInputRef = useRef<HTMLInputElement>(null);	×
92
93	const onChangeWrapper = (event: React.ChangeEvent<HTMLInputElement>) => {	×
94	if (readOnly) {	×
95	return;	×
96	}	×
97	const newValue = (event.target as HTMLInputElement).value;	×
98	setVal(newValue === "" ? null : newValue);	×
99	setError(false);	×
100	};	×
101
102	useEffect(() => {	×
103	if (required && val === null) {	×
104	updateInputValidity(radioGroupInputRef, "Please select an option");	×
105	} else {	×
106	updateInputValidity(radioGroupInputRef);	×
107	}	×
108	}, [val]);	×
109
110	useEffect(() => {	×
111	const invalid = () => setError(true);	×
112
113	radioGroupInputRef.current?.addEventListener("invalid", invalid);	×
114	return () => {	×
115	radioGroupInputRef.current?.removeEventListener("invalid", invalid);	×
116	};	×
117	}, [radioGroupInputRef]);	×
118
NEW 119	useEffect(() => {	×
NEW 120	setVal(value?.toString() === "" \|\| value?.toString() === undefined ? null : value?.toString());	×
NEW 121	}, [value]);	×
122
123	return (	×
124	<GridStyled md={gridWidth \|\| 6} xs={12} item containerWidth={containerWidth}>	×
125	<FormControl className="formControl" error={error}>	×
126	<StyledFormLabel>	×
127	{label}	×
128	{required ? <StyledAsterisk>*</StyledAsterisk> : ""}	×
129	</StyledFormLabel>	×
130	<RadioGroup	×
131	name={name}	×
132	value={val}	×
133	onChange={onChangeWrapper}	×
134	id={id}	×
135	data-type="string"	×
136	{...rest}	×
137	>
138	<FormControlLabel	×
139	value="true"	×
140	color="#1D91AB"	×
141	control={	×
142	<StyledRadioButton	×
143	inputRef={radioGroupInputRef}	×
144	id={id.concat("-yes-radio-button")}	×
145	readOnly={readOnly}	×
146	disabled={readOnly}	×
147	/>
148	}
149	label="Yes"	×
150	/>
151	<FormControlLabel	×
152	value="false"	×
153	color="#1D91AB"	×
154	control={	×
155	<StyledRadioButton	×
156	id={id.concat("-no-radio-button")}	×
157	readOnly={readOnly}	×
158	disabled={readOnly}	×
159	/>
160	}
161	label="No"	×
162	/>
163	</RadioGroup>	×
164	<FormHelperText className={(!readOnly && error ? "" : "displayNone") \|\| ""}>	×
165	{(!readOnly && error ? "This field is required" : null) \|\| " "}	×
166	</FormHelperText>	×
167	</FormControl>	×
168	</GridStyled>	×
169	);
170	};	×
171
172	export default RadioYesNoInput;	1✔

CBIIT / crdc-datahub-ui / 17132131774

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous