@instructure/quiz-core 17.64.1-rc.5 → 17.64.1-rc.7

package/es/common/reducers/analyses.js

@@ -10,7 +10,7 @@ export var fetchInProgressKey = 'fetchInProgress';
 export var generationInProgressKey = 'generationInProgress';
 export var statusPollingInProgressKey = 'statusPollingInProgress';
 export var errorKey = 'analysisError';
-export var defaultState = fromJS((_fromJS = {}, _defineProperty(_fromJS, quizAnalysisKey, void 0), _defineProperty(_fromJS, itemAnalysesKey, void 0), _defineProperty(_fromJS, fetchInProgressKey, false), _defineProperty(_fromJS, generationInProgressKey, false), _defineProperty(_fromJS, statusPollingInProgressKey, false), _defineProperty(_fromJS, errorKey, void 0), _fromJS));
+export var defaultState = fromJS((_fromJS = {}, _defineProperty(_fromJS, quizAnalysisKey, void 0), _defineProperty(_fromJS, itemAnalysesKey, void 0), _defineProperty(_fromJS, fetchInProgressKey, true), _defineProperty(_fromJS, generationInProgressKey, false), _defineProperty(_fromJS, statusPollingInProgressKey, false), _defineProperty(_fromJS, errorKey, void 0), _fromJS));
 export default (function () {
   var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultState;
   var action = arguments.length > 1 ? arguments[1] : void 0;

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

@@ -57,8 +57,9 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
 }(Component), _class2.propTypes = {
   metricKey: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
   suffix: PropTypes.string
 }, _class2.defaultProps = {
+  value: void 0,
   suffix: ''
 }, _temp)) || _class);

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

@@ -65,11 +65,13 @@ export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class
 }(Component), _class2.propTypes = {
   metricKey: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   popoverDescription: PropTypes.shape({
     title: PropTypes.string,
     subtitle: PropTypes.string,
     body: PropTypes.string,
     screenReaderLabel: PropTypes.string
   }).isRequired
+}, _class2.defaultProps = {
+  value: void 0
 }, _temp)) || _class);

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

@@ -242,5 +242,5 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   NewItemAnalysis.displayName = "NewItemAnalysis";
   return NewItemAnalysis;
 }(Component), _class2.propTypes = {
-  itemAnalysis: itemAnalysisPropType.isRequired
-}, _temp)) || _class);
+  itemAnalysis: itemAnalysisPropType
+}.isRequired, _temp)) || _class);

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

@@ -8,16 +8,17 @@ var _dec, _class, _class2, _temp;
 import { Heading } from '@instructure/ui-heading';
 import React, { Component } from 'react';
 var styles = {
-  componentId: 'fQZVs',
+  componentId: 'ftlaC',
   template: function template(theme) {
-    return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
+    return "\n\n.ftlaC_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.ftlaC_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " auto ").concat(theme.cardBottomMargin || 'inherit', " auto;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.ftlaC_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.ftlaC_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.ftlaC_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.ftlaC_dPzc,.ftlaC_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
   },
-  'heading': 'fQZVs_eDnN',
-  'cardWrapper': 'fQZVs_eKXQ',
-  'container': 'fQZVs_crZr',
-  'expandButtonContainer': 'fQZVs_bTHH',
-  'metricGroup': 'fQZVs_dPzc',
-  'metricsWrapper': 'fQZVs_cpZE'
+  'heading': 'ftlaC_eDnN',
+  'cardWrapper': 'ftlaC_eKXQ',
+  'skeletonCardWrapper': 'ftlaC_dYbQ',
+  'container': 'ftlaC_crZr',
+  'expandButtonContainer': 'ftlaC_bTHH',
+  'metricGroup': 'ftlaC_dPzc',
+  'metricsWrapper': 'ftlaC_cpZE'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -29,6 +30,8 @@ import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
 import AnalysisMetric from "../AnalysisMetric/index.js";
 import { ScoreDistribution } from "../charts/ScoreDistribution/presenter.js";
 import { quizAnalysisPropType } from "../propTypes.js";
+import PropTypes from 'prop-types';
+import { Spinner } from '@instructure/ui-spinner';
 import { cronbachsAlpha, standardDeviation } from "./popoverContent.js";
 export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAnalysis, _Component);
@@ -74,17 +77,12 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       })));
     };
 
