Transactions Download functionality Improvements

changelog/update-9969-poll-async-job

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Improve CSV export experience and deliver consistent reports via async transact platform service-based CSV exports.

client/components/download-button/index.tsx

@@ -6,7 +6,6 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import CloudDownloadIcon from 'gridicons/dist/cloud-download';
 
 /**
  * Internal dependencies
@@ -15,21 +14,38 @@ import './style.scss';
 
 interface DownloadButtonProps {
 	isDisabled: boolean;
+	isBusy?: boolean;
 	onClick: ( event: any ) => void;
 }
 
 const DownloadButton: React.FunctionComponent< DownloadButtonProps > = ( {
 	isDisabled,
+	isBusy,
 	onClick,
 } ) => (
 	<Button
 		className="woocommerce-table__download-button"
 		disabled={ isDisabled }
 		onClick={ onClick }
+		isBusy={ isBusy }
 	>
-		<CloudDownloadIcon />
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+		>
+			<path d="M18.5 15v5H20v-5h-1.5zM4 15v5h1.5v-5H4zm0 5h16v-1.5H4V20z" />
+			<path
+				d="M12.25 16L6.5 10.75M12.25 16V3M12.25 16l5.25-5.25"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				fill="none"
+			/>
+		</svg>
 		<span className="woocommerce-table__download-button__label">
-			{ __( 'Download', 'woocommerce-payments' ) }
+			{ __( 'Export', 'woocommerce-payments' ) }
 		</span>
 	</Button>
 );

client/components/download-button/test/__snapshots__/index.tsx.snap

@@ -8,22 +8,26 @@ exports[`DownloadButton renders a disabled button 1`] = `
     type="button"
   >
     <svg
-      class="gridicon gridicons-cloud-download"
+      fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g>
-        <path
-          d="M18 9c-.009 0-.017.002-.025.003A6.496 6.496 0 005 9.5a6.5 6.5 0 00.186 1.519C5.123 11.016 5.064 11 5 11a4 4 0 00-4 4c0 1.202.541 2.267 1.38 3h18.593C22.196 17.089 23 15.643 23 14a5 5 0 00-5-5zm-6 7l-4-5h3V8h2v3h3l-4 5z"
-        />
-      </g>
+      <path
+        d="M18.5 15v5H20v-5h-1.5zM4 15v5h1.5v-5H4zm0 5h16v-1.5H4V20z"
+      />
+      <path
+        d="M12.25 16L6.5 10.75M12.25 16V3M12.25 16l5.25-5.25"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
     </svg>
     <span
       class="woocommerce-table__download-button__label"
     >
-      Download
+      Export
     </span>
   </button>
 </div>
@@ -36,22 +40,26 @@ exports[`DownloadButton renders an active button 1`] = `
     type="button"
   >
     <svg
-      class="gridicon gridicons-cloud-download"
+      fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g>
-        <path
-          d="M18 9c-.009 0-.017.002-.025.003A6.496 6.496 0 005 9.5a6.5 6.5 0 00.186 1.519C5.123 11.016 5.064 11 5 11a4 4 0 00-4 4c0 1.202.541 2.267 1.38 3h18.593C22.196 17.089 23 15.643 23 14a5 5 0 00-5-5zm-6 7l-4-5h3V8h2v3h3l-4 5z"
-        />
-      </g>
+      <path
+        d="M18.5 15v5H20v-5h-1.5zM4 15v5h1.5v-5H4zm0 5h16v-1.5H4V20z"
+      />
+      <path
+        d="M12.25 16L6.5 10.75M12.25 16V3M12.25 16l5.25-5.25"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
     </svg>
     <span
       class="woocommerce-table__download-button__label"
     >
-      Download
+      Export
     </span>
   </button>
 </div>

client/data/transactions/resolvers.js

@@ -88,9 +88,10 @@ export function* getTransactions( query ) {
 	}
 }
 
-export function getTransactionsCSV( query ) {
+export const transactionsDownloadEndpoint = `${ NAMESPACE }/transactions/download`;
+export function getTransactionsCSVRequestURL( query ) {
 	const path = addQueryArgs(
-		`${ NAMESPACE }/transactions/download`,
+		transactionsDownloadEndpoint,
 		formatQueryFilters( query )
 	);
 

client/deposits/list/test/__snapshots__/index.tsx.snap

@@ -107,22 +107,26 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
               type="button"
             >
               <svg
-                class="gridicon gridicons-cloud-download"
+                fill="currentColor"
                 height="24"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <g>
-                  <path
-                    d="M18 9c-.009 0-.017.002-.025.003A6.496 6.496 0 005 9.5a6.5 6.5 0 00.186 1.519C5.123 11.016 5.064 11 5 11a4 4 0 00-4 4c0 1.202.541 2.267 1.38 3h18.593C22.196 17.089 23 15.643 23 14a5 5 0 00-5-5zm-6 7l-4-5h3V8h2v3h3l-4 5z"
-                  />
-                </g>
+                <path
+                  d="M18.5 15v5H20v-5h-1.5zM4 15v5h1.5v-5H4zm0 5h16v-1.5H4V20z"
+                />
+                <path
+                  d="M12.25 16L6.5 10.75M12.25 16V3M12.25 16l5.25-5.25"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
               </svg>
               <span
                 class="woocommerce-table__download-button__label"
               >
-                Download
+                Export
               </span>
             </button>
           </div>
@@ -796,22 +800,26 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
               type="button"
             >
               <svg
-                class="gridicon gridicons-cloud-download"
+                fill="currentColor"
                 height="24"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <g>
-                  <path
-                    d="M18 9c-.009 0-.017.002-.025.003A6.496 6.496 0 005 9.5a6.5 6.5 0 00.186 1.519C5.123 11.016 5.064 11 5 11a4 4 0 00-4 4c0 1.202.541 2.267 1.38 3h18.593C22.196 17.089 23 15.643 23 14a5 5 0 00-5-5zm-6 7l-4-5h3V8h2v3h3l-4 5z"
-                  />
-                </g>
+                <path
+                  d="M18.5 15v5H20v-5h-1.5zM4 15v5h1.5v-5H4zm0 5h16v-1.5H4V20z"
+                />
+                <path
+                  d="M12.25 16L6.5 10.75M12.25 16V3M12.25 16l5.25-5.25"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
               </svg>
               <span
                 class="woocommerce-table__download-button__label"
               >
-                Download
+                Export
               </span>
             </button>
           </div>

client/deposits/list/test/index.tsx

@@ -245,15 +245,15 @@ describe( 'Deposits list', () => {
 		expect( tableSummary ).toHaveLength( 1 );
 	} );
 
-	describe( 'Download button', () => {
+	describe( 'Export button', () => {
 		test( 'renders when there are one or more deposits', () => {
 			mockUseDeposits.mockReturnValue( {
 				deposits: mockDeposits,
 				isLoading: false,
 			} as CachedDeposits );
 
 			const { queryByRole } = render( <DepositsList /> );
-			const button = queryByRole( 'button', { name: 'Download' } );
+			const button = queryByRole( 'button', { name: 'Export' } );
 
 			expect( button ).not.toBeNull();
 		} );
@@ -266,7 +266,7 @@ describe( 'Deposits list', () => {
 			} as CachedDeposits );
 
 			const { queryByRole } = render( <DepositsList /> );
-			const button = queryByRole( 'button', { name: 'Download' } );
+			const button = queryByRole( 'button', { name: 'Export' } );
 
 			expect( button ).toBeNull();
 		} );
@@ -291,7 +291,7 @@ describe( 'Deposits list', () => {
 
 		test( 'should render expected columns in CSV when the download button is clicked', () => {
 			const { getByRole } = render( <DepositsList /> );
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			const expected = [
 				'"Payout Id"',
@@ -310,7 +310,7 @@ describe( 'Deposits list', () => {
 
 		test( 'should match the visible rows', () => {
 			const { getByRole, getAllByRole } = render( <DepositsList /> );
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			const csvContent = mockDownloadCSVFile.mock.calls[ 0 ][ 1 ];
 			const csvRows = csvContent.split( os.EOL );
@@ -363,7 +363,7 @@ describe( 'Deposits list', () => {
 
 			const { getByRole } = render( <DepositsList /> );
 
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			expect( window.confirm ).toHaveBeenCalledTimes( 1 );
 			expect( window.confirm ).toHaveBeenCalledWith(
@@ -392,7 +392,7 @@ describe( 'Deposits list', () => {
 
 			const { getByRole } = render( <DepositsList /> );
 
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			expect( window.confirm ).toHaveBeenCalledTimes( 1 );
 			expect( window.confirm ).toHaveBeenCalledWith(

client/disputes/test/__snapshots__/index.tsx.snap

@@ -79,22 +79,26 @@ exports[`Disputes list renders correctly 1`] = `
               type="button"
             >
               <svg
-                class="gridicon gridicons-cloud-download"
+                fill="currentColor"
                 height="24"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <g>
-                  <path
-                    d="M18 9c-.009 0-.017.002-.025.003A6.496 6.496 0 005 9.5a6.5 6.5 0 00.186 1.519C5.123 11.016 5.064 11 5 11a4 4 0 00-4 4c0 1.202.541 2.267 1.38 3h18.593C22.196 17.089 23 15.643 23 14a5 5 0 00-5-5zm-6 7l-4-5h3V8h2v3h3l-4 5z"
-                  />
-                </g>
+                <path
+                  d="M18.5 15v5H20v-5h-1.5zM4 15v5h1.5v-5H4zm0 5h16v-1.5H4V20z"
+                />
+                <path
+                  d="M12.25 16L6.5 10.75M12.25 16V3M12.25 16l5.25-5.25"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
               </svg>
               <span
                 class="woocommerce-table__download-button__label"
               >
-                Download
+                Export
               </span>
             </button>
           </div>

client/disputes/test/index.tsx

@@ -278,7 +278,7 @@ describe( 'Disputes list', () => {
 			} );
 
 			const { queryByRole } = render( <DisputesList /> );
-			const button = queryByRole( 'button', { name: 'Download' } );
+			const button = queryByRole( 'button', { name: 'Export' } );
 
 			expect( button ).not.toBeNull();
 		} );
@@ -290,7 +290,7 @@ describe( 'Disputes list', () => {
 			} );
 
 			const { queryByRole } = render( <DisputesList /> );
-			const button = queryByRole( 'button', { name: 'Download' } );
+			const button = queryByRole( 'button', { name: 'Export' } );
 
 			expect( button ).toBeNull();
 		} );
@@ -323,7 +323,7 @@ describe( 'Disputes list', () => {
 
 			const { getByRole } = render( <DisputesList /> );
 
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			expect( window.confirm ).toHaveBeenCalledTimes( 1 );
 			expect( window.confirm ).toHaveBeenCalledWith(
@@ -342,7 +342,7 @@ describe( 'Disputes list', () => {
 
 		test( 'should render expected columns in CSV when the download button is clicked ', () => {
 			const { getByRole } = render( <DisputesList /> );
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			const expected = [
 				'"Dispute Id"',
@@ -366,7 +366,7 @@ describe( 'Disputes list', () => {
 
 		test( 'should match the visible rows', () => {
 			const { getByRole, getAllByRole } = render( <DisputesList /> );
-			getByRole( 'button', { name: 'Download' } ).click();
+			getByRole( 'button', { name: 'Export' } ).click();
 
 			const csvContent = mockDownloadCSVFile.mock.calls[ 0 ][ 1 ];
 			const csvRows = csvContent.split( os.EOL );