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

package/es/banks/api/banks.js

@@ -11,7 +11,7 @@ import { clear, newActiveBankEntry, newActiveBank } from "../../common/actions/u
 import t from '@instructure/quiz-i18n/es/format-message';
 import { handleError } from "../../common/api/helpers.js";
 import { removeFromPolling } from "./copyingBanksPoller.js";
-import { BANKS_BANK_PAGINATION, BANKS_BANK_ENTRY_PAGINATION, DELETE_BANK_CALL, UPDATE_BANK_CALL, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE } from '@instructure/quiz-common';
+import { BANKS_BANK_PAGINATION, BANKS_BANK_ENTRY_PAGINATION, DELETE_BANK_CALL, UPDATE_BANK_CALL, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT } from '@instructure/quiz-common';
 import { noop } from 'lodash';
 import { NIL } from 'uuid';
 var banksApiEndpoint = '/api/banks';
@@ -226,10 +226,10 @@ export var shareBank = function shareBank(_shareBank) {
           };
           dispatch(handleShareBankResponse(sharedBank));
         });
-      } else if (_shareBank.entityType === SHARED_WITH_COURSE) {
+      } else {
         var sharedBank = {
           id: sharedBankInfo.id,
-          entityType: SHARED_WITH_COURSE,
+          entityType: _shareBank.entityType,
           entityId: _shareBank.entityId,
           title: _shareBank.title,
           permission: sharedBankInfo.permission,
@@ -272,10 +272,8 @@ export var getSharedBank = function getSharedBank(bankId, entityType, entityId)
     });
   };
 };
-export var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo) {
+export 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({
       onError: handleError(dispatch, t('Failed to fetch shared banks.'))
@@ -290,8 +288,10 @@ export var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourse
           permission: CAN_EDIT,
           bank_id: bank.id
         });
-      }
+      } // USERS
+
 
+      var userSharedBanks = [];
       var userUuids = sharedBanksInfo.filter(function (sb) {
         return sb.entity_type === SHARED_WITH_USER;
       }).map(function (sb) {
@@ -316,7 +316,9 @@ export var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourse
           }
         });
         dispatch(handleShareBanksResponse(userSharedBanks));
-      });
+      }); // COURSES
+
+      var courseSharedBanks = [];
       var courseUuids = sharedBanksInfo.filter(function (sb) {
         return sb.entity_type === SHARED_WITH_COURSE;
       }).map(function (sb) {
@@ -340,6 +342,32 @@ export var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourse
           }
         });
         dispatch(handleShareBanksResponse(courseSharedBanks));
+      }); // ACCOUNTS
+
+      var accountSharedBanks = [];
+      var accountUuids = sharedBanksInfo.filter(function (sb) {
+        return sb.entity_type === 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 === 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(handleShareBanksResponse(accountSharedBanks));
       });
     });
   };

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

@@ -173,8 +173,10 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         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,
@@ -402,6 +404,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   createBank: PropTypes.func.isRequired,
   currentUser: PropTypes.shape({
     bank_admin: PropTypes.bool,
+    can_share_banks_with_subaccounts: PropTypes.bool,
     email: PropTypes.string,
     enrollment_names: PropTypes.arrayOf(PropTypes.string),
     full_name: PropTypes.string,
@@ -419,7 +422,11 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   getShareableCourses: PropTypes.func,
   // from consumer
   getShareableUsers: PropTypes.func,
-  // from consumer,
+  // from consumer
+  getShareableSubaccounts: PropTypes.func,
+  // from consumer
+  getSubaccountInfo: PropTypes.func,
+  // from consumer
   getCourseAssignments: PropTypes.func,
   // from consumer
   isCompact: PropTypes.bool,
@@ -456,6 +463,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   getShareableCourses: null,
   getShareableUsers: null,
   getCourseAssignments: null,
+  getShareableSubaccounts: null,
+  getSubaccountInfo: null,
   minChars: void 0,
   isCompact: false,
   navigateToBuild: null,

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

@@ -399,6 +399,7 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
         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],
@@ -406,6 +407,7 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
         onShare: this.props.onShare,
         getShareableCourses: this.props.getShareableCourses,
         getShareableUsers: this.props.getShareableUsers,
+        getShareableSubaccounts: this.props.getShareableSubaccounts,
         updateSharedCount: this.updateSharedCount
       });
     }
