@instructure/quiz-core 20.8.0 → 20.8.1-rc.1

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,

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

@@ -59,6 +59,7 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
       isShowingOptions: false,
       isLoading: false,
       highlightedOptionId: null,
+      shareableSubaccounts: [],
       shareableCourses: [],
       shareableUsers: []
     };
@@ -70,7 +71,7 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
     };
 
     _this.handleHideOptions = function () {
-      var allOptions = [].concat((0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableCourses)), (0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableUsers))); // an option matching user input exists
+      var allOptions = [].concat((0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableSubaccounts)), (0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableCourses)), (0, _toConsumableArray2.default)(_this.filterOptions(_this.state.shareableUsers))); // an option matching user input exists
 
       if (allOptions.length === 1) {
         var onlyOption = allOptions[0]; // automatically select the matching option
@@ -191,7 +192,8 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
 
     _this.search = (0, _debounce.default)(_this.props.debounceDelay, function (value) {
       var shouldSearchPeople = !_this.props.searchType || _this.props.searchType === _quizCommon.SHARED_WITH_USER;
-      var shouldSearchCourses = !_this.props.searchType || _this.props.searchType === _quizCommon.SHARED_WITH_COURSE; // TODO add the promise cancellation for avoiding having disordered requests
+      var shouldSearchCourses = !_this.props.searchType || _this.props.searchType === _quizCommon.SHARED_WITH_COURSE;
+      var shouldSearchSubaccounts = _this.props.searchType === _quizCommon.SHARED_WITH_ACCOUNT; // TODO add the promise cancellation for avoiding having disordered requests
 
       if (shouldSearchPeople) {
         _this.props.getShareableUsers(value).then(function (shareableUsers) {
@@ -216,6 +218,18 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
           });
         });
       }
+
+      if (shouldSearchSubaccounts) {
+        _this.props.getShareableSubaccounts(value).then(function (shareableSubaccounts) {
+          var filteredAccounts = _this.filterOptions(shareableSubaccounts);
+
+          _this.setState({
+            shareableSubaccounts: shareableSubaccounts,
+            highlightedOptionId: filteredAccounts.length ? filteredAccounts[0].uuid : _this.state.highlightedOptionId,
+            isLoading: false
+          });
+        });
+      }
     });
     return _this;
   }
@@ -243,6 +257,16 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
         });
       }
 
+      var account = (0, _find.default)({
+        uuid: id
+      }, this.state.shareableSubaccounts);
+
+      if (account) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, account), {}, {
+          entityType: _quizCommon.SHARED_WITH_ACCOUNT
+        });
+      }
+
       return (0, _find.default)({
         uuid: id
       }, this.props.selectedOption);
@@ -257,7 +281,7 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
           key: option.uuid,
           id: option.uuid,
           index: index,
-          text: option.fullName || option.title,
+          text: option.fullName || option.title || option.name,
           onClick: _this2.dismissTag
         });
       });
@@ -309,6 +333,24 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
         }, course.title);
       }));
     }
+  }, {
+    key: "renderSubaccountsOptions",
+    value: function renderSubaccountsOptions(subaccounts) {
+      var _this6 = this;
+
+      return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Group, {
+        key: _quizCommon.SHARED_WITH_ACCOUNT,
+        renderLabel: (0, _formatMessage.default)('Accounts')
+      }, subaccounts.map(function (subaccount) {
+        return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+          // eslint-disable-next-line react/jsx-no-literals
+          "data-automation": "sdk-item-bank-option-subaccount-".concat(subaccount.uuid),
+          id: subaccount.uuid,
+          key: subaccount.uuid,
+          isHighlighted: subaccount.uuid === _this6.state.highlightedOptionId
+        }, subaccount.name);
+      }));
+    }
   }, {
     key: "emptyOption",
     value: function emptyOption() {
@@ -338,6 +380,12 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
         groups.push(this.renderCoursesOptions(courses));
       }
 
+      var subaccounts = this.filterOptions(this.state.shareableSubaccounts);
+
+      if (subaccounts.length) {
+        groups.push(this.renderSubaccountsOptions(subaccounts));
+      }
+
       return groups.length ? groups : /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
         id: _quizCommon.SELECT_EMPTY_OPTION,
         key: _quizCommon.SELECT_EMPTY_OPTION
@@ -346,17 +394,27 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
         size: "x-small"
       }) : this.emptyOption());
     }
