XBlock Reporting: Display a popup after requesting a report

common/static/common/js/components/BlockBrowser/data/reducers/index.js

@@ -18,7 +18,7 @@ export const buildBlockTree = (blocks, excludeBlockTypes) => {
   return blockTree(blocks.root, null);
 };
 
-const blocks = (state = {}, action) => {
+export const blocks = (state = {}, action) => {
   switch (action.type) {
     case courseBlocksActions.fetch.SUCCESS:
       return buildBlockTree(action.blocks, action.excludeBlockTypes);
@@ -27,7 +27,7 @@ const blocks = (state = {}, action) => {
   }
 };
 
-const selectedBlock = (state = null, action) => {
+export const selectedBlock = (state = null, action) => {
   switch (action.type) {
     case courseBlocksActions.SELECT_BLOCK:
       return action.blockId;
@@ -37,7 +37,7 @@ const selectedBlock = (state = null, action) => {
 };
 
 
-const rootBlock = (state = null, action) => {
+export const rootBlock = (state = null, action) => {
   switch (action.type) {
     case courseBlocksActions.fetch.SUCCESS:
       return action.blocks.root;

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/Main.jsx

@@ -1,15 +1,20 @@
 /* global gettext */
 import { Button } from '@edx/paragon';
-import { BlockBrowser } from 'BlockBrowser';
+import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
+import { PopupModalContainer } from '../Popup/PopupModalContainer';
 
 export default class Main extends React.Component {
   constructor(props) {
     super(props);
     this.handleToggleDropdown = this.handleToggleDropdown.bind(this);
+    this.showPopup = this.showPopup.bind(this);
+    this.hidePopup = this.hidePopup.bind(this);
     this.state = {
+      popupOpen: false,
       showDropdown: false,
+      taskForBlock: null,
     };
   }
 
@@ -22,33 +27,71 @@ export default class Main extends React.Component {
     this.setState({ showDropdown: false });
   }
 
+  showPopup() {
+    if (this.state.taskForBlock !== this.props.selectedBlock) {
+      this.props.createProblemResponsesReportTask(
+        this.props.initialEndpoint,
+        this.props.taskStatusEndpoint,
+        this.props.selectedBlock,
+      );
+    }
+    this.setState({ popupOpen: true, taskForBlock: this.props.selectedBlock });
+  }
+
+  hidePopup() {
+    if (this.props.timeout != null) {
+      clearTimeout(this.props.timeout);
+    }
+    this.setState({ popupOpen: false, taskForBlock: null });
+    this.props.resetProblemResponsesReportTask();
+  }
+
   render() {
     const { selectedBlock, onSelectBlock } = this.props;
 
     return (
       <div className="problem-browser">
-        <Button onClick={this.handleToggleDropdown} label={gettext('Select a section or problem')} />
+        <Button
+          onClick={this.handleToggleDropdown}
+          label={gettext('Select a section or problem')}
+        />
         <input type="text" name="problem-location" value={selectedBlock} disabled />
         {this.state.showDropdown &&
-        <BlockBrowser onSelectBlock={(blockId) => {
-          this.hideDropdown();
-          onSelectBlock(blockId);
-        }}
+        <BlockBrowserContainer
+          onSelectBlock={(blockId) => {
+            this.hideDropdown();
+            onSelectBlock(blockId);
+          }}
         />}
+        <Button
+          onClick={this.showPopup}
+          name="list-problem-responses-csv"
+          label={gettext('Create a report of problem responses')}
+        />
+        <PopupModalContainer
+          open={this.state.popupOpen}
+          onHide={this.hidePopup}
+        />
       </div>
     );
   }
 }
 
 Main.propTypes = {
   courseId: PropTypes.string.isRequired,
+  createProblemResponsesReportTask: PropTypes.func.isRequired,
   excludeBlockTypes: PropTypes.arrayOf(PropTypes.string),
   fetchCourseBlocks: PropTypes.func.isRequired,
+  initialEndpoint: PropTypes.string.isRequired,
   onSelectBlock: PropTypes.func.isRequired,
   selectedBlock: PropTypes.string,
+  resetProblemResponsesReportTask: PropTypes.func.isRequired,
+  taskStatusEndpoint: PropTypes.string.isRequired,
+  timeout: PropTypes.number,
 };
 
 Main.defaultProps = {
   excludeBlockTypes: null,
   selectedBlock: null,
+  timeout: null,
 };

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/MainContainer.jsx

@@ -1,17 +1,25 @@
 import { fetchCourseBlocks, selectBlock } from 'BlockBrowser/data/actions/courseBlocks';
 import { connect } from 'react-redux';
-
+import { createProblemResponsesReportTask, reset } from '../../data/actions/problemResponses';
 import Main from './Main';
 
 const mapStateToProps = state => ({
   selectedBlock: state.selectedBlock,
+  timeout: state.popupTask.timeout,
 });
 
 
 const mapDispatchToProps = dispatch => ({
   onSelectBlock: blockId => dispatch(selectBlock(blockId)),
-  fetchCourseBlocks: (courseId, excludeBlockTypes) =>
-    dispatch(fetchCourseBlocks(courseId, excludeBlockTypes)),
+  fetchCourseBlocks:
+    (courseId, excludeBlockTypes) =>
+      dispatch(fetchCourseBlocks(courseId, excludeBlockTypes)),
+  createProblemResponsesReportTask:
+    (initialEndpoint, taskStatusEndpoint, problemLocation) =>
+      dispatch(
+        createProblemResponsesReportTask(initialEndpoint, taskStatusEndpoint, problemLocation),
+      ),
+  resetProblemResponsesReportTask: () => dispatch(reset),
 });
 
 const MainContainer = connect(

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Popup/PopupModal.jsx

@@ -0,0 +1,82 @@
+/* global gettext */
+import { Button, Modal } from '@edx/paragon/static';
+import * as classNames from 'classnames';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+
+const PopupModal = ({ open, onHide, message, error, succeeded, reportPath, reportPreview }) => {
+  const previewButton = (
+    <Button
+      label={gettext('Preview CSV')}
+      onClick={() =>
+        window.open(reportPreview, '_blank')
+      }
+    />
+  );
+  const downloadButton = (
+    <Button
+      label={gettext('Download CSV')}
+      onClick={() =>
+        window.open(reportPath, '_blank')
+      }
+    />
+  );
+
+  const buttons = (reportPath && !error)
+    ? [previewButton, downloadButton]
+    : [];
+
+  const progress = (!reportPath && !error && !message) && (
+    <div className="title progress">
+      <span className={'fa fa-refresh fa-spin fa-fw'}/>
+      <b>{gettext('Your report is being created...')}</b>
+    </div>
+  );
+
+  const body = (
+    <div className="report-popup-modal-body">
+      {progress}
+      <p>
+        {gettext('Once it\'s ready, you can view or download it using the buttons below. You can also close ' +
+          'this popup now, and download the report later, from the "Reports Available for Download" area ' +
+          'below.')}
+      </p>
+      {(!succeeded || error) &&
+      <div className={classNames('msg', { warning: !succeeded, error })}>
+        {error && `${gettext('Error')}:`}
+        {error || message}
+      </div>}
+    </div>
+  );
+
+  return (
+    <Modal
+      title={gettext('Learner Response Report')}
+      body={body}
+      buttons={buttons}
+      onClose={onHide}
+      open={open}
+      closeText={gettext('Close')}
+    />
+  );
+};
+
+PopupModal.propTypes = {
+  open: PropTypes.bool,
+  onHide: PropTypes.func.isRequired,
+  message: PropTypes.string,
+  error: PropTypes.string,
+  succeeded: PropTypes.bool.isRequired,
+  reportPath: PropTypes.string,
+  reportPreview: PropTypes.string,
+};
+
+PopupModal.defaultProps = {
+  open: false,
+  message: null,
+  error: null,
+  reportPath: null,
+  reportPreview: null,
+};
+
+export default PopupModal;

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Popup/PopupModalContainer.jsx

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import PopupModal from './PopupModal';
+
+const mapStateToProps = state => ({
+  selectedBlock: state.selectedBlock,
+  error: state.popupTask.error,
+  message: state.popupTask.message,
+  inProgress: state.popupTask.inProgress,
+  succeeded: state.popupTask.succeeded,
+  reportPath: state.popupTask.reportPath,
+  reportPreview: state.popupTask.reportPreview,
+  timeout: state.popupTask.timeout,
+});
+
+export const PopupModalContainer = connect(
+    mapStateToProps,
+)(PopupModal);
+
+export default PopupModalContainer;

lms/djangoapps/instructor/static/instructor/ProblemBrowser/data/actions/constants.js

@@ -0,0 +1,7 @@
+export default {
+  SUCCESS: 'GET_TASK_STATUS_PROBLEM_RESPONSES_SUCCESS',
+  ERROR: 'PROBLEM_RESPONSES_ERROR',
+  DOWNLOAD: 'PROBLEM_RESPONSES_DOWNLOAD',
+  TIMEOUT: 'PROBLEM_RESPONSES_TIMEOUT',
+  RESET: 'PROBLEM_RESPONSES_RESET',
+};

lms/djangoapps/instructor/static/instructor/ProblemBrowser/data/actions/problemResponses.js

@@ -0,0 +1,76 @@
+/* global gettext */
+import { fetchTaskStatus, initiateProblemResponsesRequest } from '../api/client';
+import problemResponsesPopupActions from './constants';
+
+const getTaskStatusSuccess = (succeeded, inProgress, message, reportPath, reportPreview) => ({
+  type: problemResponsesPopupActions.SUCCESS,
+  succeeded,
+  inProgress,
+  message,
+  reportPath,
+  reportPreview,
+});
+
+const failure = error => ({
+  type: problemResponsesPopupActions.ERROR,
+  error,
+});
+
+const timeoutSet = timeout => ({
+  type: problemResponsesPopupActions.TIMEOUT,
+  timeout,
+});
+
+const reset = () => ({ type: problemResponsesPopupActions.RESET });
+
+const getTaskStatus = (endpoint, taskId) => dispatch =>
+  fetchTaskStatus(endpoint, taskId)
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error(response);
+    })
+    .then(
+      (json) => {
+        if (json.in_progress) {
+          const timeout = setTimeout(() => dispatch(getTaskStatus(endpoint, taskId)), 1000);
+          dispatch(timeoutSet(timeout));
+        }
+        return dispatch(
+          getTaskStatusSuccess(
+            json.task_state === 'SUCCESS',
+            json.in_progress,
+            json.message,
+            json.task_progress.report_path,
+            json.task_progress.report_preview,
+          ));
+      },
+      () => dispatch(failure(gettext('Error: Unable to get report generation status.'))),
+    );
+
+const createProblemResponsesReportTask = (
+  initialEndpoint,
+  taskStatusEndpoint,
+  blockId,
+) => dispatch =>
+  initiateProblemResponsesRequest(initialEndpoint, blockId)
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error(response);
+    })
+    .then(
+      json => dispatch(getTaskStatus(taskStatusEndpoint, json.task_id)),
+      () => dispatch(failure(gettext('Error: Unable to submit request to generate report.'))),
+    );
+
+
+export {
+  failure,
+  createProblemResponsesReportTask,
+  getTaskStatusSuccess,
+  getTaskStatus,
+  reset,
+};

lms/djangoapps/instructor/static/instructor/ProblemBrowser/data/api/client.js

@@ -0,0 +1,34 @@
+import 'whatwg-fetch';
+import Cookies from 'js-cookie';
+
+const HEADERS = {
+  Accept: 'application/json',
+  'X-CSRFToken': Cookies.get('csrftoken'),
+};
+
+function initiateProblemResponsesRequest(endpoint, blockId) {
+  const formData = new FormData();
+    // xss-lint: disable=javascript-jquery-append
+  formData.append('problem_location', blockId);
+
+  return fetch(
+        endpoint, {
+          credentials: 'same-origin',
+          method: 'post',
+          headers: HEADERS,
+          body: formData,
+        },
+    );
+}
+
+const fetchTaskStatus = (endpoint, taskId) => fetch(
+    `${endpoint}?task_id=${taskId}`, {
+      credentials: 'same-origin',
+      method: 'get',
+      headers: HEADERS,
+    });
+
+export {
+    initiateProblemResponsesRequest,
+    fetchTaskStatus,
+};