@instructure/quiz-core 22.10.2 → 22.11.1-rc.88

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.SharingModalPresenter = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -19,6 +18,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _immutable = require("immutable");
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _quizCommon = require("@instructure/quiz-common");
 var _uiHeading = require("@instructure/ui-heading");
 var _uiButtons = require("@instructure/ui-buttons");
@@ -34,13 +34,12 @@ var _RootAccountSharing = _interopRequireDefault(require("./RootAccountSharing")
 var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/format-message"));
+var _uiIcons = require("@instructure/ui-icons");
 var _dec, _class, _SharingModalPresenter;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _callSuper(_this, derived, args) {
   function isNativeReflectConstruct() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
@@ -57,27 +56,29 @@ function _callSuper(_this, derived, args) {
 }
 var noop = function noop() {};
 var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_SharingModalPresenter = /*#__PURE__*/function (_Component) {
-  function SharingModalPresenter() {
+  // =============
+  //   LIFECYCLE
+  // =============
+
+  function SharingModalPresenter(props) {
     var _this2;
     (0, _classCallCheck2["default"])(this, SharingModalPresenter);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, SharingModalPresenter, [].concat(args));
+    _this2 = _callSuper(this, SharingModalPresenter, [props]);
     (0, _defineProperty2["default"])(_this2, "state", {
       accountPermission: null,
       shares: (0, _immutable.List)(),
       newEntities: (0, _immutable.List)(),
       searchSelection: [],
       searchPermission: _quizCommon.READ_ONLY,
-      entitiesWithChangedPermission: {},
-      selectedTabIndex: 0
+      selectedTabIndex: 0,
+      value: '',
+      startingPoint: 0,
+      numOfResults: 0,
+      searchValue: '',
+      displayEntities: []
     });
     (0, _defineProperty2["default"])(_this2, "shareListRef", null);
     (0, _defineProperty2["default"])(_this2, "shareButtonRef", null);
-    // =============
-    //   LIFECYCLE
-    // =============
     (0, _defineProperty2["default"])(_this2, "checkForSharedBanks", function () {
       var size = _this2.props.sharedBanks.size;
       if (size >= 0 && size !== _this2.props.bank.sharedCount || size === 0) {
@@ -88,13 +89,70 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         });
       }
     });
+    (0, _defineProperty2["default"])(_this2, "normalizeText", function (text) {
+      return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+    });
     // =============
     //   HELPERS
     // =============
+    (0, _defineProperty2["default"])(_this2, "createFilteredList", function () {
+      var entities = _this2.state.shares;
+      var users = entities.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_USER;
+      });
+      var courses = entities.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
+      });
+      var accounts = entities.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_ACCOUNT;
+      });
+      switch (_this2.state.selectedTabIndex) {
+        case 0:
+          {
+            var displayedUsers = users.filter(function (item) {
+              return _this2.normalizeText(item.get('title')).includes(_this2.normalizeText(_this2.state.searchValue));
+            });
+            _this2.setState({
+              numOfResults: displayedUsers.size,
+              displayEntities: displayedUsers.slice(0, _this2.state.startingPoint + _this2.props.limit)
+            });
+            _this2.debouncedStopLoading();
+            break;
+          }
+        case 1:
+          {
+            var displayedCourses = courses.filter(function (item) {
+              return _this2.normalizeText(item.get('title')).includes(_this2.normalizeText(_this2.state.searchValue));
+            });
+            _this2.setState({
+              numOfResults: displayedCourses.size,
+              displayEntities: displayedCourses.slice(0, _this2.state.startingPoint + _this2.props.limit)
+            });
+            _this2.debouncedStopLoading();
+            break;
+          }
+        case 2:
+          {
+            var displayedAccounts = accounts.filter(function (item) {
+              return _this2.normalizeText(item.get('title')).includes(_this2.normalizeText(_this2.state.searchValue));
+            });
+            _this2.setState({
+              numOfResults: displayedAccounts.size,
+              displayEntities: displayedAccounts.slice(0, _this2.state.startingPoint + _this2.props.limit)
+            });
+            _this2.debouncedStopLoading();
+            break;
+          }
+      }
+    });
     (0, _defineProperty2["default"])(_this2, "handleTabChange", function (event, _ref) {
       var index = _ref.index;
       _this2.setState({
-        selectedTabIndex: index
+        selectedTabIndex: index,
+        startingPoint: 0,
+        value: ''
+      }, function () {
+        _this2.checkForSharedBanks();
       });
     });
     (0, _defineProperty2["default"])(_this2, "modalDismissCleanup", function () {
@@ -108,30 +166,6 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
       // removes the creator's temporary sharedBank record
       _this2.props.removeSharedBank('-1');
     });
