@instructure/quiz-core 17.46.2-rc.7 → 17.47.0

package/es/common/components/resources/entry/EntrySave/presenter.js

@@ -6,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Button } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import { API_INPUT_VALIDATION_ERROR } from '@instructure/quiz-common';
@@ -39,11 +40,75 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
       _this.props.screenreaderNotification(msg);
     };
 
+    _this.confirmShareableContent = function () {
+      var _this$props = _this.props,
+          canvasOrigin = _this$props.canvasOrigin,
+          checkContentShareability = _this$props.checkContentShareability,
+          entry = _this$props.entry,
+          withConfirm = _this$props.withConfirm;
+
+      _this.setState({
+        canSubmit: false
+      });
+
+      checkContentShareability(entry.getWorkingInstance(), canvasOrigin).then(function () {
+        _this.successfulSubmit();
+      }).catch( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(err) {
+          var _err$response, _err$response2;
+
+          var body, text;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return (_err$response = err.response) === null || _err$response === void 0 ? void 0 : _err$response.json();
+
+                case 2:
+                  body = _context.sent;
+                  text = t('There was an error attempting to validate shareability.');
+
+                  if (((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : _err$response2.status) === 400 && body.shareable === false) {
+                    text = t('You are attempting to save content containing course links which may not work when used in other courses.');
+                  }
+
+                  withConfirm(function () {
+                    _this.successfulSubmit();
+                  }, {
+                    title: t('Are you sure?'),
+                    text: text,
+                    continueText: t('Save anyway'),
+                    onCancel: function onCancel() {
+                      _this.setState({
+                        canSubmit: true
+                      });
+                    }
+                  });
+
+                case 6:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+    };
+
     _this.onSubmit = function (e) {
       e.preventDefault();
 
       if (_this.props.isValid) {
-        _this.successfulSubmit();
+        if (_this.props.checkBankedContentShareabilityEnabled && _this.props.shouldValidateShareableContent) {
+          _this.confirmShareableContent();
+        } else {
+          _this.successfulSubmit();
+        }
       } else {
         _this.createScreenReaderNotification();
 
@@ -87,24 +152,24 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
   }, {
     key: "successfulSubmit",
     value: function () {
-      var _successfulSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _successfulSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var validationResult;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
                 this.setState({
                   canSubmit: false
                 });
-                _context.prev = 1;
-                _context.next = 4;
+                _context2.prev = 1;
+                _context2.next = 4;
                 return this.props.submitHandler();
 
               case 4:
-                validationResult = _context.sent;
+                validationResult = _context2.sent;
 
                 if (!(validationResult === API_INPUT_VALIDATION_ERROR)) {
-                  _context.next = 8;
+                  _context2.next = 8;
                   break;
                 }
 
@@ -112,16 +177,16 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
                 throw new Error('User input validation error received from API.');
 
               case 8:
-                _context.next = 14;
+                _context2.next = 14;
                 break;
 
               case 10:
-                _context.prev = 10;
-                _context.t0 = _context["catch"](1);
+                _context2.prev = 10;
+                _context2.t0 = _context2["catch"](1);
                 this.setState({
                   canSubmit: true
                 });
-                return _context.abrupt("return");
+                return _context2.abrupt("return");
 
               case 14:
                 this.props.switchOffEditing();
@@ -130,10 +195,10 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
 
               case 17:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, this, [[1, 10]]);
+        }, _callee2, this, [[1, 10]]);
       }));
 
       function successfulSubmit() {
@@ -168,28 +233,37 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
   return EntrySave;
 }(Component);
 EntrySave.propTypes = {
-  displayPosition: PropTypes.number,
-  disableSubmit: PropTypes.bool,
-  guid: PropTypes.string,
-  submitHandler: PropTypes.func.isRequired,
   cancelHandler: PropTypes.func,
+  canvasOrigin: PropTypes.string,
+  checkBankedContentShareabilityEnabled: PropTypes.bool,
+  checkContentShareability: PropTypes.func.isRequired,
   clearChanges: PropTypes.func.isRequired,
   // From connected component
   clearNextQuizEntry: PropTypes.func.isRequired,
+  disableSubmit: PropTypes.bool,
+  displayPosition: PropTypes.number,
+  entry: ImmutablePropTypes.record.isRequired,
+  guid: PropTypes.string,
   hideError: PropTypes.func.isRequired,
+  initialFocusId: PropTypes.string,
   isValid: PropTypes.bool.isRequired,
   showError: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
+  shouldValidateShareableContent: PropTypes.bool,
+  submitHandler: PropTypes.func.isRequired,
   // from makescrollable / from props being passed in occasionally
   switchOnEditing: PropTypes.func.isRequired,
   switchOffEditing: PropTypes.func.isRequired,
-  initialFocusId: PropTypes.string
+  withConfirm: PropTypes.func.isRequired
 };
 EntrySave.defaultProps = {
-  displayPosition: null,
   cancelHandler: noop,
+  canvasOrigin: '',
+  checkBankedContentShareabilityEnabled: false,
+  displayPosition: null,
   disableSubmit: false,
   guid: null,
-  initialFocusId: null
+  initialFocusId: null,
+  shouldValidateShareableContent: false
 };
 export default EntrySave;

