@instructure/quiz-core 18.3.1-rc.18 → 18.3.1-rc.20

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

@@ -15,6 +15,18 @@ import { QuizzesSpinner } from "../../../../common/components/shared/spinner/Spi
 import { Spinner } from '@instructure/ui-spinner';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
+import { getFailedToFetchReports } from "./errorMessages.js";
+import { Img } from '@instructure/ui-img';
+import errorImage from './downForRepair.svg';
+import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+
+var _ref = /*#__PURE__*/React.createElement(Flex.Item, {
+  align: "center"
+}, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Img, {
+  src: errorImage,
+  alt: ""
+})));
+
 export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisPresenter, _Component);
 
@@ -32,13 +44,16 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
     _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) {
+      var itemAnalyses = _this.props.itemAnalyses || [];
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+        level: "h2",
+        color: "primary"
+      }, t('Item Analysis')), /*#__PURE__*/React.createElement("div", null, itemAnalyses.map(function (itemAnalysis) {
         return /*#__PURE__*/React.createElement(NewItemAnalysis, {
           key: itemAnalysis.metadata.item_id,
           itemAnalysis: itemAnalysis
         });
-      }));
+      })));
     };
 
     _this.renderSpinner = function () {
@@ -51,6 +66,58 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
       }));
     };
 
+    _this.renderErrorBody = function () {
+      return /*#__PURE__*/React.createElement(Flex, {
+        alignItems: "end",
+        width: "82.5rem",
+        margin: "auto",
+        direction: "column"
+      }, _ref, /*#__PURE__*/React.createElement(Flex.Item, {
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-large",
+        color: "primary"
+      }, t('Error'))), /*#__PURE__*/React.createElement(Flex.Item, {
+        align: "center"
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, getFailedToFetchReports()), /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        color: "primary"
+      }, getFailedToFetchReports())));
+    };
+
+    _this.renderTop = function () {
+      var _this$props = _this.props,
+          analysisError = _this$props.analysisError,
+          generationInProgress = _this$props.generationInProgress,
+          quizAnalysis = _this$props.quizAnalysis;
+      var shouldShowError = analysisError && !generationInProgress;
+      return /*#__PURE__*/React.createElement(Flex, {
+        alignItems: "end",
+        width: "82.5rem",
+        margin: "auto",
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible"
+      }, _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, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+        date: quizAnalysis === null || quizAnalysis === void 0 ? void 0 : quizAnalysis.created_timestamp
+      })));
+    };
+
+    _this.renderTopOnFailedFetch = function () {
+      return /*#__PURE__*/React.createElement(Flex, {
+        alignItems: "end",
+        width: "82.5rem",
+        margin: "auto",
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible"
+      }, _this.renderGenerationButton()));
+    };
+
     _this.renderOngoingGenerationButton = function () {
       return /*#__PURE__*/React.createElement(Button, {
         color: "primary-inverse",
@@ -79,7 +146,23 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
     };
 
     _this.renderGenerationButton = function () {
-      return _this.props.generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
+      var generationInProgress = _this.props.generationInProgress;
+      var buttonVariant = generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
+      return /*#__PURE__*/React.createElement(Flex.Item, {
+        align: "end",
+        padding: "xx-small"
+      }, buttonVariant);
+    };
+
+    _this.renderBody = function () {
+      var _this$props2 = _this.props,
+          fetchInProgress = _this$props2.fetchInProgress,
+          quizAnalysis = _this$props2.quizAnalysis; // TODO need to refactor the NewQuizAnalysis to move out spinner logic
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (fetchInProgress || quizAnalysis) && /*#__PURE__*/React.createElement(NewQuizAnalysis, {
+        quizAnalysis: quizAnalysis,
+        fetchInProgress: fetchInProgress
+      }), fetchInProgress ? _this.renderSpinner() : _this.renderItemAnalyses());
     };
 
     _this.handleGeneration = function (_event) {
@@ -94,34 +177,12 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
   _createClass(NewQuizAndItemAnalysisPresenter, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          analysisError = _this$props.analysisError,
-          fetchInProgress = _this$props.fetchInProgress,
-          generationInProgress = _this$props.generationInProgress,
-          quizAnalysis = _this$props.quizAnalysis;
-      var shouldShowError = analysisError && !fetchInProgress && !generationInProgress;
+      var _this$props3 = this.props,
+          analysisFetchError = _this$props3.analysisFetchError,
+          fetchInProgress = _this$props3.fetchInProgress;
       return /*#__PURE__*/React.createElement("div", {
         className: "fs-mask"
-      }, /*#__PURE__*/React.createElement(Flex, {
-        alignItems: "end",
-        width: "82.5rem",
-        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,
-        fetchInProgress: fetchInProgress
-      }), !fetchInProgress && /*#__PURE__*/React.createElement(Heading, {
-        level: "h2",
-        color: "primary"
-      }, t('Item Analysis')), fetchInProgress ? this.renderSpinner() : this.renderItemAnalyses());
+      }, !fetchInProgress && (analysisFetchError ? this.renderTopOnFailedFetch() : this.renderTop()), analysisFetchError ? this.renderErrorBody() : this.renderBody());
     }
   }]);
 
