8900442653

Committed 30 Apr 2024 07:21PM UTC coverage: 21.472%. First build

Build # 8900442653

Build Type

Pull #351

github

Committed by

web-flow

Commit Message

Merge 177f00f96 into 1a7a80c68

Pull Request Pull Request #351: CRDCDH-1058 Fixed 508 contrast issue with statuses

Run Details

556 of 3481 branches covered (15.97%)

Branch coverage included in aggregate %.

7 of 9 new or added lines in 3 files covered. (77.78%)

1075 of 4115 relevant lines covered (26.12%)

90.98 hits per line

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

87.18

/src/components/Shared/ReviewCommentsDialog.tsx

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  PaperProps,
  styled,
} from "@mui/material";
import { CSSProperties } from "react";
import { FormatDate } from "../../utils";
import { ReactComponent as CloseIconSvg } from "../../assets/icons/close_icon.svg";

const StyledDialog = styled(Dialog, {
  shouldForwardProp: (prop) => prop !== "status" && prop !== "getColorScheme",
})<{
  status: unknown;
  getColorScheme: (status: unknown) => CSSProperties;
}>(({ status, getColorScheme }) => ({
  "& .MuiDialog-paper": {
    borderRadius: "8px",
    border: "2px solid",
    borderColor: getColorScheme && status ? getColorScheme(status).color : "#E25C22",
    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
    padding: "22px 28px 24px",
    width: "730px",
  },
}));

const StyledCloseDialogButton = styled(IconButton)(() => ({
  position: "absolute",
  right: "21px",
  top: "11px",
  padding: "10px",
  "& svg": {
    color: "#44627C",
  },
}));

const StyledDialogTitle = styled(DialogTitle)({
  paddingBottom: "0",
});

const StyledPreTitle = styled("p")({
  color: "#929292",
  fontSize: "13px",
  fontFamily: "Nunito Sans",
  lineHeight: "27px",
  letterSpacing: "0.5px",
  textTransform: "uppercase",
  margin: "0",
});

const StyledTitle = styled("p", {
  shouldForwardProp: (prop) => prop !== "status" && prop !== "getColorScheme",
})<{
  status: unknown;
  getColorScheme: (status: unknown) => CSSProperties;
}>(({ status, getColorScheme }) => ({
  color: getColorScheme && status ? getColorScheme(status).color : "#E25C22",
  fontSize: "35px",
  fontFamily: "Nunito Sans",
  fontWeight: "900",
  lineHeight: "30px",
  margin: "0",
}));

const StyledDialogContent = styled(DialogContent)({
  marginBottom: "11px",
  maxHeight: "230px",
  overflowY: "auto",
  overflowX: "hidden",
  whiteSpace: "pre-line",
  overflowWrap: "break-word",
});

const StyledSubTitle = styled("p")({
  color: "#453D3D",
  fontSize: "14px",
  fontFamily: "Public Sans",
  fontWeight: "700",
  lineHeight: "20px",
  letterSpacing: "0.14px",
  textTransform: "uppercase",
  marginTop: "60px",
  marginBottom: "19px",
});

const StyledCloseButton = styled(Button)({
  minWidth: "137px",
  padding: "10px",
  fontFamily: "'Nunito', 'Rubik', sans-serif",
  fontSize: "16px",
  fontStyle: "normal",
  lineHeight: "24px",
  letterSpacing: "0.32px",
  textTransform: "none",
  alignSelf: "center",
  margin: "auto",
});

/**
 * Returns the styling for Review Comments dialog based on the Questionnaire Status
 *
 * @param status The current Questionnaire's status
 * @returns Color scheme to match the status
 */
const getColorScheme = (status: ApplicationStatus): CSSProperties => {
  switch (status) {
    case "Approved":
      return {
        color: "#0D6E87 !important",
      };
    case "Rejected":
      return {
        color: "#E25C22 !important",
      };
    default:
      return {
        color: "#0D6E87 !important",
      };
  }
};

type ExtendedPaperProps = Partial<PaperProps> & React.HTMLAttributes<HTMLDivElement>;