-    (0, _defineProperty2["default"])(_this2, "numEntitiesToRemove", function () {
-      var permissions = Object.values(_this2.state.entitiesWithChangedPermission);
-      return permissions.reduce(function (count, val) {
-        return val === _quizCommon.REMOVED_ACCESS ? count + 1 : count;
-      }, 0);
-    });
-    (0, _defineProperty2["default"])(_this2, "newEntitiesToSubmit", function () {
-      var newEntities = _this2.state.newEntities.filter(function (entity) {
-        return _this2.state.entitiesWithChangedPermission[entity.get('id')] !== _quizCommon.REMOVED_ACCESS;
-      });
-
-      // special case if the creator tries to change their own permissions before
-      // first share, since they don't have a SharedBank record to update
-      var newCreatorPerm = _this2.state.entitiesWithChangedPermission['-1'];
-      if (newCreatorPerm && newCreatorPerm !== _quizCommon.CAN_EDIT) {
-        var creatorSharedBank = _this2.props.sharedBanks.find(function (sharedBank) {
-          return sharedBank.get('id') == '-1';
-        });
-        newEntities = newEntities.push((0, _immutable.Map)(_objectSpread(_objectSpread({}, creatorSharedBank.toJS()), {}, {
-          permission: newCreatorPerm
-        })));
-      }
-      return newEntities;
-    });
     (0, _defineProperty2["default"])(_this2, "isSharedWithAccount", function () {
       var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.state;
       return [_quizCommon.READ_ONLY, _quizCommon.CAN_EDIT].includes(state.accountPermission);
@@ -143,50 +177,11 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
       _this2.props.updateSharedCount(null);
       _this2.modalDismissCleanup();
     });
-    (0, _defineProperty2["default"])(_this2, "handleSubmit", function () {
-      // calls the sharedBank api with the new entities you shared the current bank with
-      var promises = [];
-      if (_this2.state.accountPermission !== _this2.props.bank.accountPermission) {
-        var updatedBank = _this2.props.bank.set('accountPermission', _this2.state.accountPermission);
-        promises.push(_this2.props.updateBank(updatedBank));
-      }
-      _this2.newEntitiesToSubmit().forEach(function (entity) {
-        _this2.props.onShare(entity.toJS());
-        promises.push(_this2.props.shareBank(_this2.sharedBankForEntity(entity), _this2.props.getUserInfo));
-      });
-
-      // call the update api if any shared bank permission was updated
-      Object.entries(_this2.state.entitiesWithChangedPermission).forEach(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-          sharedBankId = _ref3[0],
-          permission = _ref3[1];
-        var sharedBank = _this2.props.sharedBanks.find(function (sharedBank) {
-          return sharedBank.get('id') === sharedBankId;
-        });
-        if (sharedBank && sharedBank.get('permission') !== permission && sharedBankId != '-1') {
-          promises.push(_this2.props.updateSharedBankPermission(_this2.props.bank.id, sharedBankId, permission));
-        }
-      });
-
-      // waits till all the calls to the shareBank and updateSharedBank apis have completed
-      Promise.all(promises).then(function (values) {
-        // calls getBank for the current bank to update the sharedCount
-        _this2.props.getBank(_this2.props.bank.id);
-      });
-      _this2.setState({
-        newEntities: (0, _immutable.List)()
-      });
-      _this2.modalDismissCleanup(!!_this2.numEntitiesToRemove());
-    });
     (0, _defineProperty2["default"])(_this2, "handleSearchSelectionChange", function (searchSelection) {
       _this2.setState({
         searchSelection: searchSelection
       });
     });
