@instructure/quiz-core 17.54.2-rc.7 → 17.55.0

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

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
@@ -12,6 +14,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import partial from 'lodash/partial';
 import { Modal, ModalHeader, ModalBody, ModalFooter, CAN_EDIT, READ_ONLY, REMOVED_ACCESS } from '@instructure/quiz-common';
 import { Heading } from '@instructure/ui-heading';
 import { Button, CloseButton } from '@instructure/ui-buttons';
@@ -39,13 +42,13 @@ import t from '@instructure/quiz-i18n/es/format-message';
 
 var noop = function noop() {};
 
-var _ref5 = /*#__PURE__*/React.createElement(Grid.Col, {
+var _ref6 = /*#__PURE__*/React.createElement(Grid.Col, {
   width: "auto"
 }, /*#__PURE__*/React.createElement(IconAdminLine, {
   size: "medium"
 }));
 
-var _ref6 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref7 = /*#__PURE__*/React.createElement(Spinner, null);
 
 export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SharingModalPresenter, _Component);
@@ -158,14 +161,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
       _this.newEntitiesToSubmit().forEach(function (entity) {
         _this.props.onShare(entity.toJS());
 
-        var sharedBank = {
-          entityType: entity.get('entityType'),
-          entityId: entity.get('entityId'),
-          title: entity.get('title'),
-          bankId: _this.props.bank.id,
-          permission: entity.get('permission')
-        };
-        promises.push(_this.props.shareBank(sharedBank, _this.props.getUserInfo));
+        promises.push(_this.props.shareBank(_this.sharedBankForEntity(entity), _this.props.getUserInfo));
       }); // call the update api if any shared bank permission was updated
 
 
@@ -206,34 +202,42 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
       _this.props.updateSharedCount(_this.state.shares.size - _this.numEntitiesToRemove());
     };
 
-    _this.handleEntityRemove = function (id, undoRemove) {
+    _this.originalPermissionForEntity = function (entity) {
       var originalEntity = _this.props.sharedBanks.find(function (sb) {
-        return sb.get('id') == id;
+        return sb.get('id') == entity.get('id');
       }) || Map();
-      var originalPermission = originalEntity.get('permission', CAN_EDIT);
-      var permission = undoRemove ? originalPermission : REMOVED_ACCESS;
+      return originalEntity.get('permission', CAN_EDIT);
+    };
 
-      _this.setState(function (prevState) {
-        var sharesIndex = prevState.shares.findIndex(function (entity) {
-          return entity.get('id') == id;
-        });
-        var newEntitiesIndex = prevState.newEntities.findIndex(function (entity) {
-          return entity.get('id') == id;
-        });
-        var removedNewEntity = newEntitiesIndex > -1;
-        var newShares = removedNewEntity ? prevState.shares.delete(sharesIndex) : prevState.shares.setIn([sharesIndex, 'permission'], permission);
-        var newEntities = removedNewEntity ? prevState.newEntities.delete(newEntitiesIndex) : prevState.newEntities;
-        return {
-          shares: newShares,
-          newEntities: newEntities,
-          entitiesWithChangedPermission: Object.assign({}, prevState.entitiesWithChangedPermission, _defineProperty({}, id, permission))
-        };
-      }, _this.updateEntitiesCount);
+    _this.handleEntityRemove = function (entity, undoRemove) {
+      if (_this.props.subAccountBankSharingEnabled) {
+        _this.confirmPermissionChange(entity, REMOVED_ACCESS);
+      } else {
+        var permission = undoRemove ? _this.originalPermissionForEntity(entity) : REMOVED_ACCESS;
+
+        _this.setState(function (prevState) {
+          var sharesIndex = prevState.shares.findIndex(function (e) {
+            return e.get('id') == entity.get('id');
+          });
+          var newEntitiesIndex = prevState.newEntities.findIndex(function (e) {
+            return e.get('id') == entity.get('id');
+          });
+          var removedNewEntity = newEntitiesIndex > -1;
+          var newShares = removedNewEntity ? prevState.shares.delete(sharesIndex) : prevState.shares.setIn([sharesIndex, 'permission'], permission);
+          var newEntities = removedNewEntity ? prevState.newEntities.delete(newEntitiesIndex) : prevState.newEntities;
+          return {
+            shares: newShares,
+            newEntities: newEntities,
+            entitiesWithChangedPermission: Object.assign({}, prevState.entitiesWithChangedPermission, _defineProperty({}, entity.get('id'), permission))
+          };
+        }, _this.updateEntitiesCount);
+      }
     };
 
     _this.handleSearchPermissionChange = function (e, _ref3) {
       var value = _ref3.value;
-      return _this.setState({
+
+      _this.setState({
         searchPermission: value
       });
     };
@@ -259,23 +263,90 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
         });
       }));
 
