@instructure/outcomes-ui 2.1.4 → 2.1.5

package/es/translated/en-AU/components/OutcomesPerStudent/ExportCSVButton/index.js

@@ -0,0 +1,141 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@instructure/ui-buttons';
+import { CSVLink } from 'react-csv';
+import { Flex } from '@instructure/ui-flex';
+import { ProgressBar } from '@instructure/ui-progress';
+import { Text } from '@instructure/ui-text';
+import { Transition } from '@instructure/ui-motion';
+import useBoolean from "../../../hooks/useBoolean.js";
+import useCSVExport, { NOT_EXPORTING, CSV_COMPLETE } from "../../../hooks/useCSVExport.js";
+import { STUDENT_NAME, STUDENT_UUID, ATTEMPT_COUNT, ALIGNED_QUESTIONS_COUNT, LOR_POINTS, LOR_POINTS_POSSIBLE, LO_NAME, LO_ID, LO_MASTERY_PERCENT, LO_MASTERED } from "../../../constants.js";
+import { fileName, formatPercentage } from "../../../util/outcomesReportUtils.js";
+export var headers = [{
+  label: "Student Name",
+  key: STUDENT_NAME
+}, {
+  label: "Student UUID",
+  key: STUDENT_UUID
+}, {
+  label: "Number of Attempts",
+  key: ATTEMPT_COUNT
+}, {
+  label: "Number of Aligned Questions",
+  key: ALIGNED_QUESTIONS_COUNT
+}, {
+  label: "Learning Outcome Result Points",
+  key: LOR_POINTS
+}, {
+  label: "Learning Outcome Result Points Possible",
+  key: LOR_POINTS_POSSIBLE
+}, {
+  label: "Learning Outcome Name",
+  key: LO_NAME
+}, {
+  label: "Learning Outcome ID",
+  key: LO_ID
+}, {
+  label: "Learning Outcome Mastery Percent",
+  key: LO_MASTERY_PERCENT
+}, {
+  label: "Learning Outcome Mastered",
+  key: LO_MASTERED
+}];
+
+var ExportCSVButton = function ExportCSVButton(_ref) {
+  var fetchCSVData = _ref.fetchCSVData,
+      formatCSVData = _ref.formatCSVData,
+      fetchingStatus = _ref.fetchingStatus,
+      artifactId = _ref.artifactId;
+  var csvElementRef = 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 = useBoolean(false),
+      _useBoolean2 = _slicedToArray(_useBoolean, 3),
+      isShowingProgressBar = _useBoolean2[0],
+      showProgressBar = _useBoolean2[1],
+      hideProgressBar = _useBoolean2[2];
+
+  var _useCSVExport = useCSVExport({
+    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 === NOT_EXPORTING;
+  useEffect(function () {
+    if (exportState === CSV_COMPLETE) {
+      exportCSV();
+    }
+  }, [exportState]);
+  return /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    width: "100%",
+    alignItems: "center",
+    justifyItems: "space-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      textAlign: 'start'
+    }
+  }, /*#__PURE__*/React.createElement(Transition, {
+    in: isShowingProgressBar,
+    type: "fade",
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold",
+    size: "small",
+    color: "primary"
+  }, "Exporting"), /*#__PURE__*/React.createElement(ProgressBar, {
+    screenReaderLabel: "Export CSV Percent Complete",
+    renderValue: function renderValue(_ref2) {
+      var valueNow = _ref2.valueNow,
+          valueMax = _ref2.valueMax;
+      return formatPercentage(valueNow, valueMax) + "%";
+    },
+    formatScreenReaderValue: function formatScreenReaderValue(_ref3) {
+      var valueNow = _ref3.valueNow,
+          valueMax = _ref3.valueMax;
+      return formatPercentage(valueNow, valueMax) + " percent";
+    },
+    valueNow: progressValue,
+    "data-automation": "outcomesPerStudent_exportCSVProgressBar",
+    margin: "0 0 xx-small"
+  }))), /*#__PURE__*/React.createElement(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.createElement("span", {
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(CSVLink, {
+    data: formattedData,
+    headers: headers,
+    filename: fileName(artifactId),
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: csvElementRef
+  }))));
+};
+
+ExportCSVButton.propTypes = {
+  fetchCSVData: PropTypes.func.isRequired,
+  formatCSVData: PropTypes.func.isRequired,
+  fetchingStatus: PropTypes.string.isRequired,
+  artifactId: PropTypes.string.isRequired
+};
+export default ExportCSVButton;

package/es/translated/en-AU/components/OutcomesPerStudent/Score/index.js

@@ -24,6 +24,7 @@ var styles = {
   'scoreSpacer': 'outcomes-ui__Score--scoreSpacer',
   'masteryStar': 'outcomes-ui__Score--masteryStar'
 };
+import { hasMastery } from "../../../util/outcomesReportUtils.js";
 var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(Score, _React$Component);
 