type Props<T, H> = {
  open: boolean;
  status?: T;
  lastReview: HistoryBase<H>;
  title: string;
  onClose?: () => void;
};

const ReviewCommentsDialog = <T, H>({ open, status, lastReview, title, onClose }: Props<T, H>) => (
  <StyledDialog
    open={open}
    onClose={() => onClose?.()}
    maxWidth={false}
    status={status}
    getColorScheme={getColorScheme}
    data-testid="review-comments-dialog"
    PaperProps={
      {
        "data-testid": "review-comments-dialog-paper",
      } as ExtendedPaperProps
    }
  >
    <StyledCloseDialogButton
      onClick={onClose}
      aria-label="Close dialog icon button"
      data-testid="review-comments-dialog-close-icon-button"
    >
      <CloseIconSvg />
    </StyledCloseDialogButton>
    <StyledDialogTitle>
      <StyledPreTitle>{title}</StyledPreTitle>
      <StyledTitle
        status={status}
        getColorScheme={getColorScheme}
        data-testid="review-comments-dialog-title"
      >
        Review Comments
      </StyledTitle>
      <StyledSubTitle title={lastReview?.dateTime}>
        {`Based on submission from ${FormatDate(lastReview?.dateTime, "M/D/YYYY", "N/A")}:`}
      </StyledSubTitle>
    </StyledDialogTitle>
    <StyledDialogContent>{lastReview?.reviewComment}</StyledDialogContent>
    <DialogActions>
      <StyledCloseButton
        id="close-review-comments-button"
        onClick={() => onClose?.()}
        variant="contained"
        color="info"
        aria-label="Close dialog"
        data-testid="review-comments-dialog-close"
      >
        Close
      </StyledCloseButton>
    </DialogActions>
  </StyledDialog>
);

export default ReviewCommentsDialog;