-      _this.setState({
-        searchSelection: [],
-        shares: newEntities.concat(_this.state.shares),
-        newEntities: newEntities.concat(_this.state.newEntities)
-      }, _this.updateEntitiesCount);
+      if (_this.props.subAccountBankSharingEnabled) {
+        newEntities.forEach(function (entity) {
+          _this.props.onShare(entity.toJS());
+
+          _this.props.shareBank(_this.sharedBankForEntity(entity), _this.props.getUserInfo);
+        });
+
+        _this.setState({
+          searchSelection: []
+        });
+      } else {
+        _this.setState({
+          searchSelection: [],
+          shares: newEntities.concat(_this.state.shares),
+          newEntities: newEntities.concat(_this.state.newEntities)
+        }, _this.updateEntitiesCount);
+      }
+    };
+
+    _this.updatePermission = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(entity, permission) {
+        var _this$props, updateSharedBankPermission, getBank, bank;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this$props = _this.props, updateSharedBankPermission = _this$props.updateSharedBankPermission, getBank = _this$props.getBank, bank = _this$props.bank;
+                _context.next = 3;
+                return updateSharedBankPermission(bank.id, entity.get('id'), permission);
+
+              case 3:
+                getBank(bank.id); // make sure the user still has access to the bank
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x, _x2) {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+
+    _this.translatedPermissionLevel = function (permission) {
+      var _CAN_EDIT$READ_ONLY$p;
+
+      return (_CAN_EDIT$READ_ONLY$p = {}, _defineProperty(_CAN_EDIT$READ_ONLY$p, CAN_EDIT, t('edit')), _defineProperty(_CAN_EDIT$READ_ONLY$p, READ_ONLY, t('view')), _CAN_EDIT$READ_ONLY$p)[permission];
+    };
+
+    _this.confirmPermissionChange = function (entity, permission) {
+      var confirmText = permission === REMOVED_ACCESS ? t('You are about to remove { accessLevel } access for { entityTitle } to this bank.', {
+        accessLevel: _this.translatedPermissionLevel(_this.originalPermissionForEntity(entity)),
+        entityTitle: entity.get('title')
+      }) : t('You are about to change access level for { entityTitle } from { originalAccessLevel } to { permission }.', {
+        entityTitle: entity.get('title'),
+        originalAccessLevel: _this.translatedPermissionLevel(_this.originalPermissionForEntity(entity)),
+        permission: _this.translatedPermissionLevel(permission)
+      });
+
+      _this.props.withConfirm(partial(_this.updatePermission, entity, permission), {
+        title: t('Change Permission'),
+        text: confirmText,
+        continueText: t('Confirm')
+      });
     };
 
     _this.handleEntityPermissionChange = function (entity, permission) {
-      _this.setState(function (prevState) {
-        var index = prevState.shares.findIndex(function (share) {
-          return share.get('id') === entity.get('id');
+      if (_this.props.subAccountBankSharingEnabled) {
+        _this.confirmPermissionChange(entity, permission);
+      } else {
+        _this.setState(function (prevState) {
+          var index = prevState.shares.findIndex(function (share) {
+            return share.get('id') === entity.get('id');
+          });
+          return {
+            shares: prevState.shares.setIn([index, 'permission'], permission),
+            entitiesWithChangedPermission: Object.assign({}, prevState.entitiesWithChangedPermission, _defineProperty({}, entity.get('id'), permission))
+          };
         });
-        return {
-          shares: prevState.shares.setIn([index, 'permission'], permission),
-          entitiesWithChangedPermission: Object.assign({}, prevState.entitiesWithChangedPermission, _defineProperty({}, entity.get('id'), permission))
-        };
-      });
+      }
     };
 
     _this.toggleAccountShare = function (event) {
@@ -286,8 +357,8 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
       });
     };
 
-    _this.handleAccountPermissionChange = function (e, _ref4) {
-      var value = _ref4.value;
+    _this.handleAccountPermissionChange = function (e, _ref5) {
+      var value = _ref5.value;
       return _this.setState({
         accountPermission: value
       });
@@ -301,6 +372,45 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
       _this.shareButtonRef = node;
     };
 
+    _this.renderSearchSection = function (searchType) {
+      if (_this.props.bank.canEdit()) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+          vAlign: "bottom",
+          colSpacing: "small"
+        }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(AsyncSearch, {
+          getShareableCourses: _this.props.getShareableCourses,
+          getShareableUsers: _this.props.getShareableUsers,
+          improvedBankSharingEnabled: _this.props.improvedBankSharingEnabled,
+          minChars: _this.props.minChars,
+          onSelectionChange: _this.handleSearchSelectionChange,
+          searchType: searchType,
+          selectedOption: _this.state.searchSelection,
+          selectionFilter: _this.handleSearchFilter
+        })), _this.props.improvedBankSharingEnabled && /*#__PURE__*/React.createElement(Grid.Col, {
+          width: "auto"
+        }, /*#__PURE__*/React.createElement(SimpleSelect, {
+          onChange: _this.handleSearchPermissionChange,
+          value: _this.state.searchPermission,
+          renderLabel: t('Access')
+        }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+          id: "sharing-modal-search-section-select-option-can-view",
+          value: READ_ONLY
+        }, t('Can view')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+          id: "sharing-modal-search-section-select-option-can-edit",
+          value: CAN_EDIT
+        }, t('Can edit')))), /*#__PURE__*/React.createElement(Grid.Col, {
+          width: "auto"
+        }, /*#__PURE__*/React.createElement(Button, {
+          "data-automation": "sdk-shared-bank-add-user-button",
+          ref: _this.handleShareButtonRef,
+          onClick: _this.handleShare,
+          variant: _this.state.searchSelection.length ? 'success' : 'default'
+        }, t('Add'))))), /*#__PURE__*/React.createElement("div", {
+          className: styles.separator
+        }));
+      }
+    };
+
     return _this;
   }
 
