@instructure/outcomes-ui 2.1.4 → 2.1.6

package/lib/translated/mi/components/FlashAlert/index.test.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _chai = require("chai");
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireWildcard(require("../FlashAlert/index.js"));
+
+describe('FlashAlert', function () {
+  var renderSpy;
+  var clock;
+  beforeEach(function () {
+    renderSpy = _sinon.default.spy(_reactDom.default, 'render');
+    clock = _sinon.default.useFakeTimers();
+  });
+  afterEach(function () {
+    renderSpy.restore();
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return (0, _objectSpread2.default)({
+      message: 'This is a test error message 123',
+      timeout: _index.defaultTimeout,
+      error: new Error('This is a test error 321'),
+      variant: 'error',
+      onClose: _sinon.default.spy(),
+      screenReaderOnly: false
+    }, props);
+  };
+
+  it('renders', function () {
+    var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(screen.text()).to.match(/This is a test error message 123/);
+    (0, _chai.expect)(screen.text()).to.match(/This is a test error 321/);
+  });
+  it('renders, but does not show loading chunk text', function () {
+    var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      error: new Error('loading chunk 123')
+    })));
+    (0, _chai.expect)(screen.text()).to.match(/This is a test error message 123/);
+    (0, _chai.expect)(screen.text()).not.to.match(/loading chunk 123/);
+  });
+  it('renders Transition component', function () {
+    var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    var transition = screen.find('Transition').first();
+    (0, _chai.expect)(transition).to.exist;
+    (0, _chai.expect)(transition.prop('transitionOnMount')).to.be.true;
+    (0, _chai.expect)(transition.prop('in')).to.be.true;
+    (0, _chai.expect)(transition.prop('type')).to.eq('fade');
+    clock.tick(_index.defaultTimeout);
+    screen.update();
+    var transition2 = screen.find('Transition').at(1);
+    (0, _chai.expect)(transition2.prop('in')).to.be.false;
+  });
+  it('renders Alert component', function () {
+    var props = makeProps({});
+    var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var alert = screen.find('Alert');
+    (0, _chai.expect)(alert).to.exist;
+    (0, _chai.expect)(alert.prop('variant')).to.eq(props.variant);
+    (0, _chai.expect)(alert.prop('renderCloseButtonLabel')).to.eq('Close');
+    (0, _chai.expect)(alert.prop('onDismiss')).to.not.be.undefined;
+    (0, _chai.expect)(alert.prop('margin')).to.eq('small auto');
+    (0, _chai.expect)(alert.prop('timeout')).to.eq(props.timeout);
+    (0, _chai.expect)(alert.prop('liveRegion')).to.not.be.undefined;
+    (0, _chai.expect)(alert.prop('transition')).to.eq('fade');
+    (0, _chai.expect)(alert.prop('screenReaderOnly')).to.eq(props.screenReaderOnly);
+  });
+  describe('showFlashAlert', function () {
+    it('calls render', function () {
+      var props = makeProps({});
+      (0, _index.showFlashAlert)((0, _objectSpread2.default)({}, props));
+      (0, _chai.expect)(renderSpy).to.have.been.called;
+    });
+  });
+  describe('showFlashError', function () {
+    it('calls render', function () {
+      var showAlert = (0, _index.showFlashError)();
+      showAlert();
+      (0, _chai.expect)(renderSpy).to.have.been.called;
+    });
+  });
+  describe('showFlashSuccess', function () {
+    it('calls render', function () {
+      var showAlert = (0, _index.showFlashSuccess)();
+      showAlert();
+      (0, _chai.expect)(renderSpy).to.have.been.called;
+    });
+  });
+});

