From 7df8feb06a7bfde1240cfa4f35805ee55704047a Mon Sep 17 00:00:00 2001 From: "Edwin P. Magezi" Date: Mon, 27 Jun 2022 10:43:53 +0300 Subject: [PATCH] Revert export progress indicator --- frontend/cypress/integration/datasets.spec.js | 25 ----------- .../OperationsTableCard.tsx | 39 +++------------- frontend/src/layouts/MainLayout.tsx | 2 - frontend/src/pages/QueryData/QueryData.tsx | 45 ++++--------------- frontend/src/utils/operations.ts | 45 ------------------- 5 files changed, 14 insertions(+), 142 deletions(-) delete mode 100644 frontend/src/utils/operations.ts diff --git a/frontend/cypress/integration/datasets.spec.js b/frontend/cypress/integration/datasets.spec.js index 8392a2fb7..28549fd4d 100644 --- 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 index 5786302f6..dbc27f5a8 100644 --- 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 = (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, allowEdit = false) => { if (operations && operations.count()) { return operations.map((operation, index) => { @@ -215,15 +189,14 @@ const OperationsTableCard: FunctionComponent = (props) - + Versions diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx index a63727fa7..c20404cb9 100644 --- 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 { {ModalContent ? : null} - diff --git a/frontend/src/pages/QueryData/QueryData.tsx b/frontend/src/pages/QueryData/QueryData.tsx index 1ca4a6e56..a575d376f 100644 --- 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 = (props) => { return
{dataLoading ? 'Loading ...' : 'No results found'}
; }; - 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 ( @@ -88,19 +63,15 @@ const QueryData: FunctionComponent = (props) => { {activeOperation ? (activeOperation.get('name') as string) : 'Query Data'}
- +
{renderTable()} diff --git a/frontend/src/utils/operations.ts b/frontend/src/utils/operations.ts deleted file mode 100644 index cc3a697cc..000000000 --- a/frontend/src/utils/operations.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { parse, unparse } from 'papaparse'; -import { api } from './api'; - -export const exportOperationToCSV = (operationId: number, fileName: string): Promise => { - const exportURL = `${api.routes.EXPORT}${operationId}/`; - - return new Promise((resolve, reject) => { - const csvResults: unknown[] = []; - let columns: string[] | undefined; - parse(exportURL, { - step: function (results) { - csvResults.push(results.data); - if (!columns) { - columns = results.meta.fields; - } - }, - download: true, - header: true, - dynamicTyping: true, - error: function (error) { - console.log(error); - saveCSV(fileName, exportURL); - reject(error.message); - }, - complete: function () { - saveCSV(fileName, createUrlFromCSVString(unparse(csvResults))); - resolve('done'); - }, - }); - }); -}; - -const saveCSV = (fileName: string, url: string): void => { - const tempLink = document.createElement('a'); - tempLink.href = url; - tempLink.setAttribute('download', `${fileName}.csv`); - tempLink.setAttribute('target', '_blank'); - tempLink.click(); -}; - -const createUrlFromCSVString = (csvString: string): string => { - const csvData = new Blob([csvString], { type: 'text/csv;charset=utf-8;' }); - - return window.URL.createObjectURL(csvData); -};