@instructure/quiz-core 17.19.2 → 17.20.0

package/lib/banks/components/SharingModal/presenter.js

@@ -0,0 +1,530 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SharingModalPresenter = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _immutable = require("immutable");
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiGrid = require("@instructure/ui-grid");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiSimpleSelect = require("@instructure/ui-simple-select");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _ElementsForSelectors = _interopRequireDefault(require("../../../common/util/ElementsForSelectors.js"));
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
+
+var _index = _interopRequireDefault(require("./ShareList/index.js"));
+
+var _asyncSearch = _interopRequireDefault(require("./asyncSearch.js"));
+
+var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'ccksF',
+  template: function template(theme) {
+    return "\n\n.ccksF_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}");
+  },
+  'separator': 'ccksF_fatK'
+};
+
+var noop = function noop() {};
+
+var _ref5 = /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+  width: "auto"
+}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconAdminLine, {
+  size: "medium"
+}));
+
+var _ref6 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
+var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(SharingModalPresenter, _Component);
+
+  var _super = (0, _createSuper2.default)(SharingModalPresenter);
+
+  function SharingModalPresenter() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, SharingModalPresenter);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      accountPermission: null,
+      shares: (0, _immutable.List)(),
+      newEntities: (0, _immutable.List)(),
+      searchSelection: [],
+      searchPermission: _quizCommon.READ_ONLY,
+      entitiesWithChangedPermission: {}
+    };
+    _this.shareListRef = null;
+    _this.shareButtonRef = null;
+
+    _this.applicationElement = function () {
+      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
+    };
+
+    _this.checkForSharedBanks = function () {
+      var size = _this.props.sharedBanks.size;
+
+      if (size >= 0 && size !== _this.props.bank.sharedCount || size === 0) {
+        _this.props.getSharedBanks(_this.props.bank, _this.props.getUserInfo, _this.props.getCourseInfo);
+      } else {
+        // eslint-disable-next-line react/no-did-mount-set-state
+        _this.setState({
+          shares: _this.props.sharedBanks
+        });
+      }
+    };
+
+    _this.modalDismissCleanup = function () {
+      var focusCreateBank = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+
+      _this.props.onDismiss();
+
+      if (_this.props.modalTrigger && !focusCreateBank) {
+        _this.props.modalTrigger.focus();
+      } else {
+        setTimeout(_this.props.focusCreateBankButton, 100);
+      } // removes the creator's temporary sharedBank record
+
+
+      _this.props.removeSharedBank('-1');
+    };
+
+    _this.numEntitiesToRemove = function () {
+      var permissions = Object.values(_this.state.entitiesWithChangedPermission);
+      return permissions.reduce(function (count, val) {
+        return val === _quizCommon.REMOVED_ACCESS ? count + 1 : count;
+      }, 0);
+    };
+
+    _this.newEntitiesToSubmit = function () {
+      var newEntities = _this.state.newEntities.filter(function (entity) {
+        return _this.state.entitiesWithChangedPermission[entity.get('id')] !== _quizCommon.REMOVED_ACCESS;
+      }); // special case if the creator tries to change their own permissions before
+      // first share, since they don't have a SharedBank record to update
+
+
+      var newCreatorPerm = _this.state.entitiesWithChangedPermission['-1'];
+
+      if (newCreatorPerm && newCreatorPerm !== _quizCommon.CAN_EDIT) {
+        var creatorSharedBank = _this.props.sharedBanks.find(function (sharedBank) {
+          return sharedBank.get('id') == '-1';
+        });
+
+        newEntities = newEntities.push((0, _immutable.Map)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, creatorSharedBank.toJS()), {}, {
+          permission: newCreatorPerm
+        })));
+      }
+
+      return newEntities;
+    };
+
+    _this.isSharedWithAccount = function () {
+      var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this.state;
+      return [_quizCommon.READ_ONLY, _quizCommon.CAN_EDIT].includes(state.accountPermission);
+    };
+
+    _this.handleDismiss = function (e) {
+      _this.props.updateSharedCount(null);
+
+      _this.modalDismissCleanup();
+    };
+
+    _this.handleSubmit = function () {
+      // calls the sharedBank api with the new entities you shared the current bank with
+      var promises = [];
+
+      if (_this.state.accountPermission !== _this.props.bank.accountPermission) {
+        var updatedBank = _this.props.bank.set('accountPermission', _this.state.accountPermission);
+
+        promises.push(_this.props.updateBank(updatedBank));
+      }
+
+      _this.newEntitiesToSubmit().forEach(function (entity) {
+        _this.props.onShare(entity.toJS());
+
+        var sharedBank = {
+          entityType: entity.get('entityType'),
+          entityId: entity.get('entityId'),
+          title: entity.get('title'),
+          bankId: _this.props.bank.id,
+          permission: entity.get('permission')
+        };
+        promises.push(_this.props.shareBank(sharedBank, _this.props.getUserInfo));
+      }); // call the update api if any shared bank permission was updated
+
+
+      Object.entries(_this.state.entitiesWithChangedPermission).forEach(function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            sharedBankId = _ref2[0],
+            permission = _ref2[1];
+
+        var sharedBank = _this.props.sharedBanks.find(function (sharedBank) {
+          return sharedBank.get('id') === sharedBankId;
+        });
+
+        if (sharedBank && sharedBank.get('permission') !== permission && sharedBankId != '-1') {
+          promises.push(_this.props.updateSharedBankPermission(_this.props.bank.id, sharedBankId, permission));
+        }
+      }); // waits till all the calls to the shareBank and updateSharedBank apis have completed
+
+      Promise.all(promises).then(function (values) {
+        // calls getBank for the current bank to update the sharedCount
+        _this.props.getBank(_this.props.bank.id);
+      });
+
+      _this.setState({
+        newEntities: (0, _immutable.List)()
+      });
+
+      _this.modalDismissCleanup(!!_this.numEntitiesToRemove());
+    };
+
+    _this.handleSearchSelectionChange = function (searchSelection) {
+      _this.setState({
+        searchSelection: searchSelection
+      });
+    };
+
+    _this.updateEntitiesCount = function () {
+      // state.shares is a list containing everyone in the list,
+      _this.props.updateSharedCount(_this.state.shares.size - _this.numEntitiesToRemove());
+    };
+
+    _this.handleEntityRemove = function (id, undoRemove) {
+      var originalEntity = _this.props.sharedBanks.find(function (sb) {
+        return sb.get('id') == id;
+      }) || (0, _immutable.Map)();
+      var originalPermission = originalEntity.get('permission', _quizCommon.CAN_EDIT);
+      var permission = undoRemove ? originalPermission : _quizCommon.REMOVED_ACCESS;
+
+      _this.setState(function (prevState) {
+        var sharesIndex = prevState.shares.findIndex(function (entity) {
+          return entity.get('id') == id;
+        });
+        var newEntitiesIndex = prevState.newEntities.findIndex(function (entity) {
+          return entity.get('id') == id;
+        });
+        var removedNewEntity = newEntitiesIndex > -1;
+        var newShares = removedNewEntity ? prevState.shares.delete(sharesIndex) : prevState.shares.setIn([sharesIndex, 'permission'], permission);
+        return {
+          shares: newShares,
+          newEntities: prevState.newEntities.delete(newEntitiesIndex),
+          entitiesWithChangedPermission: Object.assign({}, prevState.entitiesWithChangedPermission, (0, _defineProperty2.default)({}, id, permission))
+        };
+      }, _this.updateEntitiesCount);
+    };
+
+    _this.handleSearchPermissionChange = function (e, _ref3) {
+      var value = _ref3.value;
+      return _this.setState({
+        searchPermission: value
+      });
+    };
+
+    _this.handleSearchFilter = function (searchResults) {
+      return searchResults.filter(function (result) {
+        return !_this.state.shares.some(function (entity) {
+          return entity.get('entityId') === result.uuid;
+        }) && (result.uuid !== _this.props.bank.creator || _this.props.bank.sharedCount > 0);
+      });
+    };
+
+    _this.handleShare = function () {
+      var newEntities = (0, _immutable.List)(_this.state.searchSelection.map(function (entity) {
+        return (0, _immutable.Map)({
+          id: entity.uuid,
+          entityType: entity.entityType,
+          entityId: entity.uuid,
+          title: entity.fullName || entity.title,
+          avatar: entity.avatar,
+          email: entity.email,
+          permission: _this.state.searchPermission
+        });
+      }));
+
+      _this.setState({
+        searchSelection: [],
+        shares: newEntities.concat(_this.state.shares),
+        newEntities: newEntities.concat(_this.state.newEntities)
+      }, _this.updateEntitiesCount);
+    };
+
+    _this.handleEntityPermissionChange = function (entity, permission) {
+      _this.setState(function (prevState) {
+        var index = prevState.shares.findIndex(function (share) {
+          return share.get('id') === entity.get('id');
+        });
+        return {
+          shares: prevState.shares.setIn([index, 'permission'], permission),
+          entitiesWithChangedPermission: Object.assign({}, prevState.entitiesWithChangedPermission, (0, _defineProperty2.default)({}, entity.get('id'), permission))
+        };
+      });
+    };
+
+    _this.toggleAccountShare = function (event) {
+      _this.setState(function (prevState) {
+        return {
+          accountPermission: _this.isSharedWithAccount(prevState) ? _quizCommon.REMOVED_ACCESS : _quizCommon.READ_ONLY
+        };
+      });
+    };
+
+    _this.handleAccountPermissionChange = function (e, _ref4) {
+      var value = _ref4.value;
+      return _this.setState({
+        accountPermission: value
+      });
+    };
+
+    _this.handleShareListRef = function (node) {
+      _this.shareListRef = node;
+    };
+
+    _this.handleShareButtonRef = function (node) {
+      _this.shareButtonRef = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(SharingModalPresenter, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        accountPermission: this.props.bank.accountPermission,
+        shares: this.props.sharedBanks
+      });
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        accountPermission: nextProps.bank.accountPermission,
+        shares: nextProps.sharedBanks
+      });
+    } // =============
+    //   HELPERS
+    // =============
+
+  }, {
+    key: "renderAccountPermissions",
+    // =============
+    //   RENDERING
+    // =============
+    value: function renderAccountPermissions() {
+      var _this$props = this.props,
+          currentUser = _this$props.currentUser,
+          improvedBankSharingEnabled = _this$props.improvedBankSharingEnabled;
+      var roles = currentUser && currentUser.enrollment_names || [];
+
+      if (improvedBankSharingEnabled && roles.includes('admin')) {
+        return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "div",
+          margin: "0 0 medium 0"
+        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+          colSpacing: "small"
+        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, _ref5, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "div",
+          padding: "0 0 x-small 0"
+        }, currentUser && currentUser.account_name || (0, _formatMessage.default)('Account')), /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+          label: (0, _formatMessage.default)('Share with Institution'),
+          variant: "toggle",
+          value: "accountPermission",
+          checked: this.isSharedWithAccount(),
+          onChange: this.toggleAccountShare
+        })), this.isSharedWithAccount() && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+          width: "auto"
+        }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+          onChange: this.handleAccountPermissionChange,
+          value: this.state.accountPermission,
+          renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for account'))
+        }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+          id: "sharing-modal-account-perm-select-option-can-view",
+          value: _quizCommon.READ_ONLY
+        }, (0, _formatMessage.default)('Can view')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+          id: "sharing-modal-account-perm-select-option-can-edit",
+          value: _quizCommon.CAN_EDIT
+        }, (0, _formatMessage.default)('Can edit')))))));
+      }
+    }
+  }, {
+    key: "renderSearchSection",
+    value: function renderSearchSection() {
+      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        vAlign: "bottom",
+        colSpacing: "small"
+      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement(_asyncSearch.default, {
+        getShareableCourses: this.props.getShareableCourses,
+        getShareableUsers: this.props.getShareableUsers,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
+        minChars: this.props.minChars,
+        onSelectionChange: this.handleSearchSelectionChange,
+        selectedOption: this.state.searchSelection,
+        selectionFilter: this.handleSearchFilter
+      })), this.props.improvedBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: "auto"
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        onChange: this.handleSearchPermissionChange,
+        value: this.state.searchPermission,
+        renderLabel: (0, _formatMessage.default)('Access')
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        id: "sharing-modal-search-section-select-option-can-view",
+        value: _quizCommon.READ_ONLY
+      }, (0, _formatMessage.default)('Can view')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        id: "sharing-modal-search-section-select-option-can-edit",
+        value: _quizCommon.CAN_EDIT
+      }, (0, _formatMessage.default)('Can edit')))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: "auto"
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        "data-automation": "sdk-shared-bank-add-user-button",
+        ref: this.handleShareButtonRef,
+        onClick: this.handleShare,
+        variant: this.state.searchSelection.length ? 'success' : 'default'
+      }, (0, _formatMessage.default)('Add')))));
+    }
+  }, {
+    key: "renderEntitiesSection",
+    value: function renderEntitiesSection() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        ref: this.handleShareListRef,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
+        canEdit: this.props.bank.canEdit(),
+        newEntities: this.state.newEntities,
+        sharedBanks: this.props.sharedBanks,
+        shares: this.state.shares,
+        onPermissionChange: this.handleEntityPermissionChange,
+        onEntityRemove: this.handleEntityRemove,
+        entitiesWithChangedPermission: this.state.entitiesWithChangedPermission
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.isOpen,
+        onDismiss: this.handleDismiss,
+        size: "medium",
+        label: (0, _formatMessage.default)('Sharing'),
+        shouldCloseOnDocumentClick: true,
+        onOpen: this.checkForSharedBanks
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, this.props.bank.title), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.handleDismiss,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderAccountPermissions(), this.props.bank.canEdit() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderSearchSection(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.separator
+      })), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref6), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        "data-automation": "sdk-shared-bank-cancel-button",
+        variant: "light",
+        onClick: this.handleDismiss,
+        margin: "0 x-small 0 0"
+      }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        "data-automation": "sdk-shared-bank-done-button",
+        variant: "primary",
+        onClick: this.handleSubmit,
+        margin: "0 x-small 0 0"
+      }, (0, _formatMessage.default)('Done'))));
+    }
+  }]);
+  SharingModalPresenter.displayName = "SharingModalPresenter";
+  return SharingModalPresenter;
+}(_react.Component), _class2.propTypes = {
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  bank: _reactImmutableProptypes.default.record.isRequired,
+  currentUser: _propTypes.default.shape({
+    email: _propTypes.default.string,
+    enrollment_names: _propTypes.default.arrayOf(_propTypes.default.string),
+    full_name: _propTypes.default.string,
+    uuid: _propTypes.default.string,
+    account_name: _propTypes.default.string
+  }),
+  focusCreateBankButton: _propTypes.default.func.isRequired,
+  getBank: _propTypes.default.func.isRequired,
+  getShareableCourses: _propTypes.default.func.isRequired,
+  getCourseInfo: _propTypes.default.func.isRequired,
+  getShareableUsers: _propTypes.default.func.isRequired,
+  getSharedBanks: _propTypes.default.func.isRequired,
+  getUserInfo: _propTypes.default.func.isRequired,
+  improvedBankSharingEnabled: _propTypes.default.bool,
+  isOpen: _propTypes.default.bool,
+  minChars: _propTypes.default.number,
+  modalTrigger: _propTypes.default.node,
+  // html or react element that triggered this Modal
+  onDismiss: _propTypes.default.func,
+  onShare: _propTypes.default.func,
+  removeSharedBank: _propTypes.default.func.isRequired,
+  shareBank: _propTypes.default.func.isRequired,
+  sharedBanks: _reactImmutableProptypes.default.list,
+  updateBank: _propTypes.default.func.isRequired,
+  updateSharedBankPermission: _propTypes.default.func.isRequired,
+  updateSharedCount: _propTypes.default.func
+}, _class2.defaultProps = {
+  bank: null,
+  currentUser: null,
+  improvedBankSharingEnabled: false,
+  isOpen: false,
+  minChars: void 0,
+  modalTrigger: null,
+  onDismiss: noop,
+  onShare: function onShare() {},
+  sharedBanks: (0, _immutable.List)(),
+  updateSharedCount: Function.prototype
+}, _temp)) || _class);
+exports.SharingModalPresenter = SharingModalPresenter;
+var _default = SharingModalPresenter;
+exports.default = _default;

package/lib/banks/components/SharingModal/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      borders = _ref.borders,
+      spacing = _ref.spacing;
+  return {
+    separatorColor: colors.tiara,
+    separatorBorderWidth: borders.widthSmall,
+    separatorMargin: spacing.medium
+  };
+}