From d31aae633afd91582afccdc48418e42968c6db14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Wed, 21 Aug 2024 20:12:13 +0200 Subject: [PATCH] Move `ReportError` to `@woocommerce/components` as `AnalyticsError` (#50108) Co-authored-by: Eason --- .../changelog/36052-dev-move-report-error | 4 ++ .../components/src/analytics/error/README.md | 15 +++++ .../components/src/analytics/error}/index.js | 15 +++-- .../src/analytics/error/stories/index.tsx | 19 ++++++ .../tests/__snapshots__/index.test.js.snap | 31 ++++++++++ .../src/analytics/error/tests/index.test.js | 62 +++++++++++++++++++ packages/js/components/src/analytics/index.js | 1 + packages/js/components/src/index.ts | 1 + .../client/analytics/components/index.js | 1 - .../analytics/components/leaderboard/index.js | 5 +- .../components/report-chart/index.js | 7 +-- .../components/report-summary/index.js | 6 +- .../components/report-summary/test/index.js | 2 +- .../components/report-table/index.js | 12 ++-- .../client/analytics/report/index.js | 4 +- .../client/analytics/report/products/index.js | 4 +- .../analytics/report/variations/index.js | 4 +- .../changelog/36052-dev-move-report-error | 4 ++ 18 files changed, 170 insertions(+), 27 deletions(-) create mode 100644 packages/js/components/changelog/36052-dev-move-report-error create mode 100644 packages/js/components/src/analytics/error/README.md rename {plugins/woocommerce-admin/client/analytics/components/report-error => packages/js/components/src/analytics/error}/index.js (72%) create mode 100644 packages/js/components/src/analytics/error/stories/index.tsx create mode 100644 packages/js/components/src/analytics/error/tests/__snapshots__/index.test.js.snap create mode 100644 packages/js/components/src/analytics/error/tests/index.test.js create mode 100644 packages/js/components/src/analytics/index.js create mode 100644 plugins/woocommerce/changelog/36052-dev-move-report-error diff --git a/packages/js/components/changelog/36052-dev-move-report-error b/packages/js/components/changelog/36052-dev-move-report-error new file mode 100644 index 00000000000..d5179293484 --- /dev/null +++ b/packages/js/components/changelog/36052-dev-move-report-error @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add AnalyticsError component. diff --git a/packages/js/components/src/analytics/error/README.md b/packages/js/components/src/analytics/error/README.md new file mode 100644 index 00000000000..94557260e9a --- /dev/null +++ b/packages/js/components/src/analytics/error/README.md @@ -0,0 +1,15 @@ +# AnalyticsError + +Standard error message with reload action used in Analytics pages. + +## Usage + +```jsx + +``` + +### Props + +Name | Type | Default | Description +--- | --- | --- | --- +`className` | String | `null` | Additional CSS classes diff --git a/plugins/woocommerce-admin/client/analytics/components/report-error/index.js b/packages/js/components/src/analytics/error/index.js similarity index 72% rename from plugins/woocommerce-admin/client/analytics/components/report-error/index.js rename to packages/js/components/src/analytics/error/index.js index d511bf88dce..1c46fbce032 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-error/index.js +++ b/packages/js/components/src/analytics/error/index.js @@ -3,16 +3,21 @@ */ import { __ } from '@wordpress/i18n'; import PropTypes from 'prop-types'; -import { EmptyContent } from '@woocommerce/components'; +import { createElement } from '@wordpress/element'; /** - * Component to render when there is an error in a report component due to data + * Internal dependencies + */ +import EmptyContent from '../../empty-content'; + +/** + * Component to render when there is an error in an analytics 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. */ -function ReportError( { className } ) { +function AnalyticsError( { className } ) { const title = __( 'There was an error getting your stats. Please try again.', 'woocommerce' @@ -32,11 +37,11 @@ function ReportError( { className } ) { ); } -ReportError.propTypes = { +AnalyticsError.propTypes = { /** * Additional class name to style the component. */ className: PropTypes.string, }; -export default ReportError; +export default AnalyticsError; diff --git a/packages/js/components/src/analytics/error/stories/index.tsx b/packages/js/components/src/analytics/error/stories/index.tsx new file mode 100644 index 00000000000..f744f7ca954 --- /dev/null +++ b/packages/js/components/src/analytics/error/stories/index.tsx @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; +import { Story } from '@storybook/react'; + +/** + * Internal dependencies + */ +import AnalyticsError from '../'; + +const Template: Story = ( args ) => ; + +export const Basic = Template.bind( {} ); + +export default { + title: 'WooCommerce Admin/components/analytics/AnalyticsError', + component: AnalyticsError, +}; diff --git a/packages/js/components/src/analytics/error/tests/__snapshots__/index.test.js.snap b/packages/js/components/src/analytics/error/tests/__snapshots__/index.test.js.snap new file mode 100644 index 00000000000..e73eaf25d72 --- /dev/null +++ b/packages/js/components/src/analytics/error/tests/__snapshots__/index.test.js.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AnalyticsError should match snapshot 1`] = ` +
+
+ +

+ There was an error getting your stats. Please try again. +

+
+ +
+
+
+`; diff --git a/packages/js/components/src/analytics/error/tests/index.test.js b/packages/js/components/src/analytics/error/tests/index.test.js new file mode 100644 index 00000000000..d01f55c8724 --- /dev/null +++ b/packages/js/components/src/analytics/error/tests/index.test.js @@ -0,0 +1,62 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +/** + * Internal dependencies + */ +import AnalyticsError from '..'; + +describe( 'AnalyticsError', () => { + // Mock window.location.reload by using a global variable + const originalLocation = window.location; + + beforeAll( () => { + delete window.location; + window.location = { reload: jest.fn() }; + } ); + + afterAll( () => { + window.location = originalLocation; + } ); + + it( 'displays an error message', () => { + render( ); + + expect( + screen.getByText( + 'There was an error getting your stats. Please try again.' + ) + ).toBeInTheDocument(); + } ); + + it( 'shows reload button', () => { + render( ); + + expect( + screen.getByRole( 'button', { name: 'Reload' } ) + ).toBeInTheDocument(); + } ); + + it( 'refreshes the page when Reload Page button is clicked', () => { + const reloadMock = jest.fn(); + Object.defineProperty( window.location, 'reload', { + configurable: true, + value: reloadMock, + } ); + + render( ); + + userEvent.click( screen.getByText( 'Reload' ) ); + + expect( reloadMock ).toHaveBeenCalled(); + } ); + + it( 'should match snapshot', () => { + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/js/components/src/analytics/index.js b/packages/js/components/src/analytics/index.js new file mode 100644 index 00000000000..ebf10a5b7e5 --- /dev/null +++ b/packages/js/components/src/analytics/index.js @@ -0,0 +1 @@ +export { default as AnalyticsError } from './error'; diff --git a/packages/js/components/src/index.ts b/packages/js/components/src/index.ts index ff64f547fda..06914504e6a 100644 --- a/packages/js/components/src/index.ts +++ b/packages/js/components/src/index.ts @@ -1,5 +1,6 @@ export { default as AbbreviatedCard } from './abbreviated-card'; export { default as AdvancedFilters } from './advanced-filters'; +export * from './analytics'; export { default as AnimationSlider } from './animation-slider'; export { default as Chart } from './chart'; export { default as ChartPlaceholder } from './chart/placeholder'; diff --git a/plugins/woocommerce-admin/client/analytics/components/index.js b/plugins/woocommerce-admin/client/analytics/components/index.js index cc02f168d36..4ee3476b0b2 100644 --- a/plugins/woocommerce-admin/client/analytics/components/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/index.js @@ -1,4 +1,3 @@ export { default as ReportChart } from './report-chart'; -export { default as ReportError } from './report-error'; export { default as ReportSummary } from './report-summary'; export { default as ReportTable } from './report-table'; diff --git a/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js b/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js index 98e9bdbd9b3..2e8d406247f 100644 --- a/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n'; import { Card, CardBody, CardHeader } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { compose } from '@wordpress/compose'; -import { EmptyTable, TableCard } from '@woocommerce/components'; +import { EmptyTable, AnalyticsError, TableCard } from '@woocommerce/components'; import { withSelect } from '@wordpress/data'; import PropTypes from 'prop-types'; import { getPersistedQuery } from '@woocommerce/navigation'; @@ -21,7 +21,6 @@ import { Text } from '@woocommerce/experimental'; /** * Internal dependencies */ -import ReportError from '../report-error'; import sanitizeHTML from '../../../lib/sanitize-html'; import './style.scss'; @@ -88,7 +87,7 @@ export class Leaderboard extends Component { const classes = 'woocommerce-leaderboard'; if ( isError ) { - return ; + return ; } const rows = this.getFormattedRows(); diff --git a/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js b/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js index 31f714c3d91..a19830c0b44 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js @@ -8,7 +8,7 @@ import { format as formatDate } from '@wordpress/date'; import { withSelect } from '@wordpress/data'; import { get, isEqual } from 'lodash'; import PropTypes from 'prop-types'; -import { Chart } from '@woocommerce/components'; +import { Chart, AnalyticsError } from '@woocommerce/components'; import { getReportChartData, getTooltipValueFormat, @@ -27,7 +27,6 @@ import { CurrencyContext } from '@woocommerce/currency'; /** * Internal dependencies */ -import ReportError from '../report-error'; import { getChartMode, getSelectedFilter, @@ -197,7 +196,7 @@ export class ReportChart extends Component { const { isRequesting, primaryData } = this.props; if ( primaryData.isError ) { - return ; + return ; } const isChartRequesting = isRequesting || primaryData.isRequesting; @@ -214,7 +213,7 @@ export class ReportChart extends Component { const { isRequesting, primaryData, secondaryData } = this.props; if ( ! primaryData || primaryData.isError || secondaryData.isError ) { - return ; + return ; } const isChartRequesting = diff --git a/plugins/woocommerce-admin/client/analytics/components/report-summary/index.js b/plugins/woocommerce-admin/client/analytics/components/report-summary/index.js index 57eefcd17f2..ac1b509619b 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-summary/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/report-summary/index.js @@ -8,6 +8,7 @@ import { withSelect } from '@wordpress/data'; import PropTypes from 'prop-types'; import { getNewPath } from '@woocommerce/navigation'; import { + AnalyticsError, SummaryList, SummaryListPlaceholder, SummaryNumber, @@ -21,7 +22,6 @@ import { CurrencyContext } from '@woocommerce/currency'; /** * Internal dependencies */ -import ReportError from '../report-error'; /** * Component to render summary numbers in reports. @@ -64,7 +64,7 @@ export class ReportSummary extends Component { const { isError, isRequesting } = summaryData; if ( isError ) { - return ; + return ; } if ( isRequesting ) { @@ -138,7 +138,7 @@ ReportSummary.propTypes = { * The endpoint to use in API calls to populate the Summary Numbers. * For example, if `taxes` is provided, data will be fetched from the report * `taxes` endpoint (ie: `/wc-analytics/reports/taxes/stats`). If the provided endpoint - * doesn't exist, an error will be shown to the user with `ReportError`. + * doesn't exist, an error will be shown to the user with `AnalyticsError`. */ endpoint: PropTypes.string.isRequired, /** diff --git a/plugins/woocommerce-admin/client/analytics/components/report-summary/test/index.js b/plugins/woocommerce-admin/client/analytics/components/report-summary/test/index.js index fa51e9abde8..970dee29eec 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-summary/test/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/report-summary/test/index.js @@ -124,7 +124,7 @@ describe( 'ReportSummary', () => { expect( delta ).toBeInTheDocument(); } ); - test( 'should display ReportError when isError is true', () => { + test( 'should display AnalyticsError when isError is true', () => { renderChart( 'number', null, null, true ); expect( diff --git a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js index f43cf9f7996..6e049a9bacd 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js @@ -11,7 +11,12 @@ import { get, partial, uniq } from 'lodash'; import { __, sprintf } from '@wordpress/i18n'; import PropTypes from 'prop-types'; import { STORE_KEY as CES_STORE_KEY } from '@woocommerce/customer-effort-score'; -import { CompareButton, Search, TableCard } from '@woocommerce/components'; +import { + CompareButton, + AnalyticsError, + Search, + TableCard, +} from '@woocommerce/components'; import { getIdsFromQuery, getSearchWords, @@ -38,7 +43,6 @@ import { recordEvent } from '@woocommerce/tracks'; * Internal dependencies */ import DownloadIcon from './download-icon'; -import ReportError from '../report-error'; import { extendTableData } from './utils'; import './style.scss'; @@ -89,7 +93,7 @@ const ReportTable = ( props ) => { const isError = tableData.isError || primaryData.isError; if ( isError ) { - return ; + return ; } let userPrefColumns = []; @@ -489,7 +493,7 @@ ReportTable.propTypes = { * For example, if `taxes` is provided, data will be fetched from the report * `taxes` endpoint (ie: `/wc-analytics/reports/taxes` and `/wc/v4/reports/taxes/stats`). * If the provided endpoint doesn't exist, an error will be shown to the user - * with `ReportError`. + * with `AnalyticsError`. */ endpoint: PropTypes.string, /** diff --git a/plugins/woocommerce-admin/client/analytics/report/index.js b/plugins/woocommerce-admin/client/analytics/report/index.js index 85118becdbf..3a7da1d481d 100644 --- a/plugins/woocommerce-admin/client/analytics/report/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/index.js @@ -8,6 +8,7 @@ import PropTypes from 'prop-types'; import { find } from 'lodash'; import { getQuery, getSearchWords } from '@woocommerce/navigation'; import { searchItemsByString, ITEMS_STORE_NAME } from '@woocommerce/data'; +import { AnalyticsError } from '@woocommerce/components'; import { CurrencyContext, getFilteredCurrencyInstance, @@ -18,7 +19,6 @@ import { */ import './style.scss'; import { NoMatch } from '~/layout/NoMatch'; -import ReportError from '../components/report-error'; import getReports from './get-reports'; /** @@ -83,7 +83,7 @@ class Report extends Component { const { isError } = this.props; if ( isError ) { - return ; + return ; } const reportParam = getReportParam( this.props ); diff --git a/plugins/woocommerce-admin/client/analytics/report/products/index.js b/plugins/woocommerce-admin/client/analytics/report/products/index.js index b3d7d893998..9307d67e207 100644 --- a/plugins/woocommerce-admin/client/analytics/report/products/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/products/index.js @@ -6,6 +6,7 @@ import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import PropTypes from 'prop-types'; import { ITEMS_STORE_NAME } from '@woocommerce/data'; +import { AnalyticsError } from '@woocommerce/components'; import { withSelect } from '@wordpress/data'; /** @@ -15,7 +16,6 @@ import { advancedFilters, charts, filters } from './config'; import getSelectedChart from '../../../lib/get-selected-chart'; import ProductsReportTable from './table'; import ReportChart from '../../components/report-chart'; -import ReportError from '../../components/report-error'; import ReportSummary from '../../components/report-summary'; import VariationsReportTable from '../variations/table'; import ReportFilters from '../../components/report-filters'; @@ -57,7 +57,7 @@ class ProductsReport extends Component { this.props; if ( isError ) { - return ; + return ; } const chartQuery = { diff --git a/plugins/woocommerce-admin/client/analytics/report/variations/index.js b/plugins/woocommerce-admin/client/analytics/report/variations/index.js index cffd21f496b..17eb554577d 100644 --- a/plugins/woocommerce-admin/client/analytics/report/variations/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/variations/index.js @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; import PropTypes from 'prop-types'; +import { AnalyticsError } from '@woocommerce/components'; /** * Internal dependencies @@ -11,7 +12,6 @@ import PropTypes from 'prop-types'; import { advancedFilters, charts, filters } from './config'; import getSelectedChart from '../../../lib/get-selected-chart'; import ReportChart from '../../components/report-chart'; -import ReportError from '../../components/report-error'; import ReportSummary from '../../components/report-summary'; import VariationsReportTable from './table'; import ReportFilters from '../../components/report-filters'; @@ -35,7 +35,7 @@ const VariationsReport = ( props ) => { const { path, query, isError, isRequesting } = props; if ( isError ) { - return ; + return ; } const chartQuery = { diff --git a/plugins/woocommerce/changelog/36052-dev-move-report-error b/plugins/woocommerce/changelog/36052-dev-move-report-error new file mode 100644 index 00000000000..20189d203e2 --- /dev/null +++ b/plugins/woocommerce/changelog/36052-dev-move-report-error @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Move `ReportError` to `@woocommerce/components` as `AnalyticsError`