-    return _this;
-  }
-
-  _createClass(NewQuizAnalysis, [{
-    key: "render",
-    value: function render() {
-      var quizAnalysis = this.props.quizAnalysis;
+    _this.renderContent = function () {
+      var quizAnalysis = _this.props.quizAnalysis;
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts,
           metadata = quizAnalysis.metadata;
-      var expanded = this.state.expanded;
+      var expanded = _this.state.expanded;
       return /*#__PURE__*/React.createElement(Card, {
         className: styles.cardWrapper
       }, /*#__PURE__*/React.createElement("div", {
@@ -126,19 +124,39 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       })), /*#__PURE__*/React.createElement("div", {
         className: styles.expandButtonContainer
       }, /*#__PURE__*/React.createElement(ExpandButton, {
-        onClick: this.handleToggle,
+        onClick: _this.handleToggle,
         title: expanded ? t('collapse quiz analysis') : t('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && this.renderExpanded(), /*#__PURE__*/React.createElement(ScoreDistribution, {
+      }))), expanded && _this.renderExpanded(), /*#__PURE__*/React.createElement(ScoreDistribution, {
         decileDistribution: scores === null || scores === void 0 ? void 0 : scores.decile_distribution
       }));
+    };
+
+    return _this;
+  }
+
+  _createClass(NewQuizAnalysis, [{
+    key: "render",
+    value: function render() {
+      var fetchInProgress = this.props.fetchInProgress;
+
+      if (fetchInProgress) {
+        return /*#__PURE__*/React.createElement(Card, {
+          className: styles.skeletonCardWrapper
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          renderTitle: t('Loading quiz analysis data')
+        }));
+      } else {
+        return this.renderContent();
+      }
     }
   }]);
 
   NewQuizAnalysis.displayName = "NewQuizAnalysis";
   return NewQuizAnalysis;
 }(Component), _class2.propTypes = {
-  quizAnalysis: quizAnalysisPropType.isRequired
-}, _class2.defaultProps = {
+  quizAnalysis: quizAnalysisPropType,
+  fetchInProgress: PropTypes.bool
+}.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

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

@@ -2,6 +2,8 @@ export default function generator(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
+    cardTopMargin: spacing.small,
+    cardBottomMargin: spacing.medium,
     viewPaddingRight: spacing.large,
     viewPaddingTop: spacing.medium,
     headingPadding: spacing.medium,

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

@@ -6,64 +6,122 @@ import React, { Component } from 'react';
 import { Heading } from '@instructure/ui-heading';
 import NewItemAnalysis from "./NewItemAnalysis/index.js";
 import NewQuizAnalysis from "./NewQuizAnalysis/index.js";
-import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Flex } from '@instructure/ui-flex';
 import { AnalysisUpdateDate } from "./AnalysisUpdateDate/index.js";
 import { itemAnalysisPropType, quizAnalysisPropType } from "./propTypes.js";
 import PropTypes from 'prop-types';
