@instructure/quiz-core 20.9.1-rc.5 → 20.9.1-rc.7

package/es/banks/components/{SharingModal/asyncSearch.js → AsyncSearch/index.js}

@@ -51,9 +51,9 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
       if (allOptions.length === 1) {
         var onlyOption = allOptions[0]; // automatically select the matching option
 
-        var label = onlyOption.label || onlyOption.fullName;
+        var label = onlyOption.label || onlyOption.fullName || onlyOption.title || onlyOption.name;
 
-        if (label.toLowerCase() === _this.state.inputValue.toLowerCase()) {
+        if (label && label.toLowerCase() === _this.state.inputValue.toLowerCase()) {
           _this.changeSelectedOption([].concat(_toConsumableArray(_this.props.selectedOption.map(function (option) {
             return option.uuid;
           })), [onlyOption.uuid]));
@@ -372,6 +372,10 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
   }, {
     key: "placeholder",
     value: function placeholder() {
+      if (this.props.placeholderLabel) {
+        return this.props.placeholderLabel;
+      }
+
       if (this.props.searchType === SHARED_WITH_ACCOUNT) {
         return t('Enter subaccount name');
       } else if (this.props.searchType === SHARED_WITH_COURSE) {
@@ -388,7 +392,7 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
           isShowingOptions = _this$state.isShowingOptions;
       return /*#__PURE__*/React.createElement(Select, {
         "data-automation": "sdk-item-bank-share-input",
-        renderLabel: t('Share With'),
+        renderLabel: this.props.searchLabel,
         placeholder: this.placeholder(),
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
@@ -413,9 +417,9 @@ AsyncSearch.propTypes = {
   improvedBankSharingEnabled: PropTypes.bool.isRequired,
   minChars: PropTypes.number,
   onSelectionChange: PropTypes.func.isRequired,
-  getShareableCourses: PropTypes.func.isRequired,
-  getShareableUsers: PropTypes.func.isRequired,
-  getShareableSubaccounts: PropTypes.func.isRequired,
+  getShareableCourses: PropTypes.func,
+  getShareableUsers: PropTypes.func,
+  getShareableSubaccounts: PropTypes.func,
   searchType: PropTypes.string,
   selectedOption: PropTypes.arrayOf(PropTypes.shape({
     avatar: PropTypes.string,
@@ -423,7 +427,9 @@ AsyncSearch.propTypes = {
     title: PropTypes.string,
     uuid: PropTypes.string.isRequired
   })).isRequired,
-  selectionFilter: PropTypes.func
+  selectionFilter: PropTypes.func,
+  searchLabel: PropTypes.string,
+  placeholderLabel: PropTypes.string
 };
 AsyncSearch.defaultProps = {
   debounceDelay: 500,
@@ -431,6 +437,11 @@ AsyncSearch.defaultProps = {
   searchType: null,
   selectionFilter: function selectionFilter(value) {
     return value;
-  }
+  },
+  getShareableCourses: null,
+  getShareableUsers: null,
+  getShareableSubaccounts: null,
+  searchLabel: t('Share With'),
+  placeholder: null
 };
 export default AsyncSearch;

package/es/banks/components/Banks/index.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { Map } from 'immutable';
 import { Banks as BanksPresenter } from "./presenter.js";
-import { clear, merge } from "../../../common/actions/ui.js";
+import { set as setUI, clear, merge } from "../../../common/actions/ui.js";
 import { connect } from "../../../common/react-redux.js";
 import { getBanks } from "../../../banks/api/banks.js";
 import * as modalActions from "../../../common/actions/modal.js";
@@ -15,15 +15,18 @@ function mapStateToProps(state, props) {
   var sortBy = pageData.get('sortBy', 'name');
   var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
+  var searchSelection = pageData.get('searchSelection', []);
   return {
     itemBankSearchTableEnabled: featureOn('item_bank_search_table'),
-    filtersEnabled: featureOn('improved_bank_sharing'),
+    improvedBankSharingEnabled: featureOn('improved_bank_sharing'),
     newItemBankFilterNamesEnabled: featureOn('new_item_bank_filter_names'),
     usedByCourseEnabled: featureOn('filter_item_banks_used_by_course'),
+    subAccountBankSharingEnabled: featureOn('sub_account_bank_sharing'),
     scopeType: scopeType,
     sortBy: sortBy,
     sortOrder: sortOrder,
-    searchTerms: searchTerms
+    searchTerms: searchTerms,
+    searchSelection: searchSelection
   };
 }
 
@@ -33,7 +36,8 @@ function mapDispatchToProps(dispatch) {
     getBanks: bindActionCreators(getBanks, dispatch),
     openModal: bindActionCreators(modalActions.openModal, dispatch),
     clear: bindActionCreators(clear, dispatch),
-    merge: bindActionCreators(merge, dispatch)
+    merge: bindActionCreators(merge, dispatch),
+    setUI: bindActionCreators(setUI, dispatch)
   };
 }
 

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

@@ -9,6 +9,7 @@ var _dec, _class, _class2, _temp;
 /** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 import { Heading } from '@instructure/ui-heading';
 import { Img } from '@instructure/ui-img';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -18,17 +19,20 @@ import { Button } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { withStyle, jsx } from '@instructure/emotion';
+import { Grid } from '@instructure/ui-grid';
+import { View } from '@instructure/ui-view';
 import debounce from 'lodash/fp/debounce';
 import Page from "../../../common/components/layout/Page/index.js";
 import PaginatedCollection from "../../../common/components/shared/PaginatedCollection/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import { BANKS_BANK_FILTERS, BANKS_BANK_PAGINATION, CREATE_BANK_MODAL } from '@instructure/quiz-common';
+import { BANKS_BANK_FILTERS, BANKS_BANK_PAGINATION, CREATE_BANK_MODAL, SHARED_WITH_ACCOUNT } from '@instructure/quiz-common';
 import BanksList from "../../../banks/components/BanksList/index.js";
 import CreateBankModal from "../../../banks/components/CreateBankModal/index.js";
 import NavWrapper from "../NavWrapper/index.js";
 import noResults from '../noResults.svg';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import AsyncSearch from "../AsyncSearch/index.js";
 var sortOrderIcons = {
   ascending: IconArrowUpLine,
   descending: IconArrowDownLine
@@ -89,6 +93,12 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         params['search'] = _this.props.searchTerms;
       }
 
+      if (_this.props.searchSelection.length > 0) {
+        params['account_uuids'] = _this.props.searchSelection.map(function (account) {
+          return account.uuid;
+        });
+      }
+
       return params;
     };
 
@@ -166,6 +176,10 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       _this.search(value);
     };
 
+    _this.handleSearchSelectionChange = function (searchSelection) {
+      _this.props.setUI([BANKS_BANK_FILTERS, 'searchSelection'], searchSelection);
+    };
+
     _this.renderRecords = function (recordIds) {
       return jsx(BanksList, {
         createBankButton: _this.createBankButton,
@@ -190,7 +204,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     };
 
     _this.emptyPage = function () {
-      if (_this.props.searchTerms) {
+      if (_this.props.searchTerms || _this.props.searchSelection.length > 0) {
         var message;
 
         if (_this.props.scopeType === 'course') {
@@ -224,7 +238,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   _createClass(Banks, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType) {
+      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !isEqual(prevProps.searchSelection, this.props.searchSelection)) {
         this.props.clear(BANKS_BANK_PAGINATION);
       }
     }
@@ -269,12 +283,20 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-      var searchFilters = jsx(React.Fragment, null, jsx("div", {
-        display: "inline-block"
+      var searchFilters = jsx(View, {
+        as: "div",
+        width: "100%"
+      }, jsx(Grid, {
+        startAt: "medium",
+        colSpacing: "small",
+        rowSpacing: "small",
+        vAlign: "bottom"
+      }, jsx(Grid.Row, null, jsx(Grid.Col, {
+        width: "auto"
       }, jsx(SimpleSelect, {
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
-        renderLabel: jsx(ScreenReaderContent, null, t('Bank scope')),
+        renderLabel: t('Filter By'),
         width: "13rem"
       }, scopeOptions.map(function (option) {
         return jsx(SimpleSelect.Option, {
@@ -282,16 +304,27 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), jsx("div", {
-        css: this.props.styles.searchBarContainer
+      }))), jsx(Grid.Col, {
+        width: 4
       }, jsx(TextInput, {
-        renderLabel: jsx(ScreenReaderContent, null, t('Search...')),
+        renderLabel: t('Bank'),
         type: "search",
         value: this.state.searchTerms,
         onChange: this.handleSearchInputChange,
-        placeholder: t('Search...'),
+        placeholder: t('Search Banks'),
         "data-automation": "sdk-search-bank-textinput"
-      })));
+      })), this.props.subAccountBankSharingEnabled && jsx(Grid.Col, {
+        width: 4
+      }, jsx(AsyncSearch, {
+        getShareableSubaccounts: this.props.getShareableSubaccounts,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
+        minChars: this.props.minChars,
+        onSelectionChange: this.handleSearchSelectionChange,
+        searchType: SHARED_WITH_ACCOUNT,
+        selectedOption: this.props.searchSelection,
+        searchLabel: t('Account'),
+        placeholderLabel: t('Search Accounts')
+      })))));
       var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
       var sortingFilters = jsx(React.Fragment, null, jsx("div", {
         display: "inline-block",
@@ -345,7 +378,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     key: "renderHeader",
     value: function renderHeader() {
       return jsx("div", {
-        css: [this.props.styles.filters, !this.props.filtersEnabled ? this.props.styles.borderedBottom : {}]
+        css: [this.props.styles.filters, !this.props.improvedBankSharingEnabled ? this.props.styles.borderedBottom : {}]
       }, jsx(Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
@@ -391,7 +424,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     value: function render() {
       return jsx(Page, null, this.renderNav(), jsx("div", {
         css: this.props.styles.content
-      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
+      }, this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -412,8 +445,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     account_name: PropTypes.string
   }),
   // from consumer
-  clear: PropTypes.func,
-  filtersEnabled: PropTypes.bool,
+  clear: PropTypes.func.isRequired,
+  improvedBankSharingEnabled: PropTypes.bool,
   getBanks: PropTypes.func.isRequired,
   getCourseInfo: PropTypes.func,
   // from consumer
@@ -449,10 +482,18 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }).isRequired,
   scopeType: PropTypes.string,
   searchTerms: PropTypes.string,
+  searchSelection: PropTypes.arrayOf(PropTypes.shape({
+    avatar: PropTypes.string,
+    fullName: PropTypes.string,
+    title: PropTypes.string,
+    uuid: PropTypes.string.isRequired
+  })),
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   usedByCourseEnabled: PropTypes.bool,
   itemBankSearchTableEnabled: PropTypes.bool,
+  setUI: PropTypes.func.isRequired,
+  subAccountBankSharingEnabled: PropTypes.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
 }, _class2.defaultProps = {
@@ -469,18 +510,18 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   isCompact: false,
   navigateToBuild: null,
   onShare: function onShare() {},
-  clear: function clear() {},
-  merge: function merge() {},
   scope: {},
   returnToUrl: null,
-  filtersEnabled: false,
+  improvedBankSharingEnabled: false,
   scopeType: 'user',
   sortBy: 'name',
   sortOrder: 'ascending',
   searchTerms: null,
+  searchSelection: [],
   newItemBankFilterNamesEnabled: false,
   usedByCourseEnabled: false,
-  itemBankSearchTableEnabled: false
+  itemBankSearchTableEnabled: false,
+  subAccountBankSharingEnabled: false
 }, _class2.contextTypes = {
   locale: PropTypes.string
 }, _temp)) || _class);

package/es/banks/components/Banks/styles.js

@@ -20,11 +20,6 @@ var generateStyle = function generateStyle(componentTheme) {
       marginTop: '1.5rem',
       display: 'flex',
       flexDirection: 'row'
-    },
-    searchBarContainer: {
-      flexGrow: 0.25,
-      padding: '0 1rem',
-      display: 'inline-block'
     }
   };
 };

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

@@ -31,7 +31,7 @@ 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.js";
+import AsyncSearch from "../AsyncSearch/index.js";
 import Spinner from "../../../common/components/shared/spinner/Spinner.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";

package/es/common/reducers/ui.js

@@ -20,7 +20,7 @@ export default (function () {
       return state.mergeDeepIn([action.payload.key], action.payload.value);
 
     case SET_UI:
-      return state.set(action.payload.key, action.payload.value);
+      return state.setIn([action.payload.key].flat(), action.payload.value);
 
     case TOGGLE_UI:
       return toggle(state, action.payload);

package/lib/banks/components/{SharingModal/asyncSearch.js → AsyncSearch/index.js}

@@ -76,9 +76,9 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
       if (allOptions.length === 1) {
         var onlyOption = allOptions[0]; // automatically select the matching option
 
-        var label = onlyOption.label || onlyOption.fullName;
+        var label = onlyOption.label || onlyOption.fullName || onlyOption.title || onlyOption.name;
 
-        if (label.toLowerCase() === _this.state.inputValue.toLowerCase()) {
+        if (label && label.toLowerCase() === _this.state.inputValue.toLowerCase()) {
           _this.changeSelectedOption([].concat((0, _toConsumableArray2.default)(_this.props.selectedOption.map(function (option) {
             return option.uuid;
           })), [onlyOption.uuid]));
@@ -397,6 +397,10 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
   }, {
     key: "placeholder",
     value: function placeholder() {
+      if (this.props.placeholderLabel) {
+        return this.props.placeholderLabel;
+      }
+
       if (this.props.searchType === _quizCommon.SHARED_WITH_ACCOUNT) {
         return (0, _formatMessage.default)('Enter subaccount name');
       } else if (this.props.searchType === _quizCommon.SHARED_WITH_COURSE) {
@@ -413,7 +417,7 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
           isShowingOptions = _this$state.isShowingOptions;
       return /*#__PURE__*/_react.default.createElement(_uiSelect.Select, {
         "data-automation": "sdk-item-bank-share-input",
-        renderLabel: (0, _formatMessage.default)('Share With'),
+        renderLabel: this.props.searchLabel,
         placeholder: this.placeholder(),
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
@@ -439,9 +443,9 @@ AsyncSearch.propTypes = {
   improvedBankSharingEnabled: _propTypes.default.bool.isRequired,
   minChars: _propTypes.default.number,
   onSelectionChange: _propTypes.default.func.isRequired,
-  getShareableCourses: _propTypes.default.func.isRequired,
-  getShareableUsers: _propTypes.default.func.isRequired,
-  getShareableSubaccounts: _propTypes.default.func.isRequired,
+  getShareableCourses: _propTypes.default.func,
+  getShareableUsers: _propTypes.default.func,
+  getShareableSubaccounts: _propTypes.default.func,
   searchType: _propTypes.default.string,
   selectedOption: _propTypes.default.arrayOf(_propTypes.default.shape({
     avatar: _propTypes.default.string,
@@ -449,7 +453,9 @@ AsyncSearch.propTypes = {
     title: _propTypes.default.string,
     uuid: _propTypes.default.string.isRequired
   })).isRequired,
-  selectionFilter: _propTypes.default.func
+  selectionFilter: _propTypes.default.func,
+  searchLabel: _propTypes.default.string,
+  placeholderLabel: _propTypes.default.string
 };
 AsyncSearch.defaultProps = {
   debounceDelay: 500,
@@ -457,7 +463,12 @@ AsyncSearch.defaultProps = {
   searchType: null,
   selectionFilter: function selectionFilter(value) {
     return value;
-  }
+  },
+  getShareableCourses: null,
+  getShareableUsers: null,
+  getShareableSubaccounts: null,
+  searchLabel: (0, _formatMessage.default)('Share With'),
+  placeholder: null
 };
 var _default = AsyncSearch;
 exports.default = _default;

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

@@ -33,15 +33,18 @@ function mapStateToProps(state, props) {
   var sortBy = pageData.get('sortBy', 'name');
   var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
+  var searchSelection = pageData.get('searchSelection', []);
   return {
     itemBankSearchTableEnabled: (0, _featureCheck.featureOn)('item_bank_search_table'),
-    filtersEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
+    improvedBankSharingEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
     newItemBankFilterNamesEnabled: (0, _featureCheck.featureOn)('new_item_bank_filter_names'),
     usedByCourseEnabled: (0, _featureCheck.featureOn)('filter_item_banks_used_by_course'),
+    subAccountBankSharingEnabled: (0, _featureCheck.featureOn)('sub_account_bank_sharing'),
     scopeType: scopeType,
     sortBy: sortBy,
     sortOrder: sortOrder,
-    searchTerms: searchTerms
+    searchTerms: searchTerms,
+    searchSelection: searchSelection
   };
 }
 
@@ -51,7 +54,8 @@ function mapDispatchToProps(dispatch) {
     getBanks: (0, _redux.bindActionCreators)(_banks.getBanks, dispatch),
     openModal: (0, _redux.bindActionCreators)(modalActions.openModal, dispatch),
     clear: (0, _redux.bindActionCreators)(_ui.clear, dispatch),
-    merge: (0, _redux.bindActionCreators)(_ui.merge, dispatch)
+    merge: (0, _redux.bindActionCreators)(_ui.merge, dispatch),
+    setUI: (0, _redux.bindActionCreators)(_ui.set, dispatch)
   };
 }
 

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

@@ -23,6 +23,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _uiHeading = require("@instructure/ui-heading");
 
 var _uiImg = require("@instructure/ui-img");
@@ -41,6 +43,10 @@ var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
 var _emotion = require("@instructure/emotion");
 
+var _uiGrid = require("@instructure/ui-grid");
+
+var _uiView = require("@instructure/ui-view");
+
 var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
 var _index = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
@@ -63,6 +69,8 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _index6 = _interopRequireDefault(require("../AsyncSearch/index.js"));
+
 var _dec, _class, _class2, _temp;
 
 var sortOrderIcons = {
@@ -124,6 +132,12 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         params['search'] = _this.props.searchTerms;
       }
 
+      if (_this.props.searchSelection.length > 0) {
+        params['account_uuids'] = _this.props.searchSelection.map(function (account) {
+          return account.uuid;
+        });
+      }
+
       return params;
     };
 
@@ -201,6 +215,10 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       _this.search(value);
     };
 
+    _this.handleSearchSelectionChange = function (searchSelection) {
+      _this.props.setUI([_quizCommon.BANKS_BANK_FILTERS, 'searchSelection'], searchSelection);
+    };
+
     _this.renderRecords = function (recordIds) {
       return (0, _emotion.jsx)(_index3.default, {
         createBankButton: _this.createBankButton,
@@ -225,7 +243,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     };
 
     _this.emptyPage = function () {
-      if (_this.props.searchTerms) {
+      if (_this.props.searchTerms || _this.props.searchSelection.length > 0) {
         var message;
 
         if (_this.props.scopeType === 'course') {
@@ -259,7 +277,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   (0, _createClass2.default)(Banks, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType) {
+      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !(0, _isEqual.default)(prevProps.searchSelection, this.props.searchSelection)) {
         this.props.clear(_quizCommon.BANKS_BANK_PAGINATION);
       }
     }
@@ -304,12 +322,20 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-      var searchFilters = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
-        display: "inline-block"
+      var searchFilters = (0, _emotion.jsx)(_uiView.View, {
+        as: "div",
+        width: "100%"
+      }, (0, _emotion.jsx)(_uiGrid.Grid, {
+        startAt: "medium",
+        colSpacing: "small",
+        rowSpacing: "small",
+        vAlign: "bottom"
+      }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+        width: "auto"
       }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
-        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank scope')),
+        renderLabel: (0, _formatMessage.default)('Filter By'),
         width: "13rem"
       }, scopeOptions.map(function (option) {
         return (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
@@ -317,16 +343,27 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), (0, _emotion.jsx)("div", {
-        css: this.props.styles.searchBarContainer
+      }))), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+        width: 4
       }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
-        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search...')),
+        renderLabel: (0, _formatMessage.default)('Bank'),
         type: "search",
         value: this.state.searchTerms,
         onChange: this.handleSearchInputChange,
-        placeholder: (0, _formatMessage.default)('Search...'),
+        placeholder: (0, _formatMessage.default)('Search Banks'),
         "data-automation": "sdk-search-bank-textinput"
-      })));
+      })), this.props.subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+        width: 4
+      }, (0, _emotion.jsx)(_index6.default, {
+        getShareableSubaccounts: this.props.getShareableSubaccounts,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
+        minChars: this.props.minChars,
+        onSelectionChange: this.handleSearchSelectionChange,
+        searchType: _quizCommon.SHARED_WITH_ACCOUNT,
+        selectedOption: this.props.searchSelection,
+        searchLabel: (0, _formatMessage.default)('Account'),
+        placeholderLabel: (0, _formatMessage.default)('Search Accounts')
+      })))));
       var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
       var sortingFilters = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
         display: "inline-block",
