synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
143 lines • 11.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EntityBadgeIcons = exports.ENTITY_BADGE_ICONS_TOOLTIP_ID = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var synapseTypes_1 = require("../utils/synapseTypes");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var lodash_es_1 = require("lodash-es");
var sanitize_html_1 = (0, tslib_1.__importDefault)(require("sanitize-html"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var utils_1 = require("../utils");
var SynapseContext_1 = require("../utils/SynapseContext");
var SynapseConstants_1 = require("../utils/SynapseConstants");
var useSchema_1 = require("../utils/hooks/SynapseAPI/useSchema");
var react_2 = require("react");
var EntityModal_1 = require("./entity/metadata/EntityModal");
var useEntityBundle_1 = (0, tslib_1.__importDefault)(require("../utils/hooks/SynapseAPI/useEntityBundle"));
var react_intersection_observer_1 = require("react-intersection-observer");
var isPublic = function (bundle) {
return bundle.benefactorAcl.resourceAccess.some(function (ra) {
return (ra.principalId === SynapseConstants_1.AUTHENTICATED_PRINCIPAL_ID ||
ra.principalId === SynapseConstants_1.PUBLIC_PRINCIPAL_ID ||
ra.principalId === SynapseConstants_1.ANONYMOUS_PRINCIPAL_ID);
});
};
exports.ENTITY_BADGE_ICONS_TOOLTIP_ID = 'EntityBadgeIconsTooltipID';
/**
* Stateless component used to show icons that show an entity's status.
* Adapted from https://github.com/Sage-Bionetworks/SynapseWebClient/blob/46b9b717636cda2421926d96365244bbb72a05b6/src/main/java/org/sagebionetworks/web/client/widget/entity/EntityBadge.java
*/
var EntityBadgeIcons = function (props) {
var _a, _b, _c;
var entityId = props.entityId, versionNumber = props.versionNumber, _d = props.flexWrap, flexWrap = _d === void 0 ? 'nowrap' : _d, _e = props.justifyContent, justifyContent = _e === void 0 ? 'flex-start' : _e, _f = props.showIsPublicPrivate, showIsPublicPrivate = _f === void 0 ? true : _f, _g = props.showHasLocalSharingSettings, showHasLocalSharingSettings = _g === void 0 ? true : _g, _h = props.showHasAnnotations, showHasAnnotations = _h === void 0 ? true : _h, _j = props.showHasWiki, showHasWiki = _j === void 0 ? true : _j, _k = props.showHasDiscussionThread, showHasDiscussionThread = _k === void 0 ? true : _k, _l = props.showUnlink, showUnlink = _l === void 0 ? true : _l, _m = props.onUnlink, onUnlink = _m === void 0 ? function () {
/* noop */
} : _m, _o = props.onUnlinkError, onUnlinkError = _o === void 0 ? function () {
/* noop */
} : _o, canOpenModal = props.canOpenModal, renderTooltipComponent = props.renderTooltipComponent;
var ownTooltipId = exports.ENTITY_BADGE_ICONS_TOOLTIP_ID +
(renderTooltipComponent ? "-" + entityId : '');
var SchemaConformanceState;
(function (SchemaConformanceState) {
SchemaConformanceState["NO_SCHEMA"] = "";
SchemaConformanceState["VALID"] = "Valid";
SchemaConformanceState["INVALID"] = "Invalid";
SchemaConformanceState["ANNOTATIONS_MISSING"] = "Missing";
})(SchemaConformanceState || (SchemaConformanceState = {}));
var _p = (0, react_intersection_observer_1.useInView)(), ref = _p.ref, inView = _p.inView;
var bundle = (0, useEntityBundle_1.default)(entityId, undefined, versionNumber, {
enabled: inView,
staleTime: 60 * 1000, // 60 seconds
}).data;
var _q = (0, react_1.useState)(false), showModal = _q[0], setShowModal = _q[1];
var _r = (0, react_1.useState)(SchemaConformanceState.NO_SCHEMA), schemaConformance = _r[0], setSchemaConformance = _r[1];
var _s = (0, SynapseContext_1.useSynapseContext)(), accessToken = _s.accessToken, isInExperimentalMode = _s.isInExperimentalMode;
var schemaValidationResults = (0, useSchema_1.useGetValidationResults)(entityId, {
enabled: isInExperimentalMode && inView,
staleTime: 60 * 1000, // 60 seconds
}).data;
var boundSchema = (0, useSchema_1.useGetSchemaBinding)(entityId, {
enabled: isInExperimentalMode && inView,
staleTime: 60 * 1000, // 60 seconds
}).data;
// The maximum number of annotations to show in the popover
var maxAnnosToShow = 10;
var annotationsCount = (bundle === null || bundle === void 0 ? void 0 : bundle.annotations) && !(0, lodash_es_1.isEmpty)(bundle.annotations.annotations)
? Object.keys(bundle.annotations.annotations).length
: 0;
(0, react_2.useEffect)(function () {
if (isInExperimentalMode && schemaValidationResults) {
// Because we may not know to render an icon until after fetching data (i.e. after a delay), we have to rebuild the tooltip to ensure it appears
react_tooltip_1.default.rebuild();
if (schemaValidationResults.isValid) {
setSchemaConformance(SchemaConformanceState.VALID);
}
else if (annotationsCount) {
// If annotations exist, then indicate that they are invalid
setSchemaConformance(SchemaConformanceState.INVALID);
}
else {
// If annotations are missing, it's still invalid, but should appear differently
setSchemaConformance(SchemaConformanceState.ANNOTATIONS_MISSING);
}
}
}, [
schemaValidationResults,
isInExperimentalMode,
annotationsCount,
bundle,
SchemaConformanceState.VALID,
SchemaConformanceState.INVALID,
SchemaConformanceState.ANNOTATIONS_MISSING,
]);
/**
* Convert the list of annotations to a string of <tr>...anno1</tr><tr>...anno2</tr>...
* If there are no annotations, this is the empty string ('')
*/
var annotationsTableRows = bundle
? "" + Object.entries((_b = (_a = bundle.annotations) === null || _a === void 0 ? void 0 : _a.annotations) !== null && _b !== void 0 ? _b : []).reduce(function (previous, current, index) {
if (index < maxAnnosToShow ||
(index === maxAnnosToShow && maxAnnosToShow === annotationsCount)) {
return previous + "<tr><td><b>" + current[0] + "</b></td><td>" + current[1].value.join(', ') + "</td></tr>";
}
else {
return previous;
}
}, '')
: '';
// We also show the schema name if there is one (and we're in experimental mode)
var valiationSchemaTableRow = isInExperimentalMode && boundSchema
? "<tr><td><b>Validation Schema</b></td><td>" + boundSchema.jsonSchemaVersionInfo.schemaName + "</td></tr>"
: '';
// Format it all as an html table
var annotationsHtml = "\n " + (schemaValidationResults ? "<p>" + schemaConformance + " Annotations</p>" : '') + "\n <table>\n " + (annotationsTableRows ? annotationsTableRows : '') + "\n " + valiationSchemaTableRow + "\n </table>" + (annotationsCount > maxAnnosToShow
? "<p>and " + (annotationsCount - maxAnnosToShow) + " more</p>"
: '');
return (react_1.default.createElement("div", { className: "EntityBadge", ref: ref, style: { flexWrap: flexWrap, justifyContent: justifyContent } }, bundle && (react_1.default.createElement(react_1.default.Fragment, null,
renderTooltipComponent && (react_1.default.createElement(react_tooltip_1.default, { id: ownTooltipId, className: "EntityBadgeTooltip", delayShow: 100, place: 'right', effect: 'solid' })),
react_1.default.createElement("div", { onClick: function (e) { return e.stopPropagation(); } },
react_1.default.createElement(EntityModal_1.EntityModal, { entityId: entityId, show: showModal, showTabs: false, onClose: function () { return setShowModal(false); }, initialTab: EntityModal_1.EntityModalTabs.ANNOTATIONS })),
showIsPublicPrivate && bundle.benefactorAcl && isPublic(bundle) ? (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: "img", className: "EntityBadge__Badge", icon: free_solid_svg_icons_1.faGlobeAmericas, "data-for": ownTooltipId, "data-tip": 'Public', "data-testid": 'is-public-icon' })) : null,
showIsPublicPrivate && bundle.benefactorAcl && !isPublic(bundle) ? (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: "img", className: "EntityBadge__Badge", icon: free_solid_svg_icons_1.faLock, "data-for": ownTooltipId, "data-tip": 'Private', "data-testid": 'is-private-icon' })) : null,
showHasLocalSharingSettings &&
bundle.benefactorAcl &&
entityId === bundle.benefactorAcl.id ? (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: "img", className: "EntityBadge__Badge", icon: free_solid_svg_icons_1.faCheck, "data-for": ownTooltipId, "data-tip": "Sharing Settings have been set", "data-testid": 'sharing-settings-icon' })) : null,
showHasAnnotations &&
!!(annotationsCount || schemaValidationResults) && (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: canOpenModal ? 'button' : 'img', className: "EntityBadge__Badge " + schemaConformance, style: canOpenModal ? { cursor: 'pointer' } : undefined, onClick: canOpenModal ? function () { return setShowModal(true); } : undefined, icon: free_solid_svg_icons_1.faTag, "data-for": ownTooltipId, "data-tip": (0, sanitize_html_1.default)(annotationsHtml), "data-html": true, "data-testid": 'annotations-icon' })),
showHasWiki && bundle.rootWikiId && (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: "img",
// style={{ maxWidth: '20px', maxHeight: '20px' }}
className: "EntityBadge__Badge", icon: free_solid_svg_icons_1.faAlignLeft, "data-for": ownTooltipId, "data-tip": "Has a wiki", "data-testid": 'wiki-icon' })),
showHasDiscussionThread &&
!!bundle.threadCount &&
!!(bundle.threadCount > 0) && (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: "img", className: "EntityBadge__Badge", icon: free_solid_svg_icons_1.faComment, "data-for": ownTooltipId, "data-tip": "Has been mentioned in discussion", "data-testid": 'discussion-icon' })),
showUnlink &&
bundle.entityType === synapseTypes_1.EntityType.LINK &&
((_c = bundle.permissions) === null || _c === void 0 ? void 0 : _c.canDelete) && (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { "aria-hidden": false, role: "button", onClick: function () {
utils_1.SynapseClient.deleteEntity(accessToken, entityId)
.then(function () { return onUnlink(entityId); })
.catch(function (error) { return onUnlinkError(error); });
}, className: "EntityBadge__Badge Unlink", icon: free_solid_svg_icons_1.faUnlink, "data-for": ownTooltipId, "data-tip": "Remove this link", "data-testid": 'unlink-icon' }))))));
};
exports.EntityBadgeIcons = EntityBadgeIcons;
//# sourceMappingURL=EntityBadgeIcons.js.map