@instructure/quiz-core 20.10.1-rc.4 → 20.10.1-rc.6

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

@@ -59,7 +59,7 @@ export var RootAccountSharing = (_dec = withStyle(generateStyle, generateCompone
       }, /*#__PURE__*/React.createElement(Grid.Row, null, _ref, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(View, {
         as: "div",
         padding: "0 0 x-small 0"
-      }, this.props.accountName || t('Account')), /*#__PURE__*/React.createElement(Checkbox, {
+      }, this.props.accountName), /*#__PURE__*/React.createElement(Checkbox, {
         label: t('Share with Institution'),
         variant: "toggle",
         value: "accountPermission",
@@ -84,11 +84,12 @@ export var RootAccountSharing = (_dec = withStyle(generateStyle, generateCompone
   RootAccountSharing.displayName = "RootAccountSharing";
   return RootAccountSharing;
 }(Component), _class2.propTypes = {
-  accountName: PropTypes.string.isRequired,
+  accountName: PropTypes.string,
   onShareChange: PropTypes.func.isRequired,
   onShareTypeChange: PropTypes.func.isRequired,
   accountPermission: PropTypes.string
 }, _class2.defaultProps = {
+  accountName: t('Account'),
   accountPermission: null
 }, _temp)) || _class);
 export default RootAccountSharing;

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

@@ -8,24 +8,20 @@ var _dec, _class, _class2, _temp;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Map } from 'immutable';
 import { IconCoursesLine, IconTrashLine, IconResetLine } from '@instructure/ui-icons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { View } from '@instructure/ui-view';
 import { Grid } from '@instructure/ui-grid';
-import { Text } from '@instructure/ui-text';
 import { Avatar } from '@instructure/ui-avatar';
-import { Tabs } from '@instructure/ui-tabs';
+import { SimpleSelect } from '@instructure/ui-simple-select';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { withStyle, jsx } from '@instructure/emotion';
+import { CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_COURSE } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/es/format-message';
 import { ContextualIconButton } from "../ContextualIconButton/index.js";
-import RootAccountSharing from "../RootAccountSharing.js";
-import { SimpleSelect } from '@instructure/ui-simple-select';
 import generateStyle from "./styles.js";
-import { CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT } from '@instructure/quiz-common';
-import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref4 = jsx(IconCoursesLine, {
+var _ref3 = jsx(IconCoursesLine, {
   size: "small"
 });
 
@@ -44,16 +40,13 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      selectedTabIndex: 0
-    };
 
-    _this.handleTabChange = function (event, _ref) {
-      var index = _ref.index;
+    _this.handlePermissionChange = function (entity) {
+      return function (e, _ref) {
+        var value = _ref.value;
 
-      _this.setState({
-        selectedTabIndex: index
-      });
+        _this.props.onPermissionChange(entity, value);
+      };
     };
 
     _this.handleEntityRemove = function (e, _ref2) {
@@ -63,15 +56,7 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
       _this.props.onEntityRemove(entity, isEntityRemoved);
     };
 
-    _this.handlePermissionChange = function (entity) {
-      return function (e, _ref3) {
-        var value = _ref3.value;
-
-        _this.props.onPermissionChange(entity, value);
-      };
-    };
-
-    _this.removeButton = function (entity, isEntityRemoved) {
+    _this.renderRemoveButton = function (entity, isEntityRemoved) {
       var context = {
         entity: entity,
         isEntityRemoved: isEntityRemoved
@@ -90,7 +75,7 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
       });
     };
 
-    _this.renderEntity = function (entity, index) {
+    _this.renderEntity = function (entity) {
       var isEntityRemoved = entity.get('permission') === REMOVED_ACCESS;
       var isCourse = entity.get('entityType') === SHARED_WITH_COURSE;
       var isOnlyEntity = _this.props.shares.size <= 1;
@@ -103,7 +88,7 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
         "data-automation": "sdk-shared-with-entity-row"
       }, jsx(Grid.Col, {
         width: "small"
-      }, isCourse ? _ref4 : jsx(Avatar, {
+      }, isCourse ? _ref3 : jsx(Avatar, {
         name: entity.get('title'),
         src: entity.get('avatar'),
         size: "small"
@@ -127,98 +112,18 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
         value: CAN_EDIT
       }, t('Can edit')))), jsx(Grid.Col, {
         width: "auto"
-      }, !isOnlyEntity && _this.props.canEdit && (_this.props.improvedBankSharingEnabled || !isCourse) && _this.removeButton(entity, isEntityRemoved)));
+      }, !isOnlyEntity && _this.props.canEdit && (_this.props.improvedBankSharingEnabled || !isCourse) && _this.renderRemoveButton(entity, isEntityRemoved)));
     };
 
     return _this;
   }
 
   _createClass(ShareList, [{
-    key: "renderNewEntities",
-    value: function renderNewEntities() {
-      if (!this.props.newEntities.isEmpty()) {
-        return jsx(View, {
-          as: "div",
-          margin: "0 0 medium 0"
-        }, jsx(Grid, {
-          vAlign: "middle"
-        }, this.props.newEntities.map(this.renderEntity)));
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          shares = _this$props.shares,
-          subAccountBankSharingEnabled = _this$props.subAccountBankSharingEnabled,
-          currentUser = _this$props.currentUser;
-      var newEntityIds = this.props.newEntities.map(function (e) {
-        return e.get('id');
-      });
-      var existingShares = shares.filterNot(function (s) {
-        return newEntityIds.includes(s.get('id'));
-      });
-      var existingPeople = existingShares.filter(function (s) {
-        return s.get('entityType') === SHARED_WITH_USER;
-      });
-      var existingCourses = existingShares.filter(function (s) {
-        return s.get('entityType') === SHARED_WITH_COURSE;
-      });
-      var existingAccounts = existingShares.filter(function (s) {
-        return s.get('entityType') === SHARED_WITH_ACCOUNT;
-      });
-      return jsx("div", {
-        className: "fs-mask"
-      }, !subAccountBankSharingEnabled && jsx(Text, {
-        as: "div",
-        weight: "bold"
-      }, t('Currently shared with')), jsx(View, {
-        as: "div",
-        "data-automation": "sdk-shared-bank-user-list"
-      }, !subAccountBankSharingEnabled && this.renderNewEntities(), 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"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(SHARED_WITH_USER), subAccountBankSharingEnabled && jsx(Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, t('Currently shared with')), jsx(Grid, {
-        vAlign: "middle"
-      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && jsx(Tabs.Panel, {
-        renderTitle: t('Courses ({ coursesCount })', {
-          coursesCount: existingCourses.size
-        }),
-        isSelected: this.state.selectedTabIndex === 1,
-        padding: "large small small small"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(SHARED_WITH_COURSE), subAccountBankSharingEnabled && jsx(Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, t('Currently shared with')), jsx(Grid, {
+      return jsx(Grid, {
         vAlign: "middle"
-      }, existingCourses.map(this.renderEntity))), subAccountBankSharingEnabled && ((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
-        }),
-        isSelected: this.state.selectedTabIndex === 2,
-        padding: "large small small small"
-      }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) && jsx(RootAccountSharing, {
-        accountName: this.props.accountName,
-        onShareChange: this.props.onToggleAccountShare,
-        onShareTypeChange: this.props.onAccountPermissionChange,
-        accountPermission: this.props.accountPermission
-      }), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts) && this.props.renderSearchSection(SHARED_WITH_ACCOUNT), jsx(Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, t('Currently shared with')), jsx(Grid, {
-        vAlign: "middle"
-      }, existingAccounts.map(this.renderEntity))))));
+      }, this.props.entities.map(this.renderEntity));
     }
   }]);
 
