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

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()));
     }
   }]);
 

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

@@ -85,7 +85,7 @@ var RootAccountSharing = (_dec = (0, _emotion.withStyle)(_styles.default, _theme
       }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, _ref, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
         as: "div",
         padding: "0 0 x-small 0"
-      }, this.props.accountName || (0, _formatMessage.default)('Account')), /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+      }, this.props.accountName), /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
         label: (0, _formatMessage.default)('Share with Institution'),
         variant: "toggle",
         value: "accountPermission",
@@ -109,11 +109,12 @@ var RootAccountSharing = (_dec = (0, _emotion.withStyle)(_styles.default, _theme
   RootAccountSharing.displayName = "RootAccountSharing";
   return RootAccountSharing;
 }(_react.Component), _class2.propTypes = {
-  accountName: _propTypes.default.string.isRequired,
+  accountName: _propTypes.default.string,
   onShareChange: _propTypes.default.func.isRequired,
   onShareTypeChange: _propTypes.default.func.isRequired,
   accountPermission: _propTypes.default.string
 }, _class2.defaultProps = {
+  accountName: (0, _formatMessage.default)('Account'),
   accountPermission: null
 }, _temp)) || _class);
 exports.RootAccountSharing = RootAccountSharing;

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

@@ -19,41 +19,33 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _immutable = require("immutable");
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiIcons = require("@instructure/ui-icons");
-
-var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _immutable = require("immutable");
 
-var _uiView = require("@instructure/ui-view");
+var _uiIcons = require("@instructure/ui-icons");
 
 var _uiGrid = require("@instructure/ui-grid");
 
-var _uiText = require("@instructure/ui-text");
-
 var _uiAvatar = require("@instructure/ui-avatar");
 
-var _uiTabs = require("@instructure/ui-tabs");
+var _uiSimpleSelect = require("@instructure/ui-simple-select");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _emotion = require("@instructure/emotion");
 
-var _index = require("../ContextualIconButton/index.js");
+var _quizCommon = require("@instructure/quiz-common");
 
-var _RootAccountSharing = _interopRequireDefault(require("../RootAccountSharing.js"));
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _uiSimpleSelect = require("@instructure/ui-simple-select");
+var _index = require("../ContextualIconButton/index.js");
 
 var _styles = _interopRequireDefault(require("./styles.js"));
 
-var _quizCommon = require("@instructure/quiz-common");
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
 var _dec, _class, _class2, _temp;
 
-var _ref4 = (0, _emotion.jsx)(_uiIcons.IconCoursesLine, {
+var _ref3 = (0, _emotion.jsx)(_uiIcons.IconCoursesLine, {
   size: "small"
 });
 
@@ -72,16 +64,13 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
     }
 
     _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) {
@@ -91,15 +80,7 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
       _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
@@ -118,7 +99,7 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
       });
     };
 
-    _this.renderEntity = function (entity, index) {
+    _this.renderEntity = function (entity) {
       var isEntityRemoved = entity.get('permission') === _quizCommon.REMOVED_ACCESS;
 
       var isCourse = entity.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
@@ -133,7 +114,7 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
         "data-automation": "sdk-shared-with-entity-row"
       }, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: "small"
-      }, isCourse ? _ref4 : (0, _emotion.jsx)(_uiAvatar.Avatar, {
+      }, isCourse ? _ref3 : (0, _emotion.jsx)(_uiAvatar.Avatar, {
         name: entity.get('title'),
         src: entity.get('avatar'),
         size: "small"
@@ -157,113 +138,33 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
         value: _quizCommon.CAN_EDIT
       }, (0, _formatMessage.default)('Can edit')))), (0, _emotion.jsx)(_uiGrid.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;
   }
 
   (0, _createClass2.default)(ShareList, [{
-    key: "renderNewEntities",
-    value: function renderNewEntities() {
-      if (!this.props.newEntities.isEmpty()) {
-        return (0, _emotion.jsx)(_uiView.View, {
-          as: "div",
-          margin: "0 0 medium 0"
-        }, (0, _emotion.jsx)(_uiGrid.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') === _quizCommon.SHARED_WITH_USER;
-      });
-      var existingCourses = existingShares.filter(function (s) {
-        return s.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
-      });
-      var existingAccounts = existingShares.filter(function (s) {
-        return s.get('entityType') === _quizCommon.SHARED_WITH_ACCOUNT;
-      });
-      return (0, _emotion.jsx)("div", {
-        className: "fs-mask"
-      }, !subAccountBankSharingEnabled && (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"
-      }, !subAccountBankSharingEnabled && this.renderNewEntities(), (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"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_USER), subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiText.Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiGrid.Grid, {
-        vAlign: "middle"
-      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && (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"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_COURSE), subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiText.Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiGrid.Grid, {
+      return (0, _emotion.jsx)(_uiGrid.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)) && (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
-        renderTitle: (0, _formatMessage.default)('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) && (0, _emotion.jsx)(_RootAccountSharing.default, {
-        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(_quizCommon.SHARED_WITH_ACCOUNT), (0, _emotion.jsx)(_uiText.Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiGrid.Grid, {
-        vAlign: "middle"
-      }, existingAccounts.map(this.renderEntity))))));
+      }, this.props.entities.map(this.renderEntity));
     }
   }]);
   ShareList.displayName = "ShareList";
   return ShareList;
 }(_react.Component), _class2.propTypes = {
   canEdit: _propTypes.default.bool.isRequired,
-  currentUser: _propTypes.default.shape({
-    bank_admin: _propTypes.default.bool,
-    can_share_banks_with_subaccounts: _propTypes.default.bool
-  }),
+  entities: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.contains({
+    entityType: _propTypes.default.string.isRequired,
+    entityId: _propTypes.default.string.isRequired,
+    permission: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired
+  })).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,
+  onEntityRemove: _propTypes.default.func.isRequired,
   sharedBanks: _reactImmutableProptypes.default.list,
   shares: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.contains({
     avatar: _propTypes.default.string,
@@ -273,19 +174,8 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
     permission: _propTypes.default.string.isRequired,
     id: _propTypes.default.string.isRequired
   })).isRequired,
