New vs Old Data-Download UI. (#24094)

updated css

temp fixex

Updated js code for data download

updated js hooks for new UI

fixed ui and navigation

reset paver file

Removed unused changes

Initial tests added

Initial tests added

fixed style issues

Created new tests for data download

Fixed A11y and quality issues

Updated test file and removed new

fixed Accesibility issues

fixed code style in spec

removed old data download file

Moved problem grade report

Updated html to fix accessiblity issue

Fixed accessiblity issues

Created waffle flag for data download

added doc strign in doc

renamed waffles file

Break down Html and fixed tests

Removed extra js and updated comments

Removed extra js and updated comments

renamed var fixed styling

fixed js test fail

Fixed styling issues

updated description texts

Updated problem selector UI

Fixed Jest test for react component

removed depricated default param

added class instead of style

updated snapshot

Co-authored-by: Awais Jibran <awaisdar001@gmail.com>

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

@@ -1,15 +1,13 @@
 /* global gettext */
-import { Button } from '@edx/paragon';
-import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
+import { Button, Icon } from '@edx/paragon';
+import { BlockBrowser } from 'BlockBrowser';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import { ReportStatusContainer } from '../ReportStatus/ReportStatusContainer';
 
 export default class Main extends React.Component {
   constructor(props) {
     super(props);
     this.handleToggleDropdown = this.handleToggleDropdown.bind(this);
-    this.initiateReportGeneration = this.initiateReportGeneration.bind(this);
     this.state = {
       showDropdown: false,
     };
@@ -24,39 +22,31 @@ export default class Main extends React.Component {
     this.setState({ showDropdown: false });
   }
 
-  initiateReportGeneration() {
-    this.props.createProblemResponsesReportTask(
-      this.props.problemResponsesEndpoint,
-      this.props.taskStatusEndpoint,
-      this.props.selectedBlock,
-    );
-  }
-
   render() {
     const { selectedBlock, onSelectBlock } = this.props;
 
     return (
-      <div className="problem-browser-container">
-        <div className="problem-browser">
-          <Button
-            onClick={this.handleToggleDropdown}
-            label={gettext('Select a section or problem')}
-          />
-          <input type="text" name="problem-location" value={selectedBlock} disabled />
-          {this.state.showDropdown &&
-          <BlockBrowserContainer
-            onSelectBlock={(blockId) => {
-              this.hideDropdown();
-              onSelectBlock(blockId);
-            }}
-          />}
-          <Button
-            onClick={this.initiateReportGeneration}
-            name="list-problem-responses-csv"
-            label={gettext('Create a report of problem responses')}
-          />
-        </div>
-        <ReportStatusContainer />
+      <div className="problem-browser">
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <span
+          onClick={this.handleToggleDropdown}
+          className={['problem-selector']}
+        >
+          <span>{selectedBlock || 'Select a section or problem'}</span>
+          <span className={['pull-right']}>
+            <Icon
+              className={['fa', 'fa-sort']}
+            />
+          </span>
+        </span>
+
+        <input type="text" name="problem-location" value={selectedBlock} disabled style={{ display: 'none' }} />
+        {this.state.showDropdown &&
+        <BlockBrowser onSelectBlock={(blockId) => {
+          this.hideDropdown();
+          onSelectBlock(blockId);
+        }}
+        />}
       </div>
     );
   }
@@ -64,17 +54,13 @@ export default class Main extends React.Component {
 
 Main.propTypes = {
   courseId: PropTypes.string.isRequired,
-  createProblemResponsesReportTask: PropTypes.func.isRequired,
   excludeBlockTypes: PropTypes.arrayOf(PropTypes.string),
   fetchCourseBlocks: PropTypes.func.isRequired,
-  problemResponsesEndpoint: PropTypes.string.isRequired,
   onSelectBlock: PropTypes.func.isRequired,
   selectedBlock: PropTypes.string,
-  taskStatusEndpoint: PropTypes.string.isRequired,
 };
 
 Main.defaultProps = {
   excludeBlockTypes: null,
-  selectedBlock: '',
-  timeout: null,
+  selectedBlock: null,
 };

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

@@ -1,34 +1,25 @@
 /* global jest,test,describe,expect */
 import { Button } from '@edx/paragon';
-import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
-import { Provider } from 'react-redux';
+import { BlockBrowser } from 'BlockBrowser';
 import { shallow } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import store from '../../data/store';
 
 import Main from './Main';
 
 describe('ProblemBrowser Main component', () => {
   const courseId = 'testcourse';
-  const problemResponsesEndpoint = '/api/problem_responses/';
-  const taskStatusEndpoint = '/api/task_status/';
   const excludedBlockTypes = [];
 
   test('render with basic parameters', () => {
     const component = renderer.create(
-      <Provider store={store}>
-        <Main
-          courseId={courseId}
-          createProblemResponsesReportTask={jest.fn()}
-          excludeBlockTypes={excludedBlockTypes}
-          fetchCourseBlocks={jest.fn()}
-          problemResponsesEndpoint={problemResponsesEndpoint}
-          onSelectBlock={jest.fn()}
-          selectedBlock={null}
-          taskStatusEndpoint={taskStatusEndpoint}
-        />
-      </Provider>,
+      <Main
+        courseId={courseId}
+        excludeBlockTypes={excludedBlockTypes}
+        fetchCourseBlocks={jest.fn()}
+        onSelectBlock={jest.fn()}
+        selectedBlock={null}
+      />,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -36,18 +27,13 @@ describe('ProblemBrowser Main component', () => {
 
   test('render with selected block', () => {
     const component = renderer.create(
-      <Provider store={store}>
-        <Main
-          courseId={courseId}
-          createProblemResponsesReportTask={jest.fn()}
-          excludeBlockTypes={excludedBlockTypes}
-          fetchCourseBlocks={jest.fn()}
-          problemResponsesEndpoint={problemResponsesEndpoint}
-          onSelectBlock={jest.fn()}
-          selectedBlock={'some-selected-block'}
-          taskStatusEndpoint={taskStatusEndpoint}
-        />
-      </Provider>,
+      <Main
+        courseId={courseId}
+        excludeBlockTypes={excludedBlockTypes}
+        fetchCourseBlocks={jest.fn()}
+        onSelectBlock={jest.fn()}
+        selectedBlock={'some-selected-block'}
+      />,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -56,20 +42,15 @@ describe('ProblemBrowser Main component', () => {
   test('fetch course block on toggling dropdown', () => {
     const fetchCourseBlocksMock = jest.fn();
     const component = renderer.create(
-      <Provider store={store}>
-        <Main
-          courseId={courseId}
-          createProblemResponsesReportTask={jest.fn()}
-          excludeBlockTypes={excludedBlockTypes}
-          fetchCourseBlocks={fetchCourseBlocksMock}
-          problemResponsesEndpoint={problemResponsesEndpoint}
-          onSelectBlock={jest.fn()}
-          selectedBlock={'some-selected-block'}
-          taskStatusEndpoint={taskStatusEndpoint}
-        />
-      </Provider>,
+      <Main
+        courseId={courseId}
+        excludeBlockTypes={excludedBlockTypes}
+        fetchCourseBlocks={fetchCourseBlocksMock}
+        onSelectBlock={jest.fn()}
+        selectedBlock={'some-selected-block'}
+      />,
     );
-    const instance = component.root.children[0].instance;
+    const instance = component.getInstance();
     instance.handleToggleDropdown();
     expect(fetchCourseBlocksMock.mock.calls.length).toBe(1);
   });
@@ -78,17 +59,13 @@ describe('ProblemBrowser Main component', () => {
     const component = shallow(
       <Main
         courseId={courseId}
-        createProblemResponsesReportTask={jest.fn()}
         excludeBlockTypes={excludedBlockTypes}
         fetchCourseBlocks={jest.fn()}
-        problemResponsesEndpoint={problemResponsesEndpoint}
         onSelectBlock={jest.fn()}
         selectedBlock={'some-selected-block'}
-        taskStatusEndpoint={taskStatusEndpoint}
       />,
     );
-    expect(component.find(BlockBrowserContainer).length).toBeFalsy();
-    component.find(Button).find({ label: 'Select a section or problem' }).simulate('click');
-    expect(component.find(BlockBrowserContainer).length).toBeTruthy();
+    component.find('.problem-selector').simulate('click');
+    expect(component.find(BlockBrowser)).toBeTruthy();
   });
 });

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/__snapshots__/Main.test.jsx.snap

@@ -2,80 +2,90 @@
 
 exports[`ProblemBrowser Main component render with basic parameters 1`] = `
 <div
-  className="problem-browser-container"
+  className="problem-browser"
 >
-  <div
-    className="problem-browser"
+  <span
+    className={
+      Array [
+        "problem-selector",
+      ]
+    }
+    onClick={[Function]}
   >
-    <button
-      className="btn"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
+    <span>
       Select a section or problem
-    </button>
-    <input
-      disabled={true}
-      name="problem-location"
-      type="text"
-      value={null}
-    />
-    <button
-      className="btn"
-      name="list-problem-responses-csv"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
+    </span>
+    <span
+      className={
+        Array [
+          "pull-right",
+        ]
+      }
     >
-      Create a report of problem responses
-    </button>
-  </div>
-  <div
-    aria-live="polite"
-    className="report-generation-status"
+      <div>
+        <span
+          aria-hidden={true}
+          className="fa fa-sort"
+          id="Icon2"
+        />
+      </div>
+    </span>
+  </span>
+  <input
+    disabled={true}
+    name="problem-location"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+    type="text"
+    value={null}
   />
 </div>
 `;
 
 exports[`ProblemBrowser Main component render with selected block 1`] = `
 <div
-  className="problem-browser-container"
+  className="problem-browser"
 >
-  <div
-    className="problem-browser"
+  <span
+    className={
+      Array [
+        "problem-selector",
+      ]
+    }
+    onClick={[Function]}
   >
-    <button
-      className="btn"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
+    <span>
+      some-selected-block
+    </span>
+    <span
+      className={
+        Array [
+          "pull-right",
+        ]
+      }
     >
-      Select a section or problem
-    </button>
-    <input
-      disabled={true}
-      name="problem-location"
-      type="text"
-      value="some-selected-block"
-    />
-    <button
-      className="btn"
-      name="list-problem-responses-csv"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      Create a report of problem responses
-    </button>
-  </div>
-  <div
-    aria-live="polite"
-    className="report-generation-status"
+      <div>
+        <span
+          aria-hidden={true}
+          className="fa fa-sort"
+          id="Icon2"
+        />
+      </div>
+    </span>
+  </span>
+  <input
+    disabled={true}
+    name="problem-location"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+    type="text"
+    value="some-selected-block"
   />
 </div>
 `;