@instructure/quiz-core 17.19.2-rc.5 → 17.19.3-rc.2

package/lib/moderating/components/resources/ElapsedTime.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ElapsedTime = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var ElapsedTime = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(ElapsedTime, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(ElapsedTime);
+
+  function ElapsedTime() {
+    (0, _classCallCheck2.default)(this, ElapsedTime);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ElapsedTime, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          eventTime = _this$props.eventTime,
+          startTime = _this$props.startTime;
+      var difference = eventTime - startTime;
+      var totalSeconds = difference / 1000;
+      var hours = Math.floor(totalSeconds / 3600);
+      var remainder = totalSeconds - hours * 3600;
+      var minutes = Math.floor(remainder / 60);
+      var seconds = remainder - minutes * 60; // Intl.DurationFormat doesn't exist yet.
+      // https://github.com/tc39/ecma402/issues/47
+      // Let translators provide patterns for durations
+
+      var displayTime = hours ? (0, _formatMessage.default)('{hours}:{minutes}:{seconds}', {
+        hours: this.formatDecimal2MinIntegerNoFraction(hours),
+        minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+        seconds: this.formatDecimal2MinIntegerNoFraction(seconds)
+      }) : (0, _formatMessage.default)('{minutes}:{seconds}', {
+        minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+        seconds: this.formatDecimal2MinIntegerNoFraction(seconds)
+      });
+      return /*#__PURE__*/_react.default.createElement("span", null, displayTime);
+    }
+  }]);
+  ElapsedTime.displayName = "ElapsedTime";
+  return ElapsedTime;
+}((0, _quizCommon.withI18nSupport)(_react.Component));
+
+exports.ElapsedTime = ElapsedTime;
+ElapsedTime.propTypes = {
+  eventTime: _propTypes.default.instanceOf(Date).isRequired,
+  startTime: _propTypes.default.instanceOf(Date).isRequired,
+  locale: _propTypes.default.string
+};
+ElapsedTime.defaultProps = {
+  locale: null
+};
+ElapsedTime.contextTypes = {
+  locale: _propTypes.default.string
+};
+var _default = ElapsedTime;
+exports.default = _default;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = exports.ModerateTable = exports.mapDispatchToProps = void 0;
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _quizSessions = require("../../../api/quizSessions.js");
+
+var _moderation = require("../../../../common/actions/moderation.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _modal = require("../../../../common/actions/modal.js");
+
+var _alerts = require("../../../../common/actions/alerts.js");
+
+var _quizSessions2 = require("../../../../common/selectors/quizSessions.js");
+
+function mapStateToProps(state, ownProps) {
+  var isFetching = state.getIn(['calls', _quizCommon.QUIZ_SESSIONS_FETCH_CALL, 'requestStatus']) === 'calling';
+  var quiz_ids = ownProps.inProgressData.flatMap(function (user) {
+    return user.quizSessionIds;
+  });
+  var quizSessionsData = (0, _quizSessions2.getQuizSessionsByIds)(state, quiz_ids).filter(function (qs) {
+    return qs.isLoaded() && !qs.pending();
+  });
+  var quizSessionIdsAndUsers = ownProps.inProgressData.flatMap(function (user) {
+    return user.quizSessionIds.map(function (quiz_id) {
+      return {
+        name: user.name,
+        id: quiz_id
+      };
+    });
+  });
+  return {
+    isFetching: isFetching,
+    quizSessionsData: quizSessionsData,
+    quizSessionIdsAndUsers: quizSessionIdsAndUsers,
+    hasSessionTimeLimit: state.getIn(['quizzes', ownProps.quizId, 'hasTimeLimit']),
+    sessionTimeLimitInSeconds: state.getIn(['quizzes', ownProps.quizId, 'sessionTimeLimitInSeconds'])
+  };
+}
+
+var mapDispatchToProps = {
+  getQuizSessions: _quizSessions.getQuizSessions,
+  openTray: _moderation.openTray,
+  openModal: _modal.openModal,
+  addSuccess: _alerts.addSuccess
+};
+exports.mapDispatchToProps = mapDispatchToProps;
+var ModerateTable = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+exports.ModerateTable = ModerateTable;
+var _default = ModerateTable;
+exports.default = _default;

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

@@ -0,0 +1,442 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModerateTable = void 0;
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiTable = require("@instructure/ui-table");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../ModerateTableRow/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../../common/components/shared/IfFeature/index.js"));
+
+var _index3 = _interopRequireDefault(require("../OutstandingQuizzesModal/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../sidebar/ModerateTray/index.js"));
+
+var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+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',
+  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}");
+  },
+  'emptyText': 'esFtE_bwKH',
+  'page': 'esFtE_xNcP'
+};
+
+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 _ref5 = /*#__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);
+
+  var _super = (0, _createSuper2.default)(ModerateTable);
+
+  function ModerateTable() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ModerateTable);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      //To support voiceover when the table changes
+      moderatePanelIterations: 0,
+      selectedStudent: null,
+      //To display the spinner while manually submitted quiz sessions are being graded
+      isWaiting: false
+    };
+
+    _this.fetchData = function () {
+      var _this$props = _this.props,
+          getQuizSessions = _this$props.getQuizSessions,
+          quizId = _this$props.quizId,
+          inProgressData = _this$props.inProgressData,
+          tableData = _this$props.tableData;
+      var quizSessionIds = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(_this.quizSessionIds(inProgressData)), (0, _toConsumableArray2.default)(_this.quizSessionIds(tableData))))); // NOTE: The consumer provided no quizSessionIds. Don't fetch
+
+      if (!quizSessionIds.length) return;
+      (0, _lodash.chunk)(quizSessionIds, 25).forEach(function (chunkedIds) {
+        getQuizSessions(quizId, {
+          ids: chunkedIds
+        });
+      });
+    };
+
+    _this.onModerateButtonClick = function (data) {
+      _this.setState({
+        selectedStudent: data.id
+      });
+
+      _this.props.onOpenTray(data);
+
+      _this.props.openTray(data);
+    };
+
+    _this.onCloseTray = function () {
+      _this.props.onCloseTray();
+
+      _this.setState({
+        moderatePanelIterations: _this.state.moderatePanelIterations + 1
+      });
+    };
+
+    _this.sessionsStillAutograding = function (quizzesToSubmit) {
+      var _iterator = (0, _createForOfIteratorHelper2.default)(_this.props.quizSessionsData),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var quizSession = _step.value;
+
+          if (quizzesToSubmit.indexOf(quizSession.id) > -1 && (quizSession.status === 'autograding' || quizSession.status === 'in_progress')) {
+            return true;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return false;
+    };
+
+    _this.checkAutogradingStatus = function (submittedQuizSessions) {
+      if (_this.sessionsStillAutograding(submittedQuizSessions)) {
+        _this.pollAutogradingStatus(submittedQuizSessions);
+      } else {
+        _this.setState({
+          isWaiting: false
+        });
+
+        _this.props.addSuccess((0, _formatMessage.default)('Manual submission was successful.'));
+      }
+    };
+
+    _this.pollAutogradingStatus = function (submittedQuizSessions) {
+      _this.fetchData();
+
+      setTimeout(function () {
+        _this.checkAutogradingStatus(submittedQuizSessions);
+      }, 1000);
+    };
+
+    _this.handleSubmissionAndPoll = function (submittedQuizSessions) {
+      _this.setState({
+        isWaiting: true
+      });
+
+      _this.pollAutogradingStatus(submittedQuizSessions);
+    };
+
+    _this.openModalOnClick = function () {
+      _this.props.openModal(_quizCommon.OUTSTANDING_QUIZZES_MODAL);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ModerateTable, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.fetchData();
+      var _this$props2 = this.props,
+          hasSessionTimeLimit = _this$props2.hasSessionTimeLimit,
+          sessionTimeLimitInSeconds = _this$props2.sessionTimeLimitInSeconds;
+      this.props.sendSessionTimeLimit({
+        hasSessionTimeLimit: hasSessionTimeLimit,
+        sessionTimeLimitInSeconds: sessionTimeLimitInSeconds
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props3 = this.props,
+          hasSessionTimeLimit = _this$props3.hasSessionTimeLimit,
+          sessionTimeLimitInSeconds = _this$props3.sessionTimeLimitInSeconds;
+
+      if (prevProps.hasSessionTimeLimit !== hasSessionTimeLimit || prevProps.sessionTimeLimitInSeconds !== sessionTimeLimitInSeconds) {
+        this.props.sendSessionTimeLimit({
+          hasSessionTimeLimit: hasSessionTimeLimit,
+          sessionTimeLimitInSeconds: sessionTimeLimitInSeconds
+        });
+      }
+
+      if (prevProps.tableData != this.props.tableData) {
+        this.setState({
+          selectedStudent: null
+        });
+      }
+
+      var quizSessionIds = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(this.quizSessionIds(this.props.inProgressData)), (0, _toConsumableArray2.default)(this.quizSessionIds(this.props.tableData)))));
+      var prevQuizSessionIds = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(this.quizSessionIds(prevProps.inProgressData)), (0, _toConsumableArray2.default)(this.quizSessionIds(prevProps.tableData)))));
+      var skipFetchData = quizSessionIds.every(function (id, index) {
+        return id === prevQuizSessionIds[index];
+      });
+      if (skipFetchData) return;
+      this.fetchData();
+    }
+  }, {
+    key: "quizSessionIds",
+    value: function quizSessionIds(data) {
+      return data.reduce(function (ids, _ref) {
+        var quizSessionIds = _ref.quizSessionIds;
+        return ids.concat(quizSessionIds);
+      }, []).sort();
+    }
+  }, {
+    key: "renderTableRows",
+    // =============
+    //   RENDERING
+    // =============
+    value: function renderTableRows() {
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          onModerateLogClick = _this$props4.onModerateLogClick,
+          onResultsLinkClick = _this$props4.onResultsLinkClick,
+          shouldRenderModerateButton = _this$props4.shouldRenderModerateButton;
+      return this.props.tableData.map(function (rowData) {
+        var id = rowData.id;
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          onResultsLinkClick: onResultsLinkClick,
+          onAccommodationsClick: _this2.props.onAccommodationsClick,
+          key: "".concat(id, "-").concat(_this2.state.moderatePanelIterations) // eslint-disable-line react/jsx-no-literals
+          ,
+          onModerateButtonClick: _this2.onModerateButtonClick,
+          onModerateLogClick: onModerateLogClick,
+          rowData: rowData,
+          shouldRenderModerateButton: shouldRenderModerateButton,
+          focusTarget: _this2.state.selectedStudent
+        });
+      });
+    }
+  }, {
+    key: "countOutstandingAttempts",
+    value: function countOutstandingAttempts() {
+      var i = 0;
+
+      if (!this.props.quizSessionsData) {
+        return 0;
+      }
+
+      var _iterator2 = (0, _createForOfIteratorHelper2.default)(this.props.quizSessionsData),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var quiz = _step2.value;
+
+          if (quiz.status === 'in_progress') {
+            i += 1;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+
+      return i;
+    }
+  }, {
+    key: "renderAlertContent",
+    value: function renderAlertContent(outstandingAttemptsCount) {
+      var _this3 = this;
+
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        name: "manual_submission"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, _ref2, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        padding: "xx-small"
+      }, _formatMessage.default.rich('This assessment has <0>{count, plural, one {# attempt} other {# attempts}}</0> in progress.', {
+        count: outstandingAttemptsCount,
+        0: function _(_ref3) {
+          var children = _ref3.children;
+          return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+            key: "0",
+            onClick: _this3.openModalOnClick,
+            "data-automation": "sdk-outstanding-quizzes-modal-open"
+          }, children);
+        }
+      })))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        name: "manual_submission"
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+        quizSessionsData: this.props.quizSessionsData,
+        quizSessionIdsAndUsers: this.props.quizSessionIdsAndUsers,
+        handleSubmissionAndPoll: this.handleSubmissionAndPoll,
+        afterSubmit: this.props.afterManualSubmit
+      })));
+    }
+  }, {
+    key: "renderTable",
+    value: function renderTable() {
+      var outstandingAttemptsCount = this.countOutstandingAttempts();
+      return /*#__PURE__*/_react.default.createElement("div", null, outstandingAttemptsCount ? this.renderAlertContent(outstandingAttemptsCount) : null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+        caption: (0, _formatMessage.default)('Moderation Table')
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-student"
+      }, (0, _formatMessage.default)('Student')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-attempts"
+      }, (0, _formatMessage.default)('Attempts')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-score"
+      }, (0, _formatMessage.default)('Score')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-time"
+      }, (0, _formatMessage.default)('Time')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-log"
+      }, (0, _formatMessage.default)('Log')), this.props.onAccommodationsClick && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-accommodations"
+      }, (0, _formatMessage.default)({
+        default: 'Accommodations',
+        description: 'Support for students with who need extra time or attempts.'
+      })), this.props.shouldRenderModerateButton && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "moderation-table-moderate"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Moderate'))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, this.renderTableRows())));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      var _this$props5 = this.props,
+          isFetching = _this$props5.isFetching,
+          tableData = _this$props5.tableData,
+          emptyMessage = _this$props5.emptyMessage;
+      if (isFetching || this.state.isWaiting) return _ref4;
+      if (tableData.length) return this.renderTable();
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.emptyText
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, emptyMessage));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.page
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        onClose: this.onCloseTray
+      }, _ref5, this.props.children), this.renderContent());
+    }
+  }]);
+  ModerateTable.displayName = "ModerateTable";
+  return ModerateTable;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node,
+  emptyMessage: _propTypes.default.string,
+  isFetching: _propTypes.default.bool.isRequired,
+  onCloseTray: _propTypes.default.func,
+  onModerateLogClick: _propTypes.default.func.isRequired,
+  onAccommodationsClick: _propTypes.default.func,
+  onOpenTray: _propTypes.default.func,
+  onResultsLinkClick: _propTypes.default.func,
+  openTray: _propTypes.default.func.isRequired,
+  sessionTimeLimitInSeconds: _propTypes.default.number,
+  hasSessionTimeLimit: _propTypes.default.bool,
+  sendSessionTimeLimit: _propTypes.default.func,
+  shouldRenderModerateButton: _propTypes.default.bool,
+  openModal: _propTypes.default.func.isRequired,
+  quizSessionIdsAndUsers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    name: _propTypes.default.string
+  })),
+  quizSessionsData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    status: _propTypes.default.string.isRequired
+  })).isRequired,
+  afterManualSubmit: _propTypes.default.func,
+  inProgressData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    avatar: _propTypes.default.string,
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    quizSessionIds: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+    maxAttempts: _propTypes.default.number,
+    accommodations: _propTypes.default.arrayOf(_propTypes.default.shape({
+      name: _propTypes.default.string.isRequired,
+      value: _propTypes.default.string.isRequired
+    }))
+  })).isRequired,
+  tableData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    avatar: _propTypes.default.string,
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    quizSessionIds: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+    maxAttempts: _propTypes.default.number,
+    accommodations: _propTypes.default.arrayOf(_propTypes.default.shape({
+      name: _propTypes.default.string.isRequired,
+      value: _propTypes.default.string.isRequired
+    }))
+  })).isRequired,
+  quizId: _propTypes.default.number.isRequired,
+  getQuizSessions: _propTypes.default.func.isRequired,
+  addSuccess: _propTypes.default.func.isRequired
+}, _class2.defaultProps = {
+  children: void 0,
+  emptyMessage: (0, _formatMessage.default)('There is no moderation information to display yet.'),
+  onCloseTray: Function.prototype,
+  onOpenTray: Function.prototype,
+  sendSessionTimeLimit: Function.prototype,
+  sessionTimeLimitInSeconds: null,
+  hasSessionTimeLimit: false,
+  shouldRenderModerateButton: true,
+  onAccommodationsClick: null,
+  onOutstandingQuizzesClick: void 0,
+  onResultsLinkClick: void 0,
+  quizSessionIdsAndUsers: [],
+  afterManualSubmit: Function.prototype
+}, _temp)) || _class);
+exports.ModerateTable = ModerateTable;
+var _default = ModerateTable;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    emptyTextMargin: spacing.small,
+    pageBackgroundColor: colors.white
+  };
+}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _immutable = require("immutable");
+
+var _QuizSession = _interopRequireDefault(require("../../../../common/records/QuizSession.js"));
+
+var _QuizSessionResult = _interopRequireDefault(require("../../../../common/records/QuizSessionResult.js"));
+
+var failedResult = new _QuizSessionResult.default((0, _immutable.fromJS)({
+  status: 'autograding_failed',
+  score: 42,
+  pointsPossible: 100
+}));
+var errorSession = new _QuizSession.default((0, _immutable.fromJS)({
+  id: '1',
+  status: 'graded'
+}));
+
+errorSession.findAuthoritativeResult = function () {
+  return failedResult;
+};
+
+var quizSessions = (0, _immutable.List)([errorSession, new _QuizSession.default((0, _immutable.fromJS)({
+  id: '2',
+  status: 'graded'
+})), new _QuizSession.default((0, _immutable.fromJS)({
+  id: '3'
+}))]);
+var _default = {
+  propValues: {
+    onAccommodationsClick: [null, Function.prototype],
+    shouldRenderModerateButton: [true, false],
+    rowData: [{
+      id: '1',
+      avatar: 'SA',
+      name: 'Student A',
+      quizSessionIds: ['1'],
+      accommodations: [{
+        name: 'Time',
+        value: 'x2'
+      }]
+    }, {
+      id: '2',
+      avatar: 'SB',
+      name: 'Student B',
+      quizSessionIds: ['1']
+    }, {
+      id: '3',
+      avatar: 'SC',
+      name: 'Student C',
+      quizSessionIds: ['1'],
+      accommodations: [{
+        name: 'Time',
+        value: '+20 min'
+      }, {
+        name: 'Attempts',
+        value: '+3'
+      }]
+    }, {
+      id: '5',
+      avatar: 'SE',
+      name: 'Student E',
+      quizSessionIds: ['1'],
+      accommodations: [{
+        name: 'Attempts',
+        value: '+1'
+      }]
+    }]
+  },
+  getComponentProps: function getComponentProps(props) {
+    return {
+      onModerateButtonClick: Function.prototype,
+      onModerateLogClick: Function.prototype,
+      onResultsLinkClick: Function.prototype,
+      quizSessions: quizSessions
+    };
+  }
+};
+exports.default = _default;