9273016839

Committed 28 May 2024 04:28PM UTC coverage: 30.578%. First build

Build # 9273016839

Build Type

Pull #384

github

Committed by

web-flow

Commit Message

Merge 70a744439 into 7141935af

Pull Request Pull Request #384: CRDCDH-1095 Data Submission Upload update for "Metadata Only" Data Type

Run Details

895 of 3662 branches covered (24.44%)

Branch coverage included in aggregate %.

7 of 10 new or added lines in 3 files covered. (70.0%)

1554 of 4347 relevant lines covered (35.75%)

95.38 hits per line

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

90.24

/src/components/DataSubmissions/DataUpload.tsx

import { FC, ReactElement, useMemo, useState } from "react";
import { useLazyQuery } from "@apollo/client";
import { useSnackbar } from "notistack";
import { Box, Button, Typography, styled } from "@mui/material";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import env from "../../env";
import { RETRIEVE_CLI_CONFIG, RetrieveCLIConfigResp } from "../../graphql";
import { downloadBlob, filterAlphaNumeric } from "../../utils";
import FlowWrapper from "./FlowWrapper";
import UploaderToolDialog from "../UploaderToolDialog";
import UploaderConfigDialog, { InputForm } from "../UploaderConfigDialog";

export type Props = {
  /**
   * The submission to download a pre-configured CLI config for.
   */
  submission: Submission;
};

const StyledBox = styled(Box)({
  maxWidth: "790px",
  lineHeight: "22px",
  marginTop: "10px",
});

const StyledDownloadButton = styled(Button)({
  padding: "10px 6px",
  fontSize: "14px",
  fontStyle: "normal",
  lineHeight: "16px",
  letterSpacing: "0.32px",
  width: "137px",
  height: "47px",
  "&.MuiButtonBase-root": {
    marginLeft: "auto",
  },
});

const StyledToolButton = styled(Typography)({
  color: "#005999",
  cursor: "pointer",
  lineHeight: "16px",
  fontWeight: 700,
  display: "inline",
  textDecoration: "underline",
  textDecorationThickness: "1px",
  textUnderlineOffset: "1.5px",
});

const StyledOpenInNewIcon = styled(OpenInNewIcon)({
  color: "#005999",
  fontSize: "18px",
  verticalAlign: "middle",
  marginLeft: "4px",
});

/**
 * Provides a way to download the Uploader CLI tool and a pre-configured CLI config file.
 *
 * @param {Props} props
 * @returns {React.FC<Props>}
 */
export const DataUpload: FC<Props> = ({ submission }: Props) => {
  const { enqueueSnackbar } = useSnackbar();
  const { _id, name } = submission || {};

  const [cliDialogOpen, setCLIDialogOpen] = useState<boolean>(false);
  const [configDialogOpen, setConfigDialogOpen] = useState<boolean>(false);
  const [retrieveCLIConfig] = useLazyQuery<RetrieveCLIConfigResp>(RETRIEVE_CLI_CONFIG, {
    context: { clientName: "backend" },
  });

  const handleConfigDownload = async ({ manifest, dataFolder }: InputForm) => {
    try {
      const { data, error } = await retrieveCLIConfig({
        variables: {
          _id,
          dataFolder,
          manifest,
          apiURL: env.REACT_APP_BACKEND_API,
        },
      });

      if (error || !data?.retrieveCLIConfig?.length) {
        throw new Error(error.message);
      }

      const filteredName = filterAlphaNumeric(name.trim()?.replaceAll(" ", "-"), "-");
      const prefixedName = `cli-config-${filteredName}`;
      const filename = `${prefixedName.replace(/-+$/, "")}.yml`;

      downloadBlob(data.retrieveCLIConfig, filename, "application/yaml");
      setConfigDialogOpen(false);
    } catch (e) {
      enqueueSnackbar("Unable to download Uploader CLI config file", {
        variant: "error",
      });
    }
  };

  const Actions: ReactElement = useMemo(() => {
    if (submission?.dataType === "Metadata Only") {
      return null;
    }

    return (
      <StyledDownloadButton
        onClick={() => setConfigDialogOpen(true)}
        variant="contained"
        color="info"
        data-testid="uploader-cli-config-button"
      >
        Download Configuration File
      </StyledDownloadButton>
    );
  }, [submission?.dataType]);

  return (
    <FlowWrapper index={2} title="Upload Data Files" actions={Actions}>
      {submission?.dataType === "Metadata Only" ? (
        <StyledBox data-testid="uploader-cli-footer-alt">
          This submission is for metadata only; there is no need to upload data files.
        </StyledBox>
      ) : (
        <>
          <StyledBox data-testid="uploader-cli-footer">
            The CLI Tool is used to upload data files to DataHub and requires a configuration file
            to work. The CLI Tools is a one-time download however the configuration file needs to be
            customized for each submission. You can either edit the example configuration files
            found in the{" "}
            <StyledToolButton
              onClick={() => setCLIDialogOpen(true)}
              data-testid="uploader-cli-download-button"
            >
              <span>CLI Tool download</span>
              <StyledOpenInNewIcon />
            </StyledToolButton>
            , or you can click the button on the right to download a configuration file customized
            for this submission.
          </StyledBox>
          <UploaderToolDialog open={cliDialogOpen} onClose={() => setCLIDialogOpen(false)} />
          <UploaderConfigDialog
            open={configDialogOpen}
            onClose={() => setConfigDialogOpen(false)}
            onDownload={handleConfigDownload}
          />
        </>
      )}
    </FlowWrapper>
  );
};

