@instructure/quiz-core 18.5.1-rc.8 → 18.6.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [18.6.0](https://gerrit.instructure.com/quizzes-ui/compare/v18.5.0...v18.6.0) (2023-11-14)
+
+
+### Bug Fixes
+
+* **reports:** fixes for generate report button positioning after audit ([9f64fe1](https://gerrit.instructure.com/quizzes-ui/commits/9f64fe1029e0029cb999b0d8255369562691241f))
+
+
+### Features
+
+* **afs-formula:** Add formula aggregation ui component ([7e05172](https://gerrit.instructure.com/quizzes-ui/commits/7e05172cfb3460af3f9231c0e072898116415f40))
+* **afs-hot-spot:** Add hot-spot afs ([b23d37c](https://gerrit.instructure.com/quizzes-ui/commits/b23d37cd626992f7db90c3453d1556df7b2b4cfb))
+* **AfsOrderingType:** create frontend for ordering afs and summary part ([d1e9066](https://gerrit.instructure.com/quizzes-ui/commits/d1e9066d016e3503fecd812c533c388e68e49136))
+* **Fetcher:** support auth header injection for requests with custom headers ([1553b56](https://gerrit.instructure.com/quizzes-ui/commits/1553b56ba37bfd69bb798c66ec34b3cd601ad8a3))
+* **MatchingType:** create frontend for the afs table for matching question type ([c654589](https://gerrit.instructure.com/quizzes-ui/commits/c6545899277fee2f0cb7a574740c0b89e13c3ad3))
+* **quizanalysis:** extend quiz analysis chart by extreme low and high value ([846b42d](https://gerrit.instructure.com/quizzes-ui/commits/846b42d6fbb1d77bb36641c1fa31725bb5b42b47))
+* **Reports:** increase report card sizes, adapt metric rendering ([06ef7c9](https://gerrit.instructure.com/quizzes-ui/commits/06ef7c93969d591a3403d13a9365183179c855b1))
+* **Reports:** pass down export download functionality to analysis components ([7684e86](https://gerrit.instructure.com/quizzes-ui/commits/7684e8663eece2857d4f080e80563f2a6f31de33))
+
+
+
+
+
 # [18.5.0](https://gerrit.instructure.com/quizzes-ui/compare/v18.4.0...v18.5.0) (2023-11-01)
 
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -8,11 +8,12 @@ var _dec, _class, _class2, _temp;
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
 var styles = {
-  componentId: 'ethsC',
+  componentId: 'fKESK',
   template: function template(theme) {
-    return "\n\n.ethsC_eckF{margin:0;max-width:159px;text-transform:capitalize}";
+    return "\n\n.fKESK_eckF{margin:0;max-width:159px;text-transform:capitalize}\n\n.fKESK_CIyo{width:90px}";
   },
-  'metricLabel': 'ethsC_eckF'
+  'metricLabel': 'fKESK_eckF',
+  'metricWrapper': 'fKESK_CIyo'
 };
 import React, { Component } from 'react';
 import { getSanitizedMetricValue } from "../utils.js";
@@ -37,7 +38,9 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
           label = _this$props.label,
           value = _this$props.value,
           suffix = _this$props.suffix;
-      return /*#__PURE__*/React.createElement(Metric, {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.metricWrapper
+      }, /*#__PURE__*/React.createElement(Metric, {
         theme: {
           valueFontWeight: 500,
           padding: '0'
@@ -48,7 +51,7 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
           className: styles.metricLabel
         }, label),
         renderValue: getSanitizedMetricValue(value, suffix)
-      });
+      }));
     }
   }]);
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/AggregationType/presenter.js

@@ -1,24 +1,13 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import AggregationTable from "../shared/AggregationTable/index.js";
 import { onlyAggregatePropType } from "../../propTypes.js";
 import { AfsTableWrapper } from "../shared/AfsTableWrapper/presenter.js";
-import classNames from 'classnames';
-var styles = {
-  componentId: 'JFhmr',
-  template: function template(theme) {
-    return "\n\n.JFhmr_cVld{max-width:100%;width:calc(25% + 350px)}";
-  },
-  'answerFrequencySummaryContainer': 'JFhmr_cVld'
-};
-import { themeable } from '@instructure/ui-themeable';
-export var AggregationType = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+export var AggregationType = /*#__PURE__*/function (_Component) {
   _inherits(AggregationType, _Component);
 
   var _super = _createSuper(AggregationType);
@@ -38,19 +27,20 @@ export var AggregationType = (_dec = themeable({}, styles), _dec(_class = (_temp
       var _this$props = _this.props,
           answerSummary = _this$props.answerSummary,
           itemId = _this$props.itemId;
-      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.answerFrequencySummaryContainer)
-      }, /*#__PURE__*/React.createElement(AggregationTable, {
-        itemId: itemId,
-        answerSummary: answerSummary
-      })));
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
     };
 
     return _this;
   }
 
   return AggregationType;
-}(Component), _class2.propTypes = {
+}(Component);
+AggregationType.propTypes = {
   itemId: PropTypes.number.isRequired,
   answerSummary: onlyAggregatePropType
-}.isRequired, _temp)) || _class);
+}.isRequired;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/presenter.js

@@ -14,12 +14,12 @@ import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
 var styles = {
-  componentId: 'cEPQa',
+  componentId: 'dCEWT',
   template: function template(theme) {
-    return "\n\n.cEPQa_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.cEPQa_cVld{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.dCEWT_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.dCEWT_SVtU{max-width:100%;width:calc(25% + 350px)}");
   },
-  'tableWrapper': 'cEPQa_rMrG',
-  'answerFrequencySummaryContainer': 'cEPQa_cVld'
+  'tableWrapper': 'dCEWT_rMrG',
+  'tableContainer': 'dCEWT_SVtU'
 };
 import theme from "./theme.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
@@ -79,7 +79,7 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
       return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.answerFrequencySummaryContainer)
+        className: classNames(styles.tableContainer)
       }, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary')
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingType.js

@@ -1,26 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
 import React, { Component } from 'react';
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
 import MatchingTypeTable from "./MatchingTypeTable/index.js";
 import PropTypes from 'prop-types';
 import { matchingTypeAnswerSummaryPropType } from "../../propTypes.js";
 import MatchingTypeOrderer from "./utils/matchingTypeOrderer.js";
-import classNames from 'classnames';
-var styles = {
-  componentId: 'JFhmr',
-  template: function template(theme) {
-    return "\n\n.JFhmr_cVld{max-width:100%;width:calc(25% + 350px)}";
-  },
-  'answerFrequencySummaryContainer': 'JFhmr_cVld'
-};
-import { themeable } from '@instructure/ui-themeable';
-export var MatchingType = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+export var MatchingType = /*#__PURE__*/function (_Component) {
   _inherits(MatchingType, _Component);
 
   var _super = _createSuper(MatchingType);
@@ -46,22 +34,24 @@ export var MatchingType = (_dec = themeable({}, styles), _dec(_class = (_temp =
       var answerKeys = Object.keys(exampleAnswers);
       var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
       var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
-      var containerHalfWidth = orderedAnswerKeys.length <= 3;
-      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(_defineProperty({}, styles.answerFrequencySummaryContainer, containerHalfWidth))
-      }, /*#__PURE__*/React.createElement(MatchingTypeTable, {
-        itemId: itemId,
-        answerSummary: answerSummary,
-        orderedAnswerKeys: orderedAnswerKeys,
-        orderedQuestionKeys: orderedQuestionKeys
-      })));
+      var tableHalfWidth = orderedAnswerKeys.length <= 3;
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        tableHalfWidth: tableHalfWidth,
+        afsTable: /*#__PURE__*/React.createElement(MatchingTypeTable, {
+          itemId: itemId,
+          answerSummary: answerSummary,
+          orderedAnswerKeys: orderedAnswerKeys,
+          orderedQuestionKeys: orderedQuestionKeys
+        })
+      }));
     };
 
     return _this;
   }
 
   return MatchingType;