+  }, {
+    key: "placeholder",
+    value: function placeholder() {
+      if (this.props.searchType === _quizCommon.SHARED_WITH_ACCOUNT) {
+        return (0, _formatMessage.default)('Enter subaccount name');
+      } else if (this.props.searchType === _quizCommon.SHARED_WITH_COURSE) {
+        return (0, _formatMessage.default)('Enter course name or course id');
+      } else {
+        return (0, _formatMessage.default)('Enter name or login id');
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this$state = this.state,
           inputValue = _this$state.inputValue,
           isShowingOptions = _this$state.isShowingOptions;
-      var placeholder = this.props.searchType === _quizCommon.SHARED_WITH_COURSE ? (0, _formatMessage.default)('Enter course name or course id') : (0, _formatMessage.default)('Enter name or login id');
       return /*#__PURE__*/_react.default.createElement(_uiSelect.Select, {
         "data-automation": "sdk-item-bank-share-input",
         renderLabel: (0, _formatMessage.default)('Share With'),
-        placeholder: placeholder,
+        placeholder: this.placeholder(),
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
         inputRef: this.setInputRef,
@@ -383,6 +441,7 @@ AsyncSearch.propTypes = {
   onSelectionChange: _propTypes.default.func.isRequired,
   getShareableCourses: _propTypes.default.func.isRequired,
   getShareableUsers: _propTypes.default.func.isRequired,
+  getShareableSubaccounts: _propTypes.default.func.isRequired,
   searchType: _propTypes.default.string,
   selectedOption: _propTypes.default.arrayOf(_propTypes.default.shape({
     avatar: _propTypes.default.string,

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

@@ -119,7 +119,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       var size = _this.props.sharedBanks.size;
 
       if (size >= 0 && size !== _this.props.bank.sharedCount || size === 0) {
-        _this.props.getSharedBanks(_this.props.bank, _this.props.getUserInfo, _this.props.getCourseInfo);
+        _this.props.getSharedBanks(_this.props.bank, _this.props.getUserInfo, _this.props.getCourseInfo, _this.props.getSubaccountInfo);
       } else {
         // eslint-disable-next-line react/no-did-mount-set-state
         _this.setState({
@@ -291,7 +291,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
           id: entity.uuid,
           entityType: entity.entityType,
           entityId: entity.uuid,
-          title: entity.fullName || entity.title,
+          title: entity.fullName || entity.title || entity.name,
           avatar: entity.avatar,
           email: entity.email,
           permission: _this.state.searchPermission
@@ -415,6 +415,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_asyncSearch.default, {
           getShareableCourses: _this.props.getShareableCourses,
           getShareableUsers: _this.props.getShareableUsers,
+          getShareableSubaccounts: _this.props.getShareableSubaccounts,
           improvedBankSharingEnabled: _this.props.improvedBankSharingEnabled,
           minChars: _this.props.minChars,
           onSelectionChange: _this.handleSearchSelectionChange,
@@ -602,6 +603,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   bank: _reactImmutableProptypes.default.record.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,
@@ -615,6 +617,8 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   getShareableUsers: _propTypes.default.func.isRequired,
   getSharedBanks: _propTypes.default.func.isRequired,
   getUserInfo: _propTypes.default.func.isRequired,
+  getShareableSubaccounts: _propTypes.default.func.isRequired,
+  getSubaccountInfo: _propTypes.default.func.isRequired,
   improvedBankSharingEnabled: _propTypes.default.bool,
   isOpen: _propTypes.default.bool,
   minChars: _propTypes.default.number,

package/lib/building/components/resources/BanksTray/presenter.js

@@ -136,8 +136,10 @@ var BanksTray = /*#__PURE__*/function (_Component) {
           getCourseInfo: this.props.getCourseInfo,
           getCourseAssignments: this.props.getCourseAssignments,
           getUserInfo: this.props.getUserInfo,
+          getSubaccountInfo: this.props.getSubaccountInfo,
           getShareableCourses: this.props.getShareableCourses,
           getShareableUsers: this.props.getShareableUsers,
+          getShareableSubaccounts: this.props.getShareableSubaccounts,
           minChars: this.props.minChars,
           onShare: this.props.onShare,
           scope: this.props.itemBanksScope
@@ -200,6 +202,7 @@ BanksTray.propTypes = {
   clear: _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,
@@ -211,6 +214,8 @@ BanksTray.propTypes = {
   getUserInfo: _propTypes.default.func,
   getShareableCourses: _propTypes.default.func,
   getShareableUsers: _propTypes.default.func,
+  getShareableSubaccounts: _propTypes.default.func,
+  getSubaccountInfo: _propTypes.default.func,
   minChars: _propTypes.default.number,
   newActiveBank: _propTypes.default.func.isRequired,
   newActiveBankEntry: _propTypes.default.func.isRequired,
@@ -233,6 +238,8 @@ BanksTray.defaultProps = {
   currentUser: null,
   getShareableCourses: null,
   getShareableUsers: null,
+  getShareableSubaccounts: null,
+  getSubaccountInfo: null,
   minChars: void 0,
   getCourseInfo: null,
   getCourseAssignments: null,

package/lib/moderating/components/resources/ModerateTable/presenter.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ModerateTable = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -27,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _uiText = require("@instructure/ui-text");
 
 var _uiLink = require("@instructure/ui-link");
@@ -37,6 +41,10 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiTable = require("@instructure/ui-table");
 
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -57,26 +65,28 @@ var _index5 = _interopRequireDefault(require("../../sidebar/ResetQuiz/index.js")
 
 var _quizCommon = require("@instructure/quiz-common");
 
-var _uiIcons = require("@instructure/ui-icons");
-
 var _lodash = require("lodash");
 
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'esFtE',
+  componentId: 'eDRzW',
   template: function template(theme) {
-    return "\n\n.esFtE_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.esFtE_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}");
+    return "\n\n.eDRzW_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.eDRzW_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}\n\n.eDRzW_eeML{display:inline-block;transition:transform 0.3s}\n\n.eDRzW_XujX{transform:scaleX(-1)}");
   },
-  'emptyText': 'esFtE_bwKH',
-  'page': 'esFtE_xNcP'
+  'emptyText': 'eDRzW_bwKH',
+  'page': 'eDRzW_xNcP',
+  'scoreToggleWrapper': 'eDRzW_eeML',
+  'mirror': 'eDRzW_XujX'
 };
 
 var _ref2 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiIcons.IconInfoLine, null));
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconConfigureLine, null);
+
+var _ref5 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
 
-var _ref5 = /*#__PURE__*/_react.default.createElement(_index5.default, null);
+var _ref6 = /*#__PURE__*/_react.default.createElement(_index5.default, null);
 
 var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ModerateTable, _Component);
@@ -94,6 +104,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
+      displayScoreAsPercentage: true,
       // To support voiceover when the table changes
       moderatePanelIterations: 0,
       selectedStudent: null,
@@ -184,6 +195,18 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       _this.pollAutogradingStatus(submittedQuizSessions);
     };
 
+    _this.handleScoreToggle = function () {
+      _this.setState(function (prevState) {
+        return {
+          displayScoreAsPercentage: !prevState.displayScoreAsPercentage
+        };
+      });
+    };
+
+    _this.scoreToggleScreenreaderMessage = function () {
+      return _this.state.displayScoreAsPercentage ? (0, _formatMessage.default)('Toggle scores to raw points') : (0, _formatMessage.default)('Toggle scores to percentages');
+    };
+
     _this.openModalOnClick = function () {
       _this.props.openModal(_quizCommon.OUTSTANDING_QUIZZES_MODAL);
     };
@@ -263,7 +286,8 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           onModerateLogClick: onModerateLogClick,
           rowData: rowData,
           shouldRenderModerateButton: shouldRenderModerateButton,
-          focusTarget: _this2.state.selectedStudent
+          focusTarget: _this2.state.selectedStudent,
+          displayScoreAsPercentage: _this2.state.displayScoreAsPercentage
         });
       });
     }
@@ -323,6 +347,20 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         afterSubmit: this.props.afterManualSubmit
       })));
     }