@@ -133,6 +194,7 @@ NewQuizAndItemAnalysisPresenter.propTypes = {
   itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType),
   fetchInProgress: PropTypes.bool.isRequired,
   generationInProgress: PropTypes.bool.isRequired,
+  analysisFetchError: PropTypes.bool.isRequired,
   analysisError: PropTypes.string,
   generateReports: PropTypes.func.isRequired
 };

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

@@ -43,15 +43,17 @@ export var itemAnalysisPropType = PropTypes.shape({
   }),
   answer_summary: answerSummaryPropType
 });
-export var answerSummaryPropType = PropTypes.shape({
+var noAnswerPropType = PropTypes.shape({
+  count: PropTypes.number,
+  percentage: PropTypes.number
+});
+export var choiceTypeAnswerSummaryPropType = PropTypes.shape({
   choices: PropTypes.arrayOf(PropTypes.shape({
     body: PropTypes.string,
     correct: PropTypes.bool,
     count: PropTypes.number,
     percentage: PropTypes.number
   })),
-  no_answer: PropTypes.shape({
-    count: PropTypes.number,
-    percentage: PropTypes.number
-  })
-});
+  no_answer: noAnswerPropType
+});
+export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType]);

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

@@ -1,7 +1,8 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { itemAnalysisPropType, quizAnalysisPropType } from "./propTypes.js";
 import { fetchReports } from "./fetchReports.js";
@@ -33,6 +34,11 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
 
     WithAnalysisStatePresenter.displayName = "WithAnalysisStatePresenter(".concat(OriginalComponent.displayName || OriginalComponent.name, ")");
 
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        analysisFetchError = _useState2[0],
+        setAnalysisFetchError = _useState2[1];
+
     var instrumentedFetchReports = function instrumentedFetchReports() {
       return fetchReports({
         activeQuizId: activeQuizId,
@@ -45,7 +51,8 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
         setGenerationInProgress: setGenerationInProgress,
         setFetchInProgress: setFetchInProgress,
         setQuizAnalysis: setQuizAnalysis,
-        getErrorMessageForCode: getErrorMessageForCode
+        getErrorMessageForCode: getErrorMessageForCode,
+        setAnalysisFetchError: setAnalysisFetchError
       });
     };
 
@@ -164,7 +171,8 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
       fetchInProgress: fetchInProgress,
       generationInProgress: generationInProgress,
       analysisError: analysisError,
