UIREQ-555: Add loading indicator for CSV search results export (#667)

* Update changelog to reflect commit history * Add 'working' indicator for CSV search results export (UIREQ-555) * Update test
folio-org · Nov 16, 2020 · 6753407 · 6753407
1 parent 10b141a
commit 6753407
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change history for ui-requests
 
+## 4.0.3 IN PROGRESS
+
+* Add a 'working' indicator for CSV search results export. Fixes UIREQ-555.
+
 ## [4.0.2](https://github.com/folio-org/ui-requests/tree/v4.0.2) (2020-11-12)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v4.0.1...v4.0.2)
 
@@ -10,7 +14,6 @@
 * Fix default pickup service point when editing existing request. Fixes UIREQ-544.
 * Increase the limit to display all items in the `Move request` modal. Fixes UIREQ-541.
 * Fix the non-responsive design of the `Move request` modal. Fixes UIREQ-552.
-* Fix CSV search results export. Fixes UIREQ-539.
 
 ## [4.0.1](https://github.com/folio-org/ui-requests/tree/v4.0.1) (2020-10-15)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v4.0.0...v4.0.1)

diff --git a/src/routes/RequestsRoute.js b/src/routes/RequestsRoute.js
@@ -331,6 +331,7 @@ class RequestsRoute extends React.Component {
     this.expiredHoldsReportColumnHeaders = this.getColumnHeaders(expiredHoldsReportHeaders);
 
     this.state = {
+      csvReportPending: false,
       submitting: false,
       errorMessage: '',
       errorModalData: {},
@@ -411,6 +412,8 @@ class RequestsRoute extends React.Component {
 
   // Export function for the CSV search report action
   async exportData() {
+    this.setState({ csvReportPending: true });
+
     // Build a custom query for the CSV record export, which has to include
     // all search and filter parameters
     const queryClauses = [];
@@ -434,6 +437,8 @@ class RequestsRoute extends React.Component {
       onlyFields: this.columnHeadersMap,
       excludeFields: ['id'],
     });
+
+    this.setState({ csvReportPending: false });
   }
 
   getCurrentServicePointInfo = () => {
@@ -746,6 +751,7 @@ class RequestsRoute extends React.Component {
     } = this.columnLabels;
 
     const {
+      csvReportPending,
       dupRequest,
       errorMessage,
       errorModalData,
@@ -796,17 +802,22 @@ class RequestsRoute extends React.Component {
             <FormattedMessage id="stripes-smart-components.new" />
           </Button>
         </IfPermission>
-        <Button
-          buttonStyle="dropdownItem"
-          id="exportToCsvPaneHeaderBtn"
-          disabled={!requestCount}
-          onClick={() => {
-            onToggle();
-            this.exportData();
-          }}
-        >
-          <FormattedMessage id="ui-requests.exportSearchResultsToCsv" />
-        </Button>
+        { csvReportPending ?
+          <LoadingButton>
+            <FormattedMessage id="ui-requests.csvReportPending" />
+          </LoadingButton> :
+          <Button
+            buttonStyle="dropdownItem"
+            id="exportToCsvPaneHeaderBtn"
+            disabled={!requestCount}
+            onClick={() => {
+              onToggle();
+              this.exportData();
+            }}
+          >
+            <FormattedMessage id="ui-requests.exportSearchResultsToCsv" />
+          </Button>
+        }
         {
           pickSlipsArePending ?
             <LoadingButton>

diff --git a/test/bigtest/tests/export-to-CSV-test.js b/test/bigtest/tests/export-to-CSV-test.js
@@ -37,7 +37,7 @@ describe('Export to CSV', () => {
     describe('Export to CSV', function () {
       beforeEach(async () => {
         await requests.headerDropdown.click();
-        await requests.headerDropdownMenu.clickExportToCSV();
+        await requests.headerDropdownMenu.clickExportExpiredHoldsToCSV();
       });
 
       it('exports data to csv', () => {

diff --git a/translations/ui-requests/en.json b/translations/ui-requests/en.json
@@ -199,5 +199,6 @@
   "permission.create": "Requests: View, create",
   "permission.edit": "Requests: View, edit, cancel",
   "pickSlipsLoading": "Pick slips are loading, please wait",
-  "printInProgress": "Print options loading in progress. It might take a few seconds, please be patient."
+  "printInProgress": "Print options loading in progress. It might take a few seconds, please be patient.",
+  "csvReportPending": "CSV report is being generated. Please wait."
 }