+  }, {
+    key: "renderScoreToggle",
+    value: function renderScoreToggle() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.scoreToggleWrapper, (0, _defineProperty2.default)({}, styles.mirror, !this.state.displayScoreAsPercentage))
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        size: "small",
+        margin: "0 x-small",
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: this.scoreToggleScreenreaderMessage(),
+        onClick: this.handleScoreToggle
+      }, _ref4));
+    }
   }, {
     key: "renderTable",
     value: function renderTable() {
@@ -337,7 +375,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         id: "moderation-table-attempts"
       }, (0, _formatMessage.default)('Attempts')), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: "moderation-table-score"
-      }, (0, _formatMessage.default)('Score')), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Score'), this.renderScoreToggle()), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: "moderation-table-time"
       }, (0, _formatMessage.default)('Time')), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: "moderation-table-log"
@@ -357,7 +395,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           isFetching = _this$props5.isFetching,
           tableData = _this$props5.tableData,
           emptyMessage = _this$props5.emptyMessage;
-      if (isFetching || this.state.isWaiting) return _ref4;
+      if (isFetching || this.state.isWaiting) return _ref5;
       if (tableData.length) return this.renderTable();
       return /*#__PURE__*/_react.default.createElement("span", {
         className: styles.emptyText
@@ -372,7 +410,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         className: styles.page
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         onClose: this.onCloseTray
-      }, !this.props.anonymousGrading && _ref5, this.props.children), this.renderContent());
+      }, !this.props.anonymousGrading && _ref6, this.props.children), this.renderContent());
     }
   }]);
   ModerateTable.displayName = "ModerateTable";

