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

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

@@ -1,5 +1,4 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
@@ -8,8 +7,6 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _SharingModalPresenter;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-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) { _defineProperty(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;
@@ -30,9 +27,10 @@ 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, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT, SimpleSelect, withStyleOverrides } from '@instructure/quiz-common';
+import debounce from 'lodash/debounce';
+import { Modal, ModalHeader, ModalBody, ModalFooter, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT, SimpleSelect, withStyleOverrides, TextInput } from '@instructure/quiz-common';
 import { Heading } from '@instructure/ui-heading';
-import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton, CondensedButton, IconButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import { Grid } from '@instructure/ui-grid';
 import { Tabs } from '@instructure/ui-tabs';
@@ -45,30 +43,33 @@ import RootAccountSharing from './RootAccountSharing';
 import Spinner from '../../../common/components/shared/spinner/Spinner';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import t from '@instructure/quiz-i18n/es/format-message';
+import t from '@instructure/quiz-i18n/format-message';
+import { IconSearchLine, IconTroubleLine } from '@instructure/ui-icons';
 var noop = function noop() {};
 export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SharingModalPresenter = /*#__PURE__*/function (_Component) {
-  function SharingModalPresenter() {
+  // =============
+  //   LIFECYCLE
+  // =============
+
+  function SharingModalPresenter(props) {
     var _this2;
     _classCallCheck(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]);
     _defineProperty(_this2, "state", {
       accountPermission: null,
       shares: List(),
       newEntities: List(),
       searchSelection: [],
       searchPermission: READ_ONLY,
-      entitiesWithChangedPermission: {},
-      selectedTabIndex: 0
+      selectedTabIndex: 0,
+      value: '',
+      startingPoint: 0,
+      numOfResults: 0,
+      searchValue: '',
+      displayEntities: []
     });
     _defineProperty(_this2, "shareListRef", null);
     _defineProperty(_this2, "shareButtonRef", null);
-    // =============
-    //   LIFECYCLE
-    // =============
     _defineProperty(_this2, "checkForSharedBanks", function () {
       var size = _this2.props.sharedBanks.size;
       if (size >= 0 && size !== _this2.props.bank.sharedCount || size === 0) {
@@ -79,13 +80,70 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         });
       }
     });
+    _defineProperty(_this2, "normalizeText", function (text) {
+      return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+    });
     // =============
     //   HELPERS
     // =============
+    _defineProperty(_this2, "createFilteredList", function () {
+      var entities = _this2.state.shares;
+      var users = entities.filter(function (s) {
+        return s.get('entityType') === SHARED_WITH_USER;
+      });
+      var courses = entities.filter(function (s) {
+        return s.get('entityType') === SHARED_WITH_COURSE;
+      });
+      var accounts = entities.filter(function (s) {
+        return s.get('entityType') === 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;
+          }
+      }
+    });
     _defineProperty(_this2, "handleTabChange", function (event, _ref) {
       var index = _ref.index;
       _this2.setState({
-        selectedTabIndex: index
+        selectedTabIndex: index,
+        startingPoint: 0,
+        value: ''
+      }, function () {
+        _this2.checkForSharedBanks();
       });
     });
     _defineProperty(_this2, "modalDismissCleanup", function () {
@@ -99,30 +157,6 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
       // removes the creator's temporary sharedBank record
       _this2.props.removeSharedBank('-1');
     });
-    _defineProperty(_this2, "numEntitiesToRemove", function () {
-      var permissions = Object.values(_this2.state.entitiesWithChangedPermission);
-      return permissions.reduce(function (count, val) {
-        return val === REMOVED_ACCESS ? count + 1 : count;
-      }, 0);
-    });
-    _defineProperty(_this2, "newEntitiesToSubmit", function () {
-      var newEntities = _this2.state.newEntities.filter(function (entity) {
-        return _this2.state.entitiesWithChangedPermission[entity.get('id')] !== 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 !== CAN_EDIT) {
-        var creatorSharedBank = _this2.props.sharedBanks.find(function (sharedBank) {
-          return sharedBank.get('id') == '-1';
-        });
-        newEntities = newEntities.push(Map(_objectSpread(_objectSpread({}, creatorSharedBank.toJS()), {}, {
-          permission: newCreatorPerm
-        })));
-      }
-      return newEntities;
-    });
     _defineProperty(_this2, "isSharedWithAccount", function () {
       var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.state;
       return [READ_ONLY, CAN_EDIT].includes(state.accountPermission);
@@ -134,50 +168,11 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
       _this2.props.updateSharedCount(null);
       _this2.modalDismissCleanup();
     });
-    _defineProperty(_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 = _slicedToArray(_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: List()
-      });
-      _this2.modalDismissCleanup(!!_this2.numEntitiesToRemove());
-    });
     _defineProperty(_this2, "handleSearchSelectionChange", function (searchSelection) {
       _this2.setState({
         searchSelection: searchSelection
       });
     });