@@ -380,7 +417,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     key: "renderHeader",
     value: function renderHeader() {
       return (0, _emotion.jsx)("div", {
-        css: [this.props.styles.filters, !this.props.filtersEnabled ? this.props.styles.borderedBottom : {}]
+        css: [this.props.styles.filters, !this.props.improvedBankSharingEnabled ? this.props.styles.borderedBottom : {}]
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
@@ -426,7 +463,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     value: function render() {
       return (0, _emotion.jsx)(_index.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
         css: this.props.styles.content
-      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index4.default, {
+      }, this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index4.default, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -446,8 +483,8 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     account_name: _propTypes.default.string
   }),
   // from consumer
-  clear: _propTypes.default.func,
-  filtersEnabled: _propTypes.default.bool,
+  clear: _propTypes.default.func.isRequired,
+  improvedBankSharingEnabled: _propTypes.default.bool,
   getBanks: _propTypes.default.func.isRequired,
   getCourseInfo: _propTypes.default.func,
   // from consumer
@@ -483,10 +520,18 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }).isRequired,
   scopeType: _propTypes.default.string,
   searchTerms: _propTypes.default.string,
+  searchSelection: _propTypes.default.arrayOf(_propTypes.default.shape({
+    avatar: _propTypes.default.string,
+    fullName: _propTypes.default.string,
+    title: _propTypes.default.string,
+    uuid: _propTypes.default.string.isRequired
+  })),
   sortBy: _propTypes.default.string,
   sortOrder: _propTypes.default.string,
   usedByCourseEnabled: _propTypes.default.bool,
   itemBankSearchTableEnabled: _propTypes.default.bool,
+  setUI: _propTypes.default.func.isRequired,
+  subAccountBankSharingEnabled: _propTypes.default.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: _propTypes.default.object
 }, _class2.defaultProps = {
@@ -503,18 +548,18 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   isCompact: false,
   navigateToBuild: null,
   onShare: function onShare() {},
-  clear: function clear() {},
-  merge: function merge() {},
   scope: {},
   returnToUrl: null,
-  filtersEnabled: false,
+  improvedBankSharingEnabled: false,
   scopeType: 'user',
   sortBy: 'name',
   sortOrder: 'ascending',
   searchTerms: null,
+  searchSelection: [],
   newItemBankFilterNamesEnabled: false,
   usedByCourseEnabled: false,
-  itemBankSearchTableEnabled: false
+  itemBankSearchTableEnabled: false,
+  subAccountBankSharingEnabled: false
 }, _class2.contextTypes = {
   locale: _propTypes.default.string
 }, _temp)) || _class);

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