@@ -323,15 +433,26 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
     //   HELPERS
     // =============
 
+  }, {
+    key: "sharedBankForEntity",
+    value: function sharedBankForEntity(entity) {
+      return {
+        entityType: entity.get('entityType'),
+        entityId: entity.get('entityId'),
+        title: entity.get('title'),
+        bankId: this.props.bank.id,
+        permission: entity.get('permission')
+      };
+    }
   }, {
     key: "renderAccountPermissions",
     // =============
     //   RENDERING
     // =============
     value: function renderAccountPermissions() {
-      var _this$props = this.props,
-          currentUser = _this$props.currentUser,
-          improvedBankSharingEnabled = _this$props.improvedBankSharingEnabled;
+      var _this$props2 = this.props,
+          currentUser = _this$props2.currentUser,
+          improvedBankSharingEnabled = _this$props2.improvedBankSharingEnabled;
       var roles = currentUser && currentUser.enrollment_names || [];
 
       if (improvedBankSharingEnabled && roles.includes('admin')) {
@@ -340,7 +461,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
           margin: "0 0 medium 0"
         }, /*#__PURE__*/React.createElement(Grid, {
           colSpacing: "small"
-        }, /*#__PURE__*/React.createElement(Grid.Row, null, _ref5, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(View, {
+        }, /*#__PURE__*/React.createElement(Grid.Row, null, _ref6, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(View, {
           as: "div",
           padding: "0 0 x-small 0"
         }, currentUser && currentUser.account_name || t('Account')), /*#__PURE__*/React.createElement(Checkbox, {
@@ -364,59 +485,54 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
         }, t('Can edit')))))));
       }
     }