1	import {
2	Button,
3	Dialog,
4	DialogActions,
5	DialogContent,
6	DialogTitle,
7	IconButton,
8	PaperProps,
9	styled,
10	} from "@mui/material";
11	import { CSSProperties } from "react";
12	import { FormatDate } from "../../utils";
13	import { ReactComponent as CloseIconSvg } from "../../assets/icons/close_icon.svg";
14
15	const StyledDialog = styled(Dialog, {	6✔
16	shouldForwardProp: (prop) => prop !== "status" && prop !== "getColorScheme",	1,062✔
17	})<{
18	status: unknown;
19	getColorScheme: (status: unknown) => CSSProperties;
20	}>(({ status, getColorScheme }) => ({	132✔
21	"& .MuiDialog-paper": {
22	borderRadius: "8px",
23	border: "2px solid",
24	borderColor: getColorScheme && status ? getColorScheme(status).color : "#E25C22",	198✔
25	background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
26	boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
27	padding: "22px 28px 24px",
28	width: "730px",
29	},
30	}));
31
32	const StyledCloseDialogButton = styled(IconButton)(() => ({	42✔
33	position: "absolute",
34	right: "21px",
35	top: "11px",
36	padding: "10px",
37	"& svg": {
38	color: "#44627C",
39	},
40	}));
41
42	const StyledDialogTitle = styled(DialogTitle)({	6✔
43	paddingBottom: "0",
44	});
45
46	const StyledPreTitle = styled("p")({	6✔
47	color: "#929292",
48	fontSize: "13px",
49	fontFamily: "Nunito Sans",
50	lineHeight: "27px",
51	letterSpacing: "0.5px",
52	textTransform: "uppercase",
53	margin: "0",
54	});
55
56	const StyledTitle = styled("p", {	6✔
57	shouldForwardProp: (prop) => prop !== "status" && prop !== "getColorScheme",	174✔
58	})<{
59	status: unknown;
60	getColorScheme: (status: unknown) => CSSProperties;
61	}>(({ status, getColorScheme }) => ({	42✔
62	color: getColorScheme && status ? getColorScheme(status).color : "#E25C22",	63✔
63	fontSize: "35px",
64	fontFamily: "Nunito Sans",
65	fontWeight: "900",
66	lineHeight: "30px",
67	margin: "0",
68	}));
69
70	const StyledDialogContent = styled(DialogContent)({	6✔
71	marginBottom: "11px",
72	maxHeight: "230px",
73	overflowY: "auto",
74	overflowX: "hidden",
75	whiteSpace: "pre-line",
76	overflowWrap: "break-word",
77	});
78
79	const StyledSubTitle = styled("p")({	6✔
80	color: "#453D3D",
81	fontSize: "14px",
82	fontFamily: "Public Sans",
83	fontWeight: "700",
84	lineHeight: "20px",
85	letterSpacing: "0.14px",
86	textTransform: "uppercase",
87	marginTop: "60px",
88	marginBottom: "19px",
89	});
90
91	const StyledCloseButton = styled(Button)({	6✔
92	minWidth: "137px",
93	padding: "10px",
94	fontFamily: "'Nunito', 'Rubik', sans-serif",
95	fontSize: "16px",
96	fontStyle: "normal",
97	lineHeight: "24px",
98	letterSpacing: "0.32px",
99	textTransform: "none",
100	alignSelf: "center",
101	margin: "auto",
102	});
103
104	/**
105	* Returns the styling for Review Comments dialog based on the Questionnaire Status
106	*
107	* @param status The current Questionnaire's status
108	* @returns Color scheme to match the status
109	*/
110	const getColorScheme = (status: ApplicationStatus): CSSProperties => {	6✔
111	switch (status) {	8!
112	case "Approved":
113	return {	8✔
114	color: "#0D6E87 !important",
115	};
116	case "Rejected":
NEW 117	return {	×
118	color: "#E25C22 !important",
119	};
120	default:
NEW 121	return {	×
122	color: "#0D6E87 !important",
123	};
124	}
125	};
126
127	type ExtendedPaperProps = Partial<PaperProps> & React.HTMLAttributes<HTMLDivElement>;
128
129	type Props<T, H> = {
130	open: boolean;
131	status?: T;
132	lastReview: HistoryBase<H>;
133	title: string;
134	onClose?: () => void;
135	};
136
137	const ReviewCommentsDialog = <T, H>({ open, status, lastReview, title, onClose }: Props<T, H>) => (	6✔
138	<StyledDialog	132✔
139	open={open}
140	onClose={() => onClose?.()}	×
141	maxWidth={false}
142	status={status}
143	getColorScheme={getColorScheme}
144	data-testid="review-comments-dialog"
145	PaperProps={
146	{
147	"data-testid": "review-comments-dialog-paper",
148	} as ExtendedPaperProps
149	}
150	>
151	<StyledCloseDialogButton
152	onClick={onClose}
153	aria-label="Close dialog icon button"
154	data-testid="review-comments-dialog-close-icon-button"
155	>
156	<CloseIconSvg />
157	</StyledCloseDialogButton>
158	<StyledDialogTitle>
159	<StyledPreTitle>{title}</StyledPreTitle>
160	<StyledTitle
161	status={status}
162	getColorScheme={getColorScheme}
163	data-testid="review-comments-dialog-title"
164	>
165	Review Comments
166	</StyledTitle>
167	<StyledSubTitle title={lastReview?.dateTime}>
168	{`Based on submission from ${FormatDate(lastReview?.dateTime, "M/D/YYYY", "N/A")}:`}
169	</StyledSubTitle>
170	</StyledDialogTitle>
171	<StyledDialogContent>{lastReview?.reviewComment}</StyledDialogContent>
172	<DialogActions>
173	<StyledCloseButton
174	id="close-review-comments-button"
175	onClick={() => onClose?.()}	6✔
176	variant="contained"
177	color="info"
178	aria-label="Close dialog"
179	data-testid="review-comments-dialog-close"
180	>
181	Close
182	</StyledCloseButton>
183	</DialogActions>
184	</StyledDialog>
185	);
186
187	export default ReviewCommentsDialog;

CBIIT / crdc-datahub-ui / 8900442653

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