@@ -226,15 +131,15 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
   return ShareList;
 }(Component), _class2.propTypes = {
   canEdit: PropTypes.bool.isRequired,
-  currentUser: PropTypes.shape({
-    bank_admin: PropTypes.bool,
-    can_share_banks_with_subaccounts: PropTypes.bool
-  }),
+  entities: ImmutablePropTypes.listOf(ImmutablePropTypes.contains({
+    entityType: PropTypes.string.isRequired,
+    entityId: PropTypes.string.isRequired,
+    permission: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired
+  })).isRequired,
   improvedBankSharingEnabled: PropTypes.bool.isRequired,
-  newEntities: ImmutablePropTypes.list,
-  onEntityRemove: PropTypes.func.isRequired,
   onPermissionChange: PropTypes.func.isRequired,
-  renderSearchSection: PropTypes.func.isRequired,
+  onEntityRemove: PropTypes.func.isRequired,
   sharedBanks: ImmutablePropTypes.list,
   shares: ImmutablePropTypes.listOf(ImmutablePropTypes.contains({
     avatar: PropTypes.string,
@@ -244,18 +149,7 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
     permission: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired
   })).isRequired,
-  subAccountBankSharingEnabled: PropTypes.bool.isRequired,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: PropTypes.object,
-  accountName: PropTypes.string,
-  onAccountPermissionChange: PropTypes.func.isRequired,
-  onToggleAccountShare: PropTypes.func.isRequired,
-  accountPermission: PropTypes.string
-}, _class2.defaultProps = {
-  accountName: t('Account'),
-  accountPermission: null,
-  currentUser: null,
-  newEntities: List(),
-  sharedBanks: List()
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default ShareList;

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

@@ -18,20 +18,20 @@ 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 { Modal, ModalHeader, ModalBody, ModalFooter, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT } from '@instructure/quiz-common';
 import { Heading } from '@instructure/ui-heading';
 import { Button, CloseButton } from '@instructure/ui-buttons';
-import { IconAdminLine } from '@instructure/ui-icons';
-import { Checkbox } from '@instructure/ui-checkbox';
 import { View } from '@instructure/ui-view';
 import { Grid } from '@instructure/ui-grid';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Tabs } from '@instructure/ui-tabs';
