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

Created new UI for Data download in instructors dashboard

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

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

@@ -1,5 +1,5 @@
 /* global gettext */
-import { Button } from '@edx/paragon';
+import { Button, Icon } from '@edx/paragon';
 import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
@@ -29,35 +29,56 @@ export default class Main extends React.Component {
       this.props.problemResponsesEndpoint,
       this.props.taskStatusEndpoint,
       this.props.reportDownloadEndpoint,
-      this.props.selectedBlock,
-    );
+      this.props.selectedBlock);
   }
 
+
   render() {
     const { selectedBlock, onSelectBlock } = this.props;
+    let selectorType = <Button onClick={this.handleToggleDropdown} label={gettext('Select a section or problem')} />;
+    if (this.props.showBtnUi === 'false') {
+      selectorType =
+          // 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>);
+    }
+
 
     return (
       <div className="problem-browser-container">
         <div className="problem-browser">
-          <Button
-            onClick={this.handleToggleDropdown}
-            label={gettext('Select a section or problem')}
+          {selectorType}
+          <input
+            type="text"
+            name="problem-location"
+            value={selectedBlock}
+            disabled
+            hidden={this.props.showBtnUi === 'false'}
           />
-          <input type="text" name="problem-location" value={selectedBlock} disabled />
           {this.state.showDropdown &&
-          <BlockBrowserContainer
-            onSelectBlock={(blockId) => {
-              this.hideDropdown();
-              onSelectBlock(blockId);
-            }}
-          />}
+            <BlockBrowserContainer
+              onSelectBlock={(blockId) => {
+                this.hideDropdown();
+                onSelectBlock(blockId);
+              }}
+            />}
           <Button
             onClick={this.initiateReportGeneration}
             name="list-problem-responses-csv"
             label={gettext('Create a report of problem responses')}
           />
+          <ReportStatusContainer />
         </div>
-        <ReportStatusContainer />
+
       </div>
     );
   }
@@ -73,6 +94,7 @@ Main.propTypes = {
   selectedBlock: PropTypes.string,
   taskStatusEndpoint: PropTypes.string.isRequired,
   reportDownloadEndpoint: PropTypes.string.isRequired,
+  ShowBtnUi: PropTypes.string.isRequired,
 };
 
 Main.defaultProps = {

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

@@ -18,6 +18,7 @@ exports[`ProblemBrowser Main component render with basic parameters 1`] = `
     </button>
     <input
       disabled={true}
+      hidden={false}
       name="problem-location"
       type="text"
       value={null}
@@ -32,11 +33,11 @@ exports[`ProblemBrowser Main component render with basic parameters 1`] = `
     >
       Create a report of problem responses
     </button>
+    <div
+      aria-live="polite"
+      className="report-generation-status"
+    />
   </div>
-  <div
-    aria-live="polite"
-    className="report-generation-status"
-  />
 </div>
 `;
 
@@ -58,6 +59,7 @@ exports[`ProblemBrowser Main component render with selected block 1`] = `
     </button>
     <input
       disabled={true}
+      hidden={false}
       name="problem-location"
       type="text"
       value="some-selected-block"
@@ -72,10 +74,10 @@ exports[`ProblemBrowser Main component render with selected block 1`] = `
     >
       Create a report of problem responses
     </button>
+    <div
+      aria-live="polite"
+      className="report-generation-status"
+    />
   </div>
-  <div
-    aria-live="polite"
-    className="report-generation-status"
-  />
 </div>
 `;

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

@@ -14,7 +14,7 @@ const ReportStatus = ({ error, succeeded, inProgress, reportPath }) => {
 
   const successMessage = (
     <div className="msg success">
-      {gettext('Your report has being successfully generated.')}
+      {gettext('Your report has been successfully generated.')}
       {reportPath &&
       <a href={reportPath}>
         <Icon hidden className={['fa', 'fa-link']} />

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

@@ -42,7 +42,7 @@ exports[`ReportStatus component render success status 1`] = `
   <div
     className="msg success"
   >
-    Your report has being successfully generated.
+    Your report has been successfully generated.
     <a
       href="/some/report/path.csv"
     >