-  subAccountBankSharingEnabled: _propTypes.default.bool.isRequired,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: _propTypes.default.object,
-  accountName: _propTypes.default.string,
-  onAccountPermissionChange: _propTypes.default.func.isRequired,
-  onToggleAccountShare: _propTypes.default.func.isRequired,
-  accountPermission: _propTypes.default.string
-}, _class2.defaultProps = {
-  accountName: (0, _formatMessage.default)('Account'),
-  accountPermission: null,
-  currentUser: null,
-  newEntities: (0, _immutable.List)(),
-  sharedBanks: (0, _immutable.List)()
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.ShareList = ShareList;
 var _default = ShareList;

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

@@ -43,15 +43,13 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiIcons = require("@instructure/ui-icons");
-
-var _uiCheckbox = require("@instructure/ui-checkbox");
-
 var _uiView = require("@instructure/ui-view");
 
 var _uiGrid = require("@instructure/ui-grid");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _uiTabs = require("@instructure/ui-tabs");
+
+var _uiText = require("@instructure/ui-text");
 
 var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
@@ -65,6 +63,8 @@ var _index = _interopRequireDefault(require("./ShareList/index.js"));
 
 var _index2 = _interopRequireDefault(require("../AsyncSearch/index.js"));
 
+var _RootAccountSharing = _interopRequireDefault(require("./RootAccountSharing.js"));
+
 var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
 
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -77,12 +77,6 @@ var _dec, _class, _class2, _temp;
 
 var noop = function noop() {};
 
-var _ref6 = (0, _emotion.jsx)(_uiGrid.Grid.Col, {
-  width: "auto"
-}, (0, _emotion.jsx)(_uiIcons.IconAdminLine, {
-  size: "medium"
-}));
-
 var _ref7 = (0, _emotion.jsx)(_Spinner.default, null);
 
 var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -106,7 +100,8 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       newEntities: (0, _immutable.List)(),
       searchSelection: [],
       searchPermission: _quizCommon.READ_ONLY,
-      entitiesWithChangedPermission: {}
+      entitiesWithChangedPermission: {},
+      selectedTabIndex: 0
     };
     _this.shareListRef = null;
     _this.shareButtonRef = null;
@@ -128,6 +123,14 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       }
     };
 
+    _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;
 