-
-var _ref = /*#__PURE__*/React.createElement(Spinner, null);
-
+import { QuizzesSpinner } from "../../../../common/components/shared/spinner/Spinner.js";
+import { Spinner } from '@instructure/ui-spinner';
+import { Button } from '@instructure/ui-buttons';
+import { Text } from '@instructure/ui-text';
 export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisPresenter, _Component);
 
   var _super = _createSuper(NewQuizAndItemAnalysisPresenter);
 
   function NewQuizAndItemAnalysisPresenter() {
+    var _this;
+
     _classCallCheck(this, NewQuizAndItemAnalysisPresenter);
 
-    return _super.apply(this, arguments);
+    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.renderItemAnalyses = function () {
+      var itemAnalyses = _this.props.itemAnalyses;
+      return /*#__PURE__*/React.createElement("div", null, itemAnalyses.map(function (itemAnalysis) {
+        return /*#__PURE__*/React.createElement(NewItemAnalysis, {
+          key: itemAnalysis.metadata.item_id,
+          itemAnalysis: itemAnalysis
+        });
+      }));
+    };
+
+    _this.renderSpinner = function () {
+      return /*#__PURE__*/React.createElement(Flex, {
+        padding: "medium",
+        justifyItems: "center",
+        alignItems: "center"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: t('Loading item analyses data')
+      }));
+    };
+
+    _this.renderOngoingGenerationButton = function () {
+      return /*#__PURE__*/React.createElement(Button, {
+        color: "primary-inverse",
+        interaction: "disabled",
+        margin: "0 0 x-small 0"
+      }, /*#__PURE__*/React.createElement(QuizzesSpinner, {
+        size: "x-small",
+        color: "brand",
+        minHeight: "0",
+        mainText: t('Generation In Progress'),
+        fontSize: "medium"
+      }));
+    };
+
+    _this.renderStartGenerationButton = function () {
+      return /*#__PURE__*/React.createElement(Button, {
+        color: "primary-inverse",
+        margin: "0 0 x-small 0",
+        onClick: _this.handleGeneration,
+        theme: {
+          lineHeight: '24px'
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "medium"
+      }, t('Generate Report')));
+    };
+
+    _this.renderGenerationButton = function () {
+      return _this.props.generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
+    };
+
+    _this.handleGeneration = function (_event) {
+      var filter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'last_attempt';
+
+      _this.props.generateReports(filter);
+    };
+
+    return _this;
   }
 
   _createClass(NewQuizAndItemAnalysisPresenter, [{
-    key: "renderContent",
-    value: function renderContent() {
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
-          quizAnalysis = _this$props.quizAnalysis,
-          itemAnalyses = _this$props.itemAnalyses;
+          analysisError = _this$props.analysisError,
+          fetchInProgress = _this$props.fetchInProgress,
+          generationInProgress = _this$props.generationInProgress,
+          quizAnalysis = _this$props.quizAnalysis;
+      var shouldShowError = analysisError && !fetchInProgress && !generationInProgress;
       return /*#__PURE__*/React.createElement("div", {
         className: "fs-mask"
       }, /*#__PURE__*/React.createElement(Flex, {
-        justifyItems: "end",
+        alignItems: "end",
         width: "82.5rem",
-        margin: "auto"
-      }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+        margin: "auto",
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible"
+      }, !fetchInProgress && this.renderGenerationButton()), /*#__PURE__*/React.createElement(Flex.Item, null, shouldShowError && /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        weight: "bold",
+        color: "danger"
+      }, analysisError)), /*#__PURE__*/React.createElement(Flex.Item, null, !fetchInProgress && /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp
-      })), /*#__PURE__*/React.createElement(NewQuizAnalysis, {
-        quizAnalysis: quizAnalysis
-      }), /*#__PURE__*/React.createElement(Heading, {
+      }))), /*#__PURE__*/React.createElement(NewQuizAnalysis, {
+        quizAnalysis: quizAnalysis,
+        fetchInProgress: fetchInProgress
+      }), !fetchInProgress && /*#__PURE__*/React.createElement(Heading, {
         level: "h2",
         color: "primary"
-      }, t('Item Analysis')), itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
-        return /*#__PURE__*/React.createElement(NewItemAnalysis, {
-          key: itemAnalysis.metadata.item_id,
-          itemAnalysis: itemAnalysis
-        });
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          quizAnalysis = _this$props2.quizAnalysis,
-          itemAnalyses = _this$props2.itemAnalyses;
-
-      if (quizAnalysis && itemAnalyses) {
-        return this.renderContent();
-      } else {
-        return _ref;
-      }
+      }, t('Item Analysis')), fetchInProgress ? this.renderSpinner() : this.renderItemAnalyses());
     }
   }]);
 
@@ -72,9 +130,14 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
 }(Component);
 NewQuizAndItemAnalysisPresenter.propTypes = {
   quizAnalysis: quizAnalysisPropType,
-  itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType)
+  itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType),
+  fetchInProgress: PropTypes.bool.isRequired,
+  generationInProgress: PropTypes.bool.isRequired,
+  analysisError: PropTypes.string,
+  generateReports: PropTypes.func.isRequired
 };
 NewQuizAndItemAnalysisPresenter.defaultProps = {
+  analysisError: void 0,
   quizAnalysis: void 0,
   itemAnalyses: void 0
 };

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

@@ -103,7 +103,7 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
                 case 0:
                   hasStoredAnalyses = quizAnalysis && itemAnalyses;
 