package/lib/translated/mi/components/OutcomesPerStudent/ExportCSVButton/__tests__/index.test.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireWildcard(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+var _constants = require("../../../../constants.js");
+
+describe('OutcomesPerStudent/ExportCSVButton', function () {
+  var clock;
+  beforeEach(function () {
+    clock = _sinon.default.useFakeTimers();
+  });
+  afterEach(function () {
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return (0, _objectSpread2.default)({
+      fetchCSVData: _sinon.default.spy(),
+      formatCSVData: _sinon.default.spy(),
+      fetchingStatus: _constants.NOT_FETCHING,
+      artifactId: 1
+    }, props);
+  };
+
+  it('renders the export CSV button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.text()).to.match(/Export CSV/);
+  });
+  it('export CSV button is enabled by default', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex Button').prop('interaction')).to.equal('enabled');
+  });
+  it('export CSV button color is primary', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex Button').prop('color')).to.equal('primary');
+  });
+  it('export CSV button has onClick', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex Button').prop('onClick')).to.be.not.undefined;
+  });
+  it('click export CSV calls fetchCSVData', function () {
+    var props = makeProps({});
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    (0, _chai.expect)(props.fetchCSVData).to.have.been.called;
+  });
+  it('starting export changes the export CSV button to cancel export', function () {
+    var props = makeProps({});
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    (0, _chai.expect)(wrapper.text()).not.to.match(/Export CSV/);
+    (0, _chai.expect)(wrapper.text()).to.match(/Cancel Export/);
+    (0, _chai.expect)(wrapper.find('Flex Button').prop('interaction')).to.equal('enabled');
+    (0, _chai.expect)(wrapper.find('Flex Button').prop('color')).to.equal('secondary');
+  });
+  it('starting export displays the ProgressBar', function () {
+    var props = makeProps({});
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    (0, _chai.expect)(wrapper.text()).to.match(/Exporting/);
+    (0, _chai.expect)(wrapper.find('ProgressBar')).to.exist;
+  });
+  it('correct headers are passed into CSVLink', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex span CSVLink').prop('headers')).to.equal(_index.headers);
+  });
+  it('CSVLink is initially passed in no row data', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex span CSVLink').prop('data')).to.be.empty;
+  });
+  it('CSVLink is not keyboard accessible', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex span CSVLink').prop('tabIndex')).to.equal(-1);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+  });
+});