@@ -200,10 +203,10 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       }); // call the update api if any shared bank permission was updated
 
 
-      Object.entries(_this.state.entitiesWithChangedPermission).forEach(function (_ref) {
-        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-            sharedBankId = _ref2[0],
-            permission = _ref2[1];
+      Object.entries(_this.state.entitiesWithChangedPermission).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+            sharedBankId = _ref3[0],
+            permission = _ref3[1];
 
         var sharedBank = _this.props.sharedBanks.find(function (sharedBank) {
           return sharedBank.get('id') === sharedBankId;
@@ -269,8 +272,8 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       }
     };
 
-    _this.handleSearchPermissionChange = function (e, _ref3) {
-      var value = _ref3.value;
+    _this.handleSearchPermissionChange = function (e, _ref4) {
+      var value = _ref4.value;
 
       _this.setState({
         searchPermission: value
@@ -318,7 +321,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     };
 
     _this.updatePermission = /*#__PURE__*/function () {
-      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(entity, permission) {
+      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(entity, permission) {
         var _this$props, updateSharedBankPermission, getBank, bank;
 
         return _regenerator.default.wrap(function _callee$(_context) {
@@ -341,7 +344,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       }));
 
       return function (_x, _x2) {
-        return _ref4.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }();
 
@@ -392,8 +395,8 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       });
     };
 
-    _this.handleAccountPermissionChange = function (e, _ref5) {
-      var value = _ref5.value;
+    _this.handleAccountPermissionChange = function (e, _ref6) {
+      var value = _ref6.value;
       return _this.setState({
         accountPermission: value
       });
@@ -447,6 +450,18 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       }
     };
 
+    _this.renderShareList = function (entities) {
+      return (0, _emotion.jsx)(_index.default, {
+        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;
   }
 
@@ -489,70 +504,115 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       };
     }
   }, {
-    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 (0, _emotion.jsx)(_uiView.View, {
-          as: "div",
-          margin: "0 0 medium 0"
-        }, (0, _emotion.jsx)(_uiGrid.Grid, {
-          colSpacing: "small"
-        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, _ref6, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_uiView.View, {
-          as: "div",
-          padding: "0 0 x-small 0"
-        }, currentUser && currentUser.account_name || (0, _formatMessage.default)('Account')), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
-          label: (0, _formatMessage.default)('Share with Institution'),
-          variant: "toggle",
-          value: "accountPermission",
-          checked: this.isSharedWithAccount(),
-          onChange: this.toggleAccountShare
-        })), this.isSharedWithAccount() && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
-          width: "auto"
-        }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
-          onChange: this.handleAccountPermissionChange,
-          value: this.state.accountPermission,
-          renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for account'))
-        }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
-          id: "sharing-modal-account-perm-select-option-can-view",
-          value: _quizCommon.READ_ONLY
-        }, (0, _formatMessage.default)('Can view')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
-          id: "sharing-modal-account-perm-select-option-can-edit",
-          value: _quizCommon.CAN_EDIT
-        }, (0, _formatMessage.default)('Can edit')))))));
-      }
+    value: function renderRootAccountSharing() {
+      var _this$props$currentUs;
+
+      return (0, _emotion.jsx)(_RootAccountSharing.default, {
+        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 (0, _emotion.jsx)(_uiView.View, {
+        as: "div",
+        "data-automation": "sdk-shared-bank-user-list"
+      }, (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.renderSearchSection(_quizCommon.SHARED_WITH_USER), (0, _emotion.jsx)(_uiText.Text, {
+        as: "div",
+        weight: "bold",
+        lineHeight: "double"
+      }, (0, _formatMessage.default)('Currently shared with')), this.renderShareList(existingPeople)), (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.renderSearchSection(_quizCommon.SHARED_WITH_COURSE), (0, _emotion.jsx)(_uiText.Text, {
+        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, {
+        renderTitle: (0, _formatMessage.default)('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(_quizCommon.SHARED_WITH_ACCOUNT), (0, _emotion.jsx)(_uiText.Text, {
+        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)))));
     }
   }, {
     key: "renderEntitiesSection",
     value: function renderEntitiesSection() {
-      return (0, _emotion.jsx)(_index.default, {
-        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') === _quizCommon.SHARED_WITH_USER;
+      });
+      var existingCourses = existingShares.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
+      });
+      var existingAccounts = existingShares.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_ACCOUNT;
       });
+
+      if (this.props.subAccountBankSharingEnabled) {
+        return this.renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts);
+      }
+
+      return this.renderOriginalDesignEntities(existingPeople, existingCourses);
     }
   }, {
     key: "renderFooter",
@@ -593,7 +653,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.renderFooter()));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, !subAccountBankSharingEnabled && this.renderRootAccountSharing(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.renderFooter()));
     }
   }]);
   SharingModalPresenter.displayName = "SharingModalPresenter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.10.1-rc.4+9acb43863",
+  "version": "20.10.1-rc.5+000550e27",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.1.0",
-    "@instructure/quiz-common": "20.10.1-rc.4+9acb43863",
-    "@instructure/quiz-i18n": "20.10.1-rc.4+9acb43863",
-    "@instructure/quiz-interactions": "20.10.1-rc.4+9acb43863",
-    "@instructure/quiz-number-input": "20.10.1-rc.4+9acb43863",
-    "@instructure/quiz-rce": "20.10.1-rc.4+9acb43863",
+    "@instructure/quiz-common": "20.10.1-rc.5+000550e27",
+    "@instructure/quiz-i18n": "20.10.1-rc.5+000550e27",
+    "@instructure/quiz-interactions": "20.10.1-rc.5+000550e27",
+    "@instructure/quiz-number-input": "20.10.1-rc.5+000550e27",
+    "@instructure/quiz-rce": "20.10.1-rc.5+000550e27",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.10.1-rc.4+9acb43863",
+    "instructure-validations": "20.10.1-rc.5+000550e27",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.10.1-rc.4+9acb43863",
+    "quiz-presets": "20.10.1-rc.5+000550e27",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9acb4386324ea4b9b5a7d896782821bbacc44778"
+  "gitHead": "000550e2798491a2c0ecb006d4be4abc227fc685"
 }