UNPKG

synapse-react-client

Version:

[![Build Status](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client.svg?branch=main)](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synaps

241 lines 17.5 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.checkHasUnsportedRequirement = exports.SUPPORTED_ACCESS_REQUIREMENTS = void 0; var tslib_1 = require("tslib"); var react_1 = (0, tslib_1.__importStar)(require("react")); var SynapseClient_1 = require("../../utils/SynapseClient"); var utils_1 = require("../../utils/"); var useCompare_1 = (0, tslib_1.__importDefault)(require("../../utils/hooks/useCompare")); var ReactBootstrap = (0, tslib_1.__importStar)(require("react-bootstrap")); var SelfSignAccessRequirement_1 = (0, tslib_1.__importDefault)(require("./SelfSignAccessRequirement")); var TermsOfUseAccessRequirement_1 = (0, tslib_1.__importDefault)(require("./TermsOfUseAccessRequirement")); var ManagedACTAccessRequirement_1 = (0, tslib_1.__importDefault)(require("./managedACTAccess/ManagedACTAccessRequirement")); var ACTAccessRequirement_1 = (0, tslib_1.__importDefault)(require("./ACTAccessRequirement")); var useGetInfoFromIds_1 = (0, tslib_1.__importDefault)(require("../../utils/hooks/useGetInfoFromIds")); var AccessApprovalCheckMark_1 = (0, tslib_1.__importDefault)(require("./AccessApprovalCheckMark")); var react_fontawesome_1 = require("@fortawesome/react-fontawesome"); var fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core"); var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons"); var lodash_es_1 = require("lodash-es"); var RequestDataAccessStep1_1 = (0, tslib_1.__importDefault)(require("./managedACTAccess/RequestDataAccessStep1")); var RequestDataAccessStep2_1 = (0, tslib_1.__importDefault)(require("./managedACTAccess/RequestDataAccessStep2")); var CancelRequestDataAccess_1 = (0, tslib_1.__importDefault)(require("./managedACTAccess/CancelRequestDataAccess")); var RequestDataAccessSuccess_1 = (0, tslib_1.__importDefault)(require("./managedACTAccess/RequestDataAccessSuccess")); var Login_1 = (0, tslib_1.__importDefault)(require("../Login")); var SynapseContext_1 = require("../../utils/SynapseContext"); var getEndpoint_1 = require("../../utils/functions/getEndpoint"); fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faFile); var SUPPORTED_ACCESS_REQUIREMENTS; (function (SUPPORTED_ACCESS_REQUIREMENTS) { SUPPORTED_ACCESS_REQUIREMENTS["SelfSignAccessRequirement"] = "org.sagebionetworks.repo.model.SelfSignAccessRequirement"; SUPPORTED_ACCESS_REQUIREMENTS["TermsOfUseAccessRequirement"] = "org.sagebionetworks.repo.model.TermsOfUseAccessRequirement"; SUPPORTED_ACCESS_REQUIREMENTS["ManagedACTAccessRequirement"] = "org.sagebionetworks.repo.model.ManagedACTAccessRequirement"; SUPPORTED_ACCESS_REQUIREMENTS["ACTAccessRequirement"] = "org.sagebionetworks.repo.model.ACTAccessRequirement"; })(SUPPORTED_ACCESS_REQUIREMENTS = exports.SUPPORTED_ACCESS_REQUIREMENTS || (exports.SUPPORTED_ACCESS_REQUIREMENTS = {})); var checkHasUnsportedRequirement = function (accessRequirements) { return accessRequirements.filter(isARUnsupported).length > 0; }; exports.checkHasUnsportedRequirement = checkHasUnsportedRequirement; var isARUnsupported = function (accessRequirement) { switch (accessRequirement.concreteType) { case SUPPORTED_ACCESS_REQUIREMENTS.ACTAccessRequirement: case SUPPORTED_ACCESS_REQUIREMENTS.ManagedACTAccessRequirement: case SUPPORTED_ACCESS_REQUIREMENTS.TermsOfUseAccessRequirement: case SUPPORTED_ACCESS_REQUIREMENTS.SelfSignAccessRequirement: return false; default: return true; } }; function AccessRequirementList(_a) { var _this = this; var _b; var entityId = _a.entityId, onHide = _a.onHide, accessRequirementFromProps = _a.accessRequirementFromProps, renderAsModal = _a.renderAsModal, numberOfFilesAffected = _a.numberOfFilesAffected; var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken; var _c = (0, react_1.useState)(undefined), accessRequirements = _c[0], setAccessRequirements = _c[1]; var _d = (0, react_1.useState)(), user = _d[0], setUser = _d[1]; var _e = (0, react_1.useState)(), requestDataStep = _e[0], setRequestDataStep = _e[1]; var _f = (0, react_1.useState)(), managedACTAccessRequirement = _f[0], setManagedACTAccessRequirement = _f[1]; var _g = (0, react_1.useState)(''), researchProjectId = _g[0], setresearchProjectId = _g[1]; var _h = (0, react_1.useState)(), formSubmitRequestObject = _h[0], setFormSubmitRequestObject = _h[1]; var entityHeaderProps = { ids: [entityId], type: 'ENTITY_HEADER', }; var hasTokenChanged = (0, useCompare_1.default)(accessToken); var shouldUpdateData = hasTokenChanged || !accessRequirements; var entityInformation = (0, useGetInfoFromIds_1.default)(entityHeaderProps); (0, react_1.useEffect)(function () { var sortAccessRequirementByCompletion = function (requirements) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () { var statuses, accessRequirementStatuses, requirementsAndStatuses, sortedRequirementsAndStatuses; return (0, tslib_1.__generator)(this, function (_a) { switch (_a.label) { case 0: statuses = requirements.map(function (req) { return utils_1.SynapseClient.getAccessRequirementStatus(accessToken, req.id); }); return [4 /*yield*/, Promise.all(statuses)]; case 1: accessRequirementStatuses = _a.sent(); requirementsAndStatuses = requirements.map(function (req) { return { accessRequirement: req, accessRequirementStatus: accessRequirementStatuses.find(function (el) { return Number(el.accessRequirementId) === req.id; }), }; }); sortedRequirementsAndStatuses = (0, lodash_es_1.sortBy)(requirementsAndStatuses, function (reqAndStatus) { // if its true then it should come first, which means that it should be higher in the list // which is sorted ascendingly return -1 * Number(reqAndStatus.accessRequirementStatus.isApproved); }); return [2 /*return*/, sortedRequirementsAndStatuses]; } }); }); }; var getAccessRequirements = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () { var requirements, sortedAccessRequirements, sortedAccessRequirements, userProfile, err_1; return (0, tslib_1.__generator)(this, function (_a) { switch (_a.label) { case 0: _a.trys.push([0, 7, , 8]); if (!shouldUpdateData) { return [2 /*return*/]; } if (!!accessRequirementFromProps) return [3 /*break*/, 3]; return [4 /*yield*/, (0, SynapseClient_1.getAllAccessRequirements)(accessToken, entityId)]; case 1: requirements = _a.sent(); return [4 /*yield*/, sortAccessRequirementByCompletion(requirements)]; case 2: sortedAccessRequirements = _a.sent(); setAccessRequirements(sortedAccessRequirements); return [3 /*break*/, 5]; case 3: return [4 /*yield*/, sortAccessRequirementByCompletion(accessRequirementFromProps)]; case 4: sortedAccessRequirements = _a.sent(); setAccessRequirements(sortedAccessRequirements); _a.label = 5; case 5: return [4 /*yield*/, utils_1.SynapseClient.getUserProfile(accessToken)]; case 6: userProfile = _a.sent(); setUser(userProfile); return [3 /*break*/, 8]; case 7: err_1 = _a.sent(); console.error('Error on get access requirements: ', err_1); return [3 /*break*/, 8]; case 8: return [2 /*return*/]; } }); }); }; getAccessRequirements(); }, [accessToken, entityId, accessRequirementFromProps, shouldUpdateData]); // Using Boolean(value) converts undefined,null, 0,'',false -> false // one alternative to using Boolean(value) is the double bang operator !!value, // but doesn't ready well var isSignedIn = Boolean(accessToken); /** * Returns rendering for the access requirement. * * Only supports SelfSignAccessRequirement and TermsOfUseAccessRequirement * * @param {AccessRequirement} accessRequirement accessRequirement being rendered */ var renderAccessRequirement = function (accessRequirement, accessRequirementStatus) { switch (accessRequirement.concreteType) { case SUPPORTED_ACCESS_REQUIREMENTS.SelfSignAccessRequirement: return (react_1.default.createElement(SelfSignAccessRequirement_1.default, { accessRequirement: accessRequirement, accessRequirementStatus: accessRequirementStatus, user: user, onHide: onHide, entityId: entityId })); case SUPPORTED_ACCESS_REQUIREMENTS.TermsOfUseAccessRequirement: return (react_1.default.createElement(TermsOfUseAccessRequirement_1.default, { accessRequirement: accessRequirement, accessRequirementStatus: accessRequirementStatus, user: user, onHide: onHide, entityId: entityId })); case SUPPORTED_ACCESS_REQUIREMENTS.ManagedACTAccessRequirement: return (react_1.default.createElement(ManagedACTAccessRequirement_1.default, { accessRequirement: accessRequirement, accessRequirementStatus: accessRequirementStatus, user: user, onHide: onHide, entityId: entityId, requestDataStepCallback: requestDataStepCallback })); case SUPPORTED_ACCESS_REQUIREMENTS.ACTAccessRequirement: return (react_1.default.createElement(ACTAccessRequirement_1.default, { accessRequirement: accessRequirement, accessRequirementStatus: accessRequirementStatus, user: user, onHide: onHide, entityId: entityId })); // case not supported yet default: return undefined; } }; var requestDataStepCallback = function (props) { var managedACTAccessRequirement = props.managedACTAccessRequirement, step = props.step, researchProjectId = props.researchProjectId, formSubmitRequestObject = props.formSubmitRequestObject; if (managedACTAccessRequirement) { // required for step 1, 2 form setManagedACTAccessRequirement(managedACTAccessRequirement); } if (researchProjectId) { setresearchProjectId(researchProjectId); } if (formSubmitRequestObject) { setFormSubmitRequestObject(formSubmitRequestObject); } setRequestDataStep(step); }; var content = (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(ReactBootstrap.Modal.Header, { closeButton: true }, react_1.default.createElement(ReactBootstrap.Modal.Title, { className: "AccessRequirementList__title" }, "Data Access Request")), react_1.default.createElement(ReactBootstrap.Modal.Body, null, react_1.default.createElement("div", null, react_1.default.createElement("h4", { className: "AccessRequirementList__instruction AccessRequirementList__access" }, "Access For:"), react_1.default.createElement("span", { className: "AccessRequirementList__file-icon-container" }, react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { size: "lg", icon: "file", className: "AccessRequirementList__file" })), "\u00A0", numberOfFilesAffected && react_1.default.createElement("span", null, numberOfFilesAffected, " File(s)"), !numberOfFilesAffected && react_1.default.createElement("a", { className: "AccessRequirementList__register-text-link", href: getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Synapse:" + entityId }, (_b = entityInformation[0]) === null || _b === void 0 ? void 0 : _b.name), react_1.default.createElement("h4", { className: "AccessRequirementList__instruction", style: { marginTop: '3rem' } }, "What do I need to do?"), react_1.default.createElement("div", { className: "requirement-container" }, react_1.default.createElement(AccessApprovalCheckMark_1.default, { isCompleted: isSignedIn }), react_1.default.createElement("div", null, !isSignedIn && (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("p", { className: "AccessRequirementList__signin" }, react_1.default.createElement("a", { className: utils_1.SynapseConstants.SRC_SIGN_IN_CLASS + " SRC-boldText " }, "Sign in\u00A0"), "with a Sage Platform (Synapse) user account."), react_1.default.createElement("p", null, "If you do not have a Sage Account, you can", react_1.default.createElement("a", { className: "register-text-link bold-text", href: getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!RegisterAccount:0" }, "\u00A0Register for free.")))), isSignedIn && (react_1.default.createElement("p", null, "You have signed in with the Sage Platform (Synapse) user account ", ' ', react_1.default.createElement("b", null, user === null || user === void 0 ? void 0 : user.userName, "@synapse.org"))))), accessRequirements === null || accessRequirements === void 0 ? void 0 : accessRequirements.map(function (_a) { var accessRequirement = _a.accessRequirement, accessRequirementStatus = _a.accessRequirementStatus; return (react_1.default.createElement(react_1.default.Fragment, { key: accessRequirement.id }, renderAccessRequirement(accessRequirement, accessRequirementStatus))); }))))); var renderContent = content; if (renderAsModal) { switch (requestDataStep) { case 1: renderContent = (react_1.default.createElement(RequestDataAccessStep1_1.default, { managedACTAccessRequirement: managedACTAccessRequirement, requestDataStepCallback: requestDataStepCallback, onHide: function () { return onHide === null || onHide === void 0 ? void 0 : onHide(); } })); break; case 2: renderContent = (react_1.default.createElement(RequestDataAccessStep2_1.default, { user: user, researchProjectId: researchProjectId, managedACTAccessRequirement: managedACTAccessRequirement, entityId: entityId, requestDataStepCallback: requestDataStepCallback, onHide: function () { return onHide === null || onHide === void 0 ? void 0 : onHide(); } })); break; case 3: renderContent = (react_1.default.createElement(CancelRequestDataAccess_1.default, { formSubmitRequestObject: formSubmitRequestObject, onHide: function () { return onHide === null || onHide === void 0 ? void 0 : onHide(); } })); break; case 4: renderContent = (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(ReactBootstrap.Modal.Header, { closeButton: false }, react_1.default.createElement(ReactBootstrap.Modal.Title, { className: "AccessRequirementList__title" }, "Please Log In")), react_1.default.createElement(ReactBootstrap.Modal.Body, { className: 'AccessRequirementList login-modal ' }, react_1.default.createElement(Login_1.default, { sessionCallback: function () { window.location.reload(); } })))); break; case 5: renderContent = (react_1.default.createElement(RequestDataAccessSuccess_1.default, { onHide: function () { return onHide === null || onHide === void 0 ? void 0 : onHide(); } })); break; default: renderContent = content; } return (react_1.default.createElement(ReactBootstrap.Modal, { className: !requestDataStep ? 'bootstrap-4-backport AccessRequirementList' : 'bootstrap-4-backport AccessRequirementList modal-auto-height', onHide: function () { return onHide === null || onHide === void 0 ? void 0 : onHide(); }, show: true, animation: false, centered: true, scrollable: true, size: "lg" }, renderContent)); } return react_1.default.createElement("div", { className: "AccessRequirementList" }, renderContent); } exports.default = AccessRequirementList; //# sourceMappingURL=AccessRequirementList.js.map