Revert export progress indicator

devinit · Jun 27, 2022 · 7df8feb · 7df8feb
1 parent 0da43b3
commit 7df8feb
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 142 deletions.
diff --git a/frontend/cypress/integration/datasets.spec.js b/frontend/cypress/integration/datasets.spec.js
@@ -258,31 +258,6 @@ describe('The Datasets Pages', () => {
       });
   });
 
-  it('exports dataset as csv', () => {
-    cy.fixture('datasets').then((datasets) => {
-      cy.intercept('api/datasets/mine/', datasets);
-    });
-    cy.intercept('api/export/346', (req) => {
-      req.reply({
-        statusCode: 200,
-        fixture: 'exportData.json',
-        headers: {
-          'content-type': 'text/csv',
-        },
-      });
-    }).as('exportCsv');
-
-    // Click export to csv and confirm progress bar is fully loaded
-    cy.visit('/');
-    cy.get('.dataset-row')
-      .eq(16)
-      .then(($datasetRow) => {
-        cy.wrap($datasetRow).contains('Export to CSV').click({ force: true });
-        cy.get('.Toastify__toast-container').should('be.visible');
-        cy.wait('@exportCsv').its('response.statusCode').should('equal', 200);
-      });
-  });
-
   it('freezes a dataset', () => {
     cy.visit('/datasets/');
     cy.get('.dataset-row').eq(0).contains('Versions').click({ force: true });

diff --git a/frontend/src/components/OperationsTableCard/OperationsTableCard.tsx b/frontend/src/components/OperationsTableCard/OperationsTableCard.tsx
@@ -5,8 +5,6 @@ import React, { FunctionComponent, useContext, useEffect, useState } from 'react
 import { Button, Card, Col, OverlayTrigger, Popover, Row } from 'react-bootstrap';
 import { connect, MapDispatchToProps } from 'react-redux';
 import { RouteComponentProps, useLocation, withRouter } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 import { bindActionCreators } from 'redux';
 import { Dimmer, Dropdown, DropdownItemProps, DropdownProps, Loader } from 'semantic-ui-react';
 import { format } from 'sql-formatter';
@@ -18,7 +16,6 @@ import { ReduxStore } from '../../store';
 import { LinksMap } from '../../types/api';
 import { AdvancedQueryOptionsMap, OperationMap } from '../../types/operations';
 import { api } from '../../utils';
-import { exportOperationToCSV } from '../../utils/operations';
 import { BasicModal } from '../BasicModal';
 import { CodeMirrorNext } from '../CodeMirrorNext';
 import { DatasetActionLink } from '../DatasetActionLink';
@@ -162,29 +159,6 @@ const OperationsTableCard: FunctionComponent<OperationsTableCardProps> = (props)
     }
   };
 
