@instructure/quiz-core 20.7.1-rc.9 → 20.8.1-rc.0

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ScoreDistributionType/index.js

@@ -0,0 +1,55 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ScoreDistributionTypeTable from "./Table/index.js";
+import { scoreDistributionTypeAnswerSummaryPropType } from "../../propTypes.js";
+import AggregationTable from "../shared/AggregationTable/index.js";
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import t from '@instructure/quiz-i18n/es/format-message';
+export var ScoreDistributionType = /*#__PURE__*/function (_Component) {
+  _inherits(ScoreDistributionType, _Component);
+
+  var _super = _createSuper(ScoreDistributionType);
+
+  function ScoreDistributionType() {
+    var _this;
+
+    _classCallCheck(this, ScoreDistributionType);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, {
+        tableHeader: t('Score Frequency Summary')
+      }, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        afsTable: /*#__PURE__*/React.createElement(ScoreDistributionTypeTable, {
+          itemId: itemId,
+          scores: answerSummary.score_distribution
+        }),
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return ScoreDistributionType;
+}(Component);
+ScoreDistributionType.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: scoreDistributionTypeAnswerSummaryPropType
+}.isRequired;
+export default ScoreDistributionType;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/presenter.js

@@ -7,7 +7,9 @@ import LegacyChoiceType from "./LegacyChoiceType/index.js";
 import ChoiceType from "./ChoiceType/index.js";
 import RichFillBlankType from "./RichFillBlankType/index.js";
 import AggregationType from "./AggregationType/index.js";
+import NumericType from "./NumericType/index.js";
 import { MatchingType, OrderingType, CategorizationType } from "./MatchingType/index.js";
+import { ScoreDistributionType } from "./ScoreDistributionType/index.js";
 import { afsFlags, answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
@@ -62,6 +64,18 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.fillInTheBlankEnabled) {
         _this.afsTableComponentMap.set('rich-fill-blank', RichFillBlankType);
       }
+
+      if (afsFlags.numericEnabled) {
+        _this.afsTableComponentMap.set('numeric', NumericType);
+      }
+
+      if (afsFlags.essayEnabled) {
+        _this.afsTableComponentMap.set('essay', ScoreDistributionType);
+      }
+
+      if (afsFlags.fileUploadEnabled) {
+        _this.afsTableComponentMap.set('file-upload', ScoreDistributionType);
+      }
     };
 
     _this.render = function () {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsTableWrapper/presenter.js

@@ -28,6 +28,11 @@ export var AfsTableWrapper = (_dec = withStyle(generateStyle, null), _dec(_class
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _this.getHeader = function () {
+      var tableHeader = _this.props.tableHeader;
+      return tableHeader || t('Answer Frequency Summary');
+    };
+
     _this.render = function () {
       return jsx(Flex, {
         direction: "row",
@@ -41,7 +46,7 @@ export var AfsTableWrapper = (_dec = withStyle(generateStyle, null), _dec(_class
         level: "h3",
         weight: "bold",
         color: "primary"
-      }, t('Answer Frequency Summary')), _this.props.children)));
+      }, _this.getHeader()), _this.props.children)));
     };
 
     return _this;
