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

94.4

/src/components/ExportApplicationButton/index.tsx

import { useLazyQuery } from "@apollo/client";
import { Button, ButtonProps, Stack, styled, Typography } from "@mui/material";
import { isEqual } from "lodash";
import { memo, useState } from "react";

import ExportIconSvg from "@/assets/icons/export_icon.svg?react";
import { useFormContext } from "@/components/Contexts/FormContext";
import StyledFormTooltip from "@/components/StyledFormComponents/StyledTooltip";
import {
  LIST_INSTITUTIONS,
  LIST_ORGS,
  ListInstitutionsInput,
  ListInstitutionsResp,
  ListOrgsInput,
  ListOrgsResp,
} from "@/graphql";
import { downloadBlob, Logger } from "@/utils";

const StyledExportIcon = styled(ExportIconSvg)({
  width: "27px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  marginRight: "16px",
  color: "currentColor",
});

const StyledText = styled(Typography)({
  fontFamily: "'Nunito Sans', 'Rubik', sans-serif",
  letterSpacing: "-0.25px",
  fontWeight: 600,
  fontSize: "16px",
  lineHeight: "150%",
  color: "inherit",
  paddingLeft: "14px",
});

const StyledStack = styled(Stack)({
  margin: "0 !important",
  width: "100%",
});

const StyledExportButton = styled(Button)({
  justifyContent: "flex-start",
  padding: "12px 14px",
  marginRight: "auto",
  color: "#136071",
  "&:hover": {
    color: "#00819E",
    background: "transparent",
  },
  "&.Mui-disabled": {
    color: "#BBBBBB",
    opacity: 1,
  },
  "& .MuiButton-startIcon": {
    marginRight: "0px !important",
  },
});

const StyledTooltip = styled(StyledFormTooltip)({
  marginLeft: "0 !important",
  "& .MuiTooltip-tooltip": {
    color: "#000000",
  },
});

type Props = Omit<ButtonProps, "onClick">;

/**
 * A button that exports the current Submission Request to an Excel file.
 *
 * @returns The ExportApplicationButton component.
 */
const ExportApplicationButton = ({ disabled, ...rest }: Props) => {
  const { data } = useFormContext();

  const [downloading, setDownloading] = useState<boolean>(false);
  const isDisabled = disabled || downloading;

  const [getInstitutions] = useLazyQuery<ListInstitutionsResp, ListInstitutionsInput>(
    LIST_INSTITUTIONS,
    {
      variables: { status: "Active", first: -1, orderBy: "name", sortDirection: "asc" },
      context: { clientName: "backend" },
      fetchPolicy: "cache-first",
      onError: (e) => Logger.error("ExportTemplateButton: listInstitutions API error:", e),
    }
  );

  const [listOrgs] = useLazyQuery<ListOrgsResp, ListOrgsInput>(LIST_ORGS, {
    context: { clientName: "backend" },
    variables: { status: "All", first: -1, orderBy: "name", sortDirection: "asc" },
    fetchPolicy: "cache-first",
    onError: (e) => Logger.error("ExportTemplateButton: listOrgs API error:", e),
  });

  const onButtonClick = async () => {
    if (!data?.questionnaireData) {
      Logger.error("ExportTemplateButton: No questionnaire data found");
      return;
    }

    setDownloading(true);

    const { questionnaireData } = data || {};

    const { QuestionnaireExcelMiddleware } = await import("@/classes/QuestionnaireExcelMiddleware");

    const middleware = new QuestionnaireExcelMiddleware(questionnaireData, {
      application: data,
      getInstitutions,
      getPrograms: listOrgs,
    });
    const file = await middleware.serialize();

    downloadBlob(
      file,
      `CRDC_Submission_Request_${data.studyAbbreviation || ""}_v${data.version || ""}.xlsx`,
      "application/vnd.ms-excel"
    );

    setDownloading(false);
  };

  return (
    <StyledStack direction="row" alignItems="center" justifyContent="center">
      <StyledExportButton
        variant="text"
        onClick={onButtonClick}
        disabled={isDisabled}
        startIcon={<StyledExportIcon />}
        aria-label="Export application to Excel button"
        data-testid="export-application-excel-button"
        disableTouchRipple
        {...rest}
      >
        <StyledTooltip
          title="Export the Submission Request to Excel."
          placement="top"
          data-testid="export-application-excel-tooltip"
          disableInteractive
          arrow
        >
          {/* TODO: Rename based on US */}
          <StyledText variant="body2" data-testid="export-application-excel-button-text">
            Export
          </StyledText>
        </StyledTooltip>
      </StyledExportButton>
    </StyledStack>
  );
};

export default memo<Props>(ExportApplicationButton, isEqual);

