synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
203 lines • 14.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TESTING_CLEAR_BTN_CLASS = exports.TESTING_TRASH_BTN_CLASS = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_error_boundary_1 = require("react-error-boundary");
var ErrorUtils_1 = require("../../utils/ErrorUtils");
var react_bootstrap_1 = require("react-bootstrap");
var calculateFriendlyFileSize_1 = require("../../utils/functions/calculateFriendlyFileSize");
var useGetAvailableFilesToDownload_1 = require("../../utils/hooks/SynapseAPI/useGetAvailableFilesToDownload");
var react_intersection_observer_1 = require("react-intersection-observer");
var utils_1 = require("../../utils");
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var UserCard_1 = (0, tslib_1.__importDefault)(require("../UserCard"));
var Sort_1 = (0, tslib_1.__importDefault)(require("../../assets/icons/Sort"));
var synapseTypes_1 = require("../../utils/synapseTypes");
var SynapseContext_1 = require("../../utils/SynapseContext");
var getEndpoint_1 = require("../../utils/functions/getEndpoint");
var IconSvg_1 = (0, tslib_1.__importDefault)(require("../IconSvg"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var SynapseTableConstants_1 = require("../table/SynapseTableConstants");
var SkeletonTable_1 = require("../../assets/skeletons/SkeletonTable");
var DirectDownload_1 = (0, tslib_1.__importDefault)(require("../DirectDownload"));
var ToastMessage_1 = require("../ToastMessage");
exports.TESTING_TRASH_BTN_CLASS = 'TESTING_TRASH_BTN_CLASS';
exports.TESTING_CLEAR_BTN_CLASS = 'TESTING_CLEAR_BTN_CLASS';
function DownloadListTable(props) {
var _this = this;
var _a;
var filesStatistics = props.filesStatistics, refetchStatistics = props.refetchStatistics;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var handleError = (0, react_error_boundary_1.useErrorHandler)();
// Load the next page when this ref comes into view.
var _b = (0, react_intersection_observer_1.useInView)(), ref = _b.ref, inView = _b.inView;
var _c = (0, react_1.useState)(undefined), sort = _c[0], setSort = _c[1];
var _d = (0, react_1.useState)(undefined), filter = _d[0], setFilter = _d[1];
var _e = (0, useGetAvailableFilesToDownload_1.useGetAvailableFilesToDownloadInfinite)(sort, filter), data = _e.data, status = _e.status, isFetchingNextPage = _e.isFetchingNextPage, isLoading = _e.isLoading, hasNextPage = _e.hasNextPage, fetchNextPage = _e.fetchNextPage, isError = _e.isError, newError = _e.error, refetch = _e.refetch;
//SWC-5858: Update the Download List files table when the statistics change
(0, react_1.useEffect)(function () {
if (refetch) {
refetch();
}
}, [filesStatistics, refetch]);
(0, react_1.useEffect)(function () {
if (isError && newError) {
handleError((0, ErrorUtils_1.toError)(newError));
}
}, [isError, newError, handleError]);
(0, react_1.useEffect)(function () {
if (status === 'success' &&
!isFetchingNextPage &&
hasNextPage &&
fetchNextPage &&
inView) {
fetchNextPage();
}
}, [status, isFetchingNextPage, hasNextPage, fetchNextPage, inView]);
var allRows = (_a = data === null || data === void 0 ? void 0 : data.pages.flatMap(function (page) { return page.page; })) !== null && _a !== void 0 ? _a : [];
var getFilterDisplayText = function (f) {
if (!f) {
return 'All';
}
else if (f == 'eligibleForPackaging') {
return 'Only Eligible';
}
else {
return 'Only Ineligible';
}
};
var removeItem = function (item, fileName) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var err_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, utils_1.SynapseClient.removeItemFromDownloadListV2(item, accessToken)];
case 1:
_a.sent();
(0, ToastMessage_1.displayToast)(fileName + " has been removed from your list.", 'success', { title: 'File Download' });
// refetching the statistics will update the download list, so no need to update the file list here.
refetchStatistics();
return [3 /*break*/, 3];
case 2:
err_1 = _a.sent();
console.error(err_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
var showInteractiveSortIcon = function (columnSortBy) {
return (setSort && (react_1.default.createElement(Sort_1.default, { role: "button", style: { height: '20px' }, active: (sort === null || sort === void 0 ? void 0 : sort.field) === columnSortBy, direction: (sort === null || sort === void 0 ? void 0 : sort.field) === columnSortBy
? sort.direction === 'DESC'
? synapseTypes_1.Direction.DESC
: synapseTypes_1.Direction.ASC
: synapseTypes_1.Direction.DESC, onClick: function () {
var direction = columnSortBy === (sort === null || sort === void 0 ? void 0 : sort.field)
? sort.direction === 'ASC'
? 'DESC'
: 'ASC'
: 'DESC';
setSort({
field: columnSortBy,
direction: direction,
});
} })));
};
var availableFiltersArray = [
undefined,
'eligibleForPackaging',
'ineligibleForPackaging',
];
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "filterFilesContainer" },
react_1.default.createElement("span", { className: "filterFilesByText" }, "Filter Files By"),
react_1.default.createElement(react_bootstrap_1.Dropdown, null,
react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { variant: "gray-primary-500", id: "dropdown-basic" }, getFilterDisplayText(filter)),
react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, { role: "menu" }, availableFiltersArray.map(function (availableFilter) { return (react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { role: "menuitem", key: getFilterDisplayText(availableFilter) + "-filter-option", onClick: function () {
setFilter(availableFilter);
} }, getFilterDisplayText(availableFilter))); })))),
allRows.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_bootstrap_1.Table, { striped: true, responsive: true, className: "DownloadListTableV2" },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", null),
react_1.default.createElement("th", null,
"Name",
react_1.default.createElement("span", null, showInteractiveSortIcon('fileName'))),
react_1.default.createElement("th", null,
"Size",
react_1.default.createElement("span", null, showInteractiveSortIcon('fileSize'))),
react_1.default.createElement("th", null,
"Project",
react_1.default.createElement("span", null, showInteractiveSortIcon('projectName'))),
react_1.default.createElement("th", null,
"SynID",
react_1.default.createElement("span", null, showInteractiveSortIcon('synId'))),
react_1.default.createElement("th", null,
"Added On",
react_1.default.createElement("span", null, showInteractiveSortIcon('addedOn'))),
react_1.default.createElement("th", null,
"Created By",
react_1.default.createElement("span", null, showInteractiveSortIcon('createdBy'))),
react_1.default.createElement("th", null,
"Created On",
react_1.default.createElement("span", null, showInteractiveSortIcon('createdOn'))),
react_1.default.createElement("th", { className: "stickyColumn" }, "Actions"))),
react_1.default.createElement("tbody", null,
allRows.map(function (item) {
if (item) {
var addedOn = (0, moment_1.default)(item.addedOn).format('L LT');
var createdOn = (0, moment_1.default)(item.createdOn).format('L LT');
return (react_1.default.createElement("tr", { key: item.fileEntityId },
react_1.default.createElement("td", { className: item.isEligibleForPackaging ? '' : 'ineligibleForPackagingTd' },
item.isEligibleForPackaging && (react_1.default.createElement("span", { "data-for": item.fileEntityId + "-eligible-tooltip", "data-tip": "Eligible for packaging", className: "eligibileIcon" },
react_1.default.createElement(react_tooltip_1.default, { delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, place: "right", type: "dark", effect: "solid", id: item.fileEntityId + "-eligible-tooltip" }),
react_1.default.createElement(IconSvg_1.default, { options: {
icon: 'packagableFile',
} }))),
!item.isEligibleForPackaging && (react_1.default.createElement("span", { "data-for": item.fileEntityId + "-ineligible-tooltip", "data-tip": "This file is ineligible for Web packaging <br />because it is >100MB, or it is an external link,<br />or it is not stored on Synapse native storage", className: "ineligibileIcon" },
react_1.default.createElement(react_tooltip_1.default, { delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, place: "right", type: "dark", effect: "solid", multiline: true, id: item.fileEntityId + "-ineligible-tooltip" }),
react_1.default.createElement(IconSvg_1.default, { options: {
icon: 'warningOutlined',
} })))),
react_1.default.createElement("td", null,
react_1.default.createElement("a", { target: "_blank", rel: "noopener noreferrer", href: getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Synapse:" + item.fileEntityId + "." + item.versionNumber }, item.fileName)),
react_1.default.createElement("td", null, item.fileSizeBytes &&
(0, calculateFriendlyFileSize_1.calculateFriendlyFileSize)(item.fileSizeBytes)),
react_1.default.createElement("td", null, item.projectName),
react_1.default.createElement("td", null, item.projectId),
react_1.default.createElement("td", null, addedOn),
react_1.default.createElement("td", null,
react_1.default.createElement(UserCard_1.default, { size: 'SMALL USER CARD', ownerId: item.createdBy })),
react_1.default.createElement("td", null, createdOn),
react_1.default.createElement("td", { className: "stickyColumn" },
react_1.default.createElement("div", { className: "actionsContainer" },
react_1.default.createElement("span", { className: "downloadItem" },
react_1.default.createElement(DirectDownload_1.default, { associatedObjectId: item.fileEntityId, associatedObjectType: synapseTypes_1.FileHandleAssociateType.FileEntity, entityVersionNumber: item.versionNumber.toString(), displayFileName: false, onClickCallback: function () {
removeItem({
fileEntityId: item.fileEntityId,
versionNumber: item.versionNumber,
}, item.fileName);
} })),
react_1.default.createElement("span", { className: "removeItem", "data-for": item.fileEntityId + "-removeitem-tooltip", "data-tip": "Remove from Download List" },
react_1.default.createElement(react_tooltip_1.default, { delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, place: "left", type: "dark", effect: "solid", id: item.fileEntityId + "-removeitem-tooltip" }),
react_1.default.createElement("button", { className: exports.TESTING_TRASH_BTN_CLASS, onClick: function () {
removeItem({
fileEntityId: item.fileEntityId,
versionNumber: item.versionNumber,
}, item.fileName);
} },
react_1.default.createElement(IconSvg_1.default, { options: {
icon: 'removeCircle',
} })))))));
}
else
return false;
}),
react_1.default.createElement("tr", { ref: ref }))))),
isLoading && (react_1.default.createElement(SkeletonTable_1.SkeletonTable, { numCols: 5, numRows: 3 }))));
}
exports.default = DownloadListTable;
//# sourceMappingURL=DownloadListTable.js.map