@@ -50,5 +55,6 @@ export var AfsTableWrapper = (_dec = withStyle(generateStyle, null), _dec(_class
   return AfsTableWrapper;
 }(Component), _class2.propTypes = {
   children: PropTypes.node.isRequired,
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  tableHeader: PropTypes.string
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/index.js

@@ -0,0 +1 @@
+export { ExpandableCard as default } from "./presenter.js";

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/presenter.js

@@ -0,0 +1,104 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import Card from "../../../../../../../common/components/shared/Card/index.js";
+import { Flex } from '@instructure/ui-flex';
+import { jsx, withStyle } from '@instructure/emotion';
+import ExpandButton from "../../../../../../../common/components/shared/ExpandButton/index.js";
+import t from '@instructure/quiz-i18n/es/format-message';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+import PropTypes from 'prop-types';
+export var ExpandableCard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(ExpandableCard, _Component);
+
+  var _super = _createSuper(ExpandableCard);
+
+  function ExpandableCard() {
+    var _this;
+
+    _classCallCheck(this, ExpandableCard);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      bodyExpanded: false
+    };
+
+    _this.handleBodyToggle = function () {
+      _this.setState({
+        bodyExpanded: !_this.state.bodyExpanded
+      });
+    };
+
+    _this.renderGroup = function () {
+      var headLine = _this.props.headLine;
+      return jsx(Flex, {
+        direction: "row",
+        alignItems: "start"
+      }, jsx(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        margin: "xx-small none none none"
+      }, headLine), jsx(Flex.Item, {
+        margin: "none none none x-small"
+      }, jsx(ExpandButton, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? t('collapse group result') : t('expand group result'),
+        isExpanded: _this.state.bodyExpanded
+      })));
+    };
+
+    _this.renderBody = function () {
+      var _this$props = _this.props,
+          content = _this$props.content,
+          styles = _this$props.styles;
+      var bodyContainer = styles.bodyContainer;
+      return jsx(Flex.Item, {
+        shouldShrink: true,
+        padding: "x-small small x-small small"
+      }, jsx("div", {
+        css: bodyContainer
+      }, content));
+    };
+
+    _this.render = function () {
+      var styles = _this.props.styles;
+      var groupWrapper = styles.groupWrapper;
+      var bodyExpanded = _this.state.bodyExpanded;
+      return jsx("div", {
+        css: groupWrapper
+      }, jsx(Card, null, jsx(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, jsx(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true,
+        overflowY: "visible"
+      }, jsx(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, jsx(Flex.Item, {
+        shouldShrink: true,
+        padding: "x-small small x-small small",
+        overflowY: "hidden"
+      }, _this.renderGroup()), bodyExpanded && _this.renderBody())))));
+    };
+
+    return _this;
+  }
+
+  return ExpandableCard;
+}(Component), _class2.propTypes = {
+  headLine: PropTypes.node,
+  content: PropTypes.node,
+  styles: PropTypes.object
+}.isRequired, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/{ChoiceGroupTypeTable → ExpandableCard}/styles.js

@@ -6,8 +6,9 @@ var generateStyle = function generateStyle(componentTheme) {
       minWidth: componentTheme.cardMinWidth,
       maxWidth: '100%'
     },
-    cardWrapper: {
-      margin: "0 0 ".concat(componentTheme.cardBottomMargin, " 0")
+    bodyContainer: {
+      overflow: 'auto',
+      maxHeight: '600px'
     }
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/theme.js

@@ -0,0 +1,7 @@
+var generateComponentTheme = function generateComponentTheme() {
+  return {
+    cardMinWidth: '500px'
+  };
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/index.js

@@ -13,7 +13,10 @@ function mapStateToProps(_state) {
       trueFalseEnabled: featureOn('ia_true_false_afs'),
       choiceEnabled: featureOn('ia_choice_afs'),
       multiAnswerEnabled: featureOn('ia_multi_answer_afs'),
-      fillInTheBlankEnabled: featureOn('ia_rich_fill_blank_afs')
+      fillInTheBlankEnabled: featureOn('ia_rich_fill_blank_afs'),
+      essayEnabled: featureOn('ia_essay_afs'),
+      fileUploadEnabled: featureOn('ia_file_upload_afs'),
+      numericEnabled: featureOn('ia_numeric_afs')
     }
   };
 }

package/es/reporting/components/resources/NewQuizAndItemAnalysis/propTypes.js

@@ -50,6 +50,17 @@ export var choiceTypeAnswerSummaryPropType = PropTypes.shape({
   no_answer: aggregateDetailPropType,
   aggregate: aggregatePropType
 });
