Custom dimension tile wrapper

assets/js/components/KeyMetrics/MetricTileError/GetHelpLink.js → assets/js/components/KeyMetrics/GetHelpLink.js

@@ -30,7 +30,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Link from '../../Link';
+import Link from '../Link';
 
 export default function GetHelpLink( { linkURL } ) {
 	return createInterpolateElement(

assets/js/components/KeyMetrics/InfoTooltip.js

@@ -0,0 +1,53 @@
+/**
+ * InfoTooltip component.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Tooltip } from 'googlesitekit-components';
+import InfoIcon from '../../../svg/icons/info-green.svg';
+
+export default function InfoTooltip( { title } ) {
+	if ( ! title ) {
+		return null;
+	}
+
+	return (
+		<Tooltip
+			tooltipClassName="googlesitekit-km-widget-tile-title__tooltip"
+			title={ title }
+			placement="top"
+			enterTouchDelay={ 0 }
+			leaveTouchDelay={ 5000 }
+			interactive
+		>
+			<span>
+				<InfoIcon width="16" height="16" />
+			</span>
+		</Tooltip>
+	);
+}
+
+InfoTooltip.propTypes = {
+	title: PropTypes.string,
+};

assets/js/components/KeyMetrics/MetricTileError/index.js → assets/js/components/KeyMetrics/MetricTileError.js

@@ -16,51 +16,27 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import CTA from '../../notifications/CTA';
-import ReportErrorActions from '../../ReportErrorActions';
-import GetHelpLink from './GetHelpLink';
-import { isInsufficientPermissionsError } from '../../../util/errors';
+import CTA from '../notifications/CTA';
+import InfoTooltip from './InfoTooltip';
 
 export default function MetricTileError( props ) {
-	const { error, headerText, moduleSlug } = props;
-	const hasInsufficientPermissionsError = castArray( error ).some(
-		isInsufficientPermissionsError
-	);
+	const { children, headerText, infoTooltip, title } = props;
 
 	return (
 		<div className="googlesitekit-km-widget-tile--error">
 			<CTA
-				title={
-					hasInsufficientPermissionsError
-						? __( 'Insufficient permissions', 'google-site-kit' )
-						: __( 'Data loading failed', 'google-site-kit' )
-				}
+				title={ title }
 				headerText={ headerText }
+				headerContent={
+					infoTooltip && <InfoTooltip title={ infoTooltip } />
+				}
 				description=""
 				error
 			>
-				<ReportErrorActions
-					moduleSlug={ moduleSlug }
-					error={ error }
-					GetHelpLink={
-						hasInsufficientPermissionsError
-							? GetHelpLink
-							: undefined
-					}
-				/>
+				{ children }
 			</CTA>
 		</div>
 	);

assets/js/components/KeyMetrics/MetricTileHeader.js

@@ -24,27 +24,13 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Tooltip } from 'googlesitekit-components';
-import InfoIcon from '../../../svg/icons/info-green.svg';
+import InfoTooltip from './InfoTooltip';
 
 export default function MetricTileHeader( { title, infoTooltip } ) {
 	return (
 		<div className="googlesitekit-km-widget-tile__title-container">
 			<h3 className="googlesitekit-km-widget-tile__title">{ title }</h3>
-			{ infoTooltip && (
-				<Tooltip
-					tooltipClassName="googlesitekit-km-widget-tile-title__tooltip"
-					title={ infoTooltip }
-					placement="top"
-					enterTouchDelay={ 0 }
-					leaveTouchDelay={ 5000 }
-					interactive
-				>
-					<span>
-						<InfoIcon width="16" height="16" />
-					</span>
-				</Tooltip>
-			) }
+			<InfoTooltip title={ infoTooltip } />
 		</div>
 	);
 }

assets/js/components/KeyMetrics/MetricTileNumeric.js

@@ -21,82 +21,44 @@
  */
 import PropTypes from 'prop-types';
 
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import { numFmt, expandNumFmtOptions } from '../../util';
 import ChangeBadge from '../ChangeBadge';
-import MetricTileError from './MetricTileError';
-import MetricTileLoader from './MetricTileLoader';
-import MetricTileHeader from './MetricTileHeader';
-
-export default function MetricTileNumeric( props ) {
-	const {
-		Widget,
-		loading,
-		title,
-		metricValue,
-		metricValueFormat,
-		subText,
-		previousValue,
-		currentValue,
-		error,
-		moduleSlug,
-		infoTooltip,
-	} = props;
+import MetricTileWrapper from './MetricTileWrapper';
 
+export default function MetricTileNumeric( {
+	metricValue,
+	metricValueFormat,
+	subText,
+	previousValue,
+	currentValue,
+	...props
+} ) {
 	const formatOptions = expandNumFmtOptions( metricValueFormat );
 
-	if ( error ) {
-		return (
-			<MetricTileError
-				moduleSlug={ moduleSlug }
-				error={ error }
-				headerText={ title }
-			/>
-		);
-	}
-
 	return (
-		<Widget noPadding>
-			<div className="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--numeric">
-				<MetricTileHeader title={ title } infoTooltip={ infoTooltip } />
-				<div className="googlesitekit-km-widget-tile__body">
-					{ loading && <MetricTileLoader /> }
-					{ ! loading && (
-						<Fragment>
-							<div className="googlesitekit-km-widget-tile__metric-change-container">
-								<div className="googlesitekit-km-widget-tile__metric">
-									{ numFmt( metricValue, formatOptions ) }
-								</div>
-								<ChangeBadge
-									previousValue={ previousValue }
-									currentValue={ currentValue }
-									isAbsolute={
-										formatOptions?.style === 'percent'
-									}
-								/>
-							</div>
-							<p className="googlesitekit-km-widget-tile__subtext">
-								{ subText }
-							</p>
-						</Fragment>
-					) }
+		<MetricTileWrapper
+			className="googlesitekit-km-widget-tile--numeric"
+			{ ...props }
+		>
+			<div className="googlesitekit-km-widget-tile__metric-change-container">
+				<div className="googlesitekit-km-widget-tile__metric">
+					{ numFmt( metricValue, formatOptions ) }
 				</div>
+				<ChangeBadge
+					previousValue={ previousValue }
+					currentValue={ currentValue }
+					isAbsolute={ formatOptions?.style === 'percent' }
+				/>
 			</div>
-		</Widget>
+			<p className="googlesitekit-km-widget-tile__subtext">{ subText }</p>
+		</MetricTileWrapper>
 	);
 }
 
 MetricTileNumeric.propTypes = {
-	Widget: PropTypes.elementType.isRequired,
-	loading: PropTypes.bool,
-	title: PropTypes.string,
 	metricValue: PropTypes.oneOfType( [ PropTypes.string, PropTypes.number ] ),
 	metricValueFormat: PropTypes.oneOfType( [
 		PropTypes.string,
@@ -105,10 +67,4 @@ MetricTileNumeric.propTypes = {
 	subtext: PropTypes.string,
 	previousValue: PropTypes.number,
 	currentValue: PropTypes.number,
-	error: PropTypes.oneOfType( [
-		PropTypes.arrayOf( PropTypes.object ),
-		PropTypes.object,
-	] ),
-	moduleSlug: PropTypes.string.isRequired,
-	infoTooltip: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 };

assets/js/components/KeyMetrics/MetricTileTable.js

@@ -24,34 +24,15 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import MetricTileError from './MetricTileError';
-import MetricTileLoader from './MetricTileLoader';
-import MetricTileHeader from './MetricTileHeader';
-
-export default function MetricTileTable( props ) {
-	const {
-		Widget,
-		loading,
-		title,
-		rows = [],
-		columns = [],
-		limit,
-		infoTooltip,
-		ZeroState,
-		error,
-		moduleSlug,
-	} = props;
-
-	if ( error ) {
-		return (
-			<MetricTileError
-				moduleSlug={ moduleSlug }
-				error={ error }
-				headerText={ title }
-			/>
-		);
-	}
+import MetricTileWrapper from './MetricTileWrapper';
 
+export default function MetricTileTable( {
+	rows = [],
+	columns = [],
+	limit,
+	ZeroState,
+	...props
+} ) {
 	let tileBody = null;
 
 	if ( rows?.length > 0 ) {
@@ -98,34 +79,20 @@ export default function MetricTileTable( props ) {
 	}
 
 	return (
-		<Widget noPadding>
-			<div className="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--table">
-				<MetricTileHeader title={ title } infoTooltip={ infoTooltip } />
-				<div className="googlesitekit-km-widget-tile__body">
-					{ loading && <MetricTileLoader /> }
-					{ ! loading && (
-						<div className="googlesitekit-km-widget-tile__table">
-							{ tileBody }
-						</div>
-					) }
-				</div>
+		<MetricTileWrapper
+			className="googlesitekit-km-widget-tile--table"
+			{ ...props }
+		>
+			<div className="googlesitekit-km-widget-tile__table">
+				{ tileBody }
 			</div>
-		</Widget>
+		</MetricTileWrapper>
 	);
 }
 
 MetricTileTable.propTypes = {
-	Widget: PropTypes.elementType.isRequired,
-	loading: PropTypes.bool,
-	title: PropTypes.string,
 	rows: PropTypes.array,
 	columns: PropTypes.array,
 	limit: PropTypes.number,
-	infoTooltip: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 	ZeroState: PropTypes.elementType,
-	error: PropTypes.oneOfType( [
-		PropTypes.arrayOf( PropTypes.object ),
-		PropTypes.object,
-	] ),
-	moduleSlug: PropTypes.string.isRequired,
 };