@@ -510,6 +512,7 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
   createBankCloneJob: PropTypes.func.isRequired,
   currentUser: PropTypes.shape({
     bank_admin: PropTypes.bool,
+    can_share_banks_with_subaccounts: PropTypes.bool,
     email: PropTypes.string,
     enrollment_names: PropTypes.arrayOf(PropTypes.string),
     full_name: PropTypes.string,
@@ -523,6 +526,7 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
   getUserInfo: PropTypes.func,
   getShareableCourses: PropTypes.func,
   getShareableUsers: PropTypes.func,
+  getShareableSubaccounts: PropTypes.func,
   minChars: PropTypes.number,
   navigateToBank: PropTypes.func.isRequired,
   onShare: PropTypes.func,
@@ -538,6 +542,7 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
   getUserInfo: null,
   getShareableCourses: null,
   getShareableUsers: null,
+  getShareableSubaccounts: null,
   minChars: void 0,
   locale: null,
   timezone: null,

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

@@ -22,7 +22,7 @@ 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 } from '@instructure/quiz-common';
+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, {
@@ -148,11 +148,10 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
   }, {
     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');
       });
@@ -165,6 +164,9 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
       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, {
@@ -199,16 +201,24 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
         lineHeight: "double"
       }, t('Currently shared with')), jsx(Grid, {
         vAlign: "middle"
-      }, existingCourses.map(this.renderEntity))), subAccountBankSharingEnabled && jsx(Tabs.Panel, {
-        renderTitle: t('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)) && jsx(Tabs.Panel, {
+        renderTitle: t('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) && jsx(RootAccountSharing, {
+      }, (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))))));
     }
   }]);
 
@@ -217,7 +227,8 @@ export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_t
 }(Component), _class2.propTypes = {
   canEdit: PropTypes.bool.isRequired,
   currentUser: PropTypes.shape({
-    bank_admin: PropTypes.bool
+    bank_admin: PropTypes.bool,
+    can_share_banks_with_subaccounts: PropTypes.bool
   }),
   improvedBankSharingEnabled: PropTypes.bool.isRequired,
   newEntities: ImmutablePropTypes.list,

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

@@ -12,7 +12,7 @@ import t from '@instructure/quiz-i18n/es/format-message';
 import { Select } from '@instructure/ui-select';
 import { Spinner } from '@instructure/ui-spinner';
 import TagWrapper from "../../../common/components/shared/TagWrapper/index.js";
-import { SHARED_WITH_USER, SHARED_WITH_COURSE, SELECT_EMPTY_OPTION } from '@instructure/quiz-common';
+import { SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT, SELECT_EMPTY_OPTION } from '@instructure/quiz-common';
 export var AsyncSearch = /*#__PURE__*/function (_Component) {
   _inherits(AsyncSearch, _Component);
 
@@ -34,6 +34,7 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
       isShowingOptions: false,
       isLoading: false,
       highlightedOptionId: null,
+      shareableSubaccounts: [],
       shareableCourses: [],
       shareableUsers: []
     };
@@ -45,7 +46,7 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
     };
 
     _this.handleHideOptions = function () {
-      var allOptions = [].concat(_toConsumableArray(_this.filterOptions(_this.state.shareableCourses)), _toConsumableArray(_this.filterOptions(_this.state.shareableUsers))); // an option matching user input exists
+      var allOptions = [].concat(_toConsumableArray(_this.filterOptions(_this.state.shareableSubaccounts)), _toConsumableArray(_this.filterOptions(_this.state.shareableCourses)), _toConsumableArray(_this.filterOptions(_this.state.shareableUsers))); // an option matching user input exists
 
       if (allOptions.length === 1) {
         var onlyOption = allOptions[0]; // automatically select the matching option
@@ -166,7 +167,8 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
 
     _this.search = debounce(_this.props.debounceDelay, function (value) {
       var shouldSearchPeople = !_this.props.searchType || _this.props.searchType === SHARED_WITH_USER;
-      var shouldSearchCourses = !_this.props.searchType || _this.props.searchType === SHARED_WITH_COURSE; // TODO add the promise cancellation for avoiding having disordered requests
+      var shouldSearchCourses = !_this.props.searchType || _this.props.searchType === SHARED_WITH_COURSE;
+      var shouldSearchSubaccounts = _this.props.searchType === SHARED_WITH_ACCOUNT; // TODO add the promise cancellation for avoiding having disordered requests
 
       if (shouldSearchPeople) {
         _this.props.getShareableUsers(value).then(function (shareableUsers) {
@@ -191,6 +193,18 @@ export 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;
   }
@@ -218,6 +232,16 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
         });
       }
 
+      var account = find({
+        uuid: id
+      }, this.state.shareableSubaccounts);
+
+      if (account) {
+        return _objectSpread(_objectSpread({}, account), {}, {
+          entityType: SHARED_WITH_ACCOUNT
+        });
+      }
+
       return find({
         uuid: id
       }, this.props.selectedOption);
@@ -232,7 +256,7 @@ export 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
         });
       });
@@ -284,6 +308,24 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
         }, course.title);
       }));
     }