package/lib/translated/mi/components/OutcomesPerStudent/ExportCSVButton/index.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.headers = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _reactCsv = require("react-csv");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiProgress = require("@instructure/ui-progress");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiMotion = require("@instructure/ui-motion");
+
+var _useBoolean3 = _interopRequireDefault(require("../../../hooks/useBoolean.js"));
+
+var _useCSVExport2 = _interopRequireWildcard(require("../../../hooks/useCSVExport.js"));
+
+var _constants = require("../../../constants.js");
+
+var _outcomesReportUtils = require("../../../util/outcomesReportUtils.js");
+
+var headers = [{
+  label: "Student Name",
+  key: _constants.STUDENT_NAME
+}, {
+  label: "Student UUID",
+  key: _constants.STUDENT_UUID
+}, {
+  label: "Number of Attempts",
+  key: _constants.ATTEMPT_COUNT
+}, {
+  label: "Number of Aligned Questions",
+  key: _constants.ALIGNED_QUESTIONS_COUNT
+}, {
+  label: "Learning Outcome Result Points",
+  key: _constants.LOR_POINTS
+}, {
+  label: "Learning Outcome Result Points Possible",
+  key: _constants.LOR_POINTS_POSSIBLE
+}, {
+  label: "Learning Outcome Name",
+  key: _constants.LO_NAME
+}, {
+  label: "Learning Outcome ID",
+  key: _constants.LO_ID
+}, {
+  label: "Learning Outcome Mastery Percent",
+  key: _constants.LO_MASTERY_PERCENT
+}, {
+  label: "Learning Outcome Mastered",
+  key: _constants.LO_MASTERED
+}];
+exports.headers = headers;
+
+var ExportCSVButton = function ExportCSVButton(_ref) {
+  var fetchCSVData = _ref.fetchCSVData,
+      formatCSVData = _ref.formatCSVData,
+      fetchingStatus = _ref.fetchingStatus,
+      artifactId = _ref.artifactId;
+  var csvElementRef = (0, _react.useRef)(null);
+
+  var exportCSV = function exportCSV() {
+    var _csvElementRef$curren;
+
+    return (_csvElementRef$curren = csvElementRef.current) === null || _csvElementRef$curren === void 0 ? void 0 : _csvElementRef$curren.click();
+  };
+
+  var _useBoolean = (0, _useBoolean3.default)(false),
+      _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 3),
+      isShowingProgressBar = _useBoolean2[0],
+      showProgressBar = _useBoolean2[1],
+      hideProgressBar = _useBoolean2[2];
+
+  var _useCSVExport = (0, _useCSVExport2.default)({
+    fetchCSVData: fetchCSVData,
+    fetchingStatus: fetchingStatus,
+    formatCSVData: formatCSVData,
+    showProgressBar: showProgressBar,
+    hideProgressBar: hideProgressBar
+  }),
+      beginExport = _useCSVExport.beginExport,
+      cancelExport = _useCSVExport.cancelExport,
+      exportState = _useCSVExport.exportState,
+      progressValue = _useCSVExport.progressValue,
+      formattedData = _useCSVExport.formattedData;
+
+  var canStartExport = exportState === _useCSVExport2.NOT_EXPORTING;
+  (0, _react.useEffect)(function () {
+    if (exportState === _useCSVExport2.CSV_COMPLETE) {
+      exportCSV();
+    }
+  }, [exportState]);
+  return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    as: "div",
+    width: "100%",
+    alignItems: "center",
+    justifyItems: "space-between"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      textAlign: 'start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uiMotion.Transition, {
+    in: isShowingProgressBar,
+    type: "fade",
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    weight: "bold",
+    size: "small",
+    color: "primary"
+  }, "Exporting"), /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
+    screenReaderLabel: "Export CSV Percent Complete",
+    renderValue: function renderValue(_ref2) {
+      var valueNow = _ref2.valueNow,
+          valueMax = _ref2.valueMax;
+      return (0, _outcomesReportUtils.formatPercentage)(valueNow, valueMax) + "%";
+    },
+    formatScreenReaderValue: function formatScreenReaderValue(_ref3) {
+      var valueNow = _ref3.valueNow,
+          valueMax = _ref3.valueMax;
+      return (0, _outcomesReportUtils.formatPercentage)(valueNow, valueMax) + " percent";
+    },
+    valueNow: progressValue,
+    "data-automation": "outcomesPerStudent_exportCSVProgressBar",
+    margin: "0 0 xx-small"
+  }))), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+    margin: "medium 0 medium 0",
+    color: canStartExport ? 'primary' : 'secondary',
+    onClick: canStartExport ? beginExport : cancelExport,
+    interaction: canStartExport ? 'enabled' : progressValue < 100 ? 'enabled' : 'disabled',
+    "data-automation": "outcomesPerStudent_exportCSVButton"
+  }, canStartExport ? "Export CSV" : "Cancel Export"), /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": true
+  }, /*#__PURE__*/_react.default.createElement(_reactCsv.CSVLink, {
+    data: formattedData,
+    headers: headers,
+    filename: (0, _outcomesReportUtils.fileName)(artifactId),
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    ref: csvElementRef
+  }))));
+};
+
+ExportCSVButton.propTypes = {
+  fetchCSVData: _propTypes.default.func.isRequired,
+  formatCSVData: _propTypes.default.func.isRequired,
+  fetchingStatus: _propTypes.default.string.isRequired,
+  artifactId: _propTypes.default.string.isRequired
+};
+var _default = ExportCSVButton;
+exports.default = _default;

package/lib/translated/mi/components/OutcomesPerStudent/Score/index.js

@@ -31,6 +31,8 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _outcomesReportUtils = require("../../../util/outcomesReportUtils.js");
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
@@ -63,7 +65,7 @@ var Score = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
       var _this$props = this.props,
           score = _this$props.score,
           outcome = _this$props.outcome;
-      var mastery = score && score.percentScore >= outcome.scoring_method.mastery_percent;
+      var mastery = (0, _outcomesReportUtils.hasMastery)(score, outcome);
       var outerStyle = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.score, true), (0, _defineProperty2.default)(_classNames, styles.mastery, mastery), _classNames));
       return score && /*#__PURE__*/_react.default.createElement("div", {
         className: outerStyle

package/lib/translated/mi/components/OutcomesPerStudent/__tests__/index.test.js

@@ -16,6 +16,8 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _constants = require("../../../constants.js");
+
 var styles = {
   componentId: 'eWGXc',
   template: function template(theme) {
@@ -87,7 +89,8 @@ describe('OutcomesPerStudent/index', function () {
       }, {
         uuid: 5,
         full_name: 'Sir Darryl Roundtree'
-      }]
+      }],
+      features: []
     }, props);
   }
 
