@instructure/quiz-core 21.2.0 → 22.1.0

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

@@ -7,8 +7,20 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _BanksList;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
 /** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -35,35 +47,35 @@ import generateStyle from './styles';
 import generateComponentTheme from './theme';
 export var BanksList = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_BanksList = /*#__PURE__*/function (_withI18nSupport) {
   function BanksList() {
-    var _this;
+    var _this2;
     _classCallCheck(this, BanksList);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, BanksList, [].concat(args));
-    _defineProperty(_this, "state", {
+    _this2 = _callSuper(this, BanksList, [].concat(args));
+    _defineProperty(_this2, "state", {
       sharingModalOpen: false,
       sharingModalBank: null,
       sharingCount: null,
       countedBank: null
     });
-    _defineProperty(_this, "sharingButtons", []);
-    _defineProperty(_this, "openModal", function (bank) {
+    _defineProperty(_this2, "sharingButtons", []);
+    _defineProperty(_this2, "openModal", function (bank) {
       return function () {
-        _this.props.openModal([EDIT_BANK_MODAL, bank.id].join(':'));
+        _this2.props.openModal([EDIT_BANK_MODAL, bank.id].join(':'));
       };
     });
-    _defineProperty(_this, "deleteBank", function (bankId) {
-      _this.props.deleteBank(bankId);
-      setTimeout(_this.props.focusCreateBankButton, 100);
+    _defineProperty(_this2, "deleteBank", function (bankId) {
+      _this2.props.deleteBank(bankId);
+      setTimeout(_this2.props.focusCreateBankButton, 100);
     });
-    _defineProperty(_this, "openDeleteBankModal", function (bank) {
+    _defineProperty(_this2, "openDeleteBankModal", function (bank) {
       return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this$props, currentUser, getUserInfo, deletingOwnBank, creatorFullName, resp, confirmBody;
+        var _this2$props, currentUser, getUserInfo, deletingOwnBank, creatorFullName, resp, confirmBody;
         return _regeneratorRuntime.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;
+              _this2$props = _this2.props, currentUser = _this2$props.currentUser, getUserInfo = _this2$props.getUserInfo;
               deletingOwnBank = currentUser && currentUser.uuid === bank.creator;
               if (deletingOwnBank) {
                 _context.next = 7;
@@ -81,9 +93,9 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
                 variant: "error",
                 padding: "0"
               }, jsx("div", {
-                css: _this.props.styles.deleteAlert
+                css: _this2.props.styles.deleteAlert
               }, jsx("div", {
-                css: _this.props.styles.deletePreface
+                css: _this2.props.styles.deletePreface
               }, t('Once deleted, items from this bank:')), jsx(List, null, jsx(List.Item, null, t('will no longer be accessible to others who currently have shared access')), jsx(List.Item, null, t.rich('will <0>NOT</0> be removed from any assessments', [function (_ref2) {
                 var children = _ref2.children;
                 return jsx(Text, {
@@ -91,7 +103,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
                   key: "0"
                 }, children);
               }])), jsx(List.Item, null, t('will lose their statistical link in reporting (if they were part of an assessment)')), jsx(List.Item, null, t('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(partial(_this.deleteBank, bank.id), {
+              _this2.props.withConfirm(partial(_this2.deleteBank, bank.id), {
                 text: confirmBody,
                 title: t('Delete Bank'),
                 continueText: t('Delete'),
@@ -105,7 +117,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         }, _callee);
       }));
     });
-    _defineProperty(_this, "openDuplicateBankModal", function (bank) {
+    _defineProperty(_this2, "openDuplicateBankModal", function (bank) {
       return function () {
         var createCloneJob = /*#__PURE__*/function () {
           var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
@@ -114,13 +126,13 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
                   _context2.next = 2;
-                  return _this.props.createBankCloneJob(bank.id, _this.props.currentUser.uuid);
+                  return _this2.props.createBankCloneJob(bank.id, _this2.props.currentUser.uuid);
                 case 2:
                   cloneJob = _context2.sent;
-                  _this.props.addToPolling(cloneJob.cloned_bank_id, t('{name} Copy', {
+                  _this2.props.addToPolling(cloneJob.cloned_bank_id, t('{name} Copy', {
                     name: bank.title
                   }));
-                  _this.props.addInfo(t('Creating "{name} Copy". Duplicate will appear in \'Shared with Me\' filter.', {
+                  _this2.props.addInfo(t('Creating "{name} Copy". Duplicate will appear in \'Shared with Me\' filter.', {
                     name: bank.title
                   }));
                 case 5:
@@ -133,7 +145,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
             return _ref3.apply(this, arguments);
           };
         }();
-        _this.props.withConfirm(partial(createCloneJob), {
+        _this2.props.withConfirm(partial(createCloneJob), {
           text: t('Are you sure you want to duplicate this item bank?'),
           title: t('Duplicate Bank'),
           continueText: t('Duplicate'),
@@ -142,14 +154,14 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         });
       };
     });
-    _defineProperty(_this, "updateSharedCount", function (count) {
-      _this.setState({
+    _defineProperty(_this2, "updateSharedCount", function (count) {
+      _this2.setState({
         sharingCount: count
       });
     });
-    _defineProperty(_this, "openSharingModal", function (bank) {
+    _defineProperty(_this2, "openSharingModal", function (bank) {
       return function () {
-        _this.setState({
+        _this2.setState({
           sharingModalOpen: true,
           sharingModalBank: bank,
           sharingCount: bank.sharedCount,
@@ -157,27 +169,27 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         });
       };
     });
-    _defineProperty(_this, "handleSharingModalDismiss", function () {
-      _this.setState({
+    _defineProperty(_this2, "handleSharingModalDismiss", function () {
+      _this2.setState({
         sharingModalOpen: false,
         sharingModalBank: null
       });
     });
-    _defineProperty(_this, "handleSharingButtonRef", function (bankId) {
+    _defineProperty(_this2, "handleSharingButtonRef", function (bankId) {
       return function (node) {
-        _this.sharingButtons[bankId] = node;
+        _this2.sharingButtons[bankId] = node;
       };
     });
-    _defineProperty(_this, "currentBankCount", function (bank) {
-      var _this$state = _this.state,
-        countedBank = _this$state.countedBank,
-        sharingCount = _this$state.sharingCount;
+    _defineProperty(_this2, "currentBankCount", function (bank) {
+      var _this2$state = _this2.state,
+        countedBank = _this2$state.countedBank,
+        sharingCount = _this2$state.sharingCount;
       if (countedBank === bank.id && Number.isInteger(sharingCount)) {
         return sharingCount;
       }
       return bank.sharedCount;
     });
-    _defineProperty(_this, "handleTableRef", function (element) {
+    _defineProperty(_this2, "handleTableRef", function (element) {
       if (element) {
         var simpleSelect = element.querySelector('[role="combobox"]');
         if (simpleSelect) {
@@ -185,51 +197,51 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         }
       }
     });
-    _defineProperty(_this, "renderBankInfo", function (bank) {
+    _defineProperty(_this2, "renderBankInfo", function (bank) {
       var navigateToBank = function navigateToBank(bankId) {
         return function () {
-          return _this.props.navigateToBank(bankId);
+          return _this2.props.navigateToBank(bankId);
         };
       };
       if (bank.status === 'copying') {
         return jsx("div", {
-          css: _this.props.styles.bankInfo,
+          css: _this2.props.styles.bankInfo,
           "data-automation": "sdk-bank-info",
           tabIndex: "-1"
         }, jsx("div", {
-          css: _this.props.styles.bankTitle
+          css: _this2.props.styles.bankTitle
         }, jsx(Heading, {
           as: "h2",
           level: "reset",
           "data-automation": "sdk-banks-list-bank-title-heading"
         }, bank.title)), jsx("div", {
-          css: _this.props.styles.bankDetails,
+          css: _this2.props.styles.bankDetails,
           "data-automation": "sdk-banks-list-bank-details"
         }, t('Currently duplicating')));
       } else {
         return jsx("div", {
-          css: _this.props.styles.bankInfo,
+          css: _this2.props.styles.bankInfo,
           "data-automation": "sdk-bank-info",
           tabIndex: "-1"
         }, jsx("div", {
-          css: _this.props.styles.bankTitle
+          css: _this2.props.styles.bankTitle
         }, jsx(Link, {
           onClick: navigateToBank(bank.id),
           themeOverride: {
-            color: _this.props.styles.bankTitleLinkColor,
-            hoverColor: _this.props.styles.bankTitleLinkHoverColor
+            color: _this2.props.styles.bankTitleLinkColor,
+            hoverColor: _this2.props.styles.bankTitleLinkHoverColor
           },
           "data-automation": "sdk-banks-list-bank-title-link"
         }, jsx(Heading, {
           as: "h2",
           level: "reset",
           "data-automation": "sdk-banks-list-bank-title-heading"
-        }, bank.title))), _this.renderDetails(bank));
+        }, bank.title))), _this2.renderDetails(bank));
       }
     });
-    _defineProperty(_this, "renderBankOptions", function (bank) {
+    _defineProperty(_this2, "renderBankOptions", function (bank) {
       var bankEditOptions = jsx(React.Fragment, null, jsx(IconButton, {
-        onClick: _this.openModal(bank),
+        onClick: _this2.openModal(bank),
         name: "Edit",
         size: "small",
         "data-automation": "sdk-edit-bank-button",
@@ -243,7 +255,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
           name: bank.title
         })
       }), jsx(IconButton, {
-        onClick: _this.openDeleteBankModal(bank),
+        onClick: _this2.openDeleteBankModal(bank),
         name: "Delete",
         size: "small",
         "data-automation": "sdk-delete-bank-button",
@@ -259,7 +271,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
       }));
       if (bank.status === 'copying') {
         return jsx("div", {
-          css: _this.props.styles.bankOptions
+          css: _this2.props.styles.bankOptions
         }, t('Duplicating'), jsx(Spinner, {
           renderTitle: t('Loading'),
           size: "x-small",
@@ -267,9 +279,9 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         }));
       } else {
         return jsx("div", {
-          css: _this.props.styles.bankOptions
+          css: _this2.props.styles.bankOptions
         }, jsx(IconButton, {
-          onClick: _this.openDuplicateBankModal(bank),
+          onClick: _this2.openDuplicateBankModal(bank),
           name: "Duplicate",
           size: "small",
           "data-automation": "sdk-duplicate-bank-button",
@@ -285,7 +297,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         }), jsx(IfFeature, {
           name: "item_bank_sharing"
         }, jsx(IconButton, {
-          onClick: _this.openSharingModal(bank),
+          onClick: _this2.openSharingModal(bank),
           name: "Share",
           size: "small",
           "data-automation": "sdk-shared-bank-share-link",
@@ -301,25 +313,25 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         })), bank.canEdit() ? bankEditOptions : null);
       }
     });
-    _defineProperty(_this, "renderBank", function (bank) {
+    _defineProperty(_this2, "renderBank", function (bank) {
       return jsx("div", {
         key: bank.id,
-        css: _this.props.styles.bankRow,
+        css: _this2.props.styles.bankRow,
         "data-automation": "sdk-banks-list-bank-row"
       }, jsx(EditBankModal, {
         workingBank: bank.getWorkingInstance()
-      }), _this.renderBankInfo(bank), _this.renderBankOptions(bank));
+      }), _this2.renderBankInfo(bank), _this2.renderBankOptions(bank));
     });
-    return _this;
+    return _this2;
   }
   _inherits(BanksList, _withI18nSupport);
   return _createClass(BanksList, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this2 = this;
+      var _this3 = this;
       if (this.state.sharingModalBank) {
         var bankFromList = this.props.banks.find(function (bank) {
-          return bank.get('id') === _this2.state.sharingModalBank.get('id');
+          return bank.get('id') === _this3.state.sharingModalBank.get('id');
         });
         if (!this.state.sharingModalBank.equals(bankFromList)) {
           this.setState({
@@ -369,7 +381,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
   }, {
     key: "renderTableRowHeader",
     value: function renderTableRowHeader(bank) {
-      var _this3 = this;
+      var _this4 = this;
       if (bank.status === 'copying') {
         return jsx(Table.RowHeader, null, jsx("div", {
           css: this.props.styles.rowHeader
@@ -381,7 +393,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
       } else {
         var navigateToBank = function navigateToBank(bankId) {
           return function () {
-            return _this3.props.navigateToBank(bankId);
+            return _this4.props.navigateToBank(bankId);
           };
         };
         return jsx(Table.RowHeader, null, jsx("div", {
@@ -430,7 +442,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
   }, {
     key: "renderTable",
     value: function renderTable() {
-      var _this4 = this;
+      var _this5 = this;
       return jsx(Table, {
         margin: "small 0",
         caption: t('Banks'),
@@ -445,7 +457,7 @@ export var BanksList = (_dec = withStyleOverrides(generateStyle, generateCompone
         id: "header-option-links",
         width: "1"
       }, jsx(ScreenReaderContent, null, t('Bank option links'))))), jsx(Table.Body, null, (this.props.banks.toArray() || []).map(function (bank) {
-        return _this4.renderTableRow(bank);
+        return _this5.renderTableRow(bank);
       })));
     }
   }, {

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

@@ -5,13 +5,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     bankRowBorderWidth: borders.widthSmall,
-    bankRowBorderColor: colors.tiara,
+    bankRowBorderColor: colors.contrasts.grey1214,
     bankInfoMargin: spacing.small,
     bankTitleFontSize: typography.fontSizeSmall,
     bankTitlePadding: spacing.xSmall,
-    bankTitleLinkColor: colors.licorice,
-    bankTitleLinkHoverColor: colors.licorice,
-    bankDetailsColor: colors.ash,
+    bankTitleLinkColor: colors.contrasts.grey125125,
+    bankTitleLinkHoverColor: colors.contrasts.grey125125,
+    bankDetailsColor: colors.contrasts.grey4570,
     bankDetailsFontSize: typography.fontSizeXSmall,
     bankOptionsMargin: spacing.small,
     BankOptionIconMargin: spacing.xSmall,

package/es/banks/components/CopyMoveBankEntryModal/presenter.js

@@ -4,8 +4,20 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
@@ -19,91 +31,156 @@ import BankSelection from '../../../common/components/resources/BankSelection/pr
 import { Modal, ModalHeader, ModalBody, ModalFooter, COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, TextInput, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import { featureOn } from '../../../common/util/featureCheck';
 export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
-  function CopyMoveBankEntryModal() {
-    var _this;
+  function CopyMoveBankEntryModal(props) {
+    var _this2;
     _classCallCheck(this, CopyMoveBankEntryModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CopyMoveBankEntryModal, [].concat(args));
-    _defineProperty(_this, "state", {
+    _this2 = _callSuper(this, CopyMoveBankEntryModal, [props]);
+    /**
+     * @type {React.RefObject<RadioInput> | null}
+     */
+    _defineProperty(_this2, "radioInputRef", null);
+    /**
+     * @type {React.RefObject<TextInput> | null}
+     */
+    _defineProperty(_this2, "textInputRef", null);
+    _defineProperty(_this2, "state", {
       bankType: 'existing',
       newBankTitle: '',
-      selectedBank: null
+      selectedBank: null,
+      radioValidationError: null,
+      selectValidationError: null
+    });
+    _defineProperty(_this2, "setBankInputRef", function (ref) {
+      _this2.bankSelectionInputRef = ref;
     });
-    _defineProperty(_this, "copyOrMove", function (newBankId) {
-      if (_this.props.keepCopy) {
-        _this.copyBankEntry(newBankId);
+    _defineProperty(_this2, "copyOrMove", function (newBankId) {
+      if (_this2.props.keepCopy) {
+        _this2.copyBankEntry(newBankId);
       } else {
-        _this.moveBankEntry(newBankId);
+        _this2.moveBankEntry(newBankId);
+      }
+      _this2.closeAction();
+    });
+    _defineProperty(_this2, "clearValidationErrors", function () {
+      _this2.setState({
+        radioValidationError: null,
+        selectValidationError: null
+      });
+    });
+    _defineProperty(_this2, "validateAction", function () {
+      var _this2$state = _this2.state,
+        bankType = _this2$state.bankType,
+        newBankTitle = _this2$state.newBankTitle,
+        selectedBank = _this2$state.selectedBank;
+      if (!bankType) {
+        var _this2$radioInputRef;
+        (_this2$radioInputRef = _this2.radioInputRef) === null || _this2$radioInputRef === void 0 || (_this2$radioInputRef = _this2$radioInputRef.current) === null || _this2$radioInputRef === void 0 || _this2$radioInputRef.focus();
+        _this2.setState({
+          radioValidationError: [{
+            text: t('Please choose a Copy/Move option'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'existing' && !selectedBank) {
+        _this2.bankSelectionInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: t('Please select a bank'),
+            type: 'newError'
+          }]
+        });
+        return false;
       }
-      _this.closeAction();
+      if (bankType === 'new' && (!newBankTitle || !newBankTitle.trim())) {
+        var _this2$textInputRef;
+        (_this2$textInputRef = _this2.textInputRef) === null || _this2$textInputRef === void 0 || (_this2$textInputRef = _this2$textInputRef.current) === null || _this2$textInputRef === void 0 || _this2$textInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: t('Please enter a new bank title'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      return true;
     });
-    _defineProperty(_this, "continueAction", function () {
-      if (_this.state.bankType === 'new') {
+    _defineProperty(_this2, "continueAction", function () {
+      if (!_this2.validateAction()) {
+        return;
+      }
+      if (_this2.state.bankType === 'new') {
         var newBank = Bank.create({
-          title: _this.state.newBankTitle,
-          language: _this.context.locale
+          title: _this2.state.newBankTitle,
+          language: _this2.context.locale
         });
-        _this.props.createBank(newBank).then(function (bankData) {
-          _this.copyOrMove(bankData.id);
+        _this2.props.createBank(newBank).then(function (bankData) {
+          _this2.copyOrMove(bankData.id);
         });
       } else {
-        _this.copyOrMove(_this.state.selectedBank.id);
+        _this2.copyOrMove(_this2.state.selectedBank.id);
       }
     });
-    _defineProperty(_this, "initiateMove", function (newBankId) {
+    _defineProperty(_this2, "initiateMove", function (newBankId) {
       if (featureOn('instfs_bank_entry_movement_endpoints')) {
-        return _this.props.moveBankEntry(_this.props.sourceBankId, _this.props.sourceBankEntryId, newBankId);
+        return _this2.props.moveBankEntry(_this2.props.sourceBankId, _this2.props.sourceBankEntryId, newBankId);
       } else {
-        return _this.props.updateBankEntry(_this.props.sourceBankId, _this.props.sourceBankEntryId, {
+        return _this2.props.updateBankEntry(_this2.props.sourceBankId, _this2.props.sourceBankEntryId, {
           bankId: newBankId
         });
       }
     });
-    _defineProperty(_this, "moveBankEntry", function (newBankId) {
-      return _this.initiateMove(newBankId).then(function (bankEntry) {
-        _this.props.disassociateBankEntry(_this.props.sourceBankId, _this.props.sourceBankEntryId);
+    _defineProperty(_this2, "moveBankEntry", function (newBankId) {
+      return _this2.initiateMove(newBankId).then(function (bankEntry) {
+        _this2.props.disassociateBankEntry(_this2.props.sourceBankId, _this2.props.sourceBankEntryId);
         return bankEntry;
-      }).then(_this.props.onAdd);
+      }).then(_this2.props.onAdd);
     });
-    _defineProperty(_this, "initiateCopy", function (newBankId) {
+    _defineProperty(_this2, "initiateCopy", function (newBankId) {
       if (featureOn('instfs_bank_entry_movement_endpoints')) {
-        return _this.props.copyBankEntry(_this.props.sourceBankId, _this.props.sourceBankEntryId, newBankId);
+        return _this2.props.copyBankEntry(_this2.props.sourceBankId, _this2.props.sourceBankEntryId, newBankId);
       } else {
-        return _this.props.createEntry().then(function (entry) {
-          return _this.props.createBankEntry(newBankId, _this.props.entryType, entry.id);
+        return _this2.props.createEntry().then(function (entry) {
+          return _this2.props.createBankEntry(newBankId, _this2.props.entryType, entry.id);
         });
       }
     });
-    _defineProperty(_this, "copyBankEntry", function (newBankId) {
-      return _this.initiateCopy(newBankId).then(_this.props.onAdd);
+    _defineProperty(_this2, "copyBankEntry", function (newBankId) {
+      return _this2.initiateCopy(newBankId).then(_this2.props.onAdd);
     });
-    _defineProperty(_this, "closeAction", function () {
-      if (_this.props.modalTrigger) {
-        _this.props.modalTrigger.focus();
+    _defineProperty(_this2, "closeAction", function () {
+      _this2.clearValidationErrors();
+      if (_this2.props.modalTrigger) {
+        _this2.props.modalTrigger.focus();
       }
-      _this.props.closeModal();
+      _this2.props.closeModal();
     });
-    _defineProperty(_this, "onBankSelection", function (e, option) {
-      _this.setState({
+    _defineProperty(_this2, "onBankSelection", function (e, option) {
+      _this2.clearValidationErrors();
+      _this2.setState({
         selectedBank: new Bank(option)
       });
     });
-    _defineProperty(_this, "onKeepCopyChange", function (e) {
-      _this.props.uiSet(COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked);
+    _defineProperty(_this2, "onKeepCopyChange", function (e) {
+      _this2.props.uiSet(COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked);
     });
-    _defineProperty(_this, "handleRadioChange", function (event, value) {
-      _this.setState({
+    _defineProperty(_this2, "handleRadioChange", function (event, value) {
+      _this2.clearValidationErrors();
+      _this2.setState({
         bankType: value
       });
     });
-    _defineProperty(_this, "onTitleChange", function (e) {
-      _this.setState({
+    _defineProperty(_this2, "onTitleChange", function (e) {
+      _this2.clearValidationErrors();
+      _this2.setState({
         newBankTitle: e.target.value
       });
     });
-    return _this;
+    _this2.radioInputRef = React.createRef();
+    _this2.textInputRef = React.createRef();
+    _this2.bankSelectionInputRef = React.createRef();
+    return _this2;
   }
   _inherits(CopyMoveBankEntryModal, _Component);
   return _createClass(CopyMoveBankEntryModal, [{
@@ -117,14 +194,9 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
   }, {
     key: "addToBankButton",
     value: function addToBankButton() {
-      var _this$state = this.state,
-        bankType = _this$state.bankType,
-        newBankTitle = _this$state.newBankTitle;
-      var disabled = bankType === 'existing' && !this.state.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
       return /*#__PURE__*/React.createElement(Button, {
         color: "primary",
         onClick: this.continueAction,
-        disabled: disabled,
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-add-to-bank-button"
       }, t('Add'));
@@ -134,16 +206,22 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
     value: function renderBankTypeContent() {
       if (this.state.bankType === 'existing') {
         return /*#__PURE__*/React.createElement(BankSelection, {
+          inputRef: this.setBankInputRef,
           onBankSelection: this.onBankSelection,
           selectedBank: this.state.selectedBank,
-          "data-automation": "sdk-bank-selection"
+          "data-automation": "sdk-bank-selection",
+          externalError: this.state.selectValidationError,
+          isRequired: true
         });
       }
       return /*#__PURE__*/React.createElement(TextInput, {
         onChange: this.onTitleChange,
         value: this.state.newBankTitle,
         renderLabel: t('New Bank Title'),
-        type: "text"
+        type: "text",
+        messages: this.state.selectValidationError,
+        ref: this.textInputRef,
+        isRequired: true
       });
     }
   }, {
@@ -153,10 +231,13 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
         onChange: this.handleRadioChange,
         name: t('Bank Type'),
         defaultValue: this.state.bankType,
-        description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank Type'))
+        description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank Type')),
+        messages: this.state.radioValidationError,
+        isRequired: true
       }, /*#__PURE__*/React.createElement(RadioInput, {
         value: "existing",
-        label: t('Existing item bank')
+        label: t('Existing item bank'),
+        ref: this.radioInputRef
       }), /*#__PURE__*/React.createElement(RadioInput, {
         value: "new",
         label: t('New item bank')