-}(Component), _class2.propTypes = {
+}(Component);
+MatchingType.propTypes = {
   itemId: PropTypes.number,
   answerSummary: matchingTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
+}.isRequired;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingTypeTable/presenter.js

@@ -27,6 +27,7 @@ import { IconCheckSolid } from '@instructure/ui-icons';
 import { matchingTypeAnswerSummaryPropType } from "../../../propTypes.js";
 import classNames from 'classnames';
 import theme from "./theme.js";
+import { extractTextFromHtml } from '@instructure/quiz-interactions';
 
 var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
 
@@ -146,6 +147,8 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       });
       var questionRowHeaderId = "question-row-header-id-".concat(orderedQuestionKey, "-").concat(itemId);
       var rowKey = "row-".concat(orderedQuestionKey, "-").concat(itemId);
+      var extractedQuestionBody = extractTextFromHtml(question.body);
+      var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : question.body;
       return /*#__PURE__*/React.createElement(Table.Row, {
         key: rowKey
       }, /*#__PURE__*/React.createElement(Table.Cell, {
@@ -154,7 +157,7 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
         theme: {
           padding: '0 0 1px 0'
         }
-      }, question.body), answerCells);
+      }, questionBody), answerCells);
     };
 
     _this.render = function () {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/OrderingType.js

@@ -0,0 +1,87 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import MatchingTypeOrderer from "./utils/matchingTypeOrderer.js";
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import MatchingTypeTable from "./MatchingTypeTable/index.js";
+import PropTypes from 'prop-types';
+import { matchingTypeAnswerSummaryPropType } from "../../propTypes.js";
+import t from '@instructure/quiz-i18n/es/format-message';
+import AggregationTable from "../shared/AggregationTable/index.js";
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+export var OrderingType = /*#__PURE__*/function (_Component) {
+  _inherits(OrderingType, _Component);
+
+  var _super = _createSuper(OrderingType);
+
+  function OrderingType() {
+    var _this;
+
+    _classCallCheck(this, OrderingType);
+
+    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.updateAnswerBody = function (answerSummary) {
+      var translateBody = function translateBody(index) {
+        return "".concat(t('Order'), " ").concat(index);
+      };
+
+      var answerSummaryCopy = _objectSpread({}, answerSummary);
+
+      Object.keys(answerSummaryCopy.questions).forEach(function (questionKey) {
+        Object.keys(answerSummaryCopy.questions[questionKey].answers).forEach(function (answerKey) {
+          var detail = answerSummaryCopy.questions[questionKey].answers[answerKey];
+          answerSummaryCopy.questions[questionKey].answers[answerKey] = _objectSpread(_objectSpread({}, detail), {}, {
+            // Body cannot be used because because re-render of the component add Order
+            // as many time we have to re-render. Only re-assignment works.
+            body: translateBody(Number(answerKey) + 1)
+          });
+        });
+      });
+      return answerSummaryCopy;
+    };
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary;
+
+      var updatedAnswerSummary = _this.updateAnswerBody(answerSummary);
+
+      var questions = updatedAnswerSummary.questions;
+      var questionKeys = Object.keys(questions);
+      var exampleAnswers = questions[questionKeys[0]].answers;
+      var answerKeys = Object.keys(exampleAnswers).sort();
+      var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(updatedAnswerSummary, answerKeys);
+      var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(updatedAnswerSummary, questionKeys, orderedAnswerKeys);
+      var tableHalfWidth = orderedAnswerKeys.length <= 3;
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        tableHalfWidth: tableHalfWidth,
+        afsTable: /*#__PURE__*/React.createElement(MatchingTypeTable, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary,
+          orderedAnswerKeys: orderedAnswerKeys,
+          orderedQuestionKeys: orderedQuestionKeys
+        }),
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return OrderingType;
+}(Component);
+OrderingType.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: matchingTypeAnswerSummaryPropType
+}.isRequired;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/index.js

