Reduce the specificity and complexity of the `ReportError` component (https://github.com/woocommerce/woocommerce-admin/pull/6846)

- Remove unused `isEmpty` prop from ReportError. 
- Remove `isError` prop from ReportError, as it is always set. Also, to reduce confusion that: Could "report error" be not an error?
- Remove default value of `className` prop from `ReportError`, it is unnecesary, as `EmptyContent` takes falsy values as well as `''`.
- Change `ReportError` to a function component.

plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js

@@ -58,7 +58,7 @@ export class Leaderboard extends Component {
 		const classes = 'woocommerce-leaderboard';
 
 		if ( isError ) {
-			return <ReportError className={ classes } isError />;
+			return <ReportError className={ classes } />;
 		}
 
 		const rows = this.getFormattedRows();

plugins/woocommerce-admin/client/analytics/components/report-chart/index.js

@@ -208,7 +208,7 @@ export class ReportChart extends Component {
 		const { isRequesting, primaryData } = this.props;
 
 		if ( primaryData.isError ) {
-			return <ReportError isError />;
+			return <ReportError />;
 		}
 
 		const isChartRequesting = isRequesting || primaryData.isRequesting;
@@ -225,7 +225,7 @@ export class ReportChart extends Component {
 		const { isRequesting, primaryData, secondaryData } = this.props;
 
 		if ( ! primaryData || primaryData.isError || secondaryData.isError ) {
-			return <ReportError isError />;
+			return <ReportError />;
 		}
 
 		const isChartRequesting =

plugins/woocommerce-admin/client/analytics/components/report-error/index.js

@@ -2,48 +2,34 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { EmptyContent } from '@woocommerce/components';
-import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Component to render when there is an error in a report component due to data
  * not being loaded or being invalid.
+ *
+ * @param {Object} props React props.
+ * @param {string} [props.className] Additional class name to style the component.
  */
-class ReportError extends Component {
-	render() {
-		const { className, isError, isEmpty } = this.props;
-		let title, actionLabel, actionURL, actionCallback;
-
-		if ( isError ) {
-			title = __(
-				'There was an error getting your stats. Please try again.',
-				'woocommerce-admin'
-			);
-			actionLabel = __( 'Reload', 'woocommerce-admin' );
-			actionCallback = () => {
-				// @todo Add tracking for how often an error is displayed, and the reload action is clicked.
-				window.location.reload();
-			};
-		} else if ( isEmpty ) {
-			title = __(
-				'No results could be found for this date range.',
-				'woocommerce-admin'
-			);
-			actionLabel = __( 'View Orders', 'woocommerce-admin' );
-			actionURL = getAdminLink( 'edit.php?post_type=shop_order' );
-		}
-		return (
-			<EmptyContent
-				className={ className }
-				title={ title }
-				actionLabel={ actionLabel }
-				actionURL={ actionURL }
-				actionCallback={ actionCallback }
-			/>
-		);
-	}
+function ReportError( { className } ) {
+	const title = __(
+		'There was an error getting your stats. Please try again.',
+		'woocommerce-admin'
+	);
+	const actionLabel = __( 'Reload', 'woocommerce-admin' );
+	const actionCallback = () => {
+		// @todo Add tracking for how often an error is displayed, and the reload action is clicked.
+		window.location.reload();
+	};
+	return (
+		<EmptyContent
+			className={ className }
+			title={ title }
+			actionLabel={ actionLabel }
+			actionCallback={ actionCallback }
+		/>
+	);
 }
 
 ReportError.propTypes = {
@@ -51,18 +37,6 @@ ReportError.propTypes = {
 	 * Additional class name to style the component.
 	 */
 	className: PropTypes.string,
-	/**
-	 * Boolean representing whether there was an error.
-	 */
-	isError: PropTypes.bool,
-	/**
-	 * Boolean representing whether the issue is that there is no data.
-	 */
-	isEmpty: PropTypes.bool,
-};
-
-ReportError.defaultProps = {
-	className: '',
 };
 
 export default ReportError;

plugins/woocommerce-admin/client/analytics/components/report-summary/index.js

@@ -64,7 +64,7 @@ export class ReportSummary extends Component {
 		const { isError, isRequesting } = summaryData;
 
 		if ( isError ) {
-			return <ReportError isError />;
+			return <ReportError />;
 		}
 
 		if ( isRequesting ) {

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -82,7 +82,7 @@ const ReportTable = ( props ) => {
 	const isError = tableData.isError || primaryData.isError;
 
 	if ( isError ) {
-		return <ReportError isError />;
+		return <ReportError />;
 	}
 
 	let userPrefColumns = [];

plugins/woocommerce-admin/client/analytics/report/index.js

@@ -60,7 +60,7 @@ class Report extends Component {
 		const { isError } = this.props;
 
 		if ( isError ) {
-			return <ReportError isError />;
+			return <ReportError />;
 		}
 
 		const reportParam = getReportParam( this.props );

plugins/woocommerce-admin/client/analytics/report/products/index.js

@@ -63,7 +63,7 @@ class ProductsReport extends Component {
 		} = this.props;
 
 		if ( isError ) {
-			return <ReportError isError />;
+			return <ReportError />;
 		}
 
 		const chartQuery = {

plugins/woocommerce-admin/client/analytics/report/variations/index.js

@@ -34,7 +34,7 @@ const VariationsReport = ( props ) => {
 	const { path, query, isError, isRequesting } = props;
 
 	if ( isError ) {
-		return <ReportError isError />;
+		return <ReportError />;
 	}
 
 	const chartQuery = {

plugins/woocommerce-admin/docs/components/analytics/report-error.md

@@ -1,12 +1,12 @@
 ReportError
 ===
 
-Component to render when there is an error in a report component due to data
-not being loaded or being invalid.
+Component to render when there is an error in a report component.
 
 ## Usage
 
 ```jsx
+<ReportError />
 ```
 
 ### Props
@@ -14,5 +14,3 @@ not being loaded or being invalid.
 Name | Type | Default | Description
 --- | --- | --- | ---
 `className` | String | ``''`` | Additional class name to style the component
-`isError` | Boolean | ``null`` | Boolean representing whether there was an error
-`isEmpty` | Boolean | ``null`` | Boolean representing whether the issue is that there is no data

plugins/woocommerce-admin/readme.txt

@@ -74,6 +74,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 == Changelog ==
 
 == Unreleased ==
+- Dev: Reduce the specificity and complexity of the ReportError component #6846
 - Add: Create onboarding package to house refactored WCPay card and relevant components #7058
 - Fix: Preventing redundant notices when installing plugins via payments task list. #7026
 - Fix: Autocompleter for custom Search in CompareFilter #6911