-      generateReports: generateReports
+      generateReports: generateReports,
+      analysisFetchError: analysisFetchError
     }, passThroughProps));
   };
 

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/ChoiceTypeTableRow/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _presenter.ChoiceTypeTableRow;
+  }
+});
+
+var _presenter = require("./presenter.js");

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/{AnswerSummaryTable/AnswerSummaryTableRow → AnswerFrequencySummary/ChoiceType/ChoiceTypeTableRow}/presenter.js

@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnswerSummaryTableRow = void 0;
+exports.ChoiceTypeTableRow = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -54,15 +54,15 @@ var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, nu
 
 var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, null);
 
-var AnswerSummaryTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(AnswerSummaryTableRow, _Component);
+var ChoiceTypeTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ChoiceTypeTableRow, _Component);
 
-  var _super = (0, _createSuper2.default)(AnswerSummaryTableRow);
+  var _super = (0, _createSuper2.default)(ChoiceTypeTableRow);
 
-  function AnswerSummaryTableRow() {
+  function ChoiceTypeTableRow() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, AnswerSummaryTableRow);
+    (0, _classCallCheck2.default)(this, ChoiceTypeTableRow);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -136,7 +136,7 @@ var AnswerSummaryTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default,
     return _this;
   }
 
-  return AnswerSummaryTableRow;
+  return ChoiceTypeTableRow;
 }(_react.Component), _class2.displayName = 'Row', _class2.propTypes = {
   choice: _propTypes.default.shape({
     body: _propTypes.default.string,
@@ -146,4 +146,4 @@ var AnswerSummaryTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default,
   }),
   choiceIndex: _propTypes.default.number
 }.isRequired, _temp)) || _class);
-exports.AnswerSummaryTableRow = AnswerSummaryTableRow;
+exports.ChoiceTypeTableRow = ChoiceTypeTableRow;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _presenter.ChoiceType;
+  }
+});
+
+var _presenter = require("./presenter.js");

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/{AnswerSummaryTable/ChoiceInfo → AnswerFrequencySummary/ChoiceType}/presenter.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChoiceInfo = void 0;
+exports.ChoiceType = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,21 +23,40 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _uiTable = require("@instructure/ui-table");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiHeading = require("@instructure/ui-heading");
 
-var _index = _interopRequireDefault(require("../AnswerSummaryTableRow/index.js"));
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var ChoiceInfo = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ChoiceInfo, _Component);
+var _index = _interopRequireDefault(require("./ChoiceTypeTableRow/index.js"));
+
+var _propTypes2 = require("../../propTypes.js");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
 
-  var _super = (0, _createSuper2.default)(ChoiceInfo);
+var _dec, _class, _class2, _temp;
 
-  function ChoiceInfo() {
+var styles = {
+  componentId: 'ZuPLN',
+  template: function template(theme) {
+    return "\n\n.ZuPLN_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}");
+  },
+  'tableWrapper': 'ZuPLN_rMrG'
+};
+var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ChoiceType, _Component);
+
+  var _super = (0, _createSuper2.default)(ChoiceType);
+
+  function ChoiceType() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, ChoiceInfo);
+    (0, _classCallCheck2.default)(this, ChoiceType);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -70,19 +89,32 @@ var ChoiceInfo = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(ChoiceInfo, [{
+  (0, _createClass2.default)(ChoiceType, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          choices = _this$props.choices,
-          noAnswer = _this$props.noAnswer,
+          answerSummary = _this$props.answerSummary,
           itemId = _this$props.itemId;
+      var choices = answerSummary.choices,
+          noAnswer = answerSummary.no_answer;
       var numberOfChoices = choices.length;
       var spacingHeaderId = "answer-frequency-summary-spacing-".concat(itemId);
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldGrow: true
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.tableWrapper
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        margin: "large 0 small 0",
+        level: "h4",
+        theme: {
+          h4FontWeight: 'normal'
+        }
+      }, (0, _formatMessage.default)('Answer Frequency Summary')), /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: spacingHeaderId,
@@ -97,24 +129,13 @@ var ChoiceInfo = /*#__PURE__*/function (_Component) {
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices))));
+      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))))));
     }
   }]);