@@ -1 +1,2 @@
-export { MatchingType } from "./MatchingType.js";
+export { MatchingType } from "./MatchingType.js";
+export { OrderingType } from "./OrderingType.js";

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/presenter.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import { PropTypes } from '@instructure/quiz-interactions';
 import ChoiceType from "./ChoiceType/index.js";
 import AggregationType from "./AggregationType/index.js";
-import { MatchingType } from "./MatchingType/index.js";
+import { MatchingType, OrderingType } from "./MatchingType/index.js";
 import { answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
@@ -36,6 +36,10 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.matchingEnabled) {
         _this.afsTableComponentMap.set('matching', MatchingType);
       }
+
+      if (afsFlags.orderingEnabled) {
+        _this.afsTableComponentMap.set('ordering', OrderingType);
+      }
     };
 
     _this.render = function () {
@@ -75,6 +79,8 @@ AnswerFrequencySummary.propTypes = {
   interactionType: PropTypes.string.isRequired,
   afsFlags: PropTypes.shape({
     formulaEnabled: PropTypes.bool.isRequired,
-    matchingEnabled: PropTypes.bool.isRequired
+    matchingEnabled: PropTypes.bool.isRequired,
+    hotSpotEnabled: PropTypes.bool.isRequired,
+    orderingEnabled: PropTypes.bool.isRequired
   })
 }.isRequired;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/index.js

@@ -0,0 +1 @@
+export { AfsPartsContainer as default } from "./presenter.js";

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/presenter.js

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { themeable } from '@instructure/ui-themeable';
+var styles = {
+  componentId: 'dApXZ',
+  template: function template(theme) {
+    return "\n\n.dApXZ_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.dApXZ_ellB{margin-top:13px}";
+  },
+  'tableContainer': 'dApXZ_SVtU',
+  'aggregateContainer': 'dApXZ_ellB'
+};
+import classNames from 'classnames';
+export var AfsPartsContainer = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AfsPartsContainer, _Component);
+
+  var _super = _createSuper(AfsPartsContainer);
+
+  function AfsPartsContainer() {
+    var _this;
+
+    _classCallCheck(this, AfsPartsContainer);
+
+    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.renderAggregationTable = function () {
+      var _this$props = _this.props,
+          afsTable = _this$props.afsTable,
+          aggregationTable = _this$props.aggregationTable;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.tableContainer, _defineProperty({}, styles.aggregateContainer, afsTable))
+      }, aggregationTable);
+    };
+
+    _this.renderAfsTable = function () {
+      var _this$props2 = _this.props,
+          afsTable = _this$props2.afsTable,
+          tableHalfWidth = _this$props2.tableHalfWidth;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(_defineProperty({}, styles.tableContainer, tableHalfWidth))
+      }, afsTable);
+    };
+
+    _this.render = function () {
+      var _this$props3 = _this.props,
+          afsTable = _this$props3.afsTable,
+          aggregationTable = _this$props3.aggregationTable;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+    };
+
+    return _this;
+  }
+
+  return AfsPartsContainer;
+}(Component), _class2.propTypes = {
+  tableHalfWidth: PropTypes.bool,
+  afsTable: PropTypes.node,
+  aggregationTable: PropTypes.node
+}.isRequired, _class2.defaultProps = {
+  tableHalfWidth: true,
+  afsTable: null,
+  aggregationTable: null
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/index.js

@@ -9,6 +9,7 @@ function mapStateToProps(_state) {
     afsFlags: {
       formulaEnabled: featureOn('ia_formula_afs'),
       matchingEnabled: featureOn('ia_matching_afs'),
+      orderingEnabled: featureOn('ia_ordering_afs'),
       hotSpotEnabled: featureOn('ia_hot_spot_afs')
     }
   };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js

@@ -16,17 +16,17 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
 import Card from "../../../../../common/components/shared/Card/index.js";
 var styles = {
-  componentId: 'bLTgQ',
+  componentId: 'cnjis',
   template: function template(theme) {
-    return "\n\n.bLTgQ_bqdH{column-gap:5px;display:flex;justify-content:space-between;padding-bottom:".concat(theme.metricsPadding || 'inherit', ";row-gap:8px}\n\n.bLTgQ_PFlN{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.bLTgQ_dJIh{height:").concat(theme.cardHeight || 'inherit', "}\n\n.bLTgQ_eWEX{align-items:flex-end;align-self:flex-end;display:flex;height:100%;justify-content:flex-end}\n\n.bLTgQ_blRb{max-width:160px;padding-right:10px}\n\n.bLTgQ_bxzy{border-bottom:1px solid ").concat(theme.quizSummaryBorderBottomColor || 'inherit', ";margin-bottom:15px;padding-bottom:15px}\n\n.bLTgQ_dKIc{padding-bottom:15px}\n\n@media only screen and (max-width:25rem){.bLTgQ_dJIh{height:auto}.bLTgQ_PFlN{max-width:").concat(theme.cardWidth || 'inherit', ";width:auto}.bLTgQ_bqdH{flex-wrap:wrap}}");
+    return "\n\n.cnjis_bqdH{column-gap:26px;display:flex;justify-content:flex-start;padding-bottom:".concat(theme.metricsPadding || 'inherit', ";row-gap:8px}\n\n.cnjis_PFlN{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.cnjis_dJIh{height:").concat(theme.cardHeight || 'inherit', "}\n\n.cnjis_eWEX{align-items:flex-end;align-self:flex-end;display:flex;height:100%;justify-content:flex-end}\n\n.cnjis_blRb{max-width:160px;padding-right:10px}\n\n.cnjis_bxzy{border-bottom:1px solid ").concat(theme.quizSummaryBorderBottomColor || 'inherit', ";margin-bottom:15px;padding-bottom:15px}\n\n.cnjis_dKIc{padding-bottom:15px}\n\n@media only screen and (max-width:25rem){.cnjis_dJIh{height:auto}.cnjis_PFlN{max-width:").concat(theme.cardWidth || 'inherit', ";width:auto}.cnjis_bqdH{flex-wrap:wrap}}");
   },
-  'metricsContainer': 'bLTgQ_bqdH',
-  'reportCard': 'bLTgQ_PFlN',
-  'emptyReportCard': 'bLTgQ_dJIh',
-  'emptyCardBodyContainer': 'bLTgQ_eWEX',
-  'dateContainer': 'bLTgQ_blRb',
-  'quizAnalysisSummary': 'bLTgQ_bxzy',
-  'titleContainer': 'bLTgQ_dKIc'
+  'metricsContainer': 'cnjis_bqdH',
+  'reportCard': 'cnjis_PFlN',
+  'emptyReportCard': 'cnjis_dJIh',
+  'emptyCardBodyContainer': 'cnjis_eWEX',
+  'dateContainer': 'cnjis_blRb',
+  'quizAnalysisSummary': 'cnjis_bxzy',
+  'titleContainer': 'cnjis_dKIc'
 };
 import theme from "./theme.js";
 import classnames from 'classnames';

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js

@@ -5,7 +5,7 @@ export default function generator(_ref) {
   return {
     metricsPadding: spacing.medium,
     cardHeight: '6rem',
-    cardWidth: '16rem',
+    cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
     cardBoxShadow: '1px 1px 3px 0 #ddd',

package/es/reporting/components/resources/NewQuizAndItemAnalysis/errorMessages.js

@@ -2,6 +2,9 @@ import t from '@instructure/quiz-i18n/es/format-message';
 export var getFailedToFetchReports = function getFailedToFetchReports() {
   return t('An error has occurred while loading this report. Please refresh the page.');
 };
+export var getFailedToExportReports = function getFailedToExportReports() {
+  return t('An error has occurred while exporting this report. Please try again.');
+};
 export var getLastReportGenerationFailed = function getLastReportGenerationFailed() {
   return t('Report generation failed. Please try again.');
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/exportReports.js

@@ -0,0 +1,65 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { getFailedToExportReports } from "./errorMessages.js";
+import contentDisposition from 'content-disposition';
+export var exportReports = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var getAnalysesExport, activeQuizId, filter, format, saveFile, addError, response, dispositionHeader, disposition, filename, blob;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            getAnalysesExport = _ref.getAnalysesExport, activeQuizId = _ref.activeQuizId, filter = _ref.filter, format = _ref.format, saveFile = _ref.saveFile, addError = _ref.addError;
+            _context.prev = 1;
+            _context.next = 4;
+            return getAnalysesExport(activeQuizId, format, filter);
+
+          case 4:
+            response = _context.sent;
+            dispositionHeader = response.headers.get('Content-Disposition');
+
+            if (dispositionHeader) {
+              _context.next = 8;
+              break;
+            }
+
+            throw new Error('Response contains no Content-Disposition header.');
+
+          case 8:
+            disposition = contentDisposition.parse(dispositionHeader);
+            filename = disposition.parameters.filename;
+
+            if (filename) {
+              _context.next = 12;
+              break;
+            }
+
+            throw new Error('Cannot determine filename to save.');
+
+          case 12:
+            _context.next = 14;
+            return response.blob();
+
+          case 14:
+            blob = _context.sent;
+            saveFile(blob, filename);
+            _context.next = 21;
+            break;
+
+          case 18:
+            _context.prev = 18;
+            _context.t0 = _context["catch"](1);
+            addError(getFailedToExportReports());
+
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 18]]);
+  }));
+
+  return function exportReports(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/es/reporting/components/resources/NewQuizAndItemAnalysis/utils.js

@@ -1,4 +1,5 @@
 import t from '@instructure/quiz-i18n/es/format-message';
+import { saveAs } from 'file-saver';
 
 var formatNumbers = function formatNumbers(value) {
   if (typeof value === 'number') {
@@ -17,4 +18,7 @@ var getSanitizedMetricValue = function getSanitizedMetricValue(value, suffix) {
   return suffix ? formattedValue + suffix : formattedValue;
 };
 
+export var saveFile = function saveFile(file, fileName) {
+  saveAs(file, fileName);
+};
 export { getSanitizedMetricValue };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/withAnalysisState.js

@@ -4,6 +4,7 @@ import { setQuizAnalysis, setItemAnalyses, setFetchInProgress, setGenerationInPr
 import { getQuizAnalysis as fetchQuizAnalysis } from "../../../api/getQuizAnalysis.js";
 import { getItemAnalyses as fetchItemAnalyses } from "../../../api/getItemAnalyses.js";
 import { getAnalysesStatus as fetchAnalysesStatus } from "../../../api/getAnalysesStatus.js";
+import { getAnalysesExport } from "../../../api/getAnalysesExport.js";
 import { connect } from "../../../../common/react-redux.js";
 import { compose } from 'redux';
 import { getActiveQuizId } from "../../../../common/selectors/quizzes.js";
@@ -21,6 +22,7 @@ export function mapStateToProps(state, ownProps) {
     fetchQuizAnalysis: fetchQuizAnalysis,
     fetchItemAnalyses: fetchItemAnalyses,
     fetchAnalysesStatus: fetchAnalysesStatus,
+    getAnalysesExport: getAnalysesExport,
     pollingInterval: ownProps.pollingInterval || DEFAULT_POLLING_INTERVAL
   };
 }