@instructure/quiz-core 17.19.2 → 17.20.0

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = void 0;
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _quizSessions = require("../../../../common/selectors/quizSessions.js");
+
+function mapStateToProps(state, ownProps) {
+  var quizSessionIds = ownProps.rowData.quizSessionIds;
+  var quizSessions = (0, _quizSessions.getQuizSessionsByIds)(state, quizSessionIds).filter(function (qs) {
+    return qs.isLoaded() && !qs.pending();
+  });
+  return {
+    quizSessions: quizSessions
+  };
+}
+
+var connectedModerateTableRow = (0, _reactRedux.connect)(mapStateToProps)(_presenter.default); //This ugly hack is necessary because the InstUI v7 Table.Body only renders components with name 'Row'.
+
+connectedModerateTableRow.displayName = 'Row';
+var _default = connectedModerateTableRow;
+exports.default = _default;

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

@@ -0,0 +1,416 @@
+"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.ModerateTableRow = 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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiList = require("@instructure/ui-list");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiAvatar = require("@instructure/ui-avatar");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiTable = require("@instructure/ui-table");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _index = _interopRequireDefault(require("../../../../common/components/shared/FormattedDuration/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'FXOGU',
+  template: function template(theme) {
+    return "\n\n.FXOGU_ffXX,[dir=ltr] .FXOGU_ffXX,[dir=rtl] .FXOGU_ffXX{float:right}\n\n.FXOGU_clcl{max-width:15rem}\n\n.FXOGU_ecVa{align-items:center;display:flex}\n\n.FXOGU_eTxg{font-weight:400;margin-left:".concat(theme.avatarNameMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.FXOGU_cCBI:not(:first-child){padding-top:").concat(theme.tableDataItemPadding || 'inherit', "}");
+  },
+  'moderateButton': 'FXOGU_ffXX',
+  'tableData': 'FXOGU_clcl',
+  'avatarRow': 'FXOGU_ecVa',
+  'avatarName': 'FXOGU_eTxg',
+  'tableDataItem': 'FXOGU_cCBI'
+};
+var DASHES = '---';
+var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(ModerateTableRow, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(ModerateTableRow);
+
+  function ModerateTableRow() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ModerateTableRow);
+
+    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.handleModerateRef = function (node) {
+      _this.moderateButton = node;
+    };
+
+    _this.onModerateButtonClick = function () {
+      _this.props.onModerateButtonClick(_this.props.rowData);
+    };
+
+    _this.onAccommodationsClick = function () {
+      _this.props.onAccommodationsClick(_this.props.rowData);
+    };
+
+    _this.generateAttemptLink = function (autogradefailed, message, quizSessionId, attemptNumber) {
+      var iconTitle = (0, _formatMessage.default)('Autograde error on attempt { attemptNumber }.', {
+        attemptNumber: attemptNumber
+      });
+      var link = autogradefailed ? /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        onClick: _this.onResultsLinkClick(quizSessionId),
+        icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
+          color: "warning",
+          title: iconTitle
+        }),
+        iconPlacement: "end"
+      }, message) : /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        onClick: _this.onResultsLinkClick(quizSessionId)
+      }, message);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: quizSessionId,
+        className: styles.tableDataItem
+      }, link);
+    };
+
+    _this.generateAttemptText = function (autogradefailed, message, quizSessionId, attemptNumber) {
+      var iconTitle = (0, _formatMessage.default)('Autograde error on attempt { attemptNumber }.', {
+        attemptNumber: attemptNumber
+      });
+      var icon = autogradefailed ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
+        color: "warning",
+        title: iconTitle
+      }) : null;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: quizSessionId,
+        className: styles.tableDataItem
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        margin: "0 xSmall 0 0"
+      }, message), icon);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ModerateTableRow, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.rowData.id === this.props.focusTarget && this.moderateButton) {
+        this.moderateButton.focus();
+      }
+    }
+  }, {
+    key: "onResultsLinkClick",
+    value: function onResultsLinkClick(quizSessionId) {
+      var _this2 = this;
+
+      return function () {
+        _this2.props.onResultsLinkClick(quizSessionId);
+      };
+    } // =============
+    //   RENDERING
+    // =============
+
+  }, {
+    key: "renderScores",
+    value: function renderScores(quizSessions) {
+      var _this3 = this;
+
+      var noScore = /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.tableDataItem
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: (0, _formatMessage.default)('No Score')
+      }, DASHES));
+
+      if (!quizSessions.length) return noScore;
+      return quizSessions.reduce(function (renderedScores, quizSession) {
+        var result = quizSession.findAuthoritativeResult();
+
+        if (!result) {
+          return renderedScores;
+        }
+
+        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 (result.get('pointsPossible') === 0) {
+          message = (0, _formatMessage.default)('N/A');
+        }
+
+        if (quizSession.inProgress() || quizSession.reopeningGraded()) {
+          var alt = (0, _formatMessage.default)('In progress, score not available');
+          message = /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+            alt: alt
+          }, DASHES);
+        }
+
+        renderedScores.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: result.get('id'),
+          className: styles.tableDataItem
+        }, message));
+        return renderedScores;
+      }, []);
+    }
+  }, {
+    key: "attemptMessage",
+    value: function attemptMessage(idx, maxAttempts) {
+      var message;
+
+      if (maxAttempts === Infinity) {
+        message = (0, _formatMessage.default)('Attempt { attemptNumber }', {
+          attemptNumber: idx + 1
+        });
+      } else {
+        message = (0, _formatMessage.default)('Attempt { attemptNumber } / { maxAttempts }', {
+          attemptNumber: idx + 1,
+          maxAttempts: maxAttempts
+        });
+      }
+
+      return message;
+    }
+  }, {
+    key: "renderAttempts",
+    value: function renderAttempts(quizSessions) {
+      var _this4 = this;
+
+      var maxAttempts = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : quizSessions.length;
+
+      if (!quizSessions.length) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.tableDataItem
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          alt: (0, _formatMessage.default)('No Attempt')
+        }, DASHES));
+      }
+
+      return quizSessions.map(function (quizSession, idx) {
+        var quizSessionId = quizSession.get('id');
+        var hasAutogradeFailure = quizSession.findAuthoritativeResult().status === 'autograding_failed';
+
+        var message = _this4.attemptMessage(idx, maxAttempts, hasAutogradeFailure);
+
+        if (_this4.props.onResultsLinkClick && quizSession.graded()) {
+          return _this4.generateAttemptLink(hasAutogradeFailure, message, quizSessionId, idx + 1);
+        } else {
+          return _this4.generateAttemptText(hasAutogradeFailure, message, quizSessionId, idx + 1);
+        }
+      });
+    }
+  }, {
+    key: "renderTimes",
+    value: function renderTimes(quizSessions) {
+      if (!quizSessions.length) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.tableDataItem
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          alt: (0, _formatMessage.default)('No Time')
+        }, DASHES));
+      }
+
+      return quizSessions.map(function (quizSession, idx) {
+        var message = /*#__PURE__*/_react.default.createElement(_index.default, {
+          seconds: quizSession.elapsedTime
+        });
+
+        if (quizSession.inProgress() || quizSession.reopeningGraded()) {
+          var alt = (0, _formatMessage.default)('In progress, time not available');
+          message = /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+            alt: alt
+          }, DASHES);
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: quizSession.get('id'),
+          className: styles.tableDataItem
+        }, message);
+      });
+    }
+  }, {
+    key: "renderLogLinks",
+    value: function renderLogLinks(quizSessions) {
+      if (!quizSessions.length) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.tableDataItem
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          alt: (0, _formatMessage.default)('No Log')
+        }, DASHES));
+      }
+
+      var _this$props = this.props,
+          onModerateLogClick = _this$props.onModerateLogClick,
+          id = _this$props.rowData.id;
+      return quizSessions.map(function (quizSession) {
+        var quizSessionId = quizSession.get('id');
+        var message = quizSession.inProgress() || quizSession.reopeningGraded() ? (0, _formatMessage.default)('In Progress') : (0, _formatMessage.default)('View Log');
+
+        function onClick(event) {
+          onModerateLogClick({
+            id: id,
+            event: event,
+            quizSessionId: quizSessionId
+          });
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: quizSessionId,
+          className: styles.tableDataItem
+        }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+          onClick: onClick
+        }, message));
+      });
+    }
+  }, {
+    key: "renderAccommodations",
+    value: function renderAccommodations(accommodations) {
+      if (this.props.onAccommodationsClick) {
+        // Establish what to display about the accommodations
+        var displayContent;
+
+        if (!accommodations || accommodations.length === 0) {
+          displayContent = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+            color: "secondary"
+          }, (0, _formatMessage.default)('None'));
+        } else {
+          displayContent = /*#__PURE__*/_react.default.createElement(_uiList.List, {
+            variant: "unstyled"
+          }, accommodations.map(function (elem) {
+            return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+              key: elem.name
+            }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+              color: "primary"
+            }, (0, _formatMessage.default)('{ name }: { value }', elem)));
+          }));
+        } // Display the Accommodations and the button in a flex container with reverse order
+        // so that the screen reader will read the accommodations first, and then the button
+
+
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+          direction: "row-reverse",
+          justifyItems: "end"
+        }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+          "data-automation": "sdk-moderate-accommodations-text"
+        }, displayContent), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          variant: "icon",
+          margin: "0 x-small 0 0",
+          icon: _uiIcons.IconEditLine,
+          onClick: this.onAccommodationsClick,
+          "data-automation": "sdk-moderate-accommodations-edit"
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit student accommodations'))))));
+      }
+    }
+  }, {
+    key: "renderModerate",
+    value: function renderModerate() {
+      if (this.props.shouldRenderModerateButton) {
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.moderateButton
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          size: "small",
+          onClick: this.onModerateButtonClick,
+          ref: this.handleModerateRef,
+          "data-automation": "sdk-moderation-moderate-button"
+        }, (0, _formatMessage.default)('Moderate'))));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var quizSessions = this.props.quizSessions.toArray();
+      var _this$props$rowData = this.props.rowData,
+          name = _this$props$rowData.name,
+          avatarUrl = _this$props$rowData.avatar,
+          maxAttempts = _this$props$rowData.maxAttempts,
+          accommodations = _this$props$rowData.accommodations;
+      var tableData = styles.tableData,
+          avatarRow = styles.avatarRow,
+          avatarName = styles.avatarName;
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
+        className: tableData
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: avatarRow
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiAvatar.Avatar, {
+        name: name,
+        src: avatarUrl,
+        size: "small"
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        className: avatarName
+      }, name))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderScores(quizSessions)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderTimes(quizSessions)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderLogLinks(quizSessions)), this.renderAccommodations(accommodations), this.renderModerate());
+    }
+  }]);
+  ModerateTableRow.displayName = "ModerateTableRow";
+  return ModerateTableRow;
+}((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
+  onModerateButtonClick: _propTypes.default.func.isRequired,
+  onModerateLogClick: _propTypes.default.func.isRequired,
+  onAccommodationsClick: _propTypes.default.func,
+  quizSessions: _reactImmutableProptypes.default.list.isRequired,
+  // We are protecting against the absent prop below.
+  onResultsLinkClick: _propTypes.default.func,
+  rowData: _propTypes.default.shape({
+    avatar: _propTypes.default.string.isRequired,
+    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,
+  shouldRenderModerateButton: _propTypes.default.bool,
+  focusTarget: _propTypes.default.string
+}, _class2.defaultProps = {
+  shouldRenderModerateButton: true,
+  focusTarget: null,
+  onAccommodationsClick: null
+}, _temp)) || _class);
+exports.ModerateTableRow = ModerateTableRow;
+var _default = ModerateTableRow;
+exports.default = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiTable = require("@instructure/ui-table");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+// You're supposed to be able to wrap a component in stuff using renderExample
+// but everything goes wrong fast when I do that, so this component exists just
+// to make a storybook story look pretty. Also, Omar told me to do this.
+var render = function render(props) {
+  return /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+    caption: ""
+  }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, /*#__PURE__*/_react.default.createElement(_presenter.default, props)));
+};
+
+render.displayName = _presenter.default.displayName;
+var _default = render;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    avatarNameMargin: spacing.xSmall,
+    tableDataItemPadding: spacing.xxSmall
+  };
+}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  propValues: {
+    quizSessionIdsAndUsers: [[{
+      id: "12",
+      name: "Student A"
+    }, {
+      id: "15",
+      name: "Student B"
+    }, {
+      id: "16",
+      name: "Student C"
+    }, {
+      id: "18",
+      name: "Student D"
+    }, {
+      id: "19",
+      name: "Student E"
+    }, {
+      id: "21",
+      name: "Student F"
+    }, {
+      id: "22",
+      name: "Student G"
+    }, {
+      id: "26",
+      name: "Student H"
+    }, {
+      id: "39",
+      name: "Student K"
+    }], [{
+      id: "12",
+      name: "Student A"
+    }]],
+    quizSessionsData: [[{
+      id: "12",
+      status: "in_progress"
+    }, {
+      id: "15",
+      status: "in_progress"
+    }, {
+      id: "16",
+      status: "in_progress"
+    }, {
+      id: "18",
+      status: "in_progress"
+    }, {
+      id: "19",
+      status: "in_progress"
+    }, {
+      id: "21",
+      status: "in_progress"
+    }, {
+      id: "22",
+      status: "in_progress"
+    }, {
+      id: "26",
+      status: "in_progress"
+    }, {
+      id: "39",
+      status: "in_progress"
+    }], [{
+      id: "12",
+      name: "Student A"
+    }]]
+  },
+  getComponentProps: function getComponentProps(props) {
+    return {
+      addSuccess: Function.prototype,
+      closeModal: Function.prototype,
+      submitOutstandingQuizSessions: Function.prototype,
+      open: true,
+      mountNode: function mountNode() {
+        return document.getElementById('root');
+      },
+      onSubmit: Function.prototype,
+      onDismiss: Function.prototype
+    };
+  }
+};
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = exports.mapDispatchToProps = void 0;
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _modal = require("../../../../common/actions/modal.js");
+
+var _quizSessions = require("../../../api/quizSessions.js");
+
+function mapStateToProps(state, ownProps) {
+  return {
+    open: state.getIn(['modal', 'isOpen']) === _quizCommon.OUTSTANDING_QUIZZES_MODAL
+  };
+}
+
+var mapDispatchToProps = {
+  submitOutstandingQuizSession: _quizSessions.submitOutstandingQuizSession,
+  closeModal: _modal.closeModal
+};
+exports.mapDispatchToProps = mapDispatchToProps;
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;