-    _defineProperty(_this2, "updateEntitiesCount", function () {
-      // state.shares is a list containing everyone in the list,
-      _this2.props.updateSharedCount(_this2.state.shares.size - _this2.numEntitiesToRemove());
-    });
     _defineProperty(_this2, "originalPermissionForEntity", function (entity) {
       var originalEntity = _this2.props.sharedBanks.find(function (sb) {
         return sb.get('id') == entity.get('id');
@@ -187,15 +182,15 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
     _defineProperty(_this2, "handleEntityRemove", function (entity, undoRemove) {
       _this2.confirmPermissionChange(entity, REMOVED_ACCESS);
     });
-    _defineProperty(_this2, "handleSearchPermissionChange", function (e, _ref4) {
-      var value = _ref4.value;
+    _defineProperty(_this2, "handleSearchPermissionChange", function (e, _ref2) {
+      var value = _ref2.value;
       _this2.setState({
         searchPermission: value
       });
     });
     _defineProperty(_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);
       });
@@ -221,7 +216,7 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
       });
     });
     _defineProperty(_this2, "updatePermission", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(entity, permission) {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(entity, permission) {
         var _this2$props, updateSharedBankPermission, getBank, bank;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -238,7 +233,7 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         }, _callee);
       }));
       return function (_x, _x2) {
-        return _ref5.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
     _defineProperty(_this2, "translatedPermissionLevel", function (permission) {
@@ -269,18 +264,24 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         };
       });
     });