package/lib/moderating/components/resources/ModerateTableRow/presenter.js

@@ -175,8 +175,12 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         var message = (0, _formatMessage.default)('No Score');
 
         if (result.get('score') != null) {
-          var percentage = result.get('score') / result.get('pointsPossible');
-          message = _this3.formatPercentMax2FractionDigits(percentage);
+          if (_this3.props.displayScoreAsPercentage) {
+            var percentage = result.get('score') / result.get('pointsPossible');
+            message = _this3.formatPercentMax2FractionDigits(percentage);
+          } else {
+            message = "".concat(_formatMessage.default.number(result.get('score')), "/").concat(_formatMessage.default.number(result.get('pointsPossible')));
+          }
         }
 
         if (result.get('pointsPossible') === 0) {
@@ -391,6 +395,7 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   return ModerateTableRow;
 }((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
   anonymousGrading: _propTypes.default.bool.isRequired,
+  displayScoreAsPercentage: _propTypes.default.bool,
   onModerateButtonClick: _propTypes.default.func.isRequired,
   onModerateLogClick: _propTypes.default.func.isRequired,
   onAccommodationsClick: _propTypes.default.func,
@@ -411,6 +416,7 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   shouldRenderModerateButton: _propTypes.default.bool,
   focusTarget: _propTypes.default.string
 }, _class2.defaultProps = {
+  displayScoreAsPercentage: true,
   shouldRenderModerateButton: true,
   focusTarget: null,
   onAccommodationsClick: null