@@ -145,6 +148,40 @@ describe('OutcomesPerStudent/index', function () {
     });
     (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
   });
+  describe('ExportCSVButton', function () {
+    it('renders if the FF is enabled, the page is loaded, and there are users and outcomes', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+        features: [_constants.REPORT_DOWNLOAD_FF]
+      })), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(1);
+    });
+    describe('does not render if', function () {
+      it('the FF is disabled', function () {
+        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})), {
+          disableLifecycleMethods: true
+        });
+        (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no students', function () {
+        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+          users: []
+        })), {
+          disableLifecycleMethods: true
+        });
+        (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no outcomes', function () {
+        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+          hasAnyOutcomes: false
+        })), {
+          disableLifecycleMethods: true
+        });
+        (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+    });
+  });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
   });

package/lib/translated/mi/components/OutcomesPerStudent/index.js

@@ -39,11 +39,15 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _index = _interopRequireDefault(require("./Header/index.js"));
+var _index = _interopRequireDefault(require("./ExportCSVButton/index.js"));
 
-var _index2 = _interopRequireDefault(require("./HeaderDetails/index.js"));
+var _index2 = _interopRequireDefault(require("./Header/index.js"));
 
-var _index3 = _interopRequireDefault(require("./Score/index.js"));
+var _index3 = _interopRequireDefault(require("./HeaderDetails/index.js"));
+
+var _index4 = _interopRequireDefault(require("./Score/index.js"));
+
+var _constants = require("../../constants.js");
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
@@ -315,21 +319,55 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   var _super = (0, _createSuper2.default)(OutcomesPerStudentReport);
 
   function OutcomesPerStudentReport() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, OutcomesPerStudentReport);
