@instructure/quiz-core 17.19.2-rc.4 → 17.19.3-rc.1

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

@@ -0,0 +1,390 @@
+"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.BanksList = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _uiList = require("@instructure/ui-list");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
+
+var _index = _interopRequireDefault(require("../../../common/components/shared/IfFeature/index.js"));
+
+var _index2 = _interopRequireDefault(require("../EditBankModal/index.js"));
+
+var _index3 = _interopRequireDefault(require("../SharingModal/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dgJJi',
+  template: function template(theme) {
+    return "\n\n.dgJJi_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.dgJJi_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.dgJJi_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.dgJJi_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.dgJJi_cCNg{align-items:center;display:flex;flex-direction:row;margin:").concat(theme.bankOptionsMargin || 'inherit', " 0}\n\n.dgJJi_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.dgJJi_AHIw{display:block}\n\n.dgJJi_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}");
+  },
+  'bankRow': 'dgJJi_dIMK',
+  'bankInfo': 'dgJJi_Zupb',
+  'bankTitle': 'dgJJi_qnWp',
+  'bankDetails': 'dgJJi_ciks',
+  'bankOptions': 'dgJJi_cCNg',
+  'bankOptionIcon': 'dgJJi_bISW',
+  'deleteAlert': 'dgJJi_AHIw',
+  'deletePreface': 'dgJJi_eTBd'
+};
+var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(BanksList, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(BanksList);
+
+  function BanksList() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BanksList);
+
+    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 = {
+      sharingModalOpen: false,
+      sharingModalBank: null,
+      sharingCount: null,
+      countedBank: null
+    };
+    _this.sharingButtons = [];
+
+    _this.openModal = function (bank) {
+      return function () {
+        _this.props.openModal([_quizCommon.EDIT_BANK_MODAL, bank.id].join(':'));
+      };
+    };
+
+    _this.deleteBank = function (bankId) {
+      _this.props.deleteBank(bankId);
+
+      setTimeout(_this.props.focusCreateBankButton, 100);
+    };
+
+    _this.openDeleteBankModal = function (bank) {
+      return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _this$props, currentUser, getUserInfo, deletingOwnBank, creatorFullName, resp, confirmBody;
+
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this$props = _this.props, currentUser = _this$props.currentUser, getUserInfo = _this$props.getUserInfo;
+                deletingOwnBank = currentUser && currentUser.uuid === bank.creator;
+
+                if (deletingOwnBank) {
+                  _context.next = 7;
+                  break;
+                }
+
+                _context.next = 5;
+                return getUserInfo(bank.creator);
+
+              case 5:
+                resp = _context.sent;
+                creatorFullName = resp && resp[0].fullName;
+
+              case 7:
+                confirmBody = /*#__PURE__*/_react.default.createElement("div", null, !deletingOwnBank && (creatorFullName ? (0, _formatMessage.default)('You are about to delete an Item Bank that you did not create. This Item Bank was created by {creator}, proceed with caution.', {
+                  creator: creatorFullName
+                }) : (0, _formatMessage.default)('You are about to delete an Item Bank that you did not create. Proceed with caution.')), /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+                  variant: "error",
+                  padding: "0"
+                }, /*#__PURE__*/_react.default.createElement("div", {
+                  className: styles.deleteAlert
+                }, /*#__PURE__*/_react.default.createElement("div", {
+                  className: styles.deletePreface
+                }, (0, _formatMessage.default)('Once deleted, items from this bank:')), /*#__PURE__*/_react.default.createElement(_uiList.List, null, /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will no longer be accessible to others who currently have shared access')), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, _formatMessage.default.rich('will <0>NOT</0> be removed from any assessments', [function (_ref2) {
+                  var children = _ref2.children;
+                  return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+                    weight: "bold",
+                    key: "0"
+                  }, children);
+                }])), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will lose their statistical link in reporting (if they were part of an assessment)')), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will no longer be available to any assessments attempting a random/batch pull of items (removing the pull will resolve the issue)'))))));
+
+                _this.props.withConfirm((0, _partial.default)(_this.deleteBank, bank.id), {
+                  text: confirmBody,
+                  title: (0, _formatMessage.default)('Delete Bank'),
+                  continueText: (0, _formatMessage.default)('Delete'),
+                  continueVariant: 'danger',
+                  size: 'medium'
+                });
+
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+    };
+
+    _this.updateSharedCount = function (count) {
+      _this.setState({
+        sharingCount: count
+      });
+    };
+
+    _this.openSharingModal = function (bank) {
+      return function () {
+        _this.setState({
+          sharingModalOpen: true,
+          sharingModalBank: bank,
+          sharingCount: bank.sharedCount,
+          countedBank: bank.id
+        });
+      };
+    };
+
+    _this.handleSharingModalDismiss = function () {
+      _this.setState({
+        sharingModalOpen: false,
+        sharingModalBank: null
+      });
+    };
+
+    _this.handleSharingButtonRef = function (bankId) {
+      return function (node) {
+        _this.sharingButtons[bankId] = node;
+      };
+    };
+
+    _this.currentBankCount = function (bank) {
+      var _this$state = _this.state,
+          countedBank = _this$state.countedBank,
+          sharingCount = _this$state.sharingCount;
+
+      if (countedBank === bank.id && Number.isInteger(sharingCount)) {
+        return sharingCount;
+      }
+
+      return bank.sharedCount;
+    };
+
+    _this.renderBankInfo = function (bank) {
+      var navigateToBank = function navigateToBank(bankId) {
+        return function () {
+          return _this.props.navigateToBank(bankId);
+        };
+      };
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankInfo,
+        "data-automation": "sdk-bank-info",
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankTitle
+      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        onClick: navigateToBank(bank.id),
+        theme: {
+          color: _this.theme.bankTitleLinkColor,
+          hoverColor: _this.theme.bankTitleLinkHoverColor
+        },
+        "data-automation": "sdk-banks-list-bank-title-link"
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        as: "h2",
+        level: "reset",
+        "data-automation": "sdk-banks-list-bank-title-heading"
+      }, bank.title))), _this.renderDetails(bank));
+    };
+
+    _this.renderBankOptions = function (bank) {
+      var bankEditOptions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: _this.openModal(bank),
+        name: "Edit",
+        size: "small",
+        variant: "icon",
+        "data-automation": "sdk-edit-bank-button",
+        icon: _uiIcons.IconEditLine,
+        title: (0, _formatMessage.default)('Edit bank {name}', {
+          name: bank.title
+        })
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit bank {name}', {
+        name: bank.title
+      }))), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: _this.openDeleteBankModal(bank),
+        name: "Delete",
+        size: "small",
+        variant: "icon",
+        "data-automation": "sdk-delete-bank-button",
+        icon: _uiIcons.IconTrashLine,
+        title: (0, _formatMessage.default)('Delete bank {name}', {
+          name: bank.title
+        })
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Delete bank {name}', {
+        name: bank.title
+      }))));
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankOptions
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        name: "item_bank_sharing"
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: _this.openSharingModal(bank),
+        name: "Share",
+        size: "small",
+        variant: "icon",
+        "data-automation": "sdk-shared-bank-share-link",
+        icon: _uiIcons.IconShareSolid,
+        title: (0, _formatMessage.default)('Share bank {name}', {
+          name: bank.title
+        })
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Share bank {name}', {
+        name: bank.title
+      })))), bank.canEdit() ? bankEditOptions : null);
+    };
+
+    _this.renderBank = function (bank) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: bank.id,
+        className: styles.bankRow,
+        "data-automation": "sdk-banks-list-bank-row"
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        workingBank: bank.getWorkingInstance()
+      }), _this.renderBankInfo(bank), _this.renderBankOptions(bank));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(BanksList, [{
+    key: "renderDetails",
+    value: function renderDetails(bank) {
+      var numStimuli = bank.entryCount - bank.itemEntryCount;
+      var separator = ' | ';
+
+      var lastUsedInfo = bank.lastUsed() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), (0, _formatMessage.default)('Last used { lastUsedDate }', {
+        lastUsedDate: this.formatDateMedium(bank.lastUsed())
+      }));
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankDetails,
+        "data-automation": "sdk-banks-list-bank-details"
+      }, /*#__PURE__*/_react.default.createElement("div", null, (0, _formatMessage.default)('Updated { updatedDate }', {
+        updatedDate: this.formatDateMedium(bank.updatedAt())
+      }), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), (0, _formatMessage.default)("{\n              count, plural,\n              one {# Question Total}\n              other {# Questions Total}\n            }", {
+        count: bank.itemEntryCount
+      }), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), (0, _formatMessage.default)("{numQuestions} Associated Across\n              {numStimuli, plural,\n              one {# Stimulus}\n              other {# Stimuli}\n            }", {
+        numQuestions: 0,
+        numStimuli: numStimuli
+      }), lastUsedInfo));
+    }
+  }, {
+    key: "renderSharingModal",
+    value: function renderSharingModal() {
+      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+        appContainer: this.props.appContainer,
+        bank: this.state.sharingModalBank,
+        currentUser: this.props.currentUser,
+        focusCreateBankButton: this.props.focusCreateBankButton,
+        getCourseInfo: this.props.getCourseInfo,
+        getUserInfo: this.props.getUserInfo,
+        isOpen: this.state.sharingModalOpen,
+        minChars: this.props.minChars,
+        modalTrigger: this.sharingButtons[this.state.sharingModalBank.id],
+        onDismiss: this.handleSharingModalDismiss,
+        onShare: this.props.onShare,
+        getShareableCourses: this.props.getShareableCourses,
+        getShareableUsers: this.props.getShareableUsers,
+        updateSharedCount: this.updateSharedCount
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.banks.toArray().map(this.renderBank));
+    }
+  }]);
+  BanksList.displayName = "BanksList";
+  return BanksList;
+}((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  banks: _reactImmutableProptypes.default.list.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,
+  deleteBank: _propTypes.default.func.isRequired,
+  getCourseInfo: _propTypes.default.func,
+  getUserInfo: _propTypes.default.func,
+  getShareableCourses: _propTypes.default.func,
+  getShareableUsers: _propTypes.default.func,
+  minChars: _propTypes.default.number,
+  navigateToBank: _propTypes.default.func.isRequired,
+  onShare: _propTypes.default.func,
+  openModal: _propTypes.default.func.isRequired,
+  withConfirm: _propTypes.default.func.isRequired,
+  locale: _propTypes.default.string,
+  timezone: _propTypes.default.string
+}, _class2.defaultProps = {
+  currentUser: null,
+  getCourseInfo: null,
+  getUserInfo: null,
+  getShareableCourses: null,
+  getShareableUsers: null,
+  minChars: void 0,
+  locale: null,
+  timezone: null,
+  onShare: function onShare() {}
+}, _class2.contextTypes = {
+  locale: _propTypes.default.string,
+  timezone: _propTypes.default.string
+}, _temp)) || _class);
+exports.BanksList = BanksList;
+var _default = BanksList;
+exports.default = _default;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var borders = _ref.borders,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      spacing = _ref.spacing;
+  return {
+    bankRowBorderWidth: borders.widthSmall,
+    bankRowBorderColor: colors.tiara,
+    bankInfoMargin: spacing.small,
+    bankTitleFontSize: typography.fontSizeSmall,
+    bankTitlePadding: spacing.xSmall,
+    bankTitleLinkColor: colors.licorice,
+    bankTitleLinkHoverColor: colors.licorice,
+    bankDetailsColor: colors.ash,
+    bankDetailsFontSize: typography.fontSizeXSmall,
+    bankOptionsMargin: spacing.small,
+    BankOptionIconMargin: spacing.xSmall,
+    BankOptionIconFontSize: typography.fontSizeMedium,
+    deletePrefaceMargin: spacing.xxSmall
+  };
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = void 0;
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _banks = require("../../api/banks.js");
+
+var _bankEntries = require("../../api/bankEntries.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var modalActions = _interopRequireWildcard(require("../../../common/actions/modal.js"));
+
+var _banks2 = require("../../../common/actions/banks.js");
+
+var uiActions = _interopRequireWildcard(require("../../../common/actions/ui.js"));
+
+var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _modalHelpers = require("../../../common/util/modalHelpers.js");
+
+function mapStateToProps(state, props) {
+  var selectedBankOption = state.getIn(['ui', _quizCommon.COPY_MOVE_BANK_ENTRY_MODAL_BANK_SELECTION]);
+  var selectedBank = selectedBankOption && new _Bank.default(state.getIn(['banks', selectedBankOption]));
+  var modalKey = [_quizCommon.COPY_MOVE_BANK_ENTRY_MODAL, props.entryType, props.entryId].join(':');
+  return {
+    selectedBank: selectedBank,
+    modalTrigger: (0, _modalHelpers.getModalTrigger)(state),
+    keepCopy: state.getIn(['ui', _quizCommon.COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY], true),
+    modalOpen: state.getIn(['modal', 'isOpen']) === modalKey
+  };
+}
+
+var mapDispatchToProps = {
+  closeModal: modalActions.closeModal,
+  createBank: _banks.createBank,
+  createBankEntry: _bankEntries.createBankEntry,
+  updateBankEntry: _bankEntries.updateBankEntry,
+  disassociateBankEntry: _banks2.disassociateEntry,
+  uiSet: uiActions.set
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;