synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
149 lines • 14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DownloadCartPage = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var react_1 = require("react");
var AvailableForDownloadTable_1 = (0, tslib_1.__importDefault)(require("./AvailableForDownloadTable"));
var DownloadListStats_1 = (0, tslib_1.__importDefault)(require("./DownloadListStats"));
var useGetDownloadListStatistics_1 = require("../../utils/hooks/SynapseAPI/useGetDownloadListStatistics");
var DownloadListActionsRequired_1 = (0, tslib_1.__importDefault)(require("./DownloadListActionsRequired"));
var SynapseContext_1 = require("../../utils/SynapseContext");
var utils_1 = require("../../utils");
var IconSvg_1 = (0, tslib_1.__importDefault)(require("../IconSvg"));
var CreatePackageV2_1 = require("./CreatePackageV2");
var FullWidthAlert_1 = (0, tslib_1.__importDefault)(require("../FullWidthAlert"));
var ErrorBanner_1 = require("../ErrorBanner");
var ErrorUtils_1 = require("../../utils/ErrorUtils");
var Typography_1 = (0, tslib_1.__importDefault)(require("../../utils/typography/Typography"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var MarkdownPopover_1 = require("../MarkdownPopover");
/**
* Show the Download Cart page.
*/
var DownloadCartPage = function () {
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _a = (0, react_1.useState)(0), selectedTabIndex = _a[0], setSelectedTabIndex = _a[1];
var _b = (0, react_1.useState)(false), isShowingCreatePackageUI = _b[0], setIsShowingCreatePackageUI = _b[1];
var _c = (0, react_1.useState)(false), isShowingDownloadSuccessAlert = _c[0], setIsShowingDownloadSuccessAlert = _c[1];
var _d = (0, react_1.useState)(), error = _d[0], setError = _d[1];
var _e = (0, useGetDownloadListStatistics_1.useGetDownloadListStatistics)(), data = _e.data, isLoading = _e.isLoading, isError = _e.isError, newError = _e.error, refetch = _e.refetch;
(0, react_1.useEffect)(function () {
if (isError && newError) {
setError((0, ErrorUtils_1.toError)(newError));
}
}, [isError, newError]);
// SWC-5874: When arriving at the download cart when there are no ARs, the user should start in the Download list
(0, react_1.useEffect)(function () {
if (data && data.numberOfFilesRequiringAction == 0) {
setSelectedTabIndex(1);
}
}, [data]);
if (error) {
return React.createElement(ErrorBanner_1.ErrorBanner, { error: error });
}
var clearDownloadList = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, utils_1.SynapseClient.clearDownloadListV2(accessToken)];
case 1:
_a.sent();
refetch();
return [2 /*return*/];
}
});
}); };
return (React.createElement("div", { className: "DownloadCartPage bootstrap-4-backport" },
React.createElement("div", null,
React.createElement("div", { className: "pageHeader" },
React.createElement("div", { className: "grid" },
React.createElement("h3", { className: "pageHeaderTitle" }, "Your Download Cart"),
React.createElement("a", { className: "clearDownloadListLink", onClick: clearDownloadList },
React.createElement("span", null,
React.createElement(IconSvg_1.default, { options: {
icon: 'delete',
padding: 'right',
} })),
"Clear Your Download Cart")),
React.createElement("p", { className: "description" }, "You may find your added files in the tabs below. Any files which require actions before download can be found in the Access Actions Required tab, while any that can be downloaded now can be found in the Download List tab."))),
React.createElement("div", { className: "tabs-container" },
React.createElement("div", { className: "container" },
React.createElement("ul", { className: "nav nav-tabs" },
React.createElement("li", { className: "nav-item " + (selectedTabIndex == 0 ? 'active' : ''), "aria-selected": selectedTabIndex == 0 },
React.createElement("button", { onClick: function () { return setSelectedTabIndex(0); } },
"Access Actions Required",
!isError && !isLoading && data &&
React.createElement("span", { className: "fileCount" }, data.totalNumberOfFiles - data.numberOfFilesAvailableForDownload))),
React.createElement("li", { className: "nav-item " + (selectedTabIndex == 1 ? 'active' : ''), "aria-selected": selectedTabIndex == 1 },
React.createElement("button", { onClick: function () { return setSelectedTabIndex(1); } },
"Download List",
!isError && !isLoading && data &&
React.createElement("span", { className: "fileCount" }, data.numberOfFilesAvailableForDownload)))))),
selectedTabIndex == 0 && !isError && !isLoading && data &&
React.createElement("div", null,
data.numberOfFilesRequiringAction > 0 &&
React.createElement("div", null,
React.createElement("div", { className: "subSectionOverview" },
React.createElement("div", { className: "container" },
React.createElement("div", { className: "subSectionContainer" },
React.createElement("span", { className: "subSectionTitle" }, "You Have Files Which Require Actions Before Downloading")),
React.createElement("p", { className: "description" }, "The items in this category require different actions in order to download them. Select Start to complete the action."))),
React.createElement("div", { className: "actionsRequiredContainer container" },
React.createElement(DownloadListActionsRequired_1.default, null))),
data.numberOfFilesRequiringAction === 0 && React.createElement("div", { className: "placeholder" },
React.createElement("div", null, "No actions are currently required."))),
selectedTabIndex == 1 && !isError && !isLoading && data &&
React.createElement("div", null,
data.numberOfFilesAvailableForDownload > 0 &&
React.createElement("div", { className: "DownloadListTabContent" },
React.createElement("div", { className: "subSectionOverview" },
React.createElement("div", null,
React.createElement("div", { className: "headlineWithHelp" },
React.createElement(Typography_1.default, { variant: 'headline3' },
React.createElement(IconSvg_1.default, { options: { icon: 'packagableFile' } }),
" Web Download (.ZIP Packages)"),
React.createElement(MarkdownPopover_1.MarkdownPopover, { contentProps: { markdown: 'This will allow you to create a .zip file that contains eligible files. Files greater that 100 MB, external links, or files which are not stored on Synapse native storage are ineligible. In most cases, ineligible files can be downloaded individually. External links will require navigation to an external site, which may require a seperate login process.' }, placement: "bottom" },
React.createElement(IconSvg_1.default, { options: { icon: 'info' } }))),
React.createElement(Typography_1.default, { variant: 'body1' },
React.createElement("ul", null,
React.createElement("li", null, "Eligible files will be added to .ZIP packages of up to 1GB in size"),
React.createElement("li", null, "If you have more than 1GB, you can create multiple packages"),
React.createElement("li", null, "Will only include files which are hosted on Synapse native storage"),
React.createElement("li", null, "Packages include a CSV Manifest containing Metadata for each file"))),
React.createElement("span", null,
data.numberOfFilesAvailableForDownloadAndEligibleForPackaging > 0 && React.createElement("a", { className: "highlight-link", onClick: function () { setIsShowingCreatePackageUI(true); } }, "Download As .Zip Packages"),
data.numberOfFilesAvailableForDownloadAndEligibleForPackaging == 0 &&
React.createElement("a", { className: "highlight-link disabled", "data-for": "downloadZipPackagesUnavailable", "data-tip": "You cannot create a .zip package<br />because there are no eligible files." },
React.createElement(react_tooltip_1.default, { delayShow: 300, multiline: true, place: "top", type: "dark", effect: "solid", id: "downloadZipPackagesUnavailable" }),
"Download As .ZIP packages"))),
React.createElement("div", null,
React.createElement("div", { className: "headlineWithHelp" },
React.createElement(Typography_1.default, { variant: 'headline3' },
React.createElement(IconSvg_1.default, { options: { icon: 'code' } }),
" Programmatic Download"),
React.createElement(MarkdownPopover_1.MarkdownPopover, { contentProps: { markdown: 'This will provide syntax which you can enter into your programmatic client. It is suitable for large files (>100 MB), for packages > 1GB, and for files which aren’t stored on Synapse native storage (e.g. in a special AWS S3 or Google Cloud bucket. External links will require navigation to an external site, which may require a separate login process.' }, placement: "bottom" },
React.createElement(IconSvg_1.default, { options: { icon: 'info' } }))),
React.createElement(Typography_1.default, { variant: 'body1' },
React.createElement("ul", null,
React.createElement("li", null, "Requires installation of a programmatic client (R, Python, CLI)"),
React.createElement("li", null, "No limit to the file size or number of files that can be downloaded"),
React.createElement("li", null, "Will include files which are hosted on and off Synapse native storage"),
React.createElement("li", null, "Packages include a CSV Manifest containing Metadata for each file"))),
React.createElement("span", null,
React.createElement("a", { className: "highlight-link disabled", "data-for": "downloadProgrammaticallyTooltipId", "data-tip": "This feature is coming soon.<br />You can still download individual<br />files programmatically." },
React.createElement(react_tooltip_1.default, { delayShow: 300, multiline: true, place: "top", type: "dark", effect: "solid", id: "downloadProgrammaticallyTooltipId" }),
"Download Programmatically (Coming Soon)")))),
React.createElement("div", { className: "availableForDownloadTableContainer container" },
isShowingCreatePackageUI && React.createElement(CreatePackageV2_1.CreatePackageV2, { onPackageCreation: function () {
setIsShowingDownloadSuccessAlert(true);
// we refetch the data because the backend will instantly remove the downloadable files from the download list after a package has been created
refetch();
} }),
React.createElement(DownloadListStats_1.default, { numBytes: data.sumOfFileSizesAvailableForDownload, numPackagableFiles: data.numberOfFilesAvailableForDownloadAndEligibleForPackaging, numFiles: data.numberOfFilesAvailableForDownload }),
refetch && React.createElement(AvailableForDownloadTable_1.default, { filesStatistics: data, refetchStatistics: refetch }))),
data.numberOfFilesAvailableForDownload === 0 && React.createElement("div", { className: "placeholder" },
React.createElement("div", null, "Your Download List is currently empty."))),
React.createElement(FullWidthAlert_1.default, { show: isShowingDownloadSuccessAlert, variant: 'success', title: 'Package Created', description: 'A package has been created with eligible files. The items contained in this .zip file have been removed from your list. If your package is over 1GB, you will need to create multiple packages.', autoCloseAfterDelayInSeconds: 10, onClose: function () { setIsShowingDownloadSuccessAlert(false); } })));
};
exports.DownloadCartPage = DownloadCartPage;
//# sourceMappingURL=DownloadCartPage.js.map