+import { Text } from '@instructure/ui-text';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { withStyle, jsx } from '@instructure/emotion';
 import elementsForSelectors from "../../../common/util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import ShareList from "./ShareList/index.js";
 import AsyncSearch from "../AsyncSearch/index.js";
+import RootAccountSharing from "./RootAccountSharing.js";
 import Spinner from "../../../common/components/shared/spinner/Spinner.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
@@ -39,12 +39,6 @@ import t from '@instructure/quiz-i18n/es/format-message';
 
 var noop = function noop() {};
 
-var _ref6 = jsx(Grid.Col, {
-  width: "auto"
-}, jsx(IconAdminLine, {
-  size: "medium"
-}));
-
 var _ref7 = jsx(Spinner, null);
 
 export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -68,7 +62,8 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       newEntities: List(),
       searchSelection: [],
       searchPermission: READ_ONLY,
-      entitiesWithChangedPermission: {}
+      entitiesWithChangedPermission: {},
+      selectedTabIndex: 0
     };
     _this.shareListRef = null;
     _this.shareButtonRef = null;
@@ -90,6 +85,14 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       }
     };
 
+    _this.handleTabChange = function (event, _ref) {
+      var index = _ref.index;
+
+      _this.setState({
+        selectedTabIndex: index
+      });
+    };
+
     _this.modalDismissCleanup = function () {
       var focusCreateBank = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
 
@@ -162,10 +165,10 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       }); // call the update api if any shared bank permission was updated
 
 
-      Object.entries(_this.state.entitiesWithChangedPermission).forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            sharedBankId = _ref2[0],
-            permission = _ref2[1];
+      Object.entries(_this.state.entitiesWithChangedPermission).forEach(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+            sharedBankId = _ref3[0],
+            permission = _ref3[1];
 
         var sharedBank = _this.props.sharedBanks.find(function (sharedBank) {
           return sharedBank.get('id') === sharedBankId;
@@ -231,8 +234,8 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       }
     };
 
-    _this.handleSearchPermissionChange = function (e, _ref3) {
-      var value = _ref3.value;
+    _this.handleSearchPermissionChange = function (e, _ref4) {
+      var value = _ref4.value;
 
       _this.setState({
         searchPermission: value
@@ -280,7 +283,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
     };
 
     _this.updatePermission = /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(entity, permission) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(entity, permission) {
         var _this$props, updateSharedBankPermission, getBank, bank;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -303,7 +306,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       }));
 
       return function (_x, _x2) {
-        return _ref4.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }();
 
@@ -354,8 +357,8 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       });
     };
 
-    _this.handleAccountPermissionChange = function (e, _ref5) {
-      var value = _ref5.value;
+    _this.handleAccountPermissionChange = function (e, _ref6) {
+      var value = _ref6.value;
       return _this.setState({
         accountPermission: value
       });
@@ -409,6 +412,18 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       }
     };
 
+    _this.renderShareList = function (entities) {
+      return jsx(ShareList, {
+        canEdit: _this.props.bank.canEdit(),
+        entities: entities,
+        improvedBankSharingEnabled: _this.props.improvedBankSharingEnabled,
+        onPermissionChange: _this.handleEntityPermissionChange,
+        onEntityRemove: _this.handleEntityRemove,
+        sharedBanks: _this.props.sharedBanks,
+        shares: _this.state.shares
+      });
+    };
+
     return _this;
   }
 