-                  if (!(!hasStoredAnalyses && !fetchInProgress)) {
+                  if (hasStoredAnalyses) {
                     _context.next = 4;
                     break;
                   }

package/lib/common/reducers/analyses.js

@@ -27,7 +27,7 @@ var statusPollingInProgressKey = 'statusPollingInProgress';
 exports.statusPollingInProgressKey = statusPollingInProgressKey;
 var errorKey = 'analysisError';
 exports.errorKey = errorKey;
-var defaultState = (0, _immutable.fromJS)((_fromJS = {}, (0, _defineProperty2.default)(_fromJS, quizAnalysisKey, void 0), (0, _defineProperty2.default)(_fromJS, itemAnalysesKey, void 0), (0, _defineProperty2.default)(_fromJS, fetchInProgressKey, false), (0, _defineProperty2.default)(_fromJS, generationInProgressKey, false), (0, _defineProperty2.default)(_fromJS, statusPollingInProgressKey, false), (0, _defineProperty2.default)(_fromJS, errorKey, void 0), _fromJS));
+var defaultState = (0, _immutable.fromJS)((_fromJS = {}, (0, _defineProperty2.default)(_fromJS, quizAnalysisKey, void 0), (0, _defineProperty2.default)(_fromJS, itemAnalysesKey, void 0), (0, _defineProperty2.default)(_fromJS, fetchInProgressKey, true), (0, _defineProperty2.default)(_fromJS, generationInProgressKey, false), (0, _defineProperty2.default)(_fromJS, statusPollingInProgressKey, false), (0, _defineProperty2.default)(_fromJS, errorKey, void 0), _fromJS));
 exports.defaultState = defaultState;
 
 var _default = function _default() {

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

@@ -75,9 +75,10 @@ var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
 }(_react.Component), _class2.propTypes = {
   metricKey: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]).isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),
   suffix: _propTypes.default.string
 }, _class2.defaultProps = {
+  value: void 0,
   suffix: ''
 }, _temp)) || _class);
 exports.AnalysisMetric = AnalysisMetric;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/presenter.js

@@ -84,12 +84,14 @@ var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default,
 }(_react.Component), _class2.propTypes = {
   metricKey: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   popoverDescription: _propTypes.default.shape({
     title: _propTypes.default.string,
     subtitle: _propTypes.default.string,
     body: _propTypes.default.string,
     screenReaderLabel: _propTypes.default.string
   }).isRequired
+}, _class2.defaultProps = {
+  value: void 0
 }, _temp)) || _class);
 exports.AnalysisPopoverMetric = AnalysisPopoverMetric;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js

@@ -273,6 +273,6 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   NewItemAnalysis.displayName = "NewItemAnalysis";
   return NewItemAnalysis;
 }(_react.Component), _class2.propTypes = {
-  itemAnalysis: _propTypes.itemAnalysisPropType.isRequired
-}, _temp)) || _class);
+  itemAnalysis: _propTypes.itemAnalysisPropType
+}.isRequired, _temp)) || _class);
 exports.NewItemAnalysis = NewItemAnalysis;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -41,21 +41,26 @@ var _presenter = require("../charts/ScoreDistribution/presenter.js");
 
 var _propTypes = require("../propTypes.js");
 
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _uiSpinner = require("@instructure/ui-spinner");
+
 var _popoverContent = require("./popoverContent.js");
 
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'fQZVs',
+  componentId: 'ftlaC',
   template: function template(theme) {
-    return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
+    return "\n\n.ftlaC_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.ftlaC_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " auto ").concat(theme.cardBottomMargin || 'inherit', " auto;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.ftlaC_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.ftlaC_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.ftlaC_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.ftlaC_dPzc,.ftlaC_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
   },
-  'heading': 'fQZVs_eDnN',
-  'cardWrapper': 'fQZVs_eKXQ',
-  'container': 'fQZVs_crZr',
-  'expandButtonContainer': 'fQZVs_bTHH',
-  'metricGroup': 'fQZVs_dPzc',
-  'metricsWrapper': 'fQZVs_cpZE'
+  'heading': 'ftlaC_eDnN',
+  'cardWrapper': 'ftlaC_eKXQ',
+  'skeletonCardWrapper': 'ftlaC_dYbQ',
+  'container': 'ftlaC_crZr',
+  'expandButtonContainer': 'ftlaC_bTHH',
+  'metricGroup': 'ftlaC_dPzc',
+  'metricsWrapper': 'ftlaC_cpZE'
 };
 var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAnalysis, _Component);
@@ -101,17 +106,12 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       })));
     };
 
