Modify components empty state (#47487)

* Create EmptyState component

* Create getEmptyStateSequentialNames util

* Use EmptyState component in Custom fields

* Use EmptyState in AttributeControl

* Use EmptyState component in VariationItems

* Remove not used references

* Accept empty strings

* Add tests

* Add changelog

* Improve rows opacity

* Add i18n to Attributre

* Fix lint

packages/js/product-editor/changelog/dev-47293_modify_attributes_empty_state

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Modify components empty state #47487

packages/js/product-editor/src/blocks/product-fields/variation-items/edit.tsx

@@ -28,7 +28,7 @@ import { VariableProductTour } from './variable-product-tour';
 import { TRACKS_SOURCE } from '../../../constants';
 import { handlePrompt } from '../../../utils/handle-prompt';
 import { ProductEditorBlockEditProps } from '../../../types';
-import { EmptyState } from './empty-state';
+import { EmptyState } from '../../../components/empty-state';
 
 export function Edit( {
 	attributes,
@@ -183,7 +183,15 @@ export function Edit( {
 			: '';
 
 	if ( ! hasVariationOptions ) {
-		return <EmptyState />;
+		return (
+			<EmptyState
+				names={ [
+					__( 'Variation', 'woocommerce' ),
+					__( 'Colors', 'woocommerce' ),
+					__( 'Sizes', 'woocommerce' ),
+				] }
+			/>
+		);
 	}
 
 	return (

packages/js/product-editor/src/blocks/product-fields/variation-items/editor.scss

@@ -1,5 +1,3 @@
-@import "empty-state/style.scss";
-
 .wp-block-woocommerce-product-variation-items-field {
 	@media ( min-width: #{ ($break-medium) } ) {
 		min-height: 420px;

packages/js/product-editor/src/blocks/product-fields/variation-items/empty-state/empty-state.tsx

@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-
-export function EmptyState(
-	props: React.DetailedHTMLProps<
-		React.HTMLAttributes< HTMLDivElement >,
-		HTMLDivElement
-	>
-) {
-	return (
-		<div
-			{ ...props }
-			role="none"
-			className="wp-block-woocommerce-product-variation-items-field__empty-state"
-		>
-			<div className="wp-block-woocommerce-product-variation-items-field__empty-state-row">
-				<div>{ __( 'Variation', 'woocommerce' ) }</div>
-				<div>
-					<div className="wp-block-woocommerce-product-variation-items-field__empty-state-name" />
-				</div>
-				<div>
-					<div className="wp-block-woocommerce-product-variation-items-field__empty-state-actions" />
-				</div>
-			</div>
-
-			<div className="wp-block-woocommerce-product-variation-items-field__empty-state-row">
-				<div>{ __( 'Colors', 'woocommerce' ) }</div>
-				<div>
-					<div className="wp-block-woocommerce-product-variation-items-field__empty-state-name" />
-				</div>
-				<div>
-					<div className="wp-block-woocommerce-product-variation-items-field__empty-state-actions" />
-				</div>
-			</div>
-
-			<div className="wp-block-woocommerce-product-variation-items-field__empty-state-row">
-				<div>{ __( 'Sizes', 'woocommerce' ) }</div>
-				<div>
-					<div className="wp-block-woocommerce-product-variation-items-field__empty-state-name" />
-				</div>
-				<div>
-					<div className="wp-block-woocommerce-product-variation-items-field__empty-state-actions" />
-				</div>
-			</div>
-		</div>
-	);
-}

packages/js/product-editor/src/blocks/product-fields/variation-items/empty-state/style.scss

@@ -1,59 +0,0 @@
-.wp-block-woocommerce-product-variation-items-field__empty-state {
-	@mixin skeleton {
-		@include placeholder();
-		background-color: $gray-200;
-		border-radius: $grid-unit-05;
-		width: $grid-unit-30;
-		height: $grid-unit;
-	}
-
-	border: 1px dashed $gray-400;
-	padding: 0 $grid-unit-30;
-	border-radius: 2px;
-
-	&-row {
-		display: grid;
-		grid-template-columns: 1.5fr 1fr 0.5fr;
-		height: $grid-unit-80;
-		align-items: center;
-		border-top: 1px solid $gray-100;
-
-		&:first-child {
-			border-top: none;
-
-			.wp-block-woocommerce-product-variation-items-field__empty-state-name {
-				width: 140px;
-			}
-		}
-
-		&:nth-child(2) {
-			opacity: 0.7;
-
-			.wp-block-woocommerce-product-variation-items-field__empty-state-name {
-				width: 75px;
-			}
-		}
-
-		&:nth-child(3) {
-			opacity: 0.5;
-
-			.wp-block-woocommerce-product-variation-items-field__empty-state-name {
-				width: 114px;
-			}
-		}
-
-		:last-child {
-			display: flex;
-			justify-content: flex-end;
-		}
-	}
-
-	&-name {
-		@include skeleton();
-	}
-
-	&-actions {
-		@include skeleton();
-		width: $grid-unit-60;
-	}
-}

packages/js/product-editor/src/components/attribute-control/attribute-control.tsx

@@ -33,9 +33,10 @@ import { AttributeListItem } from '../attribute-list-item';
 import { NewAttributeModal } from './new-attribute-modal';
 import { RemoveConfirmationModal } from '../remove-confirmation-modal';
 import { TRACKS_SOURCE } from '../../constants';
-import { AttributeEmptyStateSkeleton } from './attribute-empty-state-skeleton';
+import { EmptyState } from '../empty-state';
 import { SectionActions } from '../block-slot-fill';
 import { AttributeControlProps } from './types';
+import { getEmptyStateSequentialNames } from '../../utils';
 
 export const AttributeControl: React.FC< AttributeControlProps > = ( {
 	value,
@@ -215,7 +216,14 @@ export const AttributeControl: React.FC< AttributeControlProps > = ( {
 			} );
 		}
 
-		return <AttributeEmptyStateSkeleton />;
+		return (
+			<EmptyState
+				names={ getEmptyStateSequentialNames(
+					__( 'Attribute', 'woocommerce' ),
+					3
+				) }
+			/>
+		);
 	}
 
 	function renderSectionActions() {

packages/js/product-editor/src/components/attribute-control/attribute-empty-state-skeleton.tsx

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import classNames from 'classnames';
-
-export function AttributeEmptyStateSkeleton() {
-	return (
-		<div className="woocommerce-product-page-attribute-skeleton">
-			{ Array( 3 )
-				.fill( 0 )
-				.map( ( _, index ) => (
-					<div
-						key={ index }
-						className="woocommerce-product-page-attribute-skeleton__row"
-					>
-						<div
-							className={ classNames(
-								'woocommerce-product-page-attribute-skeleton__item'
-							) }
-						>
-							<div
-								className={ classNames(
-									`woocommerce-product-page-attribute-skeleton__name${ index }`,
-									`woocommerce-product-page-attribute-skeleton__row${ index }`
-								) }
-							></div>
-						</div>
-						<div className="woocommerce-product-page-attribute-skeleton__item">
-							<div
-								className={ classNames(
-									`woocommerce-product-page-attribute-skeleton__value${ index }`,
-									`woocommerce-product-page-attribute-skeleton__row${ index }`
-								) }
-							></div>
-						</div>
-						<div className="woocommerce-product-page-attribute-skeleton__last-item">
-							<div
-								className={ classNames(
-									'woocommerce-product-page-attribute-skeleton__buttons',
-									`woocommerce-product-page-attribute-skeleton__row${ index }`
-								) }
-							></div>
-						</div>
-					</div>
-				) ) }
-		</div>
-	);
-}

packages/js/product-editor/src/components/attribute-control/attribute-skeleton.scss

@@ -1,61 +0,0 @@
-@mixin attributeSkeleton {
-	border-radius: $grid-unit-05;
-	min-width: $grid-unit-20;
-	min-height: $grid-unit-20;
-	color: transparent;
-}
-
-.woocommerce-product-page-attribute-skeleton {
-	border: 1px dashed $gray-200;
-	padding: 0 $gap-large 0 $gap-large;
-	&__row {
-		display: grid;
-		grid-template-columns: 45% auto 90px;
-		padding-bottom: $gap-large;
-		padding-top: $gap-large;
-		border-bottom: 1px solid $gray-200;
-	}
-	&__row:last-child {
-		border-bottom: none;
-	}
-	&__last-item {
-		justify-self: end;
-	}
-	&__row0 {
-		background-color: $gray-200;
-	}
-	&__row1 {
-		background-color: #e9e9e9;
-	}
-	&__row2 {
-		background-color: #efefef;
-	}
-	&__name0 {
-		@include attributeSkeleton();
-		width: 40%;
-	}
-	&__value0 {
-		@include attributeSkeleton();
-		width: 40%;
-	}
-	&__name1 {
-		@include attributeSkeleton();
-		width: 30%;
-	}
-	&__value1 {
-		@include attributeSkeleton();
-		width: 30%;
-	}
-	&__name2 {
-		@include attributeSkeleton();
-		width: 35%;
-	}
-	&__value2 {
-		@include attributeSkeleton();
-		width: 35%;
-	}
-	&__buttons {
-		@include attributeSkeleton();
-		width: 50px;
-	}
-}

packages/js/product-editor/src/components/custom-fields/custom-fields.tsx

@@ -15,9 +15,10 @@ import { TRACKS_SOURCE } from '../../constants';
 import { useCustomFields } from '../../hooks/use-custom-fields';
 import { CreateModal } from './create-modal';
 import { EditModal } from './edit-modal';
-import { EmptyState } from './empty-state';
+import { EmptyState } from '../empty-state';
 import type { Metadata } from '../../types';
 import type { CustomFieldsProps } from './types';
+import { getEmptyStateSequentialNames } from '../../utils';
 
 export function CustomFields( {
 	className,
@@ -106,7 +107,12 @@ export function CustomFields( {
 			) }
 
 			{ customFields.length === 0 ? (
-				<EmptyState />
+				<EmptyState
+					names={ getEmptyStateSequentialNames(
+						__( 'Custom field', 'woocommerce' ),
+						3
+					) }
+				/>
 			) : (
 				<table
 					{ ...props }

packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx

@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-
-export function EmptyState(
-	props: React.DetailedHTMLProps<
-		React.HTMLAttributes< HTMLDivElement >,
-		HTMLDivElement
-	>
-) {
-	return (
-		<div
-			{ ...props }
-			role="none"
-			className="woocommerce-product-custom-fields__empty-state"
-		>
-			<div className="woocommerce-product-custom-fields__empty-state-row">
-				<div>{ __( 'Custom field 1', 'woocommerce' ) }</div>
-				<div>
-					<div className="woocommerce-product-custom-fields__empty-state-name" />
-				</div>
-				<div>
-					<div className="woocommerce-product-custom-fields__empty-state-actions" />
-				</div>
-			</div>
-
-			<div className="woocommerce-product-custom-fields__empty-state-row">
-				<div>{ __( 'Custom field 2', 'woocommerce' ) }</div>
-				<div>
-					<div className="woocommerce-product-custom-fields__empty-state-name" />
-				</div>
-				<div>
-					<div className="woocommerce-product-custom-fields__empty-state-actions" />
-				</div>
-			</div>
-
-			<div className="woocommerce-product-custom-fields__empty-state-row">
-				<div>{ __( 'Custom field 3', 'woocommerce' ) }</div>
-				<div>
-					<div className="woocommerce-product-custom-fields__empty-state-name" />
-				</div>
-				<div>
-					<div className="woocommerce-product-custom-fields__empty-state-actions" />
-				</div>
-			</div>
-		</div>
-	);
-}

packages/js/product-editor/src/components/custom-fields/empty-state/index.ts

@@ -1 +0,0 @@
-export * from './empty-state';

packages/js/product-editor/src/components/custom-fields/empty-state/style.scss

@@ -1,58 +0,0 @@
-.woocommerce-product-custom-fields__empty-state {
-	@mixin skeleton {
-		background-color: $gray-200;
-		border-radius: $grid-unit-05;
-		width: $grid-unit-30;
-		height: $grid-unit;
-	}
-
-	border: 1px dashed $gray-400;
-	padding: 0 $grid-unit-30;
-	border-radius: 2px;
-
-	&-row {
-		display: grid;
-		grid-template-columns: 1.5fr 1fr 0.5fr;
-		height: $grid-unit-80;
-		align-items: center;
-		border-top: 1px solid $gray-100;
-
-		&:first-child {
-			border-top: none;
-
-			.woocommerce-product-custom-fields__empty-state-name {
-				width: 140px;
-			}
-		}
-
-		&:nth-child(2) {
-			opacity: 0.7;
-
-			.woocommerce-product-custom-fields__empty-state-name {
-				width: 75px;
-			}
-		}
-
-		&:nth-child(3) {
-			opacity: 0.5;
-
-			.woocommerce-product-custom-fields__empty-state-name {
-				width: 114px;
-			}
-		}
-
-		:last-child {
-			display: flex;
-			justify-content: flex-end;
-		}
-	}
-
-	&-name {
-		@include skeleton();
-	}
-
-	&-actions {
-		@include skeleton();
-		width: $grid-unit-60;
-	}
-}

packages/js/product-editor/src/components/custom-fields/style.scss

@@ -1,6 +1,5 @@
 @import "./create-modal/style.scss";
 @import "./edit-modal/style.scss";
-@import "./empty-state/style.scss";
 
 .woocommerce-product-custom-fields {
 	&__table {

packages/js/product-editor/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+type EmptyStateProps = React.DetailedHTMLProps<
+	React.HTMLAttributes< HTMLDivElement >,
+	HTMLDivElement
+> & {
+	names: string[];
+};
+
+export function EmptyState( { names = [], ...props }: EmptyStateProps ) {
+	return (
+		<div
+			{ ...props }
+			role="none"
+			className="woocommerce-product-empty-state"
+		>
+			{ names.map( ( name ) => (
+				<div
+					key={ name }
+					className="woocommerce-product-empty-state__row"
+				>
+					{ name === '' ? (
+						<div className="woocommerce-product-empty-state__name" />
+					) : (
+						<div>{ name }</div>
+					) }
+					<div>
+						<div className="woocommerce-product-empty-state__value" />
+					</div>
+					<div>
+						<div className="woocommerce-product-empty-state__actions" />
+					</div>
+				</div>
+			) ) }
+		</div>
+	);
+}

packages/js/product-editor/src/components/empty-state/style.scss

@@ -0,0 +1,86 @@
+.woocommerce-product-empty-state {
+	@mixin skeleton {
+		background-color: $gray-200;
+		border-radius: $grid-unit-05;
+		width: $grid-unit-30;
+		height: $grid-unit;
+	}
+
+	border: 1px dashed $gray-400;
+	padding: 0 $grid-unit-30;
+	border-radius: 2px;
+
+	&__row {
+		display: grid;
+		grid-template-columns: 1.5fr 1fr 0.5fr;
+		height: $grid-unit-80;
+		align-items: center;
+
+		// Apply border-top to all rows except the first one
+		&:not( :first-child ) {
+			border-top: 1px solid $gray-100;
+		}
+
+		&:nth-of-type( 3n + 1 ) {
+			.woocommerce-product-empty-state__name {
+				width: 85px;
+			}
+
+			.woocommerce-product-empty-state__value {
+				width: 140px;
+			}
+		}
+
+		&:nth-of-type( 3n + 2 ) {
+			.woocommerce-product-empty-state__name {
+				width: 120px;
+			}
+
+			.woocommerce-product-empty-state__value {
+				width: 75px;
+			}
+		}
+
+		&:nth-of-type( 3n + 3 ) {
+			.woocommerce-product-empty-state__name {
+				width: 100px;
+			}
+
+			.woocommerce-product-empty-state__value {
+				width: 114px;
+			}
+		}
+
+		// Decreasing opacity based on position
+		@for $i from 1 through 100 {
+			&:nth-of-type( #{ $i } ) {
+				@if $i == 1 {
+					opacity: 1;
+				} @else if $i == 2 {
+					opacity: 0.7;
+				} @else if $i == 3 {
+					opacity: 0.5;
+				} @else {
+					opacity: calc(0.5 - 0.04 * ($i - 3));
+				}
+			}
+		}
+
+		:last-child {
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
+
+	&__name {
+		@include skeleton();
+	}
+	&__value {
+		@include skeleton();
+	}
+
+	&__actions {
+		@include skeleton();
+		width: $grid-unit-60;
+	}
+}

packages/js/product-editor/src/components/empty-state/test/empty-state.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { EmptyState } from '../empty-state';
+
+describe( 'EmptyState', () => {
+	it( 'should render empty name rows when names are empty', () => {
+		const { container } = render( <EmptyState names={ [ '', '', '' ] } /> );
+		const rows = container.querySelectorAll(
+			'.woocommerce-product-empty-state__row'
+		);
+		expect( rows.length ).toBe( 3 );
+		rows.forEach( ( row ) => {
+			expect(
+				row.querySelector( '.woocommerce-product-empty-state__name' )
+			).toBeInTheDocument();
+			expect(
+				row.querySelector( '.woocommerce-product-empty-state__value' )
+			).toBeInTheDocument();
+			expect(
+				row.querySelector( '.woocommerce-product-empty-state__actions' )
+			).toBeInTheDocument();
+		} );
+	} );
+
+	it( 'should render names when provided', () => {
+		const names = [ 'Name 1', 'Name 2', 'Name 3' ];
+		const { container, queryByText } = render(
+			<EmptyState names={ names } />
+		);
+		const rows = container.querySelectorAll(
+			'.woocommerce-product-empty-state__row'
+		);
+		expect( rows.length ).toBe( 3 );
+		names.forEach( ( name ) => {
+			expect( queryByText( name ) ).toBeInTheDocument();
+		} );
+	} );
+
+	it( 'should render the correct number of rows based on the provided array', () => {
+		const testCases = [
+			{ names: [ 'Name 1', 'Name 2' ], expectedLength: 2 },
+			{
+				names: [ 'Name 1', 'Name 2', 'Name 3', 'Name 4' ],
+				expectedLength: 4,
+			},
+		];
+
+		testCases.forEach( ( { names, expectedLength } ) => {
+			const { container } = render( <EmptyState names={ names } /> );
+			const rows = container.querySelectorAll(
+				'.woocommerce-product-empty-state__row'
+			);
+			expect( rows.length ).toBe( expectedLength );
+		} );
+	} );
+} );

packages/js/product-editor/src/style.scss

@@ -36,7 +36,6 @@
 @import "components/manage-download-limits-modal/style.scss";
 @import "components/label/style.scss";
 @import "components/modal-editor-welcome-guide/style.scss";
-@import "components/attribute-control/attribute-skeleton.scss";
 @import "components/checkbox-control/style.scss";
 @import "components/add-products-modal/style.scss";
 @import "components/advice-card/style.scss";
@@ -52,6 +51,7 @@
 @import "components/text-control/style.scss";
 @import "components/attribute-combobox-field/styles.scss";
 @import "components/number-control/style.scss";
+@import "components/empty-state/style.scss";
 
 /* Field Blocks */
 

packages/js/product-editor/src/utils/get-empty-state-names.ts

@@ -0,0 +1,15 @@
+/**
+ * Generates an array of sequentially numbered strings in the format "string number".
+ *
+ * @param name   The base string to be used.
+ * @param number The number of times the string should be repeated with an incremented number.
+ * @return An array of formatted strings.
+ */
+export function getEmptyStateSequentialNames(
+	name: string,
+	number: number
+): string[] {
+	return Array( number )
+		.fill( 0 )
+		.map( ( _, index ) => `${ name } ${ index + 1 }` );
+}

packages/js/product-editor/src/utils/index.ts

@@ -15,6 +15,7 @@ import {
 	getProductStockStatusClass,
 } from './get-product-stock-status';
 import { getProductTitle } from './get-product-title';
+import { getEmptyStateSequentialNames } from './get-empty-state-names';
 import {
 	getProductVariationTitle,
 	getTruncatedProductVariationTitle,
@@ -42,6 +43,7 @@ export {
 	getCheckboxTracks,
 	getCurrencySymbolProps,
 	getDerivedProductType,
+	getEmptyStateSequentialNames,
 	getHeaderTitle,
 	getPermalinkParts,
 	getProductStatus,