@@ -44,7 +45,7 @@ var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /
       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 = hasMastery(score, outcome);
       var outerStyle = classNames((_classNames = {}, _defineProperty(_classNames, styles.score, true), _defineProperty(_classNames, styles.mastery, mastery), _classNames));
       return score && /*#__PURE__*/React.createElement("div", {
         className: outerStyle

package/es/translated/en-AU/components/OutcomesPerStudent/__tests__/index.test.js

@@ -22,6 +22,7 @@ var styles = {
   'name': 'outcomes-ui__OutcomesPerStudent--name',
   'scoreCell': 'outcomes-ui__OutcomesPerStudent--scoreCell'
 };
+import { REPORT_DOWNLOAD_FF } from "../../../constants.js";
 chai.use(require('sinon-chai'));
 describe('OutcomesPerStudent/index', function () {
   function makeProps() {
@@ -73,7 +74,8 @@ describe('OutcomesPerStudent/index', function () {
       }, {
         uuid: 5,
         full_name: 'Sir Darryl Roundtree'
-      }]
+      }],
+      features: []
     }, props);
   }
 
@@ -131,6 +133,40 @@ describe('OutcomesPerStudent/index', function () {
     });
     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 = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+        features: [REPORT_DOWNLOAD_FF]
+      })), {
+        disableLifecycleMethods: true
+      });
+      expect(wrapper.find('ExportCSVButton')).to.have.length(1);
+    });
+    describe('does not render if', function () {
+      it('the FF is disabled', function () {
+        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({})), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no students', function () {
+        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+          users: []
+        })), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no outcomes', function () {
+        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+          hasAnyOutcomes: false
+        })), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+    });
+  });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()));
   });

package/es/translated/en-AU/components/OutcomesPerStudent/index.js

@@ -21,6 +21,7 @@ import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-c
 import shortid from 'shortid';
 import { themeable } from '@instructure/ui-themeable';
 import _ from 'lodash';
+import ExportCSVButton from "./ExportCSVButton/index.js";
 import Header from "./Header/index.js";
 import HeaderDetails from "./HeaderDetails/index.js";
 import Score from "./Score/index.js";
@@ -145,6 +146,7 @@ var NoReport = function NoReport(props) {
   })));
 };
 
+import { REPORT_DOWNLOAD_FF } from "../../constants.js";
 import theme from "../theme.js";
 var styles = {
   componentId: 'eWGXc',
@@ -286,22 +288,55 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   var _super = _createSuper(OutcomesPerStudentReport);
 
   function OutcomesPerStudentReport() {
+    var _this;
+
     _classCallCheck(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(REPORT_DOWNLOAD_FF);
+
+      var fetchCSVData = function fetchCSVData() {
+        return loadRemainingPages(artifactType, artifactId, loadUsersOverride);
+      };
+
+      if (reportDownloadEnabled && !loading && hasAnyOutcomes && hasAnyStudents) {
+        return /*#__PURE__*/React.createElement(ExportCSVButton, {
+          fetchCSVData: fetchCSVData,
+          formatCSVData: formatCSVData,
+          fetchingStatus: csvFetchingStatus,
+          artifactId: artifactId
+        });
+      }
+    };
+
+    return _this;
   }
 
   _createClass(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);
       });
@@ -310,16 +345,16 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
     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.createElement("div", {
         className: styles.reportWrapper,
         "data-automation": "outcomesPerStudent__reportWrapper"
@@ -395,12 +430,12 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     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() {
@@ -411,13 +446,13 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
         } else if (!hasAnyStudents) {
           return renderBillboard(noStudents());
         } else {
-          return _this.renderReportTable();
+          return _this2.renderReportTable();
         }
       };
 
       return /*#__PURE__*/React.createElement("div", {
         className: styles.background
-      }, renderReportContent());
+      }, this.renderExportButton(hasAnyStudents), renderReportContent());
     }
   }]);
 
@@ -429,6 +464,9 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   artifactId: PropTypes.string.isRequired,
   rollups: PropTypes.array.isRequired,
   loading: PropTypes.bool.isRequired,
+  loadRemainingPages: PropTypes.func.isRequired,
+  csvFetchingStatus: PropTypes.string.isRequired,
+  formatCSVData: PropTypes.func.isRequired,
   loadPage: PropTypes.func.isRequired,
   loadUsersOverride: PropTypes.func,
   setError: PropTypes.func.isRequired,
@@ -439,6 +477,7 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   viewReportAlignment: PropTypes.func.isRequired,
   isOpen: PropTypes.func.isRequired,
   closeReportAlignment: PropTypes.func.isRequired,