-  const exportCSV = (operationId: number, fileName: string) => {
-    const toastId = toast.loading(`Exporting ${fileName}.csv`);
-    exportOperationToCSV(operationId, fileName)
-      .then(() => {
-        toast.update(toastId, {
-          render: `Saved ${fileName}.csv`,
-          type: 'success',
-          isLoading: false,
-          position: 'top-right',
-          autoClose: 3000,
-        });
-      })
-      .catch(() => {
-        toast.update(toastId, {
-          render: `We had trouble exporting ${fileName}. The download will now be handled by your browser.`,
-          type: 'error',
-          isLoading: false,
-          position: 'top-right',
-          closeOnClick: true,
-        });
-      });
-  };
-
   const renderOperations = (operations: List<OperationMap>, allowEdit = false) => {
     if (operations && operations.count()) {
       return operations.map((operation, index) => {
@@ -215,15 +189,14 @@ const OperationsTableCard: FunctionComponent<OperationsTableCardProps> = (props)
               <Button variant="dark" size="sm" onClick={onViewSQLQuery(operation)}>
                 SQL Query
               </Button>
-              <Button
-                variant="dark"
-                size="sm"
-                onClick={() => {
-                  exportCSV(operation.get('id') as number, operation.get('name') as string);
-                }}
+              <a
+                className="btn btn-dark btn-sm"
+                href={`${api.routes.EXPORT}${operation.get('id')}/`}
+                target="_blank"
+                rel="noreferrer"
               >
                 Export to CSV
-              </Button>
+              </a>
               <DatasetActionLink operation={operation} action="history" onClick={onViewHistory}>
                 Versions
               </DatasetActionLink>

diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
@@ -4,7 +4,6 @@ import React, { ReactElement } from 'react';
 import { Dropdown, Modal, Nav, Navbar } from 'react-bootstrap';
 import { connect, MapDispatchToProps } from 'react-redux';
 import { BrowserRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 import { Segment } from 'semantic-ui-react';
 import styled from 'styled-components';
@@ -302,7 +301,6 @@ class MainLayout extends React.Component<MainLayoutProps, MainLayoutState> {
               <Modal show={!!ModalContent} onHide={this.closeModal} size={modalSize}>
                 {ModalContent ? <ModalContent /> : null}
               </Modal>
-              <ToastContainer position="bottom-right" />
             </AdminLayout.Content>
           </AdminLayout>
         </AppContext.Provider>

diff --git a/frontend/src/pages/QueryData/QueryData.tsx b/frontend/src/pages/QueryData/QueryData.tsx
@@ -1,14 +1,12 @@
 import React, { FunctionComponent } from 'react';
-import { Alert, Button, Card, Col, Form, Row } from 'react-bootstrap';
+import { Alert, Card, Col, Form, Row } from 'react-bootstrap';
 import { RouteComponentProps } from 'react-router';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 import { Dimmer, Loader } from 'semantic-ui-react';
 import { OperationDataTableContainer } from '../../components/OperationDataTableContainer';
 import { FetchOptions } from '../../types/api';
 import { OperationData, OperationMap } from '../../types/operations';
+import { api } from '../../utils';
 import { useOperation, useOperationData } from '../../utils/hooks/operations';
-import { exportOperationToCSV } from '../../utils/operations';
 
 interface RouteParams {
   id?: string;
@@ -52,29 +50,6 @@ const QueryData: FunctionComponent<QueryDataProps> = (props) => {
     return <div>{dataLoading ? 'Loading ...' : 'No results found'}</div>;
   };
 
-  const exportCSV = (operationId: number, fileName: string) => {
-    const toastId = toast.loading(`Exporting ${fileName}.csv`);
-    exportOperationToCSV(operationId, fileName)
-      .then(() => {
-        toast.update(toastId, {
-          render: `Saved ${fileName}.csv`,
-          type: 'success',
-          isLoading: false,
-          position: 'top-right',
-          autoClose: 3000,
-        });
-      })
-      .catch(() => {
-        toast.update(toastId, {
-          render: `We had trouble exporting ${fileName}. The download will now be handled by your browser.`,
-          type: 'error',
-          isLoading: false,
-          position: 'top-right',
-          closeOnClick: true,
-        });
-      });
-  };
-
   return (
     <Row>
       <Col>
@@ -88,19 +63,15 @@ const QueryData: FunctionComponent<QueryDataProps> = (props) => {
               {activeOperation ? (activeOperation.get('name') as string) : 'Query Data'}
             </Card.Text>
             <Form>
-              <Button
-                variant="danger"
-                size="sm"
+              <a
+                className="btn btn-danger btn-sm"
                 data-testid="dataset-export-button"
-                onClick={() => {
-                  exportCSV(
-                    activeOperation.get('id') as number,
-                    activeOperation.get('name') as string,
-                  );
-                }}
+                href={`${api.routes.EXPORT}${id}/`}
+                target="_blank"
+                rel="noreferrer"
               >
                 Export to CSV
-              </Button>
+              </a>
             </Form>
           </Card.Header>
           <Card.Body>{renderTable()}</Card.Body>

diff --git a/frontend/src/utils/operations.ts b/frontend/src/utils/operations.ts