package/es/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -376,6 +376,7 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
         onAdd: this.handleAddToBank,
         onContinue: this.handleAddToBankContinue,
         getEntry: this.getEntryForBank,
+        workingEntry: this.props.workingStimulus,
         entryId: this.props.guid,
         entryType: this.props.quizEntry.entryType
       });

package/es/common/reducers/config.js

@@ -1,5 +1,5 @@
 import { fromJS } from 'immutable';
-import { SET_API_ENDPOINT, SET_USER_TOKEN } from '@instructure/quiz-common';
+import { SET_API_ENDPOINT, SET_CANVAS_ORIGIN, SET_USER_TOKEN } from '@instructure/quiz-common';
 var defaultState = fromJS({
   apiEndpoint: ''
 });
@@ -11,6 +11,9 @@ export default (function () {
     case SET_API_ENDPOINT:
       return state.set('apiEndpoint', action.payload);
 
+    case SET_CANVAS_ORIGIN:
+      return state.set('canvasOrigin', action.payload);
+
     case SET_USER_TOKEN:
       return state.set('userToken', action.payload);
 

package/es/common/util/RceConfigProvider.js

@@ -14,7 +14,7 @@ import { RceConfigContext, RceConfigKeys } from '@instructure/quiz-common';
 import { addError } from "../actions/alerts.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
-import { isQuizTaking } from "./windowChecks.js";
+import { isQuizTaking, isQuizBuilding } from "./windowChecks.js";
 
 var _ref4 = /*#__PURE__*/React.createElement(Card, {
   wrapped: true
@@ -50,39 +50,37 @@ export var RceConfigProviderComponent = function RceConfigProviderComponent(prop
           switch (_context.prev = _context.next) {
             case 0:
               if (hasAllPropsForRcs()) {
-                _context.next = 3;
+                _context.next = 2;
                 break;
               }
 
-              handleErrorFunc('Invalid RCS configuration');
               return _context.abrupt("return");
 
-            case 3:
-              _context.next = 5;
+            case 2:
+              _context.next = 4;
               return props.rcsJwtRefreshFn(jwt);
 
-            case 5:
+            case 4:
               response = _context.sent;
               refreshedToken = response === null || response === void 0 ? void 0 : (_response$json = response.json) === null || _response$json === void 0 ? void 0 : _response$json.token; // inst-redux-service-middleware response structure
 
               if (refreshedToken) {
-                _context.next = 13;
+                _context.next = 11;
                 break;
               }
 
-              handleErrorFunc('Unable to refresh RCS token');
               normalizedStem = questionStem !== null && questionStem !== void 0 ? questionStem : 'Unknown stem';
               extractedText = extractTextFromHtml(normalizedStem);
-              setErrorIfDuringTaking(t('Error while answering "{stem}": Full functionality of the Rich Content Editor may not have been available to the user.', {
+              handleError(t('Error while answering "{stem}": Full functionality of the Rich Content Editor may not have been available to the user.', {
                 stem: extractedText
               }));
               return _context.abrupt("return");
 
-            case 13:
+            case 11:
               setJwt(refreshedToken);
               setTokenFn(refreshedToken);
 
-            case 15:
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -95,8 +93,34 @@ export var RceConfigProviderComponent = function RceConfigProviderComponent(prop
     };
   }();
 
-  var handleErrorFunc = function handleErrorFunc(errorMessage) {
-    store.dispatch(addError(errorMessage));
+  var handleError = function handleError(quizLogMessage) {
+    if (shouldAlertUser()) {
+      alertTheUser(alertMessage());
+    }
+
+    if (shouldsetEventToQuizLog()) {
+      setEventToQuizLog(quizLogMessage);
+    }
+  };
+
+  var alertTheUser = function alertTheUser(message) {
+    store.dispatch(addError(message));
+  };
+
+  var setEventToQuizLog = function setEventToQuizLog(message) {
+    props.setEventToQuizLog(message);
+  };
+
+  var alertMessage = function alertMessage() {
+    return isQuizTaking() ? t('The Rich Content Editor has encountered an issue. ' + 'It has been logged for your instructor to review. Please refresh and try again.') : t('The Rich Content Editor has encountered an issue. Please refresh and try again.');
+  };
+
+  var shouldAlertUser = function shouldAlertUser() {
+    return isQuizTaking() || isQuizBuilding();
+  };
+
+  var shouldsetEventToQuizLog = function shouldsetEventToQuizLog() {
+    return isQuizTaking();
   };
 
   var getConfig = function getConfig() {
@@ -109,14 +133,6 @@ export var RceConfigProviderComponent = function RceConfigProviderComponent(prop
     };
   };
 
-  var setErrorIfDuringTaking = function setErrorIfDuringTaking(errorMessage) {
-    if (!isQuizTaking()) {
-      return;
-    }
-
-    props.setRCEError(errorMessage);
-  };
-
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var host, base, url, response, json;
@@ -139,7 +155,7 @@ export var RceConfigProviderComponent = function RceConfigProviderComponent(prop
                 break;
               }
 
-              setErrorIfDuringTaking(t('Error: Full functionality of the Rich Content Editor may not have been available to the user.'));
+              handleError(t('Error: Full functionality of the Rich Content Editor may not have been available to the user.'));
               return _context2.abrupt("return");
 
             case 6:
@@ -163,7 +179,7 @@ export var RceConfigProviderComponent = function RceConfigProviderComponent(prop
             case 16:
               json = _context2.sent;
               setCanvasConfig(json);
-              setErrorIfDuringTaking(null);
+              setEventToQuizLog(null);
               _context2.next = 25;
               break;
 
@@ -171,7 +187,7 @@ export var RceConfigProviderComponent = function RceConfigProviderComponent(prop
               _context2.prev = 21;
               _context2.t0 = _context2["catch"](2);
               setCanvasConfig(null);
-              setErrorIfDuringTaking(t('Error: Full functionality of the Rich Content Editor including accessibility features may not have been available to the user.'));
+              handleError(t('Error: Full functionality of the Rich Content Editor including accessibility features may not have been available to the user.'));
 
             case 25:
               _context2.prev = 25;
@@ -206,7 +222,7 @@ RceConfigProviderComponent.propTypes = {
   isNewRCEEnabled: PropTypes.bool.isRequired,
   rce5Renderer: PropTypes.bool.isRequired,
   isNewRCEAppsEnabled: PropTypes.bool,
-  setRCEError: PropTypes.func.isRequired,
+  setEventToQuizLog: PropTypes.func.isRequired,
   contextId: PropTypes.string,
   contextType: PropTypes.string,
   canvasUserId: PropTypes.string,
@@ -238,7 +254,7 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 };
 
 var mapDispatchToProps = {
-  setRCEError: setRCEError
+  setEventToQuizLog: setRCEError
 };
 var RceConfigProvider = connect(mapStateToProps, mapDispatchToProps)(RceConfigProviderComponent);
 export { RceConfigProvider };

package/es/common/util/rceChecker.js

@@ -1,6 +1,6 @@
 import { featureOn } from "./featureCheck.js";
 var newRCEFeatureName = 'use_new_rce';
-var newRCEAppsFeatureName = 'use_new_rce_apps';
+var newRCEAppsFeatureName = 'rce5_apps';
 var rce5RendererFeatureName = 'rce5_renderer';
 export function isNewRCEEnabled() {
   return featureOn(newRCEFeatureName);

package/es/common/util/windowChecks.js

@@ -1,4 +1,4 @@
-import { isDuringQuizTake } from '@instructure/quiz-common';
+import { isDuringQuizTake, isDuringQuizBuild } from '@instructure/quiz-common';
 export var media = {
   'phone-break-point': 'only screen and (max-width: 48rem)',
   'tablet-break-point': 'only screen and (max-width: 64rem)'
@@ -15,4 +15,7 @@ export var onTablet = function onTablet() {
 };
 export var isQuizTaking = function isQuizTaking() {
   return isDuringQuizTake();
+};
+export var isQuizBuilding = function isQuizBuilding() {
+  return isDuringQuizBuild();
 };

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

@@ -16,6 +16,10 @@ var _banks = require("../../api/banks.js");
 
 var _bankEntries = require("../../api/bankEntries.js");
 
+var _items = require("../../../building/api/items.js");
+
+var _stimuli = require("../../../building/api/stimuli.js");
+
 var _presenter = _interopRequireDefault(require("./presenter.js"));
 
 var modalActions = _interopRequireWildcard(require("../../../common/actions/modal.js"));
@@ -30,10 +34,15 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _modalHelpers = require("../../../common/util/modalHelpers.js");
 
+var _featureCheck = require("../../../common/util/featureCheck.js");
+
 function mapStateToProps(state, props) {
   var selectedBankOption = state.getIn(['ui', _quizCommon.ADD_TO_BANK_MODAL_BANK_SELECTION]);
   var selectedBank = selectedBankOption && new _Bank.default(state.getIn(['banks', selectedBankOption]));
   return {
+    canvasOrigin: state.getIn(['config', 'canvasOrigin']),
+    checkBankedContentShareabilityEnabled: (0, _featureCheck.featureOn)('check_banked_content_shareability'),
+    checkContentShareability: props.entryType === 'Item' ? _items.checkItemShareability : _stimuli.checkStimulusShareability,
     selectedBank: selectedBank,
     modalTrigger: (0, _modalHelpers.getModalTrigger)(state),
     modalOpen: state.getIn(['modal', 'isOpen']) === [_quizCommon.ADD_TO_BANK_MODAL, props.entryType, props.entryId].join(':')

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

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.AddToBankModal = 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"));
@@ -37,11 +41,36 @@ var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
 
 var _index = _interopRequireDefault(require("../../../common/components/resources/BankSelection/index.js"));
 
+var _uiSpinner = require("@instructure/ui-spinner");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiFlex = require("@instructure/ui-flex");
+
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
-var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckLine, {
+  color: "success"
+});
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+  padding: "0 small 0 0"
+}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconNoLine, {
+  color: "error",
+  size: "small"
+}));
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
+  color: "warning"
+});
+
+var _ref5 = /*#__PURE__*/_react.default.createElement("br", null);
 
 var AddToBankModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddToBankModal, _Component);
@@ -60,6 +89,7 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
       bankType: 'existing',
+      contentShareable: 'loading',
       newBankTitle: ''
     };
 
@@ -124,6 +154,65 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(AddToBankModal, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          canvasOrigin = _this$props.canvasOrigin,
+          checkBankedContentShareabilityEnabled = _this$props.checkBankedContentShareabilityEnabled,
+          modalOpen = _this$props.modalOpen,
+          checkContentShareability = _this$props.checkContentShareability,
+          workingEntry = _this$props.workingEntry;
+
+      if (checkBankedContentShareabilityEnabled && modalOpen && !prevProps.modalOpen) {
+        this.setState({
+          contentShareable: 'loading'
+        });
+        checkContentShareability(workingEntry, canvasOrigin).then(function () {
+          _this2.setState({
+            contentShareable: 'true'
+          });
+        }).catch( /*#__PURE__*/function () {
+          var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(err) {
+            var _err$response, _err$response2;
+
+            var body;
+            return _regenerator.default.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return (_err$response = err.response) === null || _err$response === void 0 ? void 0 : _err$response.json();
+
+                  case 2:
+                    body = _context.sent;
+
+                    if (((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : _err$response2.status) === 400 && body.shareable === false) {
+                      _this2.setState({
+                        contentShareable: 'false'
+                      });
+                    } else {
+                      _this2.setState({
+                        contentShareable: 'unknown'
+                      });
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          return function (_x) {
+            return _ref.apply(this, arguments);
+          };
+        }());
+      }
+    }
+  }, {
     key: "cancelButton",
     value: function cancelButton() {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
@@ -136,8 +225,11 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
     value: function addToBankButton() {
       var _this$state = this.state,
           bankType = _this$state.bankType,
-          newBankTitle = _this$state.newBankTitle;
-      var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
+          newBankTitle = _this$state.newBankTitle,
+          contentShareable = _this$state.contentShareable;
+      var checkBankedContentShareabilityEnabled = this.props.checkBankedContentShareabilityEnabled;
+      var contentShareableLoading = contentShareable === 'loading';
+      var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim()) || checkBankedContentShareabilityEnabled && contentShareableLoading;
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         type: "button",
         variant: "primary",
@@ -145,7 +237,7 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-add-to-bank-button"
-      }, (0, _formatMessage.default)('Add'));
+      }, checkBankedContentShareabilityEnabled && !contentShareableLoading && contentShareable !== 'true' ? (0, _formatMessage.default)('Add anyway') : (0, _formatMessage.default)('Add'));
     }
   }, {
     key: "renderBankTypeContent",
@@ -165,6 +257,37 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
         type: "text"
       });
     }
+  }, {
+    key: "renderContentShareabilityMessage",
+    value: function renderContentShareabilityMessage() {
+      if (this.props.checkBankedContentShareabilityEnabled) {
+        var content = null;
+
+        if (this.state.contentShareable === 'loading') {
+          content = /*#__PURE__*/_react.default.createElement(_uiText.Text, null, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+            size: "x-small",
+            renderTitle: (0, _formatMessage.default)('Checking content shareability...')
+          }), "\xA0", (0, _formatMessage.default)('Validating content...'));
+        } else if (this.state.contentShareable === 'true') {
+          content = /*#__PURE__*/_react.default.createElement(_uiText.Text, null, _ref2, "\xA0", (0, _formatMessage.default)('Good to go!'));
+        } else if (this.state.contentShareable === 'false') {
+          content = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, _ref3, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+            shouldShrink: true
+          }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+            color: "error"
+          }, (0, _formatMessage.default)('You are attempting to add content containing course links which may not work when used in other courses.'))));
+        } else {
+          content = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+            color: "warning"
+          }, _ref4, "\xA0", (0, _formatMessage.default)('There was an error attempting to validate shareability.'));
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "div",
+          margin: "small 0 0 0"
+        }, content);
+      }
+    }
   }, {
     key: "renderContent",
     value: function renderContent() {
@@ -179,7 +302,7 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
         value: "new",
         label: (0, _formatMessage.default)('New item bank')
-      })), _ref, this.renderBankTypeContent());
+      })), _ref5, this.renderBankTypeContent(), this.renderContentShareabilityMessage());
     }
   }, {
     key: "render",
@@ -207,6 +330,9 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
 
 exports.AddToBankModal = AddToBankModal;
 AddToBankModal.propTypes = {
+  canvasOrigin: _propTypes.default.string,
+  checkBankedContentShareabilityEnabled: _propTypes.default.bool,
+  checkContentShareability: _propTypes.default.func.isRequired,
   closeModal: _propTypes.default.func.isRequired,
   createBank: _propTypes.default.func.isRequired,
   createBankEntry: _propTypes.default.func.isRequired,
@@ -218,15 +344,18 @@ AddToBankModal.propTypes = {
   entryType: _propTypes.default.string.isRequired,
   // Resolve to the bank entry's entry, or create it if it does not yet exist.
   getEntry: _propTypes.default.func.isRequired,
+  handleValidationErrorsFromApi: _propTypes.default.func.isRequired,
   label: _propTypes.default.string.isRequired,
   modalOpen: _propTypes.default.bool.isRequired,
   onAdd: _propTypes.default.func,
   onContinue: _propTypes.default.func,
   selectedBank: _reactImmutableProptypes.default.record,
   uiSet: _propTypes.default.func.isRequired,
-  handleValidationErrorsFromApi: _propTypes.default.func.isRequired
+  workingEntry: _reactImmutableProptypes.default.record.isRequired
 };
 AddToBankModal.defaultProps = {
+  canvasOrigin: '',
+  checkBankedContentShareabilityEnabled: false,
   onAdd: function onAdd() {},
   onContinue: function onContinue() {},
   selectedBank: null

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

@@ -245,17 +245,18 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       return {
         cancelHandler: _this.navigateToBank,
         clearChanges: _this.clearChanges,
+        clearValidationErrorsFromApi: _this.clearValidationErrorsFromApi,
         contextUuid: null,
+        disableSubmit: Boolean(_this.state.validationErrorsFromApi && Object.values(_this.state.validationErrorsFromApi).length),
         entry: entry,
         guid: "".concat(_this.props.bankEntry.id, "_bank_entry_edit"),
         handleQuizEntryPointsChange: _this.handlePointsChange,
         parentId: _this.props.bankId,
         parentType: _quizCommon.PARENT_TYPE_BANK,
+        shouldValidateShareableContent: true,
         stimulus: entry,
         submitHandler: _this.submitHandler,
-        validationErrorsFromApi: _this.state.validationErrorsFromApi,
-        clearValidationErrorsFromApi: _this.clearValidationErrorsFromApi,
-        disableSubmit: Boolean(_this.state.validationErrorsFromApi && Object.values(_this.state.validationErrorsFromApi).length)
+        validationErrorsFromApi: _this.state.validationErrorsFromApi
       };
     };