synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
64 lines • 5.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EntityModal = exports.EntityModalTabs = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var EntityTypeUtils_1 = require("../../../utils/functions/EntityTypeUtils");
var getEndpoint_1 = require("../../../utils/functions/getEndpoint");
var useEntityBundle_1 = (0, tslib_1.__importDefault)(require("../../../utils/hooks/SynapseAPI/useEntityBundle"));
var AnnotationsTable_1 = require("./AnnotationsTable");
var MetadataTable_1 = require("./MetadataTable");
var Skeleton_1 = (0, tslib_1.__importDefault)(require("@material-ui/lab/Skeleton"));
var SchemaDrivenAnnotationEditor_1 = require("../annotations/SchemaDrivenAnnotationEditor");
var SkeletonButton_1 = require("../../../assets/skeletons/SkeletonButton");
var ErrorBanner_1 = require("../../ErrorBanner");
var EntityModalTabs;
(function (EntityModalTabs) {
EntityModalTabs["METADATA"] = "METADATA";
EntityModalTabs["ANNOTATIONS"] = "ANNOTATIONS";
// TODO: Access -- we haven't yet built a viewer/editor for ACLs in SRC -- consider a redesign before building
// ACCESS = 'ACCESS', // ACLs (and maybe ARs?)
// TODO: Previews - we would need preview renderers that accomplish feature parity with SWC
// PREVIEW = 'PREVIEW' // should only show this tab if a preview exists
})(EntityModalTabs = exports.EntityModalTabs || (exports.EntityModalTabs = {}));
var EntityModal = function (_a) {
var _b;
var entityId = _a.entityId, show = _a.show, onClose = _a.onClose, _c = _a.initialTab, initialTab = _c === void 0 ? EntityModalTabs.METADATA : _c, _d = _a.showTabs, showTabs = _d === void 0 ? true : _d;
var _e = (0, react_1.useState)(initialTab), currentTab = _e[0], setCurrentTab = _e[1];
var _f = (0, react_1.useState)(false), isInEditMode = _f[0], setIsInEditMode = _f[1];
var entityBundle = (0, useEntityBundle_1.default)(entityId).data;
return (react_1.default.createElement(react_bootstrap_1.Modal, { className: "bootstrap-4-backport EntityMetadata", backdrop: 'static', size: isInEditMode ? 'lg' : undefined, show: show, animation: false, onHide: onClose },
react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true }, entityBundle ? (react_1.default.createElement(react_bootstrap_1.Modal.Title, null, entityBundle.entity.name)) : (react_1.default.createElement(Skeleton_1.default, { width: '40%' }))),
react_1.default.createElement(react_bootstrap_1.Modal.Body, null,
showTabs ? (react_1.default.createElement("div", { className: "Tabs" }, Object.keys(EntityModalTabs).map(function (tabName) {
return (react_1.default.createElement("div", { className: "Tab", role: "tab", key: tabName, onClick: function (e) {
e.stopPropagation();
setCurrentTab(EntityModalTabs[tabName]);
}, "aria-selected": tabName === currentTab }, tabName));
}))) : null,
react_1.default.createElement(react_1.default.Fragment, null,
currentTab === EntityModalTabs.ANNOTATIONS && (react_1.default.createElement(react_1.default.Fragment, null, isInEditMode ? (react_1.default.createElement(ErrorBanner_1.SynapseErrorBoundary, null,
react_1.default.createElement(SchemaDrivenAnnotationEditor_1.SchemaDrivenAnnotationEditor, { entityId: entityId, onSuccess: function () {
setIsInEditMode(false);
}, onCancel: function () { return setIsInEditMode(false); } }))) : (react_1.default.createElement(AnnotationsTable_1.AnnotationsTable, { entityId: entityId })))),
currentTab === EntityModalTabs.METADATA && (react_1.default.createElement(MetadataTable_1.MetadataTable, { entityId: entityId })))),
!isInEditMode && ( // in edit mode, an editor manages its own footer
react_1.default.createElement(react_bootstrap_1.Modal.Footer, null,
react_1.default.createElement("div", { className: "ButtonContainer" },
entityBundle &&
((_b = entityBundle.permissions) === null || _b === void 0 ? void 0 : _b.canEdit) &&
currentTab === EntityModalTabs.ANNOTATIONS ? ( // Currently only have an editor for annotations
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary-500", onClick: function () {
setIsInEditMode(true);
} }, "Edit"),
react_1.default.createElement("div", { className: "Spacer" }))) : (react_1.default.createElement("div", { className: "Spacer" })),
entityBundle ? (react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary-500", onClick: function () {
return window.open((0, getEndpoint_1.getEndpoint)(getEndpoint_1.BackendDestinationEnum.PORTAL_ENDPOINT) + "#!Synapse:" + entityId, '_blank', 'noopener');
} },
"Open ",
(0, EntityTypeUtils_1.entityTypeToFriendlyName)(entityBundle.entityType))) : (react_1.default.createElement(SkeletonButton_1.SkeletonButton, { placeholderText: "Open entity" })))))));
};
exports.EntityModal = EntityModal;
//# sourceMappingURL=EntityModal.js.map