+export var scoreDistributionTypeAnswerSummaryPropType = PropTypes.shape({
+  no_answer: aggregateDetailPropType.isRequired,
+  aggregate: aggregatePropType.isRequired,
+  graded: aggregateDetailPropType.isRequired,
+  score_distribution: PropTypes.arrayOf(scoreDistributionType).isRequired
+});
+export var scoreDistributionType = PropTypes.shape({
+  count: PropTypes.number.isRequired,
+  score: PropTypes.number.isRequired,
+  percentage: PropTypes.number.isRequired
+});
 export var matchingTypeAnswerSummaryPropType = PropTypes.shape({
   questions: PropTypes.objectOf(PropTypes.shape({
     body: PropTypes.string,
@@ -77,7 +88,43 @@ export var richFillBlankTypeAnswerSummaryPropType = PropTypes.shape({
   no_answer: aggregateDetailPropType,
   aggregate: aggregatePropType
 });
-export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType, richFillBlankTypeAnswerSummaryPropType]);
+var withinARangeTypeObject = PropTypes.shape({
+  end: PropTypes.string.isRequired,
+  start: PropTypes.string.isRequired,
+  choices: PropTypes.arrayOf(choiceTypeObject).isRequired,
+  type: PropTypes.string.isRequired
+});
+var marginOfErrorTypeObject = PropTypes.shape({
+  margin: PropTypes.string.isRequired,
+  margin_type: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  choices: PropTypes.arrayOf(choiceTypeObject).isRequired
+});
+var exactResponseTypeObject = PropTypes.shape({
+  value: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  choices: PropTypes.arrayOf(choiceTypeObject).isRequired
+});
+var preciseResponseTypeObject = PropTypes.shape({
+  value: PropTypes.string.isRequired,
+  precision: PropTypes.string.isRequired,
+  precision_type: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  choices: PropTypes.arrayOf(choiceTypeObject).isRequired
+});
+var uncategorizedTypeObject = PropTypes.shape({
+  type: PropTypes.string.isRequired,
+  choices: PropTypes.arrayOf(choiceTypeObject).isRequired
+});
+var numericRequirementTypeObject = PropTypes.oneOfType([withinARangeTypeObject, marginOfErrorTypeObject, exactResponseTypeObject, preciseResponseTypeObject, uncategorizedTypeObject]);
+export var numericTypeAnswerSummaryPropType = PropTypes.shape({
+  requirement: PropTypes.shape({
+    correct_answers: PropTypes.arrayOf(numericRequirementTypeObject).isRequired,
+    incorrect_answer_choices: PropTypes.arrayOf(choiceTypeObject).isRequired
+  })
+});
+export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType, richFillBlankTypeAnswerSummaryPropType, scoreDistributionTypeAnswerSummaryPropType]);
 export var itemAnalysisPropType = PropTypes.shape({
   attempts: PropTypes.shape({
     students_responded: PropTypes.number,
@@ -109,5 +156,8 @@ export var afsFlags = PropTypes.shape({
   trueFalseEnabled: PropTypes.bool.isRequired,
   choiceEnabled: PropTypes.bool.isRequired,
   multiAnswerEnabled: PropTypes.bool.isRequired,
-  fillInTheBlankEnabled: PropTypes.bool.isRequired
+  fillInTheBlankEnabled: PropTypes.bool.isRequired,
+  numericEnabled: PropTypes.bool.isRequired,
+  essayEnabled: PropTypes.bool.isRequired,
+  fileUploadEnabled: PropTypes.bool.isRequired
 });

package/lib/banks/api/banks.js

@@ -274,10 +274,10 @@ var shareBank = function shareBank(_shareBank) {
           };
           dispatch((0, _callHandlers.handleShareBankResponse)(sharedBank));
         });
-      } else if (_shareBank.entityType === _quizCommon.SHARED_WITH_COURSE) {
+      } else {
         var sharedBank = {
           id: sharedBankInfo.id,
-          entityType: _quizCommon.SHARED_WITH_COURSE,
+          entityType: _shareBank.entityType,
           entityId: _shareBank.entityId,
           title: _shareBank.title,
           permission: sharedBankInfo.permission,
@@ -326,10 +326,8 @@ var getSharedBank = function getSharedBank(bankId, entityType, entityId) {
 
 exports.getSharedBank = getSharedBank;
 
-var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo) {
+var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo, getAccountInfo) {
   var url = "".concat(banksApiEndpoint, "/").concat(bank.id, "/shared_banks");
-  var userSharedBanks = [];
-  var courseSharedBanks = [];
   return function (dispatch, getState) {
     var fetcher = new _Fetcher.default({
       onError: (0, _helpers.handleError)(dispatch, (0, _formatMessage.default)('Failed to fetch shared banks.'))
@@ -344,8 +342,10 @@ var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo) {
           permission: _quizCommon.CAN_EDIT,
           bank_id: bank.id
         });
-      }
+      } // USERS
+
 
+      var userSharedBanks = [];
       var userUuids = sharedBanksInfo.filter(function (sb) {
         return sb.entity_type === _quizCommon.SHARED_WITH_USER;
       }).map(function (sb) {
@@ -370,7 +370,9 @@ var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo) {
           }
         });
         dispatch((0, _callHandlers.handleShareBanksResponse)(userSharedBanks));
-      });
+      }); // COURSES
+
+      var courseSharedBanks = [];
       var courseUuids = sharedBanksInfo.filter(function (sb) {
         return sb.entity_type === _quizCommon.SHARED_WITH_COURSE;
       }).map(function (sb) {
@@ -394,6 +396,32 @@ var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo) {
           }
         });
         dispatch((0, _callHandlers.handleShareBanksResponse)(courseSharedBanks));