-  ChoiceInfo.displayName = "ChoiceInfo";
-  return ChoiceInfo;
-}(_react.Component);
-
-exports.ChoiceInfo = ChoiceInfo;
-ChoiceInfo.propTypes = {
+  ChoiceType.displayName = "ChoiceType";
+  return ChoiceType;
+}(_react.Component), _class2.propTypes = {
   itemId: _propTypes.default.number,
-  choices: _propTypes.default.arrayOf(_propTypes.default.shape({
-    body: _propTypes.default.string,
-    correct: _propTypes.default.bool,
-    count: _propTypes.default.number,
-    percentage: _propTypes.default.number
-  })),
-  noAnswer: _propTypes.default.shape({
-    count: _propTypes.default.number,
-    percentage: _propTypes.default.number
-  })
-}.isRequired;
+  answerSummary: _propTypes2.choiceTypeAnswerSummaryPropType
+}.isRequired, _temp)) || _class);
+exports.ChoiceType = ChoiceType;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _presenter.AnswerFrequencySummary;
+  }
+});
+
+var _presenter = require("./presenter.js");

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnswerFrequencySummary = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _quizInteractions = require("@instructure/quiz-interactions");
+
+var _presenter = require("./ChoiceType/presenter.js");
+
+var _propTypes = require("../propTypes.js");
+
+var afsTableComponentMap = new Map();
+afsTableComponentMap.set('true-false', _presenter.ChoiceType);
+afsTableComponentMap.set('choice', _presenter.ChoiceType);
+afsTableComponentMap.set('multi-answer', _presenter.ChoiceType);
+
+var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AnswerFrequencySummary, _Component);
+
+  var _super = (0, _createSuper2.default)(AnswerFrequencySummary);
+
+  function AnswerFrequencySummary() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AnswerFrequencySummary);
+
+    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.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary,
+          interactionType = _this$props.interactionType;
+      var AfsTableComponent = afsTableComponentMap.get(interactionType);
+
+      if (!AfsTableComponent) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(AfsTableComponent, {
+        itemId: itemId,
+        answerSummary: answerSummary
+      });
+    };
+
+    return _this;
+  }
+
+  return AnswerFrequencySummary;
+}(_react.Component);
+
+exports.AnswerFrequencySummary = AnswerFrequencySummary;
+AnswerFrequencySummary.propTypes = {
+  itemId: _quizInteractions.PropTypes.number,
+  answerSummary: _propTypes.answerSummaryPropType,
+  interactionType: _quizInteractions.PropTypes.string
+}.isRequired;

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

@@ -13,6 +13,7 @@ var _presenter = require("./presenter.js");
 
 function mapStateToProps(_state) {
   return {
+    // This would be able to switch of all AFS Tables
     showFrequencyTable: (0, _featureCheck.featureOn)('show_improved_item_analysis_frequency_table')
   };
 }

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

@@ -47,7 +47,7 @@ var _classnames3 = _interopRequireDefault(require("classnames"));
 
 var _interactionTypeMetadata = require("../../../../../common/util/interactionTypeMetadata.js");
 
-var _index5 = _interopRequireDefault(require("../AnswerSummaryTable/index.js"));
+var _index5 = _interopRequireDefault(require("../AnswerFrequencySummary/index.js"));
 
 var _propTypes = require("../propTypes.js");
 
