@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

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

@@ -0,0 +1,399 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AsyncSearch = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
+
+var _find = _interopRequireDefault(require("lodash/fp/find"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiSelect = require("@instructure/ui-select");
+
+var _uiSpinner = require("@instructure/ui-spinner");
+
+var _index = _interopRequireDefault(require("../../../common/components/shared/TagWrapper/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+  renderTitle: "Loading",
+  size: "x-small"
+});
+
+var AsyncSearch = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AsyncSearch, _Component);
+
+  var _super = (0, _createSuper2.default)(AsyncSearch);
+
+  function AsyncSearch() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AsyncSearch);
+    _this = _super.apply(this, arguments);
+
+    _this.setInputRef = function (inputRef) {
+      _this.inputRef = inputRef;
+    };
+
+    _this.state = {
+      inputValue: '',
+      isShowingOptions: false,
+      isLoading: false,
+      highlightedOptionId: null,
+      shareableCourses: [],
+      shareableUsers: []
+    };
+
+    _this.handleShowOptions = function () {
+      _this.setState({
+        isShowingOptions: true
+      });
+    };
+
+    _this.handleHideOptions = function () {
+      var allOptions = [].concat((0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableCourses)), (0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableUsers))); // an option matching user input exists
+
+      if (allOptions.length === 1) {
+        var onlyOption = allOptions[0]; // automatically select the matching option
+
+        var label = onlyOption.label || onlyOption.fullName;
+
+        if (label.toLowerCase() === _this.state.inputValue.toLowerCase()) {
+          _this.changeSelectedOption([].concat((0, _toConsumableArray2.default)(_this.props.selectedOption.map(function (option) {
+            return option.uuid;
+          })), [onlyOption.uuid]));
+        }
+      }
+
+      _this.setState({
+        isShowingOptions: false,
+        highlightedOptionId: null,
+        shareableCourses: [],
+        shareableUsers: [],
+        inputValue: ''
+      });
+    };
+
+    _this.handleBlur = function () {
+      _this.setState({
+        highlightedOptionId: null
+      });
+    };
+
+    _this.handleHighlightOption = function (event, _ref) {
+      var id = _ref.id;
+      event.persist();
+
+      var option = _this.getOptionById(id);
+
+      if (!option) return;
+
+      _this.setState({
+        highlightedOptionId: id,
+        inputValue: event.type === 'keydown' ? option.fullName || option.title : _this.state.inputValue
+      });
+    };
+
+    _this.changeSelectedOption = function (optionIds) {
+      _this.props.onSelectionChange(optionIds.map(function (id) {
+        return _this.getOptionById(id);
+      }));
+    };
+
+    _this.handleSelectOption = function (event, _ref2) {
+      var id = _ref2.id;
+      if (!id || id === _quizCommon.SELECT_EMPTY_OPTION) return;
+
+      _this.changeSelectedOption([].concat((0, _toConsumableArray2.default)(_this.props.selectedOption.map(function (option) {
+        return option.uuid;
+      })), [id]));
+
+      _this.setState({
+        inputValue: '',
+        isShowingOptions: false
+      });
+    };
+
+    _this.handleInputChange = function (event) {
+      var value = event.target.value;
+      var longEnough = value && value.length >= _this.props.minChars;
+      var common = {
+        inputValue: value,
+        isShowingOptions: true,
+        shareableCourses: [],
+        shareableUsers: []
+      };
+
+      if (!!value && longEnough) {
+        _this.setState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, common), {}, {
+          isLoading: true,
+          highlightedOptionId: null
+        }));
+
+        _this.search(value);
+      } else {
+        _this.setState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, common), {}, {
+          isLoading: false
+        }));
+      }
+    };
+
+    _this.handleKeyDown = function (event) {
+      var inputValue = _this.state.inputValue;
+
+      if (event.keyCode === 8) {
+        // when backspace key is pressed
+        if (inputValue === '' && _this.props.selectedOption.length > 0) {
+          // remove last selected option, if input has no entered text
+          _this.changeSelectedOption(_this.props.selectedOption.slice(0, -1).map(function (option) {
+            return option.uuid;
+          }));
+
+          _this.setState({
+            highlightedOptionId: null
+          });
+        }
+      }
+    };
+
+    _this.dismissTag = function (id) {
+      _this.changeSelectedOption(_this.props.selectedOption.filter(function (option) {
+        return option.uuid !== id;
+      }).map(function (option) {
+        return option.uuid;
+      }));
+
+      _this.setState({
+        highlightedOptionId: null
+      }, function () {
+        _this.inputRef.focus();
+      });
+    };
+
+    _this.search = (0, _debounce.default)(_this.props.debounceDelay, function (value) {
+      // TODO add the promise cancellation for avoiding having disordered requests
+      _this.props.getShareableUsers(value).then(function (shareableUsers) {
+        var filteredUsers = _this.filterOptions(shareableUsers);
+
+        _this.setState({
+          shareableUsers: shareableUsers,
+          highlightedOptionId: filteredUsers.length ? filteredUsers[0].uuid : _this.state.highlightedOptionId,
+          isLoading: false
+        });
+      });
+
+      if (_this.props.improvedBankSharingEnabled) {
+        _this.props.getShareableCourses(value).then(function (shareableCourses) {
+          var filteredCourses = _this.filterOptions(shareableCourses);
+
+          _this.setState({
+            shareableCourses: shareableCourses,
+            highlightedOptionId: _this.state.highlightedOptionId ? _this.state.highlightedOptionId : filteredCourses.length ? filteredCourses[0].uuid : null,
+            isLoading: false
+          });
+        });
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(AsyncSearch, [{
+    key: "getOptionById",
+    value: function getOptionById(id) {
+      var user = (0, _find.default)({
+        uuid: id
+      }, this.state.shareableUsers);
+
+      if (user) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, user), {}, {
+          entityType: _quizCommon.SHARED_WITH_USER
+        });
+      }
+
+      var course = (0, _find.default)({
+        uuid: id
+      }, this.state.shareableCourses);
+
+      if (course) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, course), {}, {
+          entityType: _quizCommon.SHARED_WITH_COURSE
+        });
+      }
+
+      return (0, _find.default)({
+        uuid: id
+      }, this.props.selectedOption);
+    }
+  }, {
+    key: "renderTags",
+    value: function renderTags() {
+      var _this2 = this;
+
+      return this.props.selectedOption.map(function (option, index) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          key: option.uuid,
+          id: option.uuid,
+          index: index,
+          text: option.fullName || option.title,
+          onClick: _this2.dismissTag
+        });
+      });
+    }
+  }, {
+    key: "filterOptions",
+    value: function filterOptions(options) {
+      var _this3 = this;
+
+      return this.props.selectionFilter(options).filter(function (option) {
+        return !_this3.props.selectedOption.some(function (selected) {
+          return selected.uuid === option.uuid;
+        });
+      });
+    }
+  }, {
+    key: "renderPeopleOptions",
+    value: function renderPeopleOptions(people) {
+      var _this4 = this;
+
+      return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Group, {
+        key: _quizCommon.SHARED_WITH_USER,
+        renderLabel: (0, _formatMessage.default)('People')
+      }, people.map(function (person) {
+        return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+          // eslint-disable-next-line react/jsx-no-literals
+          "data-automation": "sdk-item-bank-option-user-".concat(person.uuid),
+          id: person.uuid,
+          key: person.uuid,
+          isHighlighted: person.uuid === _this4.state.highlightedOptionId
+        }, person.fullName);
+      }));
+    }
+  }, {
+    key: "renderCoursesOptions",
+    value: function renderCoursesOptions(courses) {
+      var _this5 = this;
+
+      return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Group, {
+        key: _quizCommon.SHARED_WITH_COURSE,
+        renderLabel: (0, _formatMessage.default)('Courses')
+      }, courses.map(function (course) {
+        return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+          // eslint-disable-next-line react/jsx-no-literals
+          "data-automation": "sdk-item-bank-option-course-".concat(course.uuid),
+          id: course.uuid,
+          key: course.uuid,
+          isHighlighted: course.uuid === _this5.state.highlightedOptionId
+        }, course.title);
+      }));
+    }
+  }, {
+    key: "emptyOption",
+    value: function emptyOption() {
+      var minCharsMessage = (0, _formatMessage.default)('Search term must be at least { minChars } characters', {
+        minChars: this.props.minChars
+      });
+
+      if (this.props.minChars > 1 && this.state.inputValue < this.props.minChars) {
+        return minCharsMessage;
+      }
+
+      return this.state.inputValue === '' ? (0, _formatMessage.default)('Write to search') : (0, _formatMessage.default)('No Results');
+    }
+  }, {
+    key: "renderOptions",
+    value: function renderOptions() {
+      var groups = [];
+      var people = this.filterOptions(this.state.shareableUsers);
+
+      if (people.length) {
+        groups.push(this.renderPeopleOptions(people));
+      }
+
+      var courses = this.filterOptions(this.state.shareableCourses);
+
+      if (courses.length) {
+        groups.push(this.renderCoursesOptions(courses));
+      }
+
+      return groups.length ? groups : /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+        id: _quizCommon.SELECT_EMPTY_OPTION,
+        key: _quizCommon.SELECT_EMPTY_OPTION
+      }, this.state.isLoading ? _ref3 : this.emptyOption());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          inputValue = _this$state.inputValue,
+          isShowingOptions = _this$state.isShowingOptions;
+      return /*#__PURE__*/_react.default.createElement(_uiSelect.Select, {
+        "data-automation": "sdk-item-bank-share-input",
+        renderLabel: (0, _formatMessage.default)('Share With'),
+        placeholder: (0, _formatMessage.default)('Enter name or login id...'),
+        inputValue: inputValue,
+        isShowingOptions: isShowingOptions,
+        inputRef: this.setInputRef,
+        onBlur: this.handleBlur,
+        onInputChange: this.handleInputChange,
+        onRequestShowOptions: this.handleShowOptions,
+        onRequestHideOptions: this.handleHideOptions,
+        onRequestHighlightOption: this.handleHighlightOption,
+        onRequestSelectOption: this.handleSelectOption,
+        renderBeforeInput: this.props.selectedOption.length > 0 ? this.renderTags() : null,
+        onKeyDown: this.handleKeyDown
+      }, this.renderOptions());
+    }
+  }]);
+  AsyncSearch.displayName = "AsyncSearch";
+  return AsyncSearch;
+}(_react.Component);
+
+exports.AsyncSearch = AsyncSearch;
+AsyncSearch.propTypes = {
+  debounceDelay: _propTypes.default.number,
+  improvedBankSharingEnabled: _propTypes.default.bool.isRequired,
+  minChars: _propTypes.default.number,
+  onSelectionChange: _propTypes.default.func.isRequired,
+  getShareableCourses: _propTypes.default.func.isRequired,
+  getShareableUsers: _propTypes.default.func.isRequired,
+  selectedOption: _propTypes.default.arrayOf(_propTypes.default.shape({
+    avatar: _propTypes.default.string,
+    fullName: _propTypes.default.string,
+    title: _propTypes.default.string,
+    uuid: _propTypes.default.string.isRequired
+  })).isRequired,
+  selectionFilter: _propTypes.default.func
+};
+AsyncSearch.defaultProps = {
+  debounceDelay: 500,
+  minChars: 1,
+  selectionFilter: function selectionFilter(value) {
+    return value;
+  }
+};
+var _default = AsyncSearch;
+exports.default = _default;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _banks = require("../../api/banks.js");
+
+var _sharedBanks = require("../../../common/actions/sharedBanks.js");
+
+var _featureCheck = require("../../../common/util/featureCheck.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state, ownProps) {
+  var sharedBanks = state.get('sharedBanks', (0, _immutable.Map)()).filter(function (sharedBank) {
+    return sharedBank.get('bankId') === ownProps.bank.id;
+  }).toList();
+  return {
+    improvedBankSharingEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
+    sharedBanks: sharedBanks
+  };
+}
+
+var mapDispatchToProps = {
+  shareBank: _banks.shareBank,
+  getSharedBanks: _banks.getSharedBanks,
+  updateSharedBankPermission: _banks.updateSharedBankPermission,
+  getBank: _banks.getBank,
+  removeSharedBank: _sharedBanks.removeSharedBank,
+  updateBank: _banks.updateBank
+};
+
+var _default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps))(_presenter.default);
+
+exports.default = _default;