@@ -451,70 +466,115 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       };
     }
   }, {
-    key: "renderAccountPermissions",
+    key: "renderRootAccountSharing",
     // =============
     //   RENDERING
     // =============
-    value: function renderAccountPermissions() {
-      var _this$props2 = this.props,
-          currentUser = _this$props2.currentUser,
-          improvedBankSharingEnabled = _this$props2.improvedBankSharingEnabled;
-
-      if (improvedBankSharingEnabled && (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin)) {
-        return jsx(View, {
-          as: "div",
-          margin: "0 0 medium 0"
-        }, jsx(Grid, {
-          colSpacing: "small"
-        }, jsx(Grid.Row, null, _ref6, jsx(Grid.Col, null, jsx(View, {
-          as: "div",
-          padding: "0 0 x-small 0"
-        }, currentUser && currentUser.account_name || t('Account')), jsx(Checkbox, {
-          label: t('Share with Institution'),
-          variant: "toggle",
-          value: "accountPermission",
-          checked: this.isSharedWithAccount(),
-          onChange: this.toggleAccountShare
-        })), this.isSharedWithAccount() && jsx(Grid.Col, {
-          width: "auto"
-        }, jsx(SimpleSelect, {
-          onChange: this.handleAccountPermissionChange,
-          value: this.state.accountPermission,
-          renderLabel: jsx(ScreenReaderContent, null, t('Access for account'))
-        }, jsx(SimpleSelect.Option, {
-          id: "sharing-modal-account-perm-select-option-can-view",
-          value: READ_ONLY
-        }, t('Can view')), jsx(SimpleSelect.Option, {
-          id: "sharing-modal-account-perm-select-option-can-edit",
-          value: CAN_EDIT
-        }, t('Can edit')))))));
-      }
+    value: function renderRootAccountSharing() {
+      var _this$props$currentUs;
+
+      return jsx(RootAccountSharing, {
+        accountName: (_this$props$currentUs = this.props.currentUser) === null || _this$props$currentUs === void 0 ? void 0 : _this$props$currentUs.account_name,
+        onShareChange: this.toggleAccountShare,
+        onShareTypeChange: this.handleAccountPermissionChange,
+        accountPermission: this.state.accountPermission
+      });
+    }
+  }, {
+    key: "renderSubaccountSharingEnabledEntities",
+    value: function renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts) {
+      var currentUser = this.props.currentUser;
+      return jsx(View, {
+        as: "div",
+        "data-automation": "sdk-shared-bank-user-list"
+      }, 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.renderSearchSection(SHARED_WITH_USER), jsx(Text, {
+        as: "div",
+        weight: "bold",
+        lineHeight: "double"
+      }, t('Currently shared with')), this.renderShareList(existingPeople)), jsx(Tabs.Panel, {
+        renderTitle: t('Courses ({ coursesCount })', {
+          coursesCount: existingCourses.size
+        }),
+        isSelected: this.state.selectedTabIndex === 1,
+        padding: "large small small small"
+      }, this.renderSearchSection(SHARED_WITH_COURSE), jsx(Text, {
+        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, {
+        renderTitle: t('Accounts ({ accountsCount })', {
+          accountsCount: existingAccounts.size
+        }),
+        isSelected: this.state.selectedTabIndex === 2,
+        padding: "large small small small"
+      }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) && this.renderRootAccountSharing(), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts) && this.renderSearchSection(SHARED_WITH_ACCOUNT), jsx(Text, {
+        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)))));
     }
   }, {
     key: "renderEntitiesSection",
     value: function renderEntitiesSection() {
-      return jsx(ShareList, {
-        accountName: this.props.currentUser.account_name,
-        accountPermission: this.state.accountPermission,
-        canEdit: this.props.bank.canEdit(),
-        currentUser: this.props.currentUser,
-        entitiesWithChangedPermission: this.state.entitiesWithChangedPermission,
-        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
-        newEntities: this.state.newEntities,
-        onAccountPermissionChange: this.handleAccountPermissionChange,
-        onEntityRemove: this.handleEntityRemove,
-        onPermissionChange: this.handleEntityPermissionChange,
-        onToggleAccountShare: this.toggleAccountShare,
-        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,
-        subAccountBankSharingEnabled: this.props.subAccountBankSharingEnabled
+      var newEntityIds = this.state.newEntities.map(function (e) {
+        return e.get('id');
       });
+      var existingShares = this.state.shares.filterNot(function (s) {
+        return newEntityIds.includes(s.get('id'));
+      });
+      var existingPeople = existingShares.filter(function (s) {
+        return s.get('entityType') === SHARED_WITH_USER;
+      });
+      var existingCourses = existingShares.filter(function (s) {
+        return s.get('entityType') === SHARED_WITH_COURSE;
+      });
+      var existingAccounts = existingShares.filter(function (s) {
+        return s.get('entityType') === SHARED_WITH_ACCOUNT;
+      });
+
+      if (this.props.subAccountBankSharingEnabled) {
+        return this.renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts);
+      }
+
+      return this.renderOriginalDesignEntities(existingPeople, existingCourses);
     }
   }, {
     key: "renderFooter",
@@ -555,7 +615,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
+      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderRootAccountSharing(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
     }
   }]);