1	import { FC, ReactElement, useMemo, useState } from "react";
2	import { useLazyQuery } from "@apollo/client";
3	import { useSnackbar } from "notistack";
4	import { Box, Button, Typography, styled } from "@mui/material";
5	import OpenInNewIcon from "@mui/icons-material/OpenInNew";
6	import env from "../../env";
7	import { RETRIEVE_CLI_CONFIG, RetrieveCLIConfigResp } from "../../graphql";
8	import { downloadBlob, filterAlphaNumeric } from "../../utils";
9	import FlowWrapper from "./FlowWrapper";
10	import UploaderToolDialog from "../UploaderToolDialog";
11	import UploaderConfigDialog, { InputForm } from "../UploaderConfigDialog";
12
13	export type Props = {
14	/**
15	* The submission to download a pre-configured CLI config for.
16	*/
17	submission: Submission;
18	};
19
20	const StyledBox = styled(Box)({	2✔
21	maxWidth: "790px",
22	lineHeight: "22px",
23	marginTop: "10px",
24	});
25
26	const StyledDownloadButton = styled(Button)({	2✔
27	padding: "10px 6px",
28	fontSize: "14px",
29	fontStyle: "normal",
30	lineHeight: "16px",
31	letterSpacing: "0.32px",
32	width: "137px",
33	height: "47px",
34	"&.MuiButtonBase-root": {
35	marginLeft: "auto",
36	},
37	});
38
39	const StyledToolButton = styled(Typography)({	2✔
40	color: "#005999",
41	cursor: "pointer",
42	lineHeight: "16px",
43	fontWeight: 700,
44	display: "inline",
45	textDecoration: "underline",
46	textDecorationThickness: "1px",
47	textUnderlineOffset: "1.5px",
48	});
49
50	const StyledOpenInNewIcon = styled(OpenInNewIcon)({	2✔
51	color: "#005999",
52	fontSize: "18px",
53	verticalAlign: "middle",
54	marginLeft: "4px",
55	});
56
57	/**
58	* Provides a way to download the Uploader CLI tool and a pre-configured CLI config file.
59	*
60	* @param {Props} props
61	* @returns {React.FC<Props>}
62	*/
63	export const DataUpload: FC<Props> = ({ submission }: Props) => {	2✔
64	const { enqueueSnackbar } = useSnackbar();	118✔
65	const { _id, name } = submission \|\| {};	118✔
66
67	const [cliDialogOpen, setCLIDialogOpen] = useState<boolean>(false);	118✔
68	const [configDialogOpen, setConfigDialogOpen] = useState<boolean>(false);	118✔
69	const [retrieveCLIConfig] = useLazyQuery<RetrieveCLIConfigResp>(RETRIEVE_CLI_CONFIG, {	118✔
70	context: { clientName: "backend" },
71	});
72
73	const handleConfigDownload = async ({ manifest, dataFolder }: InputForm) => {	118✔
74	try {	22✔
75	const { data, error } = await retrieveCLIConfig({	22✔
76	variables: {
77	_id,
78	dataFolder,
79	manifest,
80	apiURL: env.REACT_APP_BACKEND_API,
81	},
82	});
83
84	if (error \|\| !data?.retrieveCLIConfig?.length) {	22✔
85	throw new Error(error.message);	4✔
86	}
87
88	const filteredName = filterAlphaNumeric(name.trim()?.replaceAll(" ", "-"), "-");	18✔
89	const prefixedName = `cli-config-${filteredName}`;	18✔
90	const filename = `${prefixedName.replace(/-+$/, "")}.yml`;	18✔
91
92	downloadBlob(data.retrieveCLIConfig, filename, "application/yaml");	18✔
93	setConfigDialogOpen(false);	18✔
94	} catch (e) {
95	enqueueSnackbar("Unable to download Uploader CLI config file", {	4✔
96	variant: "error",
97	});
98	}
99	};
100
101	const Actions: ReactElement = useMemo(() => {	118✔
102	if (submission?.dataType === "Metadata Only") {	32✔
NEW 103	return null;	×
104	}
105
106	return (	32✔
107	<StyledDownloadButton
108	onClick={() => setConfigDialogOpen(true)}	22✔
109	variant="contained"
110	color="info"
111	data-testid="uploader-cli-config-button"
112	>
113	Download Configuration File
114	</StyledDownloadButton>
115	);
116	}, [submission?.dataType]);
117
118	return (	118✔
119	<FlowWrapper index={2} title="Upload Data Files" actions={Actions}>
120	{submission?.dataType === "Metadata Only" ? (	59!
121	<StyledBox data-testid="uploader-cli-footer-alt">
122	This submission is for metadata only; there is no need to upload data files.
123	</StyledBox>
124	) : (
125	<>
126	<StyledBox data-testid="uploader-cli-footer">
127	The CLI Tool is used to upload data files to DataHub and requires a configuration file
128	to work. The CLI Tools is a one-time download however the configuration file needs to be
129	customized for each submission. You can either edit the example configuration files
130	found in the{" "}
131	<StyledToolButton
132	onClick={() => setCLIDialogOpen(true)}	2✔
133	data-testid="uploader-cli-download-button"
134	>
135	<span>CLI Tool download</span>
136	<StyledOpenInNewIcon />
137	</StyledToolButton>
138	, or you can click the button on the right to download a configuration file customized
139	for this submission.
140	</StyledBox>
NEW 141	<UploaderToolDialog open={cliDialogOpen} onClose={() => setCLIDialogOpen(false)} />	×
142	<UploaderConfigDialog
143	open={configDialogOpen}
NEW 144	onClose={() => setConfigDialogOpen(false)}	×
145	onDownload={handleConfigDownload}
146	/>
147	</>
148	)}
149	</FlowWrapper>
150	);
151	};

CBIIT / crdc-datahub-ui / 9273016839

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