synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
255 lines • 14.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EntityErrorRenderer = exports.DatasetEditorCheckboxRenderer = exports.DetailsViewVersionRenderer = exports.DatasetEditorVersionRenderer = exports.EmptyRenderer = exports.TypeIconRenderer = exports.DetailsViewCheckboxRenderer = exports.LoadingRenderer = exports.ModifiedByRenderer = exports.UserCardRenderer = exports.ProjectRenderer = exports.EntityNameRenderer = exports.CreatedOnRenderer = exports.ModifiedOnRenderer = exports.DateRenderer = exports.BadgeIconsRenderer = exports.CustomSortIndicator = void 0;
var tslib_1 = require("tslib");
var lab_1 = require("@material-ui/lab");
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var Sort_1 = (0, tslib_1.__importDefault)(require("../../../../assets/icons/Sort"));
var DateFormatter_1 = require("../../../../utils/functions/DateFormatter");
var TooltipUtils_1 = require("../../../../utils/functions/TooltipUtils");
var useEntity_1 = require("../../../../utils/hooks/SynapseAPI/useEntity");
var useEntityBundle_1 = (0, tslib_1.__importDefault)(require("../../../../utils/hooks/SynapseAPI/useEntityBundle"));
var SynapseConstants_1 = require("../../../../utils/SynapseConstants");
var EntityBadgeIcons_1 = require("../../../EntityBadgeIcons");
var EntityIcon_1 = require("../../../EntityIcon");
var EntityLink_1 = require("../../../EntityLink");
var IconSvg_1 = (0, tslib_1.__importDefault)(require("../../../IconSvg"));
var LoadingScreen_1 = require("../../../LoadingScreen");
var UserCard_1 = (0, tslib_1.__importDefault)(require("../../../UserCard"));
var Checkbox_1 = require("../../../widgets/Checkbox");
var EntityFinder_1 = require("../../EntityFinder");
var CustomSortIndicator = function (_a) {
var className = _a.className, sortOrder = _a.sortOrder;
return (react_1.default.createElement(Sort_1.default, { className: className, active: true, role: "button", style: { height: '20px', marginLeft: 'auto' }, direction: sortOrder }));
};
exports.CustomSortIndicator = CustomSortIndicator;
/**
* Renders Entity Badges using the entity bundle.
* @param props
* @returns
*/
function BadgeIconsRenderer(props) {
return (react_1.default.createElement(EntityBadgeIcons_1.EntityBadgeIcons, { entityId: props.rowData.entityId, versionNumber: props.rowData.versionNumber, showHasDiscussionThread: false, showHasWiki: false, showUnlink: false, canOpenModal: false,
// We render the tooltip component outside of the table so it plays nicely with list virtualization
// https://github.com/wwayne/react-tooltip/issues/300#issuecomment-468042592
renderTooltipComponent: false }));
}
exports.BadgeIconsRenderer = BadgeIconsRenderer;
function DateRenderer(_a) {
var _b;
var cellData = _a.cellData;
return react_1.default.createElement(react_1.default.Fragment, null, (_b = (cellData && (0, DateFormatter_1.formatDate)((0, moment_1.default)(cellData)))) !== null && _b !== void 0 ? _b : react_1.default.createElement(react_1.default.Fragment, null));
}
exports.DateRenderer = DateRenderer;
/**
* Renders 'modifiedOn' from the entity bundle.
* @param props
* @returns
*/
function ModifiedOnRenderer(props) {
var _a;
var _b = (0, useEntityBundle_1.default)(props.rowData.entityId, undefined, props.rowData.versionNumber), bundle = _b.data, isLoading = _b.isLoading;
if (isLoading) {
return react_1.default.createElement(lab_1.Skeleton, { width: 200 });
}
return react_1.default.createElement(DateRenderer, (0, tslib_1.__assign)({}, props, { cellData: (_a = bundle === null || bundle === void 0 ? void 0 : bundle.entity) === null || _a === void 0 ? void 0 : _a.modifiedOn }));
}
exports.ModifiedOnRenderer = ModifiedOnRenderer;
/**
* Renders 'createdOn' from the entity bundle.
* @param props
* @returns
*/
function CreatedOnRenderer(props) {
var _a;
var _b = (0, useEntityBundle_1.default)(props.rowData.entityId, undefined, props.rowData.versionNumber), bundle = _b.data, isLoading = _b.isLoading;
if (isLoading) {
return react_1.default.createElement(lab_1.Skeleton, { width: 200 });
}
return react_1.default.createElement(DateRenderer, (0, tslib_1.__assign)({}, props, { cellData: (_a = bundle === null || bundle === void 0 ? void 0 : bundle.entity) === null || _a === void 0 ? void 0 : _a.createdOn }));
}
exports.CreatedOnRenderer = CreatedOnRenderer;
function EntityNameRenderer(props) {
var _a = (0, useEntityBundle_1.default)(props.rowData.entityId, undefined, props.rowData.versionNumber), bundle = _a.data, isLoading = _a.isLoading;
if (isLoading) {
return react_1.default.createElement(lab_1.Skeleton, { width: 200 });
}
return bundle ? (react_1.default.createElement(EntityLink_1.EntityLink, { className: "EntityNameWithIconRenderer", entity: bundle.entity, link: false })) : (react_1.default.createElement(react_1.default.Fragment, null));
}
exports.EntityNameRenderer = EntityNameRenderer;
function ProjectRenderer(props) {
var _a;
var _b = (0, useEntityBundle_1.default)(props.rowData.entityId, undefined, props.rowData.versionNumber), entityBundle = _b.data, isLoadingBundle = _b.isLoading;
var _c = (0, useEntity_1.useGetEntity)((_a = entityBundle === null || entityBundle === void 0 ? void 0 : entityBundle.path.path[1].id) !== null && _a !== void 0 ? _a : '', undefined, { enabled: !!entityBundle }), project = _c.data, isLoadingProjectEntity = _c.isLoading;
if (isLoadingBundle || isLoadingProjectEntity) {
return react_1.default.createElement(lab_1.Skeleton, { width: 200 });
}
return project ? react_1.default.createElement(EntityLink_1.EntityLink, { entity: project }) : react_1.default.createElement(react_1.default.Fragment, null);
}
exports.ProjectRenderer = ProjectRenderer;
function UserCardRenderer(_a) {
var cellData = _a.cellData;
return (react_1.default.createElement(UserCard_1.default, { ownerId: cellData, size: SynapseConstants_1.SMALL_USER_CARD, openLinkInNewTab: true }));
}
exports.UserCardRenderer = UserCardRenderer;
/**
* Renders 'modifiedBy' from the entity bundle.
* @param props
* @returns
*/
function ModifiedByRenderer(props) {
var _a;
var _b = (0, useEntityBundle_1.default)(props.rowData.entityId, undefined, props.rowData.versionNumber), bundle = _b.data, isLoading = _b.isLoading;
if (isLoading) {
return react_1.default.createElement(lab_1.Skeleton, { width: 200 });
}
return react_1.default.createElement(UserCardRenderer, (0, tslib_1.__assign)({}, props, { cellData: (_a = bundle === null || bundle === void 0 ? void 0 : bundle.entity) === null || _a === void 0 ? void 0 : _a.modifiedBy }));
}
exports.ModifiedByRenderer = ModifiedByRenderer;
function LoadingRenderer() {
return (react_1.default.createElement("div", { className: "EntityFinderDetailsViewPlaceholder" },
react_1.default.createElement(LoadingScreen_1.SynapseSpinner, { size: 30 })));
}
exports.LoadingRenderer = LoadingRenderer;
function DetailsViewCheckboxRenderer(_a) {
var rowData = _a.rowData;
var isSelected = rowData.isSelected, isDisabled = rowData.isDisabled;
return (!isDisabled && (react_1.default.createElement(Checkbox_1.Checkbox, { label: "", className: "SRC-pointer-events-none", checked: isSelected, onChange: function () {
// no-op
} })));
}
exports.DetailsViewCheckboxRenderer = DetailsViewCheckboxRenderer;
function TypeIconRenderer(_a) {
var cellData = _a.cellData;
return react_1.default.createElement(EntityIcon_1.EntityTypeIcon, { type: cellData });
}
exports.TypeIconRenderer = TypeIconRenderer;
function EmptyRenderer(_a) {
var noResultsPlaceholder = _a.noResultsPlaceholder;
return (react_1.default.createElement("div", { className: "EntityFinderDetailsViewPlaceholder" }, noResultsPlaceholder || react_1.default.createElement("div", null, "Empty")));
}
exports.EmptyRenderer = EmptyRenderer;
var DatasetEditorVersionRenderer = function (_a) {
var _b;
var rowData = _a.rowData, toggleSelection = _a.toggleSelection;
var entityId = rowData.entityId, versionNumber = rowData.versionNumber;
var _c = (0, useEntity_1.useGetVersionsInfinite)(entityId, {
staleTime: 60 * 1000, // 60 seconds
}), versionData = _c.data, isError = _c.isError, fetchNextPage = _c.fetchNextPage, isFetchingNextPage = _c.isFetchingNextPage, hasNextPage = _c.hasNextPage;
var versions = (_b = versionData === null || versionData === void 0 ? void 0 : versionData.pages.flatMap(function (page) { return page.results; })) !== null && _b !== void 0 ? _b : [];
var currentVersionHasBeenRetrieved = !!versions.find(function (version) { return version.versionNumber === versionNumber; });
(0, react_1.useEffect)(function () {
if (!currentVersionHasBeenRetrieved && hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
}, [
currentVersionHasBeenRetrieved,
hasNextPage,
isFetchingNextPage,
fetchNextPage,
]);
if (isError) {
return react_1.default.createElement(react_1.default.Fragment, null, versionNumber);
}
return (react_1.default.createElement("div", null, versions && versions.length > 0 && (react_1.default.createElement(react_bootstrap_1.Form.Control, { role: "listbox", size: "sm", as: "select", value: versionNumber, onClick: function (event) {
event.stopPropagation();
}, onChange: function (event) {
event.stopPropagation();
var version = parseInt(event.target.value);
toggleSelection({
entityId: entityId,
versionNumber: version,
});
} },
/* The selected version number doesn't exist */
!currentVersionHasBeenRetrieved &&
!hasNextPage &&
!isFetchingNextPage && (react_1.default.createElement("option", { disabled: true, key: versionNumber, value: versionNumber },
versionNumber,
" (Not Found)")),
versions.map(function (version) {
return (react_1.default.createElement("option", { key: version.versionNumber, value: version.versionNumber },
version.versionNumber,
version.isLatestVersion && ' (Latest)'));
})))));
};
exports.DatasetEditorVersionRenderer = DatasetEditorVersionRenderer;
var DetailsViewVersionRenderer = function (_a) {
var _b;
var rowData = _a.rowData, mustSelectVersionNumber = _a.mustSelectVersionNumber, toggleSelection = _a.toggleSelection;
var id = rowData.id, isVersionableEntity = rowData.isVersionableEntity, isSelected = rowData.isSelected, currentSelectedVersion = rowData.currentSelectedVersion;
var versionData = (0, useEntity_1.useGetVersionsInfinite)(id, {
enabled: isVersionableEntity,
staleTime: 60 * 1000, // 60 seconds
}).data;
var versions = (_b = versionData === null || versionData === void 0 ? void 0 : versionData.pages.flatMap(function (page) { return page.results; })) !== null && _b !== void 0 ? _b : [];
(0, react_1.useEffect)(function () {
// If 'mustSelectVersionNumber' is true and the user has selected this entity and hasn't selected a version, then we force a version selection
if (isSelected &&
mustSelectVersionNumber &&
currentSelectedVersion === EntityFinder_1.NO_VERSION_NUMBER &&
versions.length > 0) {
toggleSelection({
targetId: id,
targetVersionNumber: versions[0].versionNumber,
});
}
}, [
currentSelectedVersion,
id,
isSelected,
mustSelectVersionNumber,
toggleSelection,
versions,
]);
return (react_1.default.createElement("div", null, isSelected && versions && versions.length > 0 && (react_1.default.createElement(react_bootstrap_1.Form.Control, { role: "listbox", size: "sm", as: "select", value: currentSelectedVersion, onClick: function (event) {
event.stopPropagation();
}, onChange: function (event) {
event.stopPropagation();
var version = parseInt(event.target.value);
toggleSelection({
targetId: id,
targetVersionNumber: version === EntityFinder_1.NO_VERSION_NUMBER ? undefined : version,
});
} },
!mustSelectVersionNumber && (react_1.default.createElement("option", { value: EntityFinder_1.NO_VERSION_NUMBER }, "Always Latest Version")),
versions.map(function (version) {
return (react_1.default.createElement("option", { key: version.versionNumber, value: version.versionNumber },
"Version ",
version.versionNumber));
})))));
};
exports.DetailsViewVersionRenderer = DetailsViewVersionRenderer;
function DatasetEditorCheckboxRenderer(props) {
var _a = props.rowData, isSelected = _a.isSelected, isDisabled = _a.isDisabled, setSelected = _a.setSelected, entityId = _a.entityId;
return (!isDisabled && (react_1.default.createElement(Checkbox_1.Checkbox, { "data-testid": "dataset-editor-checkbox-" + entityId, disabled: isDisabled, label: "", checked: isSelected, onChange: function (value) {
setSelected(value);
} })));
}
exports.DatasetEditorCheckboxRenderer = DatasetEditorCheckboxRenderer;
var EntityErrorRenderer = function (props) {
var _a = props.rowData, entityId = _a.entityId, versionNumber = _a.versionNumber;
var _b = (0, useEntity_1.useGetEntity)(entityId, versionNumber, {
onError: function () {
(0, TooltipUtils_1.rebuildTooltip)();
},
}), error = _b.error, isError = _b.isError;
var message = error === null || error === void 0 ? void 0 : error.reason;
if ((error === null || error === void 0 ? void 0 : error.status) === 403) {
message = "You don't have permission to view this entity.";
}
else if ((error === null || error === void 0 ? void 0 : error.status) === 404) {
message = 'The entity or version does not exist. It may have been deleted.';
}
if (!isError) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
else {
return (react_1.default.createElement("div", { className: "EntityErrorRenderer", "data-for": EntityBadgeIcons_1.ENTITY_BADGE_ICONS_TOOLTIP_ID, "data-tip": message },
react_1.default.createElement(IconSvg_1.default, { options: { icon: 'warningOutlined' } })));
}
};
exports.EntityErrorRenderer = EntityErrorRenderer;
//# sourceMappingURL=DetailsViewTableRenderers.js.map