+  features: PropTypes.array.isRequired,
   scope: PropTypes.string.isRequired
 }, _class2.defaultProps = {
   loadUsersOverride: void 0,

package/es/translated/en-AU/components/Ratings/index.js

@@ -70,19 +70,13 @@ var Ratings = function Ratings(_ref) {
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, "Proficiency Rating")), !isTray && /*#__PURE__*/React.createElement(Table.ColHeader, {
+  }, "Proficiency Rating"), !isTray && /*#__PURE__*/React.createElement(Table.ColHeader, {
     id: "points",
     textAlign: "end",
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/React.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.createElement(Table.Body, {

package/es/translated/en-AU/constants.js

@@ -43,8 +43,25 @@ export var SET_REPORT_ROLLUPS = 'SET_REPORT_ROLLUPS';
 export var SET_REPORT_RESULTS = 'SET_REPORT_RESULTS';
 export var SET_REPORT_USERS = 'SET_REPORT_USERS';
 export var SET_REPORT_LOADING = 'SET_REPORT_LOADING';
+export var SET_REMAINING_PAGES_LOADING = 'SET_REMAINING_PAGES_LOADING';
 export var VIEW_REPORT_ALIGNMENT = 'VIEW_REPORT_ALIGNMENT';
 export var CLOSE_REPORT_ALIGNMENT = 'CLOSE_REPORT_ALIGNMENT';
+export var ALL_USERS = 'ALL_USERS';
+export var NOT_FETCHING = 'NOT_FETCHING';
+export var IN_PROGRESS = 'FETCHING_IN_PROGRESS';
+export var ERROR = 'FETCHING_ERROR';
+export var COMPLETED = 'FETCHING_COMPLETED'; // CSV Report Headers
+
+export var STUDENT_NAME = 'student_name';
+export var STUDENT_UUID = 'student_uuid';
+export var ATTEMPT_COUNT = 'attempt_count';
+export var ALIGNED_QUESTIONS_COUNT = 'aligned_questions_count';
+export var LOR_POINTS = 'lor_points';
+export var LOR_POINTS_POSSIBLE = 'lor_points_possible';
+export var LO_NAME = 'lo_name';
+export var LO_ID = 'lo_id';
+export var LO_MASTERY_PERCENT = 'lo_mastery_percent';
+export var LO_MASTERED = 'lo_mastered';
 /*
  * search
  */
@@ -72,8 +89,9 @@ export var SET_INDIVIDUAL_RESULTS_STATE = 'SET_INDIVIDUAL_RESULTS_STATE';
  * this being a function allows it to be stubbed in tests
 */
 
+export var REPORT_DOWNLOAD_FF = 'report_download';
 export var getFeatureFlags = function getFeatureFlags() {
-  return [];
+  return [REPORT_DOWNLOAD_FF];
 };
 /*
  * calculation method

package/es/translated/en-AU/containers/ConnectedAlignmentCount.js

@@ -12,6 +12,8 @@ function mapStateToProps(state, ownProps) {
     count: getAlignedOutcomeCount(state, scope)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
@@ -19,6 +21,8 @@ function mapDispatchToProps(dispatch, ownProps) {
     loadAlignments: loadAlignments
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedAlignmentCount = compose(connect(mapStateToProps, mapDispatchToProps), WithAlignmentSet)(AlignmentCount);
 export default ConnectedAlignmentCount;

package/es/translated/en-AU/containers/ConnectedOutcomesPerStudent.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
 import { bindActionCreators as bindScopedActionCreators } from 'multireducer';
 import OutcomesPerStudent from "../components/OutcomesPerStudent/index.js";
-import { loadPage, viewReportAlignment, closeReportAlignment } from "../store/report/actions.js";
+import { loadPage, loadRemainingPages, viewReportAlignment, closeReportAlignment } from "../store/report/actions.js";
 import { setError } from "../store/context/actions.js";
-import { getLoading, getPageCount, getPageNumber, getUsers, getReportOutcome, getRollups, getScore, isOpen, hasAnyOutcomes } from "../store/report/selectors.js";
+import { formatCSVData, getLoading, getPageCount, getPageNumber, getUsers, getReportOutcome, getRollups, getScore, getLoadingRemainingPages, isOpen, hasAnyOutcomes } from "../store/report/selectors.js";
+import { getFeatures } from "../store/features/selectors.js";
 
 function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
@@ -11,24 +12,32 @@ function mapStateToProps(state, ownProps) {
     pageCount: getPageCount(state, scope),
     currentPage: getPageNumber(state, scope),
     rollups: getRollups(state, scope),
-    users: getUsers(state, scope),
+    users: getUsers(state, scope, getPageNumber(state, scope)),
     getReportOutcome: getReportOutcome.bind(null, state, scope),
+    csvFetchingStatus: getLoadingRemainingPages(state, scope),
+    formatCSVData: formatCSVData.bind(null, state, scope),
     hasAnyOutcomes: hasAnyOutcomes(state, scope),
     getScore: getScore.bind(null, state, scope),
     isOpen: isOpen.bind(null, state, scope),
-    loading: getLoading(state, scope)
+    loading: getLoading(state, scope),
+    features: getFeatures(state)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
   return bindScopedActionCreators({
     loadPage: loadPage,
+    loadRemainingPages: loadRemainingPages,
     viewReportAlignment: viewReportAlignment,
     closeReportAlignment: closeReportAlignment,
     setError: setError
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedOutcomesPerStudent = connect(mapStateToProps, mapDispatchToProps)(OutcomesPerStudent);
 export default ConnectedOutcomesPerStudent;

package/es/translated/en-AU/containers/__tests__/OutcomesPerStudentReport.test.js

@@ -38,7 +38,8 @@ describe('OutcomesPerStudentReport', function () {
       artifactType: '',
       artifactId: '',
       host: '',
-      jwt: ''
+      jwt: '',
+      showAlert: function showAlert() {}
     };
   }