1	import { useLazyQuery } from "@apollo/client";	1✔
2	import { Button, ButtonProps, Stack, styled, Typography } from "@mui/material";	1✔
3	import { isEqual } from "lodash";	1✔
4	import { memo, useState } from "react";	1✔
5
6	import ExportIconSvg from "@/assets/icons/export_icon.svg?react";	1✔
7	import { useFormContext } from "@/components/Contexts/FormContext";	1✔
8	import StyledFormTooltip from "@/components/StyledFormComponents/StyledTooltip";	1✔
9	import {	1✔
10	LIST_INSTITUTIONS,
11	LIST_ORGS,
12	ListInstitutionsInput,
13	ListInstitutionsResp,
14	ListOrgsInput,
15	ListOrgsResp,
16	} from "@/graphql";
17	import { downloadBlob, Logger } from "@/utils";	1✔
18
19	const StyledExportIcon = styled(ExportIconSvg)({	1✔
20	width: "27px",	1✔
21	display: "flex",	1✔
22	alignItems: "center",	1✔
23	justifyContent: "center",	1✔
24	marginRight: "16px",	1✔
25	color: "currentColor",	1✔
26	});	1✔
27
28	const StyledText = styled(Typography)({	1✔
29	fontFamily: "'Nunito Sans', 'Rubik', sans-serif",	1✔
30	letterSpacing: "-0.25px",	1✔
31	fontWeight: 600,	1✔
32	fontSize: "16px",	1✔
33	lineHeight: "150%",	1✔
34	color: "inherit",	1✔
35	paddingLeft: "14px",	1✔
36	});	1✔
37
38	const StyledStack = styled(Stack)({	1✔
39	margin: "0 !important",	1✔
40	width: "100%",	1✔
41	});	1✔
42
43	const StyledExportButton = styled(Button)({	1✔
44	justifyContent: "flex-start",	1✔
45	padding: "12px 14px",	1✔
46	marginRight: "auto",	1✔
47	color: "#136071",	1✔
48	"&:hover": {	1✔
49	color: "#00819E",	1✔
50	background: "transparent",	1✔
51	},	1✔
52	"&.Mui-disabled": {	1✔
53	color: "#BBBBBB",	1✔
54	opacity: 1,	1✔
55	},	1✔
56	"& .MuiButton-startIcon": {	1✔
57	marginRight: "0px !important",	1✔
58	},	1✔
59	});	1✔
60
61	const StyledTooltip = styled(StyledFormTooltip)({	1✔
62	marginLeft: "0 !important",	1✔
63	"& .MuiTooltip-tooltip": {	1✔
64	color: "#000000",	1✔
65	},	1✔
66	});	1✔
67
68	type Props = Omit<ButtonProps, "onClick">;
69
70	/**
71	* A button that exports the current Submission Request to an Excel file.
72	*
73	* @returns The ExportApplicationButton component.
74	*/
75	const ExportApplicationButton = ({ disabled, ...rest }: Props) => {	1✔
76	const { data } = useFormContext();	39✔
77
78	const [downloading, setDownloading] = useState<boolean>(false);	39✔
79	const isDisabled = disabled \|\| downloading;	39✔
80
81	const [getInstitutions] = useLazyQuery<ListInstitutionsResp, ListInstitutionsInput>(	39✔
82	LIST_INSTITUTIONS,	39✔
83	{	39✔
84	variables: { status: "Active", first: -1, orderBy: "name", sortDirection: "asc" },	39✔
85	context: { clientName: "backend" },	39✔
86	fetchPolicy: "cache-first",	39✔
87	onError: (e) => Logger.error("ExportTemplateButton: listInstitutions API error:", e),	39✔
88	}	39✔
89	);	39✔
90
91	const [listOrgs] = useLazyQuery<ListOrgsResp, ListOrgsInput>(LIST_ORGS, {	39✔
92	context: { clientName: "backend" },	39✔
93	variables: { status: "All", first: -1, orderBy: "name", sortDirection: "asc" },	39✔
94	fetchPolicy: "cache-first",	39✔
95	onError: (e) => Logger.error("ExportTemplateButton: listOrgs API error:", e),	39✔
96	});	39✔
97
98	const onButtonClick = async () => {	39✔
99	if (!data?.questionnaireData) {	3!
NEW 100	Logger.error("ExportTemplateButton: No questionnaire data found");	×
NEW 101	return;	×
NEW 102	}	×
103
104	setDownloading(true);	3✔
105
106	const { questionnaireData } = data \|\| {};	3!
107
108	const { QuestionnaireExcelMiddleware } = await import("@/classes/QuestionnaireExcelMiddleware");	3✔
109
110	const middleware = new QuestionnaireExcelMiddleware(questionnaireData, {	3✔
111	application: data,	3✔
112	getInstitutions,	3✔
113	getPrograms: listOrgs,	3✔
114	});	3✔
115	const file = await middleware.serialize();	3✔
116
117	downloadBlob(	2✔
118	file,	2✔
119	`CRDC_Submission_Request_${data.studyAbbreviation \|\| ""}_v${data.version \|\| ""}.xlsx`,	3!
120	"application/vnd.ms-excel"	3✔
121	);	3✔
122
123	setDownloading(false);	3✔
124	};	3✔
125
126	return (	39✔
127	<StyledStack direction="row" alignItems="center" justifyContent="center">	39✔
128	<StyledExportButton	39✔
129	variant="text"	39✔
130	onClick={onButtonClick}	39✔
131	disabled={isDisabled}	39✔
132	startIcon={<StyledExportIcon />}	39✔
133	aria-label="Export application to Excel button"	39✔
134	data-testid="export-application-excel-button"	39✔
135	disableTouchRipple	39✔
136	{...rest}	39✔
137	>
138	<StyledTooltip	39✔
139	title="Export the Submission Request to Excel."	39✔
140	placement="top"	39✔
141	data-testid="export-application-excel-tooltip"	39✔
142	disableInteractive	39✔
143	arrow	39✔
144	>
145	{/* TODO: Rename based on US */}
146	<StyledText variant="body2" data-testid="export-application-excel-button-text">	39✔
147	Export
148	</StyledText>	39✔
149	</StyledTooltip>	39✔
150	</StyledExportButton>	39✔
151	</StyledStack>	39✔
152	);
153	};	39✔
154
155	export default memo<Props>(ExportApplicationButton, isEqual);	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