-    (0, _defineProperty2["default"])(_this2, "updateEntitiesCount", function () {
-      // state.shares is a list containing everyone in the list,
-      _this2.props.updateSharedCount(_this2.state.shares.size - _this2.numEntitiesToRemove());
-    });
     (0, _defineProperty2["default"])(_this2, "originalPermissionForEntity", function (entity) {
       var originalEntity = _this2.props.sharedBanks.find(function (sb) {
         return sb.get('id') == entity.get('id');
@@ -196,15 +191,15 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
     (0, _defineProperty2["default"])(_this2, "handleEntityRemove", function (entity, undoRemove) {
       _this2.confirmPermissionChange(entity, _quizCommon.REMOVED_ACCESS);
     });
-    (0, _defineProperty2["default"])(_this2, "handleSearchPermissionChange", function (e, _ref4) {
-      var value = _ref4.value;
+    (0, _defineProperty2["default"])(_this2, "handleSearchPermissionChange", function (e, _ref2) {
+      var value = _ref2.value;
       _this2.setState({
         searchPermission: value
       });
     });
     (0, _defineProperty2["default"])(_this2, "handleSearchFilter", function (searchResults) {
       return searchResults.filter(function (result) {
-        return !_this2.state.shares.some(function (entity) {
+        return !_this2.props.sharedBanks.some(function (entity) {
           return entity.get('entityId') === result.uuid;
         }) && (result.uuid !== _this2.props.bank.creator || _this2.props.bank.sharedCount > 0);
       });
@@ -230,7 +225,7 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
       });
     });
     (0, _defineProperty2["default"])(_this2, "updatePermission", /*#__PURE__*/function () {
-      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(entity, permission) {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(entity, permission) {
         var _this2$props, updateSharedBankPermission, getBank, bank;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -247,7 +242,7 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         }, _callee);
       }));
       return function (_x, _x2) {
-        return _ref5.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
     (0, _defineProperty2["default"])(_this2, "translatedPermissionLevel", function (permission) {
@@ -278,18 +273,24 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         };
       });
     });
-    (0, _defineProperty2["default"])(_this2, "handleAccountPermissionChange", function (e, _ref6) {
-      var value = _ref6.value;
+    (0, _defineProperty2["default"])(_this2, "handleAccountPermissionChange", function (e, _ref4) {
+      var value = _ref4.value;
       return _this2.setState({
         accountPermission: value
       });
     });
-    (0, _defineProperty2["default"])(_this2, "handleShareListRef", function (node) {
-      _this2.shareListRef = node;
-    });
     (0, _defineProperty2["default"])(_this2, "handleShareButtonRef", function (node) {
       _this2.shareButtonRef = node;
     });
+    (0, _defineProperty2["default"])(_this2, "handleChange", function (e, value) {
+      _this2.setState({
+        value: value
+      });
+    });
+    (0, _defineProperty2["default"])(_this2, "handleClear", function (e) {
+      e.stopPropagation();
+      _this2.handleChange(e, '');
+    });
     (0, _defineProperty2["default"])(_this2, "renderSearchSection", function (searchType) {
       if (_this2.props.bank.canEdit()) {
         return (0, _emotion.jsx)(_react["default"].Fragment, null, (0, _emotion.jsx)(_uiGrid.Grid, {
@@ -328,15 +329,105 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         }));
       }
     });
-    (0, _defineProperty2["default"])(_this2, "renderShareList", function (entities) {
-      return (0, _emotion.jsx)(_ShareList["default"], {
-        canEdit: _this2.props.bank.canEdit(),
-        entities: entities,
-        onPermissionChange: _this2.handleEntityPermissionChange,
-        onEntityRemove: _this2.handleEntityRemove,
-        sharedBanks: _this2.props.sharedBanks
+    (0, _defineProperty2["default"])(_this2, "renderShareList", function () {
+      if (_this2.props.loading) {
+        return (0, _emotion.jsx)(_uiView.View, {
+          height: "12em",
+          as: "div"
+        }, (0, _emotion.jsx)(_uiView.View, {
+          position: "absolute",
+          as: "div",
+          insetBlockEnd: "0"
+        }, (0, _emotion.jsx)(_Spinner["default"], {
+          renderTitle: "Loading...",
+          size: "small",
+          fontSize: "medium"
+        })));
+      }
+      if (_this2.state.displayEntities.size > 0) {
+        return (0, _emotion.jsx)(_uiView.View, {
+          height: "12em",
+          overflowY: "auto",
+          overflowX: "hidden",
+          as: "div",
+          padding: "xx-small xx-small none"
+        }, (0, _emotion.jsx)(_ShareList["default"], {
+          canEdit: _this2.props.bank.canEdit(),
+          entities: _this2.state.displayEntities,
+          onPermissionChange: _this2.handleEntityPermissionChange,
+          onEntityRemove: _this2.handleEntityRemove,
+          sharedBanks: _this2.props.sharedBanks
+        }), (0, _emotion.jsx)("div", null, _this2.renderShowMoreButton()));
+      }
+      return (0, _emotion.jsx)(_uiView.View, {
+        height: "12em",
+        as: "div"
+      }, (0, _formatMessage["default"])('No results found'));
+    });
+    (0, _defineProperty2["default"])(_this2, "showMoreResult", function () {
+      _this2.setState({
+        startingPoint: _this2.state.startingPoint + _this2.props.limit
       });
     });
+    (0, _defineProperty2["default"])(_this2, "renderShowMoreButton", function () {
+      var shouldShowButton = _this2.state.startingPoint + _this2.props.limit < _this2.state.numOfResults;
+      if (!shouldShowButton) {
+        return null;
+      }
+      return (0, _emotion.jsx)(_uiView.View, {
+        css: {
+          display: shouldShowButton
+        },
+        background: "primary",
+        padding: "small none",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiButtons.CondensedButton, {
+        onClick: function onClick(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          _this2.showMoreResult();
+        }
+      }, (0, _formatMessage["default"])('Show more')));
+    });
+    (0, _defineProperty2["default"])(_this2, "renderClearButton", function () {
+      if (!_this2.state.value.length || _this2.state.readOnly || _this2.state.disabled) return null;
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
+        type: "button",
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: "Clear search",
+        disabled: _this2.state.disabled || _this2.state.readOnly,
+        onClick: _this2.handleClear
+      }, (0, _emotion.jsx)(_uiIcons.IconTroubleLine, null));
+    });
+    (0, _defineProperty2["default"])(_this2, "renderSharedSearch", function () {
+      return (0, _emotion.jsx)(_uiView.View, {
+        margin: "none large none medium"
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+        size: 'medium',
+        placeholder: (0, _formatMessage["default"])('Search...'),
+        value: _this2.state.value,
+        onChange: _this2.handleChange,
+        interaction: 'enabled',
+        inputRef: function inputRef(el) {
+          return _this2.inputRef = el;
+        },
+        renderBeforeInput: (0, _emotion.jsx)(_uiIcons.IconSearchLine, {
+          inline: false
+        }),
+        renderAfterInput: _this2.renderClearButton(),
+        shouldNotWrap: true
+      }));
+    });
+    _this2.debouncedSearch = (0, _debounce["default"])(function () {
+      _this2.setState({
+        searchValue: _this2.state.value
+      });
+    }, 300);
+    _this2.debouncedStopLoading = (0, _debounce["default"])(function () {
+      if (_this2.props.loading != false) _this2.props.changeSharedBankLoading(false);
+    }, 300);
     return _this2;
   }
   (0, _inherits2["default"])(SharingModalPresenter, _Component);
@@ -363,6 +454,16 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         var updatedBank = this.props.bank.set('accountPermission', this.state.accountPermission);
         this.props.updateBank(updatedBank, false);
       }
+      if (prevState.value !== this.state.value) {
+        if (this.props.loading == false) this.props.changeSharedBankLoading(true);
+        this.setState({
+          startingPoint: 0
+        });
+        this.debouncedSearch();
+      }
+      if (prevState.searchValue !== this.state.searchValue || prevState.startingPoint !== this.state.startingPoint || prevState.selectedTabIndex !== this.state.selectedTabIndex || prevState.shares.size !== this.state.shares.size) {
+        this.createFilteredList();
+      }
     }
   }, {
     key: "sharedBankForEntity",
@@ -410,7 +511,7 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, (0, _formatMessage["default"])('Currently shared with')), this.renderShareList(existingPeople)), (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
+      }, (0, _formatMessage["default"])('Currently shared with')), this.renderSharedSearch(), this.renderShareList()), (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
         renderTitle: (0, _formatMessage["default"])('Courses ({ coursesCount })', {
           coursesCount: existingCourses.size
         }),
@@ -420,7 +521,7 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, (0, _formatMessage["default"])('Currently shared with')), this.renderShareList(existingCourses)), ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts)) && (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
+      }, (0, _formatMessage["default"])('Currently shared with')), this.renderSharedSearch(), this.renderShareList()), ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts)) && (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
         renderTitle: (0, _formatMessage["default"])('Accounts ({ accountsCount })', {
           accountsCount: existingAccounts.size
         }),
@@ -430,37 +531,7 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, (0, _formatMessage["default"])('Currently shared with')), this.renderShareList(existingAccounts))));
-    }
-  }, {
-    key: "renderOriginalDesignEntities",
-    value: function renderOriginalDesignEntities(existingPeople, existingCourses) {
-      return (0, _emotion.jsx)("div", {
-        className: "fs-mask"
-      }, (0, _emotion.jsx)(_uiText.Text, {
-        as: "div",
-        weight: "bold"
-      }, (0, _formatMessage["default"])('Currently shared with')), (0, _emotion.jsx)(_uiView.View, {
-        as: "div",
-        "data-automation": "sdk-shared-bank-user-list"
-      }, !this.state.newEntities.isEmpty() && (0, _emotion.jsx)(_uiView.View, {
-        as: "div",
-        margin: "0 0 medium 0"
-      }, this.renderShareList(this.state.newEntities)), (0, _emotion.jsx)(_uiTabs.Tabs, {
-        onRequestTabChange: this.handleTabChange
-      }, (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
-        renderTitle: (0, _formatMessage["default"])('People ({ peopleCount })', {
-          peopleCount: existingPeople.size
-        }),
-        isSelected: this.state.selectedTabIndex === 0,
-        padding: "large small small small"
-      }, this.renderShareList(existingPeople)), !existingCourses.isEmpty() && (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
-        renderTitle: (0, _formatMessage["default"])('Courses ({ coursesCount })', {
-          coursesCount: existingCourses.size
-        }),
-        isSelected: this.state.selectedTabIndex === 1,
-        padding: "large small small small"
-      }, this.renderShareList(existingCourses)))));
+      }, (0, _formatMessage["default"])('Currently shared with')), this.renderSharedSearch(), this.renderShareList())));
     }
   }, {
     key: "renderEntitiesSection",
@@ -543,7 +614,10 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
   updateSharedBankPermission: _propTypes["default"].func.isRequired,
   updateSharedCount: _propTypes["default"].func,
   withConfirm: _propTypes["default"].func.isRequired,
-  styles: _propTypes["default"].object
+  styles: _propTypes["default"].object,
+  limit: _propTypes["default"].number,
+  loading: _propTypes["default"].bool,
+  changeSharedBankLoading: _propTypes["default"].func.isRequired
 }), (0, _defineProperty2["default"])(_SharingModalPresenter, "defaultProps", {
   bank: null,
   currentUser: null,
@@ -553,6 +627,8 @@ var SharingModalPresenter = exports.SharingModalPresenter = (_dec = (0, _quizCom
   onDismiss: noop,
   onShare: function onShare() {},
   sharedBanks: (0, _immutable.List)(),
-  updateSharedCount: Function.prototype
+  updateSharedCount: Function.prototype,
+  limit: 10,
+  loading: false
 }), _SharingModalPresenter)) || _class);
 var _default = exports["default"] = SharingModalPresenter;