-  }, {
-    key: "renderSearchSection",
-    value: function renderSearchSection() {
-      return /*#__PURE__*/React.createElement(Grid, {
-        vAlign: "bottom",
-        colSpacing: "small"
-      }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(AsyncSearch, {
-        getShareableCourses: this.props.getShareableCourses,
-        getShareableUsers: this.props.getShareableUsers,
-        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
-        minChars: this.props.minChars,
-        onSelectionChange: this.handleSearchSelectionChange,
-        selectedOption: this.state.searchSelection,
-        selectionFilter: this.handleSearchFilter
-      })), this.props.improvedBankSharingEnabled && /*#__PURE__*/React.createElement(Grid.Col, {
-        width: "auto"
-      }, /*#__PURE__*/React.createElement(SimpleSelect, {
-        onChange: this.handleSearchPermissionChange,
-        value: this.state.searchPermission,
-        renderLabel: t('Access')
-      }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-        id: "sharing-modal-search-section-select-option-can-view",
-        value: READ_ONLY
-      }, t('Can view')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-        id: "sharing-modal-search-section-select-option-can-edit",
-        value: CAN_EDIT
-      }, t('Can edit')))), /*#__PURE__*/React.createElement(Grid.Col, {
-        width: "auto"
-      }, /*#__PURE__*/React.createElement(Button, {
-        "data-automation": "sdk-shared-bank-add-user-button",
-        ref: this.handleShareButtonRef,
-        onClick: this.handleShare,
-        variant: this.state.searchSelection.length ? 'success' : 'default'
-      }, t('Add')))));
-    }
   }, {
     key: "renderEntitiesSection",
     value: function renderEntitiesSection() {
       return /*#__PURE__*/React.createElement(ShareList, {
-        ref: this.handleShareListRef,
-        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
         canEdit: this.props.bank.canEdit(),
+        entitiesWithChangedPermission: this.state.entitiesWithChangedPermission,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
         newEntities: this.state.newEntities,
+        onEntityRemove: this.handleEntityRemove,
+        onPermissionChange: this.handleEntityPermissionChange,
+        ref: this.handleShareListRef,
+        renderSearchSection: this.renderSearchSection // searchPermission and searchSelection are not used directly by ShareList,
+        // but are needed as props so that AsyncSearch/Select rerenders when those values change
+        ,
+        searchPermission: this.state.searchPermission,
+        searchSelection: this.state.searchSelection,
         sharedBanks: this.props.sharedBanks,
         shares: this.state.shares,
-        onPermissionChange: this.handleEntityPermissionChange,
-        onEntityRemove: this.handleEntityRemove,
-        entitiesWithChangedPermission: this.state.entitiesWithChangedPermission
+        subAccountBankSharingEnabled: this.props.subAccountBankSharingEnabled
       });
     }
+  }, {
+    key: "renderFooter",
+    value: function renderFooter() {
+      if (this.props.subAccountBankSharingEnabled) {
+        return /*#__PURE__*/React.createElement(Button, {
+          variant: "primary",
+          margin: "0 x-small 0 0",
+          onClick: this.handleDismiss
+        }, t('Close'));
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        "data-automation": "sdk-shared-bank-cancel-button",
+        variant: "light",
+        onClick: this.handleDismiss,
+        margin: "0 x-small 0 0"
+      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        "data-automation": "sdk-shared-bank-done-button",
+        variant: "primary",
+        onClick: this.handleSubmit,
+        margin: "0 x-small 0 0"
+      }, t('Done')));
+    }
   }, {
     key: "render",
     value: function render() {
+      var subAccountBankSharingEnabled = this.props.subAccountBankSharingEnabled;
       return /*#__PURE__*/React.createElement(Modal, {
         open: this.props.isOpen,
         onDismiss: this.handleDismiss,
@@ -429,21 +545,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderAccountPermissions(), this.props.bank.canEdit() && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "fs-mask"
-      }, this.renderSearchSection()), /*#__PURE__*/React.createElement("div", {
-        className: styles.separator
-      })), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref6), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-        "data-automation": "sdk-shared-bank-cancel-button",
-        variant: "light",
-        onClick: this.handleDismiss,
-        margin: "0 x-small 0 0"
-      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-        "data-automation": "sdk-shared-bank-done-button",
-        variant: "primary",
-        onClick: this.handleSubmit,
-        margin: "0 x-small 0 0"
-      }, t('Done'))));
+      })), /*#__PURE__*/React.createElement(ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), /*#__PURE__*/React.createElement(ModalFooter, null, this.renderFooter()));
     }
   }]);
 
@@ -476,9 +578,11 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
   removeSharedBank: PropTypes.func.isRequired,
   shareBank: PropTypes.func.isRequired,
   sharedBanks: ImmutablePropTypes.list,
+  subAccountBankSharingEnabled: PropTypes.bool,
   updateBank: PropTypes.func.isRequired,
   updateSharedBankPermission: PropTypes.func.isRequired,