+      }); // ACCOUNTS
+
+      var accountSharedBanks = [];
+      var accountUuids = sharedBanksInfo.filter(function (sb) {
+        return sb.entity_type === _quizCommon.SHARED_WITH_ACCOUNT;
+      }).map(function (sb) {
+        return sb.entity_id;
+      });
+      getAccountInfo(accountUuids).then(function (accountsInfo) {
+        accountsInfo.forEach(function (accountInfo) {
+          var sharedBankInfo = sharedBanksInfo.find(function (sb) {
+            return sb.entity_type === _quizCommon.SHARED_WITH_ACCOUNT && sb.entity_id === accountInfo.uuid;
+          });
+
+          if (sharedBankInfo) {
+            accountSharedBanks.push({
+              id: sharedBankInfo.id,
+              entityType: sharedBankInfo.entity_type,
+              entityId: sharedBankInfo.entity_id,
+              title: accountInfo.name,
+              permission: sharedBankInfo.permission,
+              bankId: sharedBankInfo.bank_id
+            });
+          }
+        });
+        dispatch((0, _callHandlers.handleShareBanksResponse)(accountSharedBanks));
       });
     });
   };

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

@@ -208,8 +208,10 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         focusCreateBankButton: _this.focusCreateBankButton,
         getCourseInfo: _this.props.getCourseInfo,
         getUserInfo: _this.props.getUserInfo,
+        getSubaccountInfo: _this.props.getSubaccountInfo,
         getShareableCourses: _this.props.getShareableCourses,
         getShareableUsers: _this.props.getShareableUsers,
+        getShareableSubaccounts: _this.props.getShareableSubaccounts,
         isCompact: _this.props.isCompact,
         itemBankSearchTableEnabled: _this.props.itemBankSearchTableEnabled,
         minChars: _this.props.minChars,