@@ -27,11 +27,6 @@ var generateStyle = function generateStyle(componentTheme) {
       marginTop: '1.5rem',
       display: 'flex',
       flexDirection: 'row'
-    },
-    searchBarContainer: {
-      flexGrow: 0.25,
-      padding: '0 1rem',
-      display: 'inline-block'
     }
   };
 };

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

@@ -63,7 +63,7 @@ var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/Cust
 
 var _index = _interopRequireDefault(require("./ShareList/index.js"));
 
-var _asyncSearch = _interopRequireDefault(require("./asyncSearch.js"));
+var _index2 = _interopRequireDefault(require("../AsyncSearch/index.js"));
 
 var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
 
@@ -412,7 +412,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_uiGrid.Grid, {
           vAlign: "bottom",
           colSpacing: "small"
-        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_asyncSearch.default, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_index2.default, {
           getShareableCourses: _this.props.getShareableCourses,
           getShareableUsers: _this.props.getShareableUsers,
           getShareableSubaccounts: _this.props.getShareableSubaccounts,

package/lib/common/reducers/ui.js

@@ -29,7 +29,7 @@ var _default = function _default() {
       return state.mergeDeepIn([action.payload.key], action.payload.value);
 
     case _quizCommon.SET_UI:
-      return state.set(action.payload.key, action.payload.value);
+      return state.setIn([action.payload.key].flat(), action.payload.value);
 
     case _quizCommon.TOGGLE_UI:
       return toggle(state, action.payload);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.9.1-rc.5+813bd63b2",
+  "version": "20.9.1-rc.7+7d9df0379",
   "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.9.1-rc.5+813bd63b2",
-    "@instructure/quiz-i18n": "20.9.1-rc.5+813bd63b2",
-    "@instructure/quiz-interactions": "20.9.1-rc.5+813bd63b2",
-    "@instructure/quiz-number-input": "20.9.1-rc.5+813bd63b2",
-    "@instructure/quiz-rce": "20.9.1-rc.5+813bd63b2",
+    "@instructure/quiz-common": "20.9.1-rc.7+7d9df0379",
+    "@instructure/quiz-i18n": "20.9.1-rc.7+7d9df0379",
+    "@instructure/quiz-interactions": "20.9.1-rc.7+7d9df0379",
+    "@instructure/quiz-number-input": "20.9.1-rc.7+7d9df0379",
+    "@instructure/quiz-rce": "20.9.1-rc.7+7d9df0379",
     "@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.9.1-rc.5+813bd63b2",
+    "instructure-validations": "20.9.1-rc.7+7d9df0379",
     "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.9.1-rc.5+813bd63b2",
+    "quiz-presets": "20.9.1-rc.7+7d9df0379",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "813bd63b275ad613c4a995bae449c2e610fe1526"
+  "gitHead": "7d9df037951d6e2565087a758c70b5daafed5eed"
 }