-  updateSharedCount: PropTypes.func
+  updateSharedCount: PropTypes.func,
+  withConfirm: PropTypes.func.isRequired
 }, _class2.defaultProps = {
   bank: null,
   currentUser: null,
@@ -489,6 +593,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
   onDismiss: noop,
   onShare: function onShare() {},
   sharedBanks: List(),
+  subAccountBankSharingEnabled: false,
   updateSharedCount: Function.prototype
 }, _temp)) || _class);
 export default SharingModalPresenter;

package/lib/banks/api/banks.js

@@ -95,8 +95,12 @@ var getBank = function getBank(bankId) {
     });
     return fetcher.get("".concat(banksApiEndpoint, "/").concat(bankId)).then(function (response) {
       return dispatch((0, _callHandlers.handleBanksResponse)([response]));
-    }).catch(function () {// Do nothing because this case is handled elsewhere.
+    }).catch(function (err) {
+      if (err.response.status === 404) {
+        dispatch((0, _ui.clear)(_quizCommon.BANKS_BANK_PAGINATION));
+      } // Do nothing because this case is handled elsewhere.
       // This catch is to suppress an console error for "unhandled in promise".
+
     });
   };
 };
@@ -241,7 +245,7 @@ var shareBank = function shareBank(_shareBank, getUserInfo) {
         var sharedBank = {
           id: sharedBankInfo.id,
           entityType: _quizCommon.SHARED_WITH_COURSE,
-          entityId: _shareBank.uuid,
+          entityId: _shareBank.entityId,
           title: _shareBank.title,
           permission: sharedBankInfo.permission,
           bankId: _shareBank.bankId
@@ -344,7 +348,6 @@ var updateSharedBankPermission = function updateSharedBankPermission(bankId, sha
       body: shareBankData
     }).then(function (sharedBank) {
       if (permission === _quizCommon.REMOVED_ACCESS) {
-        dispatch((0, _ui.clear)(_quizCommon.BANKS_BANK_PAGINATION));
         dispatch((0, _sharedBanks.removeSharedBank)(sharedBankId));
       } else {
         dispatch((0, _sharedBanks.updateSharedBankPermission)(sharedBankId, permission));

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

@@ -299,6 +299,23 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
   }
 
   (0, _createClass2.default)(BanksList, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this2 = this;
+
+      if (this.state.sharingModalBank) {
+        var bankFromList = this.props.banks.find(function (bank) {
+          return bank.get('id') === _this2.state.sharingModalBank.get('id');
+        });
+
+        if (!this.state.sharingModalBank.equals(bankFromList)) {
+          this.setState({
+            sharingModalBank: bankFromList
+          });
+        }
+      }
+    }
+  }, {
     key: "renderDetails",
     value: function renderDetails(bank) {
       var separator = ' | ';

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

@@ -96,7 +96,7 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       var entity = _ref2.entity,
           isEntityRemoved = _ref2.isEntityRemoved;
 
-      _this.props.onEntityRemove(entity.get('id'), isEntityRemoved);
+      _this.props.onEntityRemove(entity, isEntityRemoved);
     };
 
     _this.handlePermissionChange = function (entity) {
@@ -186,7 +186,9 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
   }, {
     key: "render",
     value: function render() {
-      var shares = this.props.shares;
+      var _this$props = this.props,
+          shares = _this$props.shares,
+          subAccountBankSharingEnabled = _this$props.subAccountBankSharingEnabled;
       var newEntityIds = this.props.newEntities.map(function (e) {
         return e.get('id');
       });
@@ -201,30 +203,37 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "fs-mask"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, !subAccountBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         as: "div",
         weight: "bold"
       }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiView.View, {
         as: "div",
-        padding: "small 0 0 0",
         "data-automation": "sdk-shared-bank-user-list"
-      }, this.renderNewEntities(), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
+      }, !subAccountBankSharingEnabled && this.renderNewEntities(), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
         onRequestTabChange: this.handleTabChange
       }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
         renderTitle: (0, _formatMessage.default)('People ({ peopleCount })', {
           peopleCount: existingPeople.size
         }),
         isSelected: this.state.selectedTabIndex === 0,
-        padding: "small none"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        padding: "large 0 0 0"
+      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_USER), subAccountBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        as: "div",
+        weight: "bold",
+        lineHeight: "double"
+      }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
         vAlign: "middle"
-      }, existingPeople.map(this.renderEntity))), !existingCourses.isEmpty() && /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
         renderTitle: (0, _formatMessage.default)('Courses ({ coursesCount })', {
           coursesCount: existingCourses.size
         }),
         isSelected: this.state.selectedTabIndex === 1,