@@ -436,6 +438,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   createBank: _propTypes.default.func.isRequired,
   currentUser: _propTypes.default.shape({
     bank_admin: _propTypes.default.bool,
+    can_share_banks_with_subaccounts: _propTypes.default.bool,
     email: _propTypes.default.string,
     enrollment_names: _propTypes.default.arrayOf(_propTypes.default.string),
     full_name: _propTypes.default.string,
@@ -453,7 +456,11 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   getShareableCourses: _propTypes.default.func,
   // from consumer
   getShareableUsers: _propTypes.default.func,
-  // from consumer,
+  // from consumer
+  getShareableSubaccounts: _propTypes.default.func,
+  // from consumer
+  getSubaccountInfo: _propTypes.default.func,
+  // from consumer
   getCourseAssignments: _propTypes.default.func,
   // from consumer
   isCompact: _propTypes.default.bool,
@@ -490,6 +497,8 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   getShareableCourses: null,
   getShareableUsers: null,
   getCourseAssignments: null,
+  getShareableSubaccounts: null,
+  getSubaccountInfo: null,
   minChars: void 0,
   isCompact: false,
   navigateToBuild: null,

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

@@ -434,6 +434,7 @@ var BanksList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         focusCreateBankButton: this.props.focusCreateBankButton,
         getCourseInfo: this.props.getCourseInfo,
         getUserInfo: this.props.getUserInfo,
+        getSubaccountInfo: this.props.getSubaccountInfo,
         isOpen: this.state.sharingModalOpen,
         minChars: this.props.minChars,
         modalTrigger: this.sharingButtons[this.state.sharingModalBank.id],
@@ -441,6 +442,7 @@ var BanksList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         onShare: this.props.onShare,
         getShareableCourses: this.props.getShareableCourses,
         getShareableUsers: this.props.getShareableUsers,
+        getShareableSubaccounts: this.props.getShareableSubaccounts,
         updateSharedCount: this.updateSharedCount
       });
     }
@@ -544,6 +546,7 @@ var BanksList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   createBankCloneJob: _propTypes.default.func.isRequired,
   currentUser: _propTypes.default.shape({
     bank_admin: _propTypes.default.bool,
+    can_share_banks_with_subaccounts: _propTypes.default.bool,
     email: _propTypes.default.string,
     enrollment_names: _propTypes.default.arrayOf(_propTypes.default.string),
     full_name: _propTypes.default.string,
@@ -557,6 +560,7 @@ var BanksList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   getUserInfo: _propTypes.default.func,
   getShareableCourses: _propTypes.default.func,
   getShareableUsers: _propTypes.default.func,
+  getShareableSubaccounts: _propTypes.default.func,
   minChars: _propTypes.default.number,
   navigateToBank: _propTypes.default.func.isRequired,
   onShare: _propTypes.default.func,
@@ -572,6 +576,7 @@ var BanksList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   getUserInfo: null,
   getShareableCourses: null,
   getShareableUsers: null,
+  getShareableSubaccounts: null,
   minChars: void 0,
   locale: null,
   timezone: null,

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

@@ -178,11 +178,10 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
   }, {
     key: "render",
     value: function render() {
-      var _this$props$currentUs;
-
       var _this$props = this.props,
           shares = _this$props.shares,
-          subAccountBankSharingEnabled = _this$props.subAccountBankSharingEnabled;
+          subAccountBankSharingEnabled = _this$props.subAccountBankSharingEnabled,
+          currentUser = _this$props.currentUser;
       var newEntityIds = this.props.newEntities.map(function (e) {
         return e.get('id');
       });
@@ -195,6 +194,9 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
       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, {
@@ -229,16 +231,24 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
         lineHeight: "double"
       }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiGrid.Grid, {
         vAlign: "middle"
-      }, existingCourses.map(this.renderEntity))), subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
-        renderTitle: (0, _formatMessage.default)('Accounts'),
+      }, 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"
-      }, ((_this$props$currentUs = this.props.currentUser) === null || _this$props$currentUs === void 0 ? void 0 : _this$props$currentUs.bank_admin) && (0, _emotion.jsx)(_RootAccountSharing.default, {
+      }, (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))))));
     }
   }]);
   ShareList.displayName = "ShareList";
@@ -246,7 +256,8 @@ var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_cl
 }(_react.Component), _class2.propTypes = {
   canEdit: _propTypes.default.bool.isRequired,
   currentUser: _propTypes.default.shape({
-    bank_admin: _propTypes.default.bool
+    bank_admin: _propTypes.default.bool,
+    can_share_banks_with_subaccounts: _propTypes.default.bool
   }),
   improvedBankSharingEnabled: _propTypes.default.bool.isRequired,
   newEntities: _reactImmutableProptypes.default.list,