-    return _this;
-  }
-
-  (0, _createClass2.default)(NewQuizAnalysis, [{
-    key: "render",
-    value: function render() {
-      var quizAnalysis = this.props.quizAnalysis;
+    _this.renderContent = function () {
+      var quizAnalysis = _this.props.quizAnalysis;
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts,
           metadata = quizAnalysis.metadata;
-      var expanded = this.state.expanded;
+      var expanded = _this.state.expanded;
       return /*#__PURE__*/_react.default.createElement(_index2.default, {
         className: styles.cardWrapper
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -153,19 +153,39 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.expandButtonContainer
       }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        onClick: this.handleToggle,
+        onClick: _this.handleToggle,
         title: expanded ? (0, _formatMessage.default)('collapse quiz analysis') : (0, _formatMessage.default)('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
+      }))), expanded && _this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
         decileDistribution: scores === null || scores === void 0 ? void 0 : scores.decile_distribution
       }));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NewQuizAnalysis, [{
+    key: "render",
+    value: function render() {
+      var fetchInProgress = this.props.fetchInProgress;
+
+      if (fetchInProgress) {
+        return /*#__PURE__*/_react.default.createElement(_index2.default, {
+          className: styles.skeletonCardWrapper
+        }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+          renderTitle: (0, _formatMessage.default)('Loading quiz analysis data')
+        }));
+      } else {
+        return this.renderContent();
+      }
     }
   }]);
   NewQuizAnalysis.displayName = "NewQuizAnalysis";
   return NewQuizAnalysis;
 }(_react.Component), _class2.propTypes = {
-  quizAnalysis: _propTypes.quizAnalysisPropType.isRequired
-}, _class2.defaultProps = {
+  quizAnalysis: _propTypes.quizAnalysisPropType,
+  fetchInProgress: _propTypes2.default.bool
+}.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);
 exports.NewQuizAnalysis = NewQuizAnalysis;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js

@@ -9,6 +9,8 @@ function generator(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
+    cardTopMargin: spacing.small,
+    cardBottomMargin: spacing.medium,
     viewPaddingRight: spacing.large,
     viewPaddingTop: spacing.medium,
     headingPadding: spacing.medium,

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/presenter.js

@@ -25,8 +25,6 @@ var _index = _interopRequireDefault(require("./NewItemAnalysis/index.js"));
 
 var _index2 = _interopRequireDefault(require("./NewQuizAnalysis/index.js"));
 
-var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
-
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _uiFlex = require("@instructure/ui-flex");
@@ -37,7 +35,13 @@ var _propTypes = require("./propTypes.js");
 
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
-var _ref = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+var _Spinner = require("../../../../common/components/shared/spinner/Spinner.js");
+
+var _uiSpinner = require("@instructure/ui-spinner");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
 
 var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAndItemAnalysisPresenter, _Component);
@@ -45,48 +49,107 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   var _super = (0, _createSuper2.default)(NewQuizAndItemAnalysisPresenter);
 
   function NewQuizAndItemAnalysisPresenter() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, NewQuizAndItemAnalysisPresenter);
-    return _super.apply(this, arguments);
+
+    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.renderItemAnalyses = function () {
+      var itemAnalyses = _this.props.itemAnalyses;
+      return /*#__PURE__*/_react.default.createElement("div", null, itemAnalyses.map(function (itemAnalysis) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          key: itemAnalysis.metadata.item_id,
+          itemAnalysis: itemAnalysis
+        });
+      }));
+    };
+
+    _this.renderSpinner = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        padding: "medium",
+        justifyItems: "center",
+        alignItems: "center"
+      }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        renderTitle: (0, _formatMessage.default)('Loading item analyses data')
+      }));
+    };
+
+    _this.renderOngoingGenerationButton = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        color: "primary-inverse",
+        interaction: "disabled",
+        margin: "0 0 x-small 0"
+      }, /*#__PURE__*/_react.default.createElement(_Spinner.QuizzesSpinner, {
+        size: "x-small",
+        color: "brand",
+        minHeight: "0",
+        mainText: (0, _formatMessage.default)('Generation In Progress'),
+        fontSize: "medium"
+      }));
+    };
+
+    _this.renderStartGenerationButton = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        color: "primary-inverse",
+        margin: "0 0 x-small 0",
+        onClick: _this.handleGeneration,
+        theme: {
+          lineHeight: '24px'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "medium"
+      }, (0, _formatMessage.default)('Generate Report')));
+    };
+
+    _this.renderGenerationButton = function () {
+      return _this.props.generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
+    };
+
+    _this.handleGeneration = function (_event) {
+      var filter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'last_attempt';
+
+      _this.props.generateReports(filter);
+    };
+
+    return _this;
   }
 
   (0, _createClass2.default)(NewQuizAndItemAnalysisPresenter, [{
-    key: "renderContent",
-    value: function renderContent() {
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
-          quizAnalysis = _this$props.quizAnalysis,
-          itemAnalyses = _this$props.itemAnalyses;
+          analysisError = _this$props.analysisError,
+          fetchInProgress = _this$props.fetchInProgress,
+          generationInProgress = _this$props.generationInProgress,
+          quizAnalysis = _this$props.quizAnalysis;
+      var shouldShowError = analysisError && !fetchInProgress && !generationInProgress;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "fs-mask"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        justifyItems: "end",
+        alignItems: "end",
         width: "82.5rem",
-        margin: "auto"
-      }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
+        margin: "auto",
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        overflowY: "visible"
+      }, !fetchInProgress && this.renderGenerationButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, shouldShowError && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small",
+        weight: "bold",
+        color: "danger"
+      }, analysisError)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, !fetchInProgress && /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp
-      })), /*#__PURE__*/_react.default.createElement(_index2.default, {
-        quizAnalysis: quizAnalysis
-      }), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        quizAnalysis: quizAnalysis,
+        fetchInProgress: fetchInProgress
+      }), !fetchInProgress && /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         level: "h2",
         color: "primary"
