@instructure/outcomes-ui 2.1.3 → 2.1.5

package/lib/translated/de/components/OutcomeDescription/index.stories.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _addonKnobs = require("@storybook/addon-knobs");
 
+var _constants = require("../../../.storybook/constants.js");
+
 var _index = _interopRequireDefault(require("./index.js"));
 
 var _default = {
@@ -21,7 +23,18 @@ exports.default = _default;
 var standard = function standard() {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     label: (0, _addonKnobs.text)('Label', 'Example Label'),
-    description: (0, _addonKnobs.text)('Description', 'Example Description')
+    description: (0, _addonKnobs.text)('Description', 'Example Description'),
+    friendlyDescription: (0, _addonKnobs.text)('Friendly Description', 'Example Friendly Description'),
+    shouldTruncateText: (0, _addonKnobs.boolean)('Truncate Text?', true),
+    maxLines: (0, _addonKnobs.number)('Max Lines', 1),
+    calculationMethod: (0, _addonKnobs.text)('Calculation Method', _constants.outcomeViewWithResults.scoring_method.algorithm),
+    calculationInt: (0, _addonKnobs.object)('Calculation Int', _constants.outcomeViewWithResults.scoring_method.algorithm_data),
+    masteryPercent: (0, _addonKnobs.number)('Mastery Percent', _constants.outcomeViewWithResults.scoring_method.mastery_percent),
+    pointsPossible: (0, _addonKnobs.number)('Points Possible', _constants.outcomeViewWithResults.scoring_method.points_possible),
+    ratings: (0, _addonKnobs.object)('Ratings', _constants.outcomeViewWithResults.scoring_method.scoring_tiers),
+    truncated: (0, _addonKnobs.boolean)('Collapsed?', true),
+    isTray: (0, _addonKnobs.boolean)('Render in Tray?', false),
+    canManageOutcomes: (0, _addonKnobs.boolean)('User can manage outcomes', true)
   });
 };
 

package/lib/translated/de/components/OutcomeTray/OutcomeList/__tests__/index.test.js

@@ -14,15 +14,13 @@ var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js")
 
 var _index = _interopRequireDefault(require("../index.js"));
 
+var _mockOutcomesData = require("../../../../test/mockOutcomesData.js");
+
 describe('OutcomeList', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
-      outcomes: [{
-        id: '1',
-        label: 'foo',
-        title: 'bar'
-      }],
+      outcomes: [_mockOutcomesData.OUTCOME_1],
       setFocusedOutcome: _sinon.default.spy(),
       isOutcomeSelected: _sinon.default.spy(),
       selectOutcomeIds: _sinon.default.spy(),

package/lib/translated/de/components/OutcomeTray/__tests__/index.test.js

@@ -47,7 +47,8 @@ describe('OutcomeTray', function () {
       resetOutcomePicker: _sinon.default.spy(),
       closeOutcomePicker: _sinon.default.spy(),
       setInitialSelectedOutcomes: _sinon.default.spy(),
-      shouldModifyArtifact: false
+      shouldModifyArtifact: false,
+      showAlert: _sinon.default.spy()
     }, props);
   }
 
@@ -137,6 +138,15 @@ describe('OutcomeTray', function () {
     (0, _chai.expect)(props.saveOutcomePickerAlignments).to.be.called;
     (0, _chai.expect)(props.saveOutcomePickerAlignments).to.be.calledWith(props.onUpdate, false);
   });
+  it('calls showAlert when confirm alignment button is clicked', function () {
+    var props = makeProps({
+      saveOutcomePickerAlignments: _sinon.default.stub().resolves(),
+      showAlert: _sinon.default.stub().resolves()
+    });
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    wrapper.find('Button').last().prop('onClick')();
+    (0, _chai.expect)(props.saveOutcomePickerAlignments).to.be.called;
+  });
   it('syncs selected and aligned outcomes on open', function () {
     var props = makeProps({
       isOpen: false

package/lib/translated/de/components/OutcomeTray/index.js

@@ -163,19 +163,23 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "handleSubmit",
     value: function handleSubmit() {
+      var _this = this;
+
       var _this$props5 = this.props,
           saveOutcomePickerAlignments = _this$props5.saveOutcomePickerAlignments,
           onUpdate = _this$props5.onUpdate,
           closeOutcomePicker = _this$props5.closeOutcomePicker,
           shouldModifyArtifact = _this$props5.shouldModifyArtifact;
       return saveOutcomePickerAlignments(onUpdate, shouldModifyArtifact).then(function () {
-        return closeOutcomePicker();
+        _this.props.showAlert("Outcome alignments have been successfully updated.");
+
+        closeOutcomePicker();
       });
     }
   }, {
     key: "renderActions",
     value: function renderActions() {
-      var _this = this;
+      var _this2 = this;
 
       var closeOutcomePicker = this.props.closeOutcomePicker;
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -188,7 +192,7 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
         margin: "xxx-small",
         variant: "primary",
         onClick: function onClick() {
-          return _this.handleSubmit();
+          return _this2.handleSubmit();
         }
       }, "Ausrichtungen best\xE4tigen")));
     }
@@ -278,7 +282,8 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   displayMasteryDescription: _propTypes.default.bool,
   displayMasteryPercentText: _propTypes.default.bool,
   shouldModifyArtifact: _propTypes.default.bool,
-  scope: _propTypes.default.string.isRequired
+  scope: _propTypes.default.string.isRequired,
+  showAlert: _propTypes.default.func
 }, _class2.defaultProps = {
   screenreaderNotification: null,
   liveRegion: null,
@@ -292,6 +297,7 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   displayMasteryPercentText: false,
   shouldModifyArtifact: false,
   searchTotal: null,
-  listTotal: null
+  listTotal: null,
+  showAlert: function showAlert() {}
 }, _temp)) || _class);
 exports.default = OutcomeTray;

package/lib/translated/de/components/OutcomeTray/index.stories.js

@@ -38,7 +38,8 @@ var defaultProps = {
   getOutcomesList: function getOutcomesList() {},
   updateSearchPage: function updateSearchPage() {},
   closeOutcomePicker: function closeOutcomePicker() {},
-  resetOutcomePicker: function resetOutcomePicker() {}
+  resetOutcomePicker: function resetOutcomePicker() {},
+  showAlert: function showAlert() {}
 };
 
 var paginatedNoSearch = function paginatedNoSearch() {

package/lib/translated/de/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/de/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/de/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/de/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/de/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,