-        padding: "small none"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        padding: "large 0 0 0"
+      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_COURSE), subAccountBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        as: "div",
+        weight: "bold",
+        lineHeight: "double"
+      }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
         vAlign: "middle"
       }, existingCourses.map(this.renderEntity))))));
     }
@@ -235,6 +244,9 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
   canEdit: _propTypes.default.bool.isRequired,
   improvedBankSharingEnabled: _propTypes.default.bool.isRequired,
   newEntities: _reactImmutableProptypes.default.list,
+  onEntityRemove: _propTypes.default.func.isRequired,
+  onPermissionChange: _propTypes.default.func.isRequired,
+  renderSearchSection: _propTypes.default.func.isRequired,
   sharedBanks: _reactImmutableProptypes.default.list,
   shares: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.contains({
     avatar: _propTypes.default.string,
@@ -244,8 +256,7 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
     permission: _propTypes.default.string.isRequired,
     id: _propTypes.default.string.isRequired
   })).isRequired,
-  onPermissionChange: _propTypes.default.func.isRequired,
-  onEntityRemove: _propTypes.default.func.isRequired
+  subAccountBankSharingEnabled: _propTypes.default.bool.isRequired
 }, _class2.defaultProps = {
   newEntities: (0, _immutable.List)(),
   sharedBanks: (0, _immutable.List)()

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

@@ -195,18 +195,22 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
     };
 
     _this.search = (0, _debounce.default)(_this.props.debounceDelay, function (value) {
-      // TODO add the promise cancellation for avoiding having disordered requests
-      _this.props.getShareableUsers(value).then(function (shareableUsers) {
-        var filteredUsers = _this.filterOptions(shareableUsers);
+      var shouldSearchPeople = !_this.props.searchType || _this.props.searchType === _quizCommon.SHARED_WITH_USER;
+      var shouldSearchCourses = !_this.props.searchType || _this.props.searchType === _quizCommon.SHARED_WITH_COURSE; // TODO add the promise cancellation for avoiding having disordered requests
 
-        _this.setState({
-          shareableUsers: shareableUsers,
-          highlightedOptionId: filteredUsers.length ? filteredUsers[0].uuid : _this.state.highlightedOptionId,
-          isLoading: false
+      if (shouldSearchPeople) {
+        _this.props.getShareableUsers(value).then(function (shareableUsers) {
+          var filteredUsers = _this.filterOptions(shareableUsers);
+
+          _this.setState({
+            shareableUsers: shareableUsers,
+            highlightedOptionId: filteredUsers.length ? filteredUsers[0].uuid : _this.state.highlightedOptionId,
+            isLoading: false
+          });
         });
-      });
+      }
 
-      if (_this.props.improvedBankSharingEnabled) {
+      if (_this.props.improvedBankSharingEnabled && shouldSearchCourses) {
         _this.props.getShareableCourses(value).then(function (shareableCourses) {
           var filteredCourses = _this.filterOptions(shareableCourses);
 
@@ -350,10 +354,11 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
           inputValue = _this$state.inputValue,
           isShowingOptions = _this$state.isShowingOptions;
+      var placeholder = this.props.searchType === _quizCommon.SHARED_WITH_COURSE ? (0, _formatMessage.default)('Enter course name or course id') : (0, _formatMessage.default)('Enter name or login id');
       return /*#__PURE__*/_react.default.createElement(_uiSelect.Select, {
         "data-automation": "sdk-item-bank-share-input",
         renderLabel: (0, _formatMessage.default)('Share With'),
-        placeholder: (0, _formatMessage.default)('Enter name or login id...'),
+        placeholder: placeholder,
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
         inputRef: this.setInputRef,
@@ -380,6 +385,7 @@ AsyncSearch.propTypes = {
   onSelectionChange: _propTypes.default.func.isRequired,
   getShareableCourses: _propTypes.default.func.isRequired,
   getShareableUsers: _propTypes.default.func.isRequired,
+  searchType: _propTypes.default.string,
   selectedOption: _propTypes.default.arrayOf(_propTypes.default.shape({
     avatar: _propTypes.default.string,
     fullName: _propTypes.default.string,
@@ -391,6 +397,7 @@ AsyncSearch.propTypes = {
 AsyncSearch.defaultProps = {
   debounceDelay: 500,
   minChars: 1,
+  searchType: null,
   selectionFilter: function selectionFilter(value) {
     return value;
   }