-      }, (0, _formatMessage.default)('Item Analysis')), itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
-          key: itemAnalysis.metadata.item_id,
-          itemAnalysis: itemAnalysis
-        });
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          quizAnalysis = _this$props2.quizAnalysis,
-          itemAnalyses = _this$props2.itemAnalyses;
-
-      if (quizAnalysis && itemAnalyses) {
-        return this.renderContent();
-      } else {
-        return _ref;
-      }
+      }, (0, _formatMessage.default)('Item Analysis')), fetchInProgress ? this.renderSpinner() : this.renderItemAnalyses());
     }
   }]);
   NewQuizAndItemAnalysisPresenter.displayName = "NewQuizAndItemAnalysisPresenter";
@@ -96,9 +159,14 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
 exports.NewQuizAndItemAnalysisPresenter = NewQuizAndItemAnalysisPresenter;
 NewQuizAndItemAnalysisPresenter.propTypes = {
   quizAnalysis: _propTypes.quizAnalysisPropType,
-  itemAnalyses: _propTypes2.default.arrayOf(_propTypes.itemAnalysisPropType)
+  itemAnalyses: _propTypes2.default.arrayOf(_propTypes.itemAnalysisPropType),
+  fetchInProgress: _propTypes2.default.bool.isRequired,
+  generationInProgress: _propTypes2.default.bool.isRequired,
+  analysisError: _propTypes2.default.string,
+  generateReports: _propTypes2.default.func.isRequired
 };
 NewQuizAndItemAnalysisPresenter.defaultProps = {
+  analysisError: void 0,
   quizAnalysis: void 0,
   itemAnalyses: void 0
 };

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/withAnalysisStatePresenter.js

@@ -122,7 +122,7 @@ var withAnalysisStatePresenter = function withAnalysisStatePresenter(OriginalCom
                 case 0:
                   hasStoredAnalyses = quizAnalysis && itemAnalyses;
 
-                  if (!(!hasStoredAnalyses && !fetchInProgress)) {
+                  if (hasStoredAnalyses) {
                     _context.next = 4;
                     break;
                   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.64.1-rc.5+7ab6e1fd3",
+  "version": "17.64.1-rc.7+7baf9c9a8",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -42,11 +42,11 @@
   "dependencies": {
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "17.64.1-rc.5+7ab6e1fd3",
-    "@instructure/quiz-i18n": "17.64.1-rc.5+7ab6e1fd3",
-    "@instructure/quiz-interactions": "17.64.1-rc.5+7ab6e1fd3",
-    "@instructure/quiz-number-input": "17.64.1-rc.5+7ab6e1fd3",
-    "@instructure/quiz-rce": "17.64.1-rc.5+7ab6e1fd3",
+    "@instructure/quiz-common": "17.64.1-rc.7+7baf9c9a8",
+    "@instructure/quiz-i18n": "17.64.1-rc.7+7baf9c9a8",
+    "@instructure/quiz-interactions": "17.64.1-rc.7+7baf9c9a8",
+    "@instructure/quiz-number-input": "17.64.1-rc.7+7baf9c9a8",
+    "@instructure/quiz-rce": "17.64.1-rc.7+7baf9c9a8",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -107,7 +107,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.64.1-rc.5+7ab6e1fd3",
+    "instructure-validations": "17.64.1-rc.7+7baf9c9a8",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -158,7 +158,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.64.1-rc.5+7ab6e1fd3",
+    "quiz-presets": "17.64.1-rc.7+7baf9c9a8",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -174,5 +174,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ab6e1fd33c7aca23bea334c6a88cedaa883f812"
+  "gitHead": "7baf9c9a8a22dd8a278be8e588c085fc8e04b117"
 }