+  }, {
+    key: "renderSubaccountsOptions",
+    value: function renderSubaccountsOptions(subaccounts) {
+      var _this6 = this;
+
+      return /*#__PURE__*/React.createElement(Select.Group, {
+        key: SHARED_WITH_ACCOUNT,
+        renderLabel: t('Accounts')
+      }, subaccounts.map(function (subaccount) {
+        return /*#__PURE__*/React.createElement(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() {
@@ -313,6 +355,12 @@ export 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.createElement(Select.Option, {
         id: SELECT_EMPTY_OPTION,
         key: SELECT_EMPTY_OPTION
@@ -321,17 +369,27 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
         size: "x-small"
       }) : this.emptyOption());
     }
+  }, {
+    key: "placeholder",
+    value: function placeholder() {
+      if (this.props.searchType === SHARED_WITH_ACCOUNT) {
+        return t('Enter subaccount name');
+      } else if (this.props.searchType === SHARED_WITH_COURSE) {
+        return t('Enter course name or course id');
+      } else {
+        return t('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 === SHARED_WITH_COURSE ? t('Enter course name or course id') : t('Enter name or login id');
       return /*#__PURE__*/React.createElement(Select, {
         "data-automation": "sdk-item-bank-share-input",
         renderLabel: t('Share With'),
-        placeholder: placeholder,
+        placeholder: this.placeholder(),
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
         inputRef: this.setInputRef,
@@ -357,6 +415,7 @@ AsyncSearch.propTypes = {
   onSelectionChange: PropTypes.func.isRequired,
   getShareableCourses: PropTypes.func.isRequired,
   getShareableUsers: PropTypes.func.isRequired,
+  getShareableSubaccounts: PropTypes.func.isRequired,
   searchType: PropTypes.string,
   selectedOption: PropTypes.arrayOf(PropTypes.shape({
     avatar: PropTypes.string,

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

@@ -81,7 +81,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
       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({
@@ -253,7 +253,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
           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
@@ -377,6 +377,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
         }, jsx(Grid.Row, null, jsx(Grid.Col, null, jsx(AsyncSearch, {
           getShareableCourses: _this.props.getShareableCourses,
           getShareableUsers: _this.props.getShareableUsers,
+          getShareableSubaccounts: _this.props.getShareableSubaccounts,
           improvedBankSharingEnabled: _this.props.improvedBankSharingEnabled,
           minChars: _this.props.minChars,
           onSelectionChange: _this.handleSearchSelectionChange,
@@ -565,6 +566,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
   bank: ImmutablePropTypes.record.isRequired,
   currentUser: PropTypes.shape({
     bank_admin: PropTypes.bool,
+    can_share_banks_with_subaccounts: PropTypes.bool,
     email: PropTypes.string,
     enrollment_names: PropTypes.arrayOf(PropTypes.string),
     full_name: PropTypes.string,
@@ -578,6 +580,8 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
   getShareableUsers: PropTypes.func.isRequired,
   getSharedBanks: PropTypes.func.isRequired,
   getUserInfo: PropTypes.func.isRequired,
+  getShareableSubaccounts: PropTypes.func.isRequired,
+  getSubaccountInfo: PropTypes.func.isRequired,
   improvedBankSharingEnabled: PropTypes.bool,
   isOpen: PropTypes.bool,
   minChars: PropTypes.number,

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

@@ -108,8 +108,10 @@ export 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
@@ -171,6 +173,7 @@ BanksTray.propTypes = {
   clear: PropTypes.func.isRequired,
   currentUser: PropTypes.shape({
     bank_admin: PropTypes.bool,
+    can_share_banks_with_subaccounts: PropTypes.bool,
     email: PropTypes.string,
     enrollment_names: PropTypes.arrayOf(PropTypes.string),
     full_name: PropTypes.string,
@@ -182,6 +185,8 @@ BanksTray.propTypes = {
   getUserInfo: PropTypes.func,
   getShareableCourses: PropTypes.func,
   getShareableUsers: PropTypes.func,
+  getShareableSubaccounts: PropTypes.func,
+  getSubaccountInfo: PropTypes.func,
   minChars: PropTypes.number,
   newActiveBank: PropTypes.func.isRequired,
   newActiveBankEntry: PropTypes.func.isRequired,
@@ -204,6 +209,8 @@ BanksTray.defaultProps = {
   currentUser: null,
   getShareableCourses: null,
   getShareableUsers: null,
+  getShareableSubaccounts: null,
+  getSubaccountInfo: null,
   minChars: void 0,
   getCourseInfo: null,
   getCourseAssignments: null,

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -10,11 +11,14 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
+import { IconButton } from '@instructure/ui-buttons';
+import { IconInfoLine, IconConfigureLine } from '@instructure/ui-icons';
 import { themeable } from '@instructure/ui-themeable';
 import t from '@instructure/quiz-i18n/es/format-message';
 import ModerateTableRow from "../ModerateTableRow/index.js";
@@ -23,24 +27,27 @@ import OutstandingQuizzesModal from "../OutstandingQuizzesModal/index.js";
 import ModerateTray from "../../sidebar/ModerateTray/index.js";
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
 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'
 };
 import theme from "./theme.js";
 import ResetQuiz from "../../sidebar/ResetQuiz/index.js";
 import { OUTSTANDING_QUIZZES_MODAL } from '@instructure/quiz-common';
-import { IconInfoLine } from '@instructure/ui-icons';
 import { chunk } from 'lodash';
 
 var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconInfoLine, null));
 
-var _ref4 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref4 = /*#__PURE__*/React.createElement(IconConfigureLine, null);
 
-var _ref5 = /*#__PURE__*/React.createElement(ResetQuiz, null);
+var _ref5 = /*#__PURE__*/React.createElement(Spinner, null);
+
+var _ref6 = /*#__PURE__*/React.createElement(ResetQuiz, null);
 
 export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ModerateTable, _Component);
@@ -58,6 +65,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
 
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
+      displayScoreAsPercentage: true,
       // To support voiceover when the table changes
       moderatePanelIterations: 0,
       selectedStudent: null,
@@ -150,6 +158,18 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
       _this.pollAutogradingStatus(submittedQuizSessions);
     };
 
+    _this.handleScoreToggle = function () {
+      _this.setState(function (prevState) {
+        return {
+          displayScoreAsPercentage: !prevState.displayScoreAsPercentage
+        };
+      });
+    };
+
+    _this.scoreToggleScreenreaderMessage = function () {
+      return _this.state.displayScoreAsPercentage ? t('Toggle scores to raw points') : t('Toggle scores to percentages');
+    };
+
     _this.openModalOnClick = function () {
       _this.props.openModal(OUTSTANDING_QUIZZES_MODAL);
     };
@@ -231,7 +251,8 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
           onModerateLogClick: onModerateLogClick,
           rowData: rowData,
           shouldRenderModerateButton: shouldRenderModerateButton,
-          focusTarget: _this2.state.selectedStudent
+          focusTarget: _this2.state.selectedStudent,
+          displayScoreAsPercentage: _this2.state.displayScoreAsPercentage
         });
       });
     }
@@ -291,6 +312,20 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
         afterSubmit: this.props.afterManualSubmit
       })));
     }
+  }, {
+    key: "renderScoreToggle",
+    value: function renderScoreToggle() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.scoreToggleWrapper, _defineProperty({}, styles.mirror, !this.state.displayScoreAsPercentage))
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        size: "small",
+        margin: "0 x-small",
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: this.scoreToggleScreenreaderMessage(),
+        onClick: this.handleScoreToggle
+      }, _ref4));
+    }
   }, {
     key: "renderTable",
     value: function renderTable() {
@@ -305,7 +340,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
         id: "moderation-table-attempts"
       }, t('Attempts')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "moderation-table-score"
-      }, t('Score')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Score'), this.renderScoreToggle()), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "moderation-table-time"
       }, t('Time')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "moderation-table-log"
@@ -325,7 +360,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
           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.createElement("span", {
         className: styles.emptyText
@@ -340,7 +375,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
         className: styles.page
       }, /*#__PURE__*/React.createElement(ModerateTray, {
         onClose: this.onCloseTray
-      }, !this.props.anonymousGrading && _ref5, this.props.children), this.renderContent());
+      }, !this.props.anonymousGrading && _ref6, this.props.children), this.renderContent());
     }
   }]);
 

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

@@ -143,8 +143,12 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
         var message = t('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(t.number(result.get('score')), "/").concat(t.number(result.get('pointsPossible')));
+          }
         }
 
         if (result.get('pointsPossible') === 0) {
@@ -360,6 +364,7 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
   return ModerateTableRow;
 }(withI18nSupport(Component)), _class2.propTypes = {
   anonymousGrading: PropTypes.bool.isRequired,
+  displayScoreAsPercentage: PropTypes.bool,
   onModerateButtonClick: PropTypes.func.isRequired,
   onModerateLogClick: PropTypes.func.isRequired,
   onAccommodationsClick: PropTypes.func,
@@ -380,6 +385,7 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
   shouldRenderModerateButton: PropTypes.bool,
   focusTarget: PropTypes.string
 }, _class2.defaultProps = {
+  displayScoreAsPercentage: true,
   shouldRenderModerateButton: true,
   focusTarget: null,
   onAccommodationsClick: null