@@ -62,22 +62,21 @@ var _quizInteractions = require("@instructure/quiz-interactions");
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'bQIMq',
+  componentId: 'ewlJT',
   template: function template(theme) {
-    return "\n\n.bQIMq_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.bQIMq_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.bQIMq_bwlc,.bQIMq_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.bQIMq_bqdH{row-gap:24px}\n\n.bQIMq_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.bQIMq_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bQIMq_fFDJ{display:none}\n\n.bQIMq_fxkJ{margin-top:-8px}\n\n.bQIMq_esVF{min-height:48px}\n\n.bQIMq_eTZq{position:relative}\n\n.bQIMq_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.bQIMq_fkgx{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.ewlJT_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.ewlJT_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.ewlJT_bwlc,.ewlJT_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.ewlJT_bqdH{row-gap:24px}\n\n.ewlJT_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.ewlJT_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.ewlJT_fFDJ{display:none}\n\n.ewlJT_fxkJ{margin-top:-8px}\n\n.ewlJT_esVF{min-height:48px}\n\n.ewlJT_eTZq{position:relative}\n\n.ewlJT_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.ewlJT_cVld{max-width:100%;width:calc(25% + 350px)}");
   },
-  'cardWrapper': 'bQIMq_eKXQ',
-  'itemCardInnerContainer': 'bQIMq_bwlc',
-  'metricsContainer': 'bQIMq_bqdH',
-  'itemCardToggleButtonWrapper': 'bQIMq_NpIG',
-  'metricNumberContext': 'bQIMq_eoBe',
-  'hiddenMetrics': 'bQIMq_fFDJ',
-  'itemBodyToggleButtonWrapper': 'bQIMq_fxkJ',
-  'itemBody': 'bQIMq_esVF',
-  'hiddenItemBody': 'bQIMq_eTZq',
-  'answerSummaryTableContainer': 'bQIMq_fkgx'
+  'cardWrapper': 'ewlJT_eKXQ',
+  'itemCardInnerContainer': 'ewlJT_bwlc',
+  'metricsContainer': 'ewlJT_bqdH',
+  'itemCardToggleButtonWrapper': 'ewlJT_NpIG',
+  'metricNumberContext': 'ewlJT_eoBe',
+  'hiddenMetrics': 'ewlJT_fFDJ',
+  'itemBodyToggleButtonWrapper': 'ewlJT_fxkJ',
+  'itemBody': 'ewlJT_esVF',
+  'hiddenItemBody': 'ewlJT_eTZq',
+  'answerFrequencySummaryContainer': 'ewlJT_cVld'
 };
-var supportedTables = ['choice', 'true-false', 'multi-answer'];
 var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewItemAnalysis, _Component);
 
@@ -229,19 +228,16 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }))))));
     };
 
-    _this.renderAnswerSummaryTable = function (itemId, answer_summary, isSupportedTable, metricsClass) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType) {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement("div", {
         className: metricsClass
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.answerSummaryTableContainer
-      }, isSupportedTable && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        shouldGrow: true
+        className: styles.answerFrequencySummaryContainer
       }, /*#__PURE__*/_react.default.createElement(_index5.default, {
         itemId: itemId,
-        answerSummary: answer_summary
-      })))));
+        answerSummary: answer_summary,
+        interactionType: interactionType
+      }))));
     };
 
     return _this;
@@ -291,7 +287,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           metadata = itemAnalysis.metadata,
           scores = itemAnalysis.scores;
       var itemId = metadata.item_id;
-      var isSupportedTable = supportedTables.includes(metadata.interaction_type);
+      var interactionType = metadata.interaction_type;
       var metricsClass = (0, _classnames3.default)((0, _defineProperty2.default)({}, styles.hiddenMetrics, !this.state.metricsExpanded));
       var itemBodyClass = (0, _classnames3.default)(styles.itemBody, (0, _defineProperty2.default)({}, styles.hiddenItemBody, this.isBodyHigherThanContainer() && !this.state.bodyExpanded));
       var title = (_metadata$item_title = metadata.item_title) !== null && _metadata$item_title !== void 0 ? _metadata$item_title : (0, _formatMessage.default)('Untitled item');
@@ -315,7 +311,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderAnswerSummaryTable(itemId, answer_summary, isSupportedTable, metricsClass))));
+      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType)));
     }
   }]);
   NewItemAnalysis.displayName = "NewItemAnalysis";