-    _defineProperty(_this2, "handleAccountPermissionChange", function (e, _ref6) {
-      var value = _ref6.value;
+    _defineProperty(_this2, "handleAccountPermissionChange", function (e, _ref4) {
+      var value = _ref4.value;
       return _this2.setState({
         accountPermission: value
       });
     });
-    _defineProperty(_this2, "handleShareListRef", function (node) {
-      _this2.shareListRef = node;
-    });
     _defineProperty(_this2, "handleShareButtonRef", function (node) {
       _this2.shareButtonRef = node;
     });
+    _defineProperty(_this2, "handleChange", function (e, value) {
+      _this2.setState({
+        value: value
+      });
+    });
+    _defineProperty(_this2, "handleClear", function (e) {
+      e.stopPropagation();
+      _this2.handleChange(e, '');
+    });
     _defineProperty(_this2, "renderSearchSection", function (searchType) {
       if (_this2.props.bank.canEdit()) {
         return jsx(React.Fragment, null, jsx(Grid, {
@@ -319,15 +320,105 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         }));
       }
     });
-    _defineProperty(_this2, "renderShareList", function (entities) {
-      return jsx(ShareList, {
-        canEdit: _this2.props.bank.canEdit(),
-        entities: entities,
-        onPermissionChange: _this2.handleEntityPermissionChange,
-        onEntityRemove: _this2.handleEntityRemove,
-        sharedBanks: _this2.props.sharedBanks
+    _defineProperty(_this2, "renderShareList", function () {
+      if (_this2.props.loading) {
+        return jsx(View, {
+          height: "12em",
+          as: "div"
+        }, jsx(View, {
+          position: "absolute",
+          as: "div",
+          insetBlockEnd: "0"
+        }, jsx(Spinner, {
+          renderTitle: "Loading...",
+          size: "small",
+          fontSize: "medium"
+        })));
+      }
+      if (_this2.state.displayEntities.size > 0) {
+        return jsx(View, {
+          height: "12em",
+          overflowY: "auto",
+          overflowX: "hidden",
+          as: "div",
+          padding: "xx-small xx-small none"
+        }, jsx(ShareList, {
+          canEdit: _this2.props.bank.canEdit(),
+          entities: _this2.state.displayEntities,
+          onPermissionChange: _this2.handleEntityPermissionChange,
+          onEntityRemove: _this2.handleEntityRemove,
+          sharedBanks: _this2.props.sharedBanks
+        }), jsx("div", null, _this2.renderShowMoreButton()));
+      }
+      return jsx(View, {
+        height: "12em",
+        as: "div"
+      }, t('No results found'));
+    });
+    _defineProperty(_this2, "showMoreResult", function () {
+      _this2.setState({
+        startingPoint: _this2.state.startingPoint + _this2.props.limit
       });
     });
+    _defineProperty(_this2, "renderShowMoreButton", function () {
+      var shouldShowButton = _this2.state.startingPoint + _this2.props.limit < _this2.state.numOfResults;
+      if (!shouldShowButton) {
+        return null;
+      }
+      return jsx(View, {
+        css: {
+          display: shouldShowButton
+        },
+        background: "primary",
+        padding: "small none",
+        as: "div"
+      }, jsx(CondensedButton, {
+        onClick: function onClick(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          _this2.showMoreResult();
+        }
+      }, t('Show more')));
+    });
+    _defineProperty(_this2, "renderClearButton", function () {
+      if (!_this2.state.value.length || _this2.state.readOnly || _this2.state.disabled) return null;
+      return jsx(IconButton, {
+        type: "button",
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: "Clear search",
+        disabled: _this2.state.disabled || _this2.state.readOnly,
+        onClick: _this2.handleClear
+      }, jsx(IconTroubleLine, null));
+    });
+    _defineProperty(_this2, "renderSharedSearch", function () {
+      return jsx(View, {
+        margin: "none large none medium"
+      }, jsx(TextInput, {
+        size: 'medium',
+        placeholder: t('Search...'),
+        value: _this2.state.value,
+        onChange: _this2.handleChange,
+        interaction: 'enabled',
+        inputRef: function inputRef(el) {
+          return _this2.inputRef = el;
+        },
+        renderBeforeInput: jsx(IconSearchLine, {
+          inline: false
+        }),
+        renderAfterInput: _this2.renderClearButton(),
+        shouldNotWrap: true
+      }));
+    });
+    _this2.debouncedSearch = debounce(function () {
+      _this2.setState({
+        searchValue: _this2.state.value
+      });
+    }, 300);
+    _this2.debouncedStopLoading = debounce(function () {
+      if (_this2.props.loading != false) _this2.props.changeSharedBankLoading(false);
+    }, 300);
     return _this2;
   }
   _inherits(SharingModalPresenter, _Component);
@@ -354,6 +445,16 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         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",
@@ -401,7 +502,7 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, t('Currently shared with')), this.renderShareList(existingPeople)), jsx(Tabs.Panel, {
+      }, t('Currently shared with')), this.renderSharedSearch(), this.renderShareList()), jsx(Tabs.Panel, {
         renderTitle: t('Courses ({ coursesCount })', {
           coursesCount: existingCourses.size
         }),
@@ -411,7 +512,7 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, t('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)) && jsx(Tabs.Panel, {
+      }, t('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)) && jsx(Tabs.Panel, {
         renderTitle: t('Accounts ({ accountsCount })', {
           accountsCount: existingAccounts.size
         }),
@@ -421,37 +522,7 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, t('Currently shared with')), this.renderShareList(existingAccounts))));
-    }
-  }, {
-    key: "renderOriginalDesignEntities",
-    value: function renderOriginalDesignEntities(existingPeople, existingCourses) {
-      return jsx("div", {
-        className: "fs-mask"
-      }, jsx(Text, {
-        as: "div",
-        weight: "bold"
-      }, t('Currently shared with')), jsx(View, {
-        as: "div",
-        "data-automation": "sdk-shared-bank-user-list"
-      }, !this.state.newEntities.isEmpty() && jsx(View, {
-        as: "div",
-        margin: "0 0 medium 0"
-      }, this.renderShareList(this.state.newEntities)), jsx(Tabs, {
-        onRequestTabChange: this.handleTabChange
-      }, jsx(Tabs.Panel, {
-        renderTitle: t('People ({ peopleCount })', {
-          peopleCount: existingPeople.size
-        }),
-        isSelected: this.state.selectedTabIndex === 0,
-        padding: "large small small small"
-      }, this.renderShareList(existingPeople)), !existingCourses.isEmpty() && jsx(Tabs.Panel, {
-        renderTitle: t('Courses ({ coursesCount })', {
-          coursesCount: existingCourses.size
-        }),
-        isSelected: this.state.selectedTabIndex === 1,
-        padding: "large small small small"
-      }, this.renderShareList(existingCourses)))));
+      }, t('Currently shared with')), this.renderSharedSearch(), this.renderShareList())));
     }
   }, {
     key: "renderEntitiesSection",
@@ -534,7 +605,10 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
   updateSharedBankPermission: PropTypes.func.isRequired,
   updateSharedCount: PropTypes.func,
   withConfirm: PropTypes.func.isRequired,
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  limit: PropTypes.number,
+  loading: PropTypes.bool,
+  changeSharedBankLoading: PropTypes.func.isRequired
 }), _defineProperty(_SharingModalPresenter, "defaultProps", {
   bank: null,
   currentUser: null,
@@ -544,6 +618,8 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
   onDismiss: noop,
   onShare: function onShare() {},
   sharedBanks: List(),
-  updateSharedCount: Function.prototype
+  updateSharedCount: Function.prototype,
+  limit: 10,
+  loading: false
 }), _SharingModalPresenter)) || _class);
 export default SharingModalPresenter;