@instructure/quiz-core 17.19.2 → 17.20.0

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

@@ -0,0 +1,763 @@
+"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.BankEntry = 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 _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _immutable = _interopRequireDefault(require("immutable"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _differenceWith = _interopRequireDefault(require("lodash/differenceWith"));
+
+var _intersectionWith = _interopRequireDefault(require("lodash/intersectionWith"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _keyBy = _interopRequireDefault(require("lodash/keyBy"));
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiBreadcrumb = require("@instructure/ui-breadcrumb");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../common/components/resources/entry/EntrySave/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../common/components/resources/item/ItemEdit/index.js"));
+
+var _index3 = _interopRequireDefault(require("../../../building/components/resources/ItemFeedbackModal/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../../common/components/resources/item/ItemShow/index.js"));
+
+var _index5 = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
+
+var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
+
+var _index6 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusEditInfo/index.js"));
+
+var _index7 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusShowInfo/index.js"));
+
+var _index8 = _interopRequireDefault(require("../../../common/components/shared/TagSuggestSelect/index.js"));
+
+var _index9 = _interopRequireDefault(require("../../../common/components/resources/WarningWrapper/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _items = require("../../../building/api/items.js");
+
+var _stimuli = require("../../../building/api/stimuli.js");
+
+var _warningHelpers = require("../../../common/util/warningHelpers.js");
+
+var _index10 = _interopRequireDefault(require("../NavWrapper/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dhhIK',
+  template: function template(theme) {
+    return "\n\n.dhhIK_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.dhhIK_blfJ{margin-bottom:").concat(theme.entryRowMargin || 'inherit', "}\n\n.dhhIK_dlpV{color:").concat(theme.headerRowColor || 'inherit', ";flex-direction:row;justify-content:space-between;padding:").concat(theme.headerRowPadding || 'inherit', "}\n\n.dhhIK_dlpV,.dhhIK_cKlw{align-items:flex-start;display:flex}\n\n.dhhIK_cKlw{flex:0 0 auto;flex-direction:column;margin-right:").concat(theme.leftHeaderMargin || 'inherit', "}\n\n.dhhIK_fAhB{font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.dhhIK_fsuY{align-items:center;background-color:").concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPaddingTopBottom || 'inherit', " ").concat(theme.headerPaddingLeftRight || 'inherit', ";vertical-align:middle}\n\n.dhhIK_IoDT{padding-left:").concat(theme.rightHeaderPaddingLeft || 'inherit', ";text-align:right}\n\n[dir=ltr] .dhhIK_IoDT,[dir=rtl] .dhhIK_IoDT{text-align:right}\n\n.dhhIK_cjWK,.dhhIK_bVuu,.dhhIK_ekxs{display:flex;flex-direction:row}\n\n.dhhIK_cjWK{padding-bottom:").concat(theme.footerPaddingBottom || 'inherit', ";padding-top:").concat(theme.footerPaddingTop || 'inherit', ";text-align:left}\n\n[dir=ltr] .dhhIK_cjWK,[dir=rtl] .dhhIK_cjWK{text-align:left}\n\n.dhhIK_ekxs{flex:8 0 0;justify-content:flex-end;padding-left:").concat(theme.rightFooterPaddingLeftRight || 'inherit', ";padding-right:").concat(theme.rightFooterPaddingLeftRight || 'inherit', "}\n\n.dhhIK_eNDu{border-bottom:").concat(theme.entryEditBorderWidth || 'inherit', " solid ").concat(theme.entryEditBorderColor || 'inherit', "}");
+  },
+  'content': 'dhhIK_caGd',
+  'entryRow': 'dhhIK_blfJ',
+  'headerRow': 'dhhIK_dlpV',
+  'leftHeader': 'dhhIK_cKlw',
+  'headerText': 'dhhIK_fAhB',
+  'header': 'dhhIK_fsuY',
+  'rightHeader': 'dhhIK_IoDT',
+  'footer': 'dhhIK_cjWK',
+  'leftFooter': 'dhhIK_bVuu',
+  'rightFooter': 'dhhIK_ekxs',
+  'entryEdit': 'dhhIK_eNDu'
+};
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
+var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BankEntry, _Component);
+
+  var _super = (0, _createSuper2.default)(BankEntry);
+
+  function BankEntry() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BankEntry);
+
+    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 = {
+      validationErrorsFromApi: {}
+    };
+
+    _this.setNavToBankRef = function (node) {
+      _this.navToBankRef = node;
+    };
+
+    _this.navigateToBank = function () {
+      _this.props.navigateToBank(_this.props.bankId);
+    };
+
+    _this.handleTitleChange = function (e) {
+      _this.props.changeItemTitle(_this.props.entry.id, e.target.value);
+    };
+
+    _this.clearValidationErrorsFromApi = function (inputId) {
+      if (inputId === _quizCommon.CLEAR_ALL_INPUT_VALIDATION_ERRORS) {
+        _this.setState({
+          validationErrorsFromApi: {}
+        });
+      }
+
+      if (_this.state.validationErrorsFromApi[inputId]) {
+        var newErrors = Object.assign({}, _this.state.validationErrorsFromApi);
+        delete newErrors[inputId];
+
+        _this.setState({
+          validationErrorsFromApi: newErrors
+        });
+      }
+    };
+
+    _this.submitHandler = /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!_this.props.entry.isTemporary()) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 4;
+              return _this.temporarySubmit();
+
+            case 4:
+              _context.next = 8;
+              break;
+
+            case 6:
+              _context.next = 8;
+              return _this.normalSubmit();
+
+            case 8:
+              _context.next = 16;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+
+              if (!_context.t0.validationErrorsFromApi) {
+                _context.next = 15;
+                break;
+              }
+
+              _this.setState({
+                validationErrorsFromApi: _context.t0.validationErrorsFromApi
+              }); // Throwing an error here would cause an alert banner to show,
+              // which we don't want in the case of a simple input validation error
+
+
+              return _context.abrupt("return", _quizCommon.API_INPUT_VALIDATION_ERROR);
+
+            case 15:
+              throw _context.t0;
+
+            case 16:
+              _this.navigateToBank();
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+
+    _this.clearChanges = function () {
+      _this.clearValidationErrorsFromApi(_quizCommon.CLEAR_ALL_INPUT_VALIDATION_ERRORS);
+
+      if (!_this.props.entry) return;
+
+      if (_this.props.entry.isTemporary()) {
+        _this.props.clearTemporaryBankItem(_this.props.bankId);
+      }
+
+      _this.props.clearModifications('items', _this.props.entry.id);
+
+      _this.props.setPendingDeletionTagAssociations(_this.props.bankEntry.entryType, _this.props.entry.id, []);
+
+      _this.props.setPendingAdditionTagAssociations(_this.props.bankEntry.entryType, _this.props.entry.id, []);
+    };
+
+    _this.handlePointsChange = function (points) {
+      _this.props.changeQuizEntryPoints(_this.props.entry.id, points);
+    };
+
+    _this.editProps = function (entry) {
+      return {
+        cancelHandler: _this.navigateToBank,
+        clearChanges: _this.clearChanges,
+        contextUuid: null,
+        entry: entry,
+        guid: "".concat(_this.props.bankEntry.id, "_bank_entry_edit"),
+        handleQuizEntryPointsChange: _this.handlePointsChange,
+        parentId: _this.props.bankId,
+        parentType: _quizCommon.PARENT_TYPE_BANK,
+        stimulus: entry,
+        submitHandler: _this.submitHandler,
+        validationErrorsFromApi: _this.state.validationErrorsFromApi,
+        clearValidationErrorsFromApi: _this.clearValidationErrorsFromApi,
+        disableSubmit: Boolean(_this.state.validationErrorsFromApi && Object.values(_this.state.validationErrorsFromApi).length)
+      };
+    };
+
+    _this.openFeedbackModal = function () {
+      _this.props.setUi(_quizCommon.ITEM_FEEDBACK_MODAL_ITEM, _this.props.entry.getWorkingInstance());
+
+      _this.props.setUi(_quizCommon.ITEM_FEEDBACK_MODAL_FEEDBACK, _this.props.entry.getWorkingInstance().feedback);
+
+      _this.props.openModal(_quizCommon.ITEM_FEEDBACK_MODAL, {
+        modalTrigger: _this.addFeedbackButton
+      });
+    };
+
+    _this.storeFeedbackButtonRef = function (button) {
+      _this.addFeedbackButton = button;
+    };
+
+    _this.compareTagValues = function (left, right) {
+      return left.tag_value === right.tag_value;
+    };
+
+    _this.tagToAssociation = function (_ref2) {
+      var value = _ref2.value;
+      return {
+        tag_value: value
+      };
+    };
+
+    _this.handleTagChange = function (tags) {
+      var bankEntry = _this.props.bankEntry;
+
+      var tagAssociations = _this.props.tagAssociations.toJS();
+
+      var associations = tags.map(_this.tagToAssociation);
+      var removed = (0, _differenceWith.default)(tagAssociations, associations, _this.compareTagValues);
+      var created = (0, _differenceWith.default)(associations, tagAssociations, _this.compareTagValues); // If a tag that was removed is being re-added,
+      // remove from both addAssociations and deletedTags
+
+      var restored = (0, _intersectionWith.default)(created, removed, _this.compareTagValues);
+      var addOperations = (0, _differenceWith.default)(created, restored, _isEqual.default);
+      var deleteOperations = (0, _differenceWith.default)(removed, restored, _this.compareTagValues);
+
+      var bankEntryId = _this.getBankEntryId(bankEntry);
+
+      _this.props.setPendingDeletionTagAssociations(bankEntry.entryType, bankEntryId, deleteOperations);
+
+      _this.props.setPendingAdditionTagAssociations(bankEntry.entryType, bankEntryId, addOperations);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(BankEntry, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!this.isTemporary()) {
+        this.props.getBankEntry(this.props.bankId, this.props.bankEntryId);
+      }
+
+      if (this.navToBankRef) {
+        _reactDom.default.findDOMNode(this.navToBankRef).focus();
+      }
+
+      this.props.getBank(this.props.bankId);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.setShouldClone(false);
+    }
+  }, {
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      this.props.setShouldClone(false);
+    }
+  }, {
+    key: "isTemporary",
+    value: function isTemporary() {
+      return this.props.entry && this.props.entry.isTemporary();
+    }
+  }, {
+    key: "isItemEntry",
+    value: function isItemEntry() {
+      return this.props.bankEntry.entryType === 'Item';
+    }
+  }, {
+    key: "entryLinkName",
+    value: function entryLinkName() {
+      if (this.isTemporary()) {
+        return this.isItemEntry() ? (0, _formatMessage.default)('New Item') : (0, _formatMessage.default)('New Stimulus');
+      } else {
+        return this.isItemEntry() ? (0, _formatMessage.default)('Edit Item') : (0, _formatMessage.default)('Edit Stimulus');
+      }
+    }
+  }, {
+    key: "renderNav",
+    value: function renderNav() {
+      var _this$props = this.props,
+          scope = _this$props.scope,
+          closeTray = _this$props.closeTray,
+          navigateToBanks = _this$props.navigateToBanks,
+          navigateToBank = _this$props.navigateToBank,
+          navigateToBuild = _this$props.navigateToBuild,
+          returnToUrl = _this$props.returnToUrl,
+          bank = _this$props.bank;
+      var isScopeEmpty = !Object.keys(scope).length;
+      return /*#__PURE__*/_react.default.createElement(_index10.default, {
+        closeTray: closeTray,
+        navigateToBanks: navigateToBanks,
+        navigateToBuild: navigateToBuild,
+        returnToUrl: isScopeEmpty ? null : returnToUrl,
+        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
+      }, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+        key: "bank",
+        onClick: navigateToBank,
+        ref: this.setNavToBankRef
+      }, bank.title), /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+        key: "bankEntry"
+      }, this.entryLinkName()));
+    }
+  }, {
+    key: "renderTitle",
+    value: function renderTitle(entry) {
+      if (this.isItemEntry()) {
+        return /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+          renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit question title')),
+          type: "text",
+          placeholder: (0, _formatMessage.default)('Question Title'),
+          onChange: this.handleTitleChange,
+          value: entry.getWorkingInstance().title || ''
+        });
+      }
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader(entry) {
+      if (!entry) return;
+      var props = this.editProps(entry);
+      var identifier = this.isItemEntry() ? (0, _formatMessage.default)('Item { id }', {
+        id: entry.id
+      }) : (0, _formatMessage.default)('Stimulus { id }', {
+        id: entry.id
+      });
+      var tempIdentifier = this.isItemEntry() ? (0, _formatMessage.default)('New Item') : (0, _formatMessage.default)('New Stimulus');
+      var itemIdentifier = this.isTemporary() ? tempIdentifier : identifier;
+      var entryName = this.isItemEntry() ? entry.getInteractionType().name : (0, _formatMessage.default)('Stimulus');
+      var separator = ' | ';
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.header
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.leftHeader
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerText
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, entryName, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), itemIdentifier))), this.renderTitle(entry), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.rightHeader
+      }, /*#__PURE__*/_react.default.createElement(_index.default, props)));
+    }
+  }, {
+    key: "hasPendingTagModifications",
+    value: function hasPendingTagModifications() {
+      return !this.props.pendingDeletionTags.isEmpty() || !this.props.pendingAdditionTags.isEmpty();
+    }
+  }, {
+    key: "createTagsForClone",
+    value: function createTagsForClone(newBankEntry, tags) {
+      this.props.createTagAssociations(newBankEntry.id, newBankEntry.entry_type, newBankEntry.entry.id, tags.map(function (tag) {
+        return tag.tag_value;
+      })); // Pending tag associations were applied to the original bank entry, so clear those out
+
+      this.props.setPendingAdditionTagAssociations(this.props.bankEntry.entryType, this.props.entry.id, []);
+      this.props.setPendingDeletionTagAssociations(this.props.bankEntry.entryType, this.props.entry.id, []);
+    }
+  }, {
+    key: "updateTagsForEntry",
+    value: function () {
+      var _updateTagsForEntry = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (this.props.shouldClone) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                _context2.next = 3;
+                return this.props.createTagAssociations(this.props.bankEntryId, this.props.bankEntry.entryType, this.getBankEntryId(this.props.bankEntry), this.props.pendingAdditionTags.map(function (tagToAdd) {
+                  return tagToAdd.get('tag_value');
+                }));
+
+              case 3:
+                _context2.next = 5;
+                return this.props.deleteTagAssociations(this.props.bankEntryId, this.props.bankEntry.entryType, this.getBankEntryId(this.props.bankEntry), this.props.pendingDeletionTags.map(function (tagToDelete) {
+                  return tagToDelete.get('id');
+                }));
+
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function updateTagsForEntry() {
+        return _updateTagsForEntry.apply(this, arguments);
+      }
+
+      return updateTagsForEntry;
+    }()
+  }, {
+    key: "normalSubmit",
+    value: function () {
+      var _normalSubmit = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var entry, tags, createEntryCb, newBankEntry, workingEntry, updateFunc, toClear;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                entry = this.props.entry;
+
+                if (!(entry.hasModifications() || this.props.shouldClone && this.hasPendingTagModifications())) {
+                  _context3.next = 17;
+                  break;
+                }
+
+                if (!this.props.shouldClone) {
+                  _context3.next = 11;
+                  break;
+                }
+
+                tags = this.visibleTagAssociations();
+                createEntryCb = this.isItemEntry() ? _items.createItem : _stimuli.createStimulus;
+                _context3.next = 7;
+                return this.props.cloneBankEntry(this.props.bankEntry, createEntryCb);
+
+              case 7:
+                newBankEntry = _context3.sent;
+                this.createTagsForClone(newBankEntry, tags);
+                _context3.next = 15;
+                break;
+
+              case 11:
+                workingEntry = entry.getWorkingInstance();
+                updateFunc = this.isItemEntry() ? this.props.updateItem : this.props.updateStimulus;
+                _context3.next = 15;
+                return updateFunc(workingEntry, this.props.bankId, 'bank');
+
+              case 15:
+                toClear = this.isItemEntry() ? 'items' : 'stimuli';
+                this.props.clearModifications(toClear, entry.id);
+
+              case 17:
+                if (!this.hasPendingTagModifications()) {
+                  _context3.next = 20;
+                  break;
+                }
+
+                _context3.next = 20;
+                return this.updateTagsForEntry();
+
+              case 20:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function normalSubmit() {
+        return _normalSubmit.apply(this, arguments);
+      }
+
+      return normalSubmit;
+    }()
+  }, {
+    key: "temporarySubmit",
+    value: function () {
+      var _temporarySubmit = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+        var entry, workingEntry, workingBankEntry, createEntryCb, newBankEntry, toClear;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                entry = this.props.entry;
+                workingEntry = entry.getWorkingInstance();
+                workingBankEntry = this.props.bankEntry.getWorkingInstance();
+                createEntryCb = this.isItemEntry() ? _items.createItem : _stimuli.createStimulus;
+                _context4.next = 6;
+                return this.props.createEntryAndBankEntry(this.props.bankId, workingEntry, workingBankEntry, createEntryCb);
+
+              case 6:
+                newBankEntry = _context4.sent;
+
+                if (this.hasPendingTagModifications()) {
+                  this.props.createTagAssociations(newBankEntry.id, newBankEntry.entry_type, newBankEntry.entry.id, this.props.pendingAdditionTags.map(function (tagToAdd) {
+                    return tagToAdd.get('tag_value');
+                  }));
+                }
+
+                toClear = this.isItemEntry() ? 'items' : 'stimuli';
+                this.props.clearModifications(toClear, entry.id);
+                this.props.clearTemporaryBankItem(this.props.bankId);
+
+              case 11:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this);
+      }));
+
+      function temporarySubmit() {
+        return _temporarySubmit.apply(this, arguments);
+      }
+
+      return temporarySubmit;
+    }()
+  }, {
+    key: "renderFeedbackSection",
+    value: function renderFeedbackSection() {
+      if (!this.isItemEntry()) {
+        return;
+      }
+
+      var shouldClone = this.props.shouldClone;
+      var disabled = this.props.entry.isImmutable() && !shouldClone;
+      var icon, text;
+
+      if (this.props.entry.getWorkingInstance().hasFeedback()) {
+        icon = _uiIcons.IconDiscussionSolid;
+        text = (0, _formatMessage.default)('Edit Item Level Feedback (present)');
+      } else {
+        icon = _uiIcons.IconDiscussionLine;
+        text = (0, _formatMessage.default)('Edit Item Level Feedback');
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "icon",
+        onClick: this.openFeedbackModal,
+        disabled: disabled,
+        ref: this.storeFeedbackButtonRef,
+        icon: icon
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, text));
+    }
+  }, {
+    key: "getBankEntryId",
+    value: function getBankEntryId(bankEntry) {
+      // bankEntry.entry can be either 'TEMPORARY_ITEM' or an entire Map
+      return bankEntry.entry ? bankEntry.entry.get ? bankEntry.entry.get('id') : bankEntry.entry : null;
+    }
+  }, {
+    key: "visibleTagAssociations",
+    value: function visibleTagAssociations() {
+      var _this$props2 = this.props,
+          pendingAdditionTags = _this$props2.pendingAdditionTags,
+          pendingDeletionTags = _this$props2.pendingDeletionTags,
+          tagAssociations = _this$props2.tagAssociations;
+      var existingValues = (0, _keyBy.default)(tagAssociations.toJS(), function (t) {
+        return t.tag_value;
+      });
+      var noDuplicates = pendingAdditionTags.filter(function (t) {
+        return (0, _isUndefined.default)(existingValues[t.get('tag_value')]);
+      });
+      return tagAssociations.filter(function (tag) {
+        return !pendingDeletionTags.includes(tag);
+      }).concat(noDuplicates).toJS();
+    }
+  }, {
+    key: "visibleTags",
+    value: function visibleTags() {
+      return this.visibleTagAssociations().map(function (a) {
+        return {
+          id: a.tag_id,
+          value: a.tag_value
+        };
+      });
+    }
+  }, {
+    key: "renderEntry",
+    value: function renderEntry(entry) {
+      var _this2 = this;
+
+      if (!entry) return;
+      var _this$props3 = this.props,
+          bankEntry = _this$props3.bankEntry,
+          useBankTags = _this$props3.useBankTags;
+      var props = this.editProps(entry);
+      var propsFunc = this.isItemEntry() ? _warningHelpers.propsForItemVersioningWrapper : _warningHelpers.propsForStimulusVersioningWrapper;
+      var versioningProps = propsFunc(entry.isImmutable(), this.props.shouldClone, this.props.setShouldClone, this.navigateToBank, true);
+      var canEdit = !entry.isImmutable() || this.props.shouldClone;
+      var ItemComponent = canEdit ? _index2.default : _index4.default;
+      var StimulusComponent = canEdit ? _index6.default : _index7.default;
+      var EntryComponent = this.isItemEntry() ? ItemComponent : StimulusComponent;
+      var entryType = bankEntry.entryType;
+      var entryId = this.getBankEntryId(bankEntry);
+
+      var tags = function tags() {
+        return /*#__PURE__*/_react.default.createElement(_index8.default, {
+          allowNewTags: true,
+          noMatchText: (0, _formatMessage.default)('Enter a tag to find or create'),
+          parentType: entryType,
+          parentId: entryId,
+          onChange: _this2.handleTagChange,
+          tags: _this2.visibleTags()
+        });
+      };
+
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.entryEdit
+      }, /*#__PURE__*/_react.default.createElement(_index9.default, versioningProps, canEdit && /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        closeButtonLabel: (0, _formatMessage.default)('Dismiss'),
+        margin: "0 0 medium 0"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, (0, _formatMessage.default)('Edits made here will appear on any assessment using this item.'))), /*#__PURE__*/_react.default.createElement(EntryComponent, props), useBankTags && tags())), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.footer
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.leftFooter
+      }, this.renderFeedbackSection()), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.rightFooter
+      }, /*#__PURE__*/_react.default.createElement(_index.default, props))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var entry = this.props.entry;
+
+      if (entry && !entry.isLoaded()) {
+        return _ref3;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index5.default, null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.content
+      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && /*#__PURE__*/_react.default.createElement(_index3.default, {
+        parentId: this.props.bankId,
+        parentType: _quizCommon.PARENT_TYPE_BANK
+      })));
+    }
+  }]);
+  BankEntry.displayName = "BankEntry";
+  return BankEntry;
+}(_react.Component), _class2.propTypes = {
+  bankEntryId: _propTypes.default.string.isRequired,
+  bankId: _propTypes.default.string.isRequired,
+  bank: _reactImmutableProptypes.default.record.isRequired,
+  bankEntry: _reactImmutableProptypes.default.record.isRequired,
+  entry: _reactImmutableProptypes.default.record,
+  changeItemTitle: _propTypes.default.func.isRequired,
+  changeQuizEntryPoints: _propTypes.default.func.isRequired,
+  cloneBankEntry: _propTypes.default.func.isRequired,
+  clearModifications: _propTypes.default.func.isRequired,
+  clearTemporaryBankItem: _propTypes.default.func.isRequired,
+  createEntryAndBankEntry: _propTypes.default.func.isRequired,
+  closeTray: _propTypes.default.func.isRequired,
+  createTagAssociations: _propTypes.default.func.isRequired,
+  deleteTagAssociations: _propTypes.default.func.isRequired,
+  getBankEntry: _propTypes.default.func.isRequired,
+  getBank: _propTypes.default.func.isRequired,
+  isCompact: _propTypes.default.bool,
+  navigateToBanks: _propTypes.default.func.isRequired,
+  // can be from consumer
+  navigateToBank: _propTypes.default.func.isRequired,
+  // can be from consumer
+  navigateToBuild: _propTypes.default.func,
+  // from consumer
+  scope: _propTypes.default.objectOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    uuid: _propTypes.default.string,
+    title: _propTypes.default.string
+  })),
+  returnToUrl: _propTypes.default.string,
+  // from consumer
+  openModal: _propTypes.default.func.isRequired,
+  pendingAdditionTags: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map),
+  pendingDeletionTags: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map),
+  setPendingAdditionTagAssociations: _propTypes.default.func.isRequired,
+  setPendingDeletionTagAssociations: _propTypes.default.func.isRequired,
+  setShouldClone: _propTypes.default.func.isRequired,
+  setTagInput: _propTypes.default.func.isRequired,
+  setUi: _propTypes.default.func.isRequired,
+  shouldClone: _propTypes.default.bool.isRequired,
+  tagAssociations: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map),
+  tagInput: _propTypes.default.string,
+  updateItem: _propTypes.default.func.isRequired,
+  updateStimulus: _propTypes.default.func.isRequired,
+  useBankTags: _propTypes.default.bool
+}, _class2.defaultProps = {
+  entry: null,
+  isCompact: false,
+  navigateToBuild: null,
+  scope: {},
+  returnToUrl: null,
+  pendingAdditionTags: _immutable.default.List(),
+  pendingDeletionTags: _immutable.default.List(),
+  tagAssociations: _immutable.default.List(),
+  tagInput: null,
+  useBankTags: false
+}, _temp)) || _class);
+exports.BankEntry = BankEntry;
+var _default = BankEntry;
+exports.default = _default;