-    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.renderExportButton = function (hasAnyStudents) {
+      var _this$props = _this.props,
+          hasAnyOutcomes = _this$props.hasAnyOutcomes,
+          loading = _this$props.loading,
+          loadUsersOverride = _this$props.loadUsersOverride,
+          loadRemainingPages = _this$props.loadRemainingPages,
+          csvFetchingStatus = _this$props.csvFetchingStatus,
+          formatCSVData = _this$props.formatCSVData,
+          artifactType = _this$props.artifactType,
+          artifactId = _this$props.artifactId,
+          features = _this$props.features;
+      var reportDownloadEnabled = features.includes(_constants.REPORT_DOWNLOAD_FF);
+
+      var fetchCSVData = function fetchCSVData() {
+        return loadRemainingPages(artifactType, artifactId, loadUsersOverride);
+      };
+
+      if (reportDownloadEnabled && !loading && hasAnyOutcomes && hasAnyStudents) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          fetchCSVData: fetchCSVData,
+          formatCSVData: formatCSVData,
+          fetchingStatus: csvFetchingStatus,
+          artifactId: artifactId
+        });
+      }
+    };
+
+    return _this;
   }
 
   (0, _createClass2.default)(OutcomesPerStudentReport, [{
     key: "componentWillMount",
-    value: // eslint-disable-next-line no-undef
-    // eslint-disable-next-line no-undef
-    function componentWillMount() {
-      var _this$props = this.props,
-          artifactType = _this$props.artifactType,
-          artifactId = _this$props.artifactId,
-          loadPage = _this$props.loadPage,
-          setError = _this$props.setError,
-          loadUsersOverride = _this$props.loadUsersOverride;
+    value: function componentWillMount() {
+      var _this$props2 = this.props,
+          artifactType = _this$props2.artifactType,
+          artifactId = _this$props2.artifactId,
+          loadPage = _this$props2.loadPage,
+          setError = _this$props2.setError,
+          loadUsersOverride = _this$props2.loadUsersOverride;
       loadPage(artifactType, artifactId, 1, loadUsersOverride).catch(function (e) {
         return setError(e);
       });
@@ -338,16 +376,16 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
     key: "renderReportTable",
     value: function renderReportTable() {
       var headerIds = [];
-      var _this$props2 = this.props,
-          rollups = _this$props2.rollups,
-          getReportOutcome = _this$props2.getReportOutcome,
-          getScore = _this$props2.getScore,
-          _viewReportAlignment = _this$props2.viewReportAlignment,
-          isOpen = _this$props2.isOpen,
-          closeReportAlignment = _this$props2.closeReportAlignment,
-          users = _this$props2.users,
-          showRollups = _this$props2.showRollups,
-          scope = _this$props2.scope;
+      var _this$props3 = this.props,
+          rollups = _this$props3.rollups,
+          getReportOutcome = _this$props3.getReportOutcome,
+          getScore = _this$props3.getScore,
+          _viewReportAlignment = _this$props3.viewReportAlignment,
+          isOpen = _this$props3.isOpen,
+          closeReportAlignment = _this$props3.closeReportAlignment,
+          users = _this$props3.users,
+          showRollups = _this$props3.showRollups,
+          scope = _this$props3.scope;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.reportWrapper,
         "data-automation": "outcomesPerStudent__reportWrapper"
@@ -370,7 +408,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
             role: "columnheader",
             className: styles.headerCell,
             "data-automation": "outcomesPerStudent__headerCell"
-          }, /*#__PURE__*/_react.default.createElement(_index.default, {
+          }, /*#__PURE__*/_react.default.createElement(_index2.default, {
             outcomeResult: rollup,
             getReportOutcome: getReportOutcome,
             viewReportAlignment: function viewReportAlignment() {
@@ -393,7 +431,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
           _react.default.createElement("div", {
             key: headerIds[i],
             role: "gridcell"
-          }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+          }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_index3.default, {
             outcomeResult: rollup,
             showRollups: showRollups
           })))
@@ -413,7 +451,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
             className: styles.scoreCell,
             role: "gridcell",
             "data-automation": "outcomesPerStudent__scoreCell"
-          }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+          }, /*#__PURE__*/_react.default.createElement(_index4.default, {
             score: getScore(rollup.outcomeId, student.uuid),
             outcome: getReportOutcome(rollup.outcomeId)
           }));
@@ -423,12 +461,12 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this2 = this;
 
-      var _this$props3 = this.props,
-          users = _this$props3.users,
-          hasAnyOutcomes = _this$props3.hasAnyOutcomes,
-          loading = _this$props3.loading;
+      var _this$props4 = this.props,
+          users = _this$props4.users,
+          hasAnyOutcomes = _this$props4.hasAnyOutcomes,
+          loading = _this$props4.loading;
       var hasAnyStudents = users && users.length > 0;
 
       var renderReportContent = function renderReportContent() {
@@ -439,13 +477,13 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
         } else if (!hasAnyStudents) {
           return renderBillboard(noStudents());
         } else {
-          return _this.renderReportTable();
+          return _this2.renderReportTable();
         }
       };
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.background
-      }, renderReportContent());
+      }, this.renderExportButton(hasAnyStudents), renderReportContent());
     }
   }]);
   OutcomesPerStudentReport.displayName = "OutcomesPerStudentReport";
@@ -456,6 +494,9 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   artifactId: _propTypes.default.string.isRequired,
   rollups: _propTypes.default.array.isRequired,
   loading: _propTypes.default.bool.isRequired,
+  loadRemainingPages: _propTypes.default.func.isRequired,
+  csvFetchingStatus: _propTypes.default.string.isRequired,
+  formatCSVData: _propTypes.default.func.isRequired,
   loadPage: _propTypes.default.func.isRequired,
   loadUsersOverride: _propTypes.default.func,
   setError: _propTypes.default.func.isRequired,
@@ -466,6 +507,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   viewReportAlignment: _propTypes.default.func.isRequired,
   isOpen: _propTypes.default.func.isRequired,
   closeReportAlignment: _propTypes.default.func.isRequired,
+  features: _propTypes.default.array.isRequired,
   scope: _propTypes.default.string.isRequired
 }, _class2.defaultProps = {
   loadUsersOverride: void 0,

package/lib/translated/mi/components/Ratings/index.js

@@ -86,19 +86,13 @@ var Ratings = function Ratings(_ref) {
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, "Proficiency Rating")), !isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+  }, "Proficiency Rating"), !isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
     id: "points",
     textAlign: "end",
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, "Points")))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
+  }, "Points"))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
     var description = _ref2.description,
         percent = _ref2.percent;
     return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, {