Filtering product variations by attributes that are not associated to any generated variations leads to blank variations results (#44505)

* Add empty state when filtering variations by attribute terms and the response is empty * Add changelog file * Fix linter errors
2024-02-09 15:46:34 -03:00 · 2024-02-09 15:46:34 -03:00 · f68467ff96
parent 0d52fdb738
commit f68467ff96
7 changed files with 109 additions and 82 deletions
--- a/packages/js/product-editor/changelog/fix-44465
+++ b/packages/js/product-editor/changelog/fix-44465
@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add empty state when filtering variations by attribute terms and the response is empty
--- a/packages/js/product-editor/src/components/variations-table/styles.scss
+++ b/packages/js/product-editor/src/components/variations-table/styles.scss
@ -14,15 +14,14 @@
 		&-header {
 			.woocommerce-product-variations__table-row {
 				min-height: auto;
-
-				&:last-child {
-					text-transform: uppercase;
-					color: $gray-700;
-					font-weight: 500;
-					font-size: 11px;
-					line-height: $grid-unit-20;
-					border-bottom: 1px solid $gray-200;
-				}
+			}
+			.woocommerce-product-variations__table-rowheader {
+				text-transform: uppercase;
+				color: $gray-700;
+				font-weight: 500;
+				font-size: 11px;
+				line-height: $grid-unit-20;
+				border-bottom: 1px solid $gray-200;
 			}
 		}
 		&-body {
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/styles.scss
+++ b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/styles.scss
@ -9,7 +9,7 @@
 	position: absolute;
 	z-index: 1;
 	width: 100%;
-	height: 100%;
+	height: auto;

 	&__message {
 		color: $gray-900;
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/table-empty-or-error-state.tsx
+++ b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/table-empty-or-error-state.tsx
@ -13,8 +13,10 @@ import { ErrorVariationsImage } from '../../../images/error-variations-image';
 import { EmptyVariationsImage } from '../../../images/empty-variations-image';

 export function EmptyOrErrorTableState( {
-	onActionClick,
+	message,
+	actionText,
 	isError,
+	onActionClick,
 }: TableEmptyOrErrorStateProps ) {
 	return (
 		<div className="woocommerce-variations-table-error-or-empty-state">
@ -22,14 +24,15 @@ export function EmptyOrErrorTableState( {
 			<p className="woocommerce-variations-table-error-or-empty-state__message">
 				{ isError
 					? __( 'We couldn’t load the variations', 'woocommerce' )
-					: __( 'No variations yet', 'woocommerce' ) }
+					: message ?? __( 'No variations yet', 'woocommerce' ) }
 			</p>

 			<div className="woocommerce-variations-table-error-or-empty-state__actions">
 				<Button variant="link" onClick={ onActionClick }>
 					{ isError
 						? __( 'Try again', 'woocommerce' )
-						: __( 'Generate from options', 'woocommerce' ) }
+						: actionText ??
+						  __( 'Generate from options', 'woocommerce' ) }
 				</Button>
 			</div>
 		</div>
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/types.ts
+++ b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/types.ts
@ -4,6 +4,8 @@
 import { MouseEvent } from 'react';

 export type TableEmptyOrErrorStateProps = {
-	onActionClick( event: MouseEvent< HTMLButtonElement > ): void;
+	message?: string;
+	actionText?: string;
 	isError: boolean;
+	onActionClick( event: MouseEvent< HTMLButtonElement > ): void;
 };
--- a/packages/js/product-editor/src/components/variations-table/use-variations/use-variations.ts
+++ b/packages/js/product-editor/src/components/variations-table/use-variations/use-variations.ts
@ -255,8 +255,12 @@ export function useVariations( { productId }: UseVariationsProps ) {
 		return Boolean( filters.length );
 	}

-	function clearFilters() {
+	async function clearFilters() {
 		setFilters( [] );
+
+		return getCurrentVariationsPage( {
+			product_id: productId,
+		} );
 	}

 	// Updating
@ -485,7 +489,7 @@ export function useVariations( { productId }: UseVariationsProps ) {

 	useEffect( () => {
 		if ( isGenerating ) {
-			clearFilters();
+			setFilters( [] );
 			onClearSelection();
 		}

--- a/packages/js/product-editor/src/components/variations-table/variations-table.tsx
+++ b/packages/js/product-editor/src/components/variations-table/variations-table.tsx
@ -135,6 +135,8 @@ export const VariationsTable = forwardRef<
 		onPerPageChange,
 		onFilter,
 		getFilters,
+		hasFilters,
+		clearFilters,

 		selected,
 		isSelectingAll,
@ -281,6 +283,43 @@ export const VariationsTable = forwardRef<
 		} );
 	}

+	function renderTableBody() {
+		return totalCount > 0 ? (
+			<Sortable
+				className="woocommerce-product-variations__table-body"
+				role="rowgroup"
+			>
+				{ variations.map( ( variation ) => (
+					<ListItem
+						key={ `${ variation.id }` }
+						className="woocommerce-product-variations__table-row"
+						role="row"
+					>
+						<VariationsTableRow
+							variation={ variation }
+							variableAttributes={ variableAttributes }
+							isUpdating={ isUpdating[ variation.id ] }
+							isSelected={ isSelected( variation ) }
+							isSelectionDisabled={ isSelectingAll }
+							hideActionButtons={ ! areSomeSelected }
+							onChange={ handleVariationChange }
+							onDelete={ handleDeleteVariationClick }
+							onEdit={ editVariationClickHandler( variation ) }
+							onSelect={ onSelect( variation ) }
+						/>
+					</ListItem>
+				) ) }
+			</Sortable>
+		) : (
+			<EmptyOrErrorTableState
+				isError={ false }
+				message={ __( 'No variations were found', 'woocommerce' ) }
+				actionText={ __( 'Clear filters', 'woocommerce' ) }
+				onActionClick={ clearFilters }
+			/>
+		);
+	}
+
 	return (
 		<div className="woocommerce-product-variations" ref={ ref }>
 			{ noticeText && (
@ -300,7 +339,7 @@ export const VariationsTable = forwardRef<
 			) }

 			<div className="woocommerce-product-variations__table" role="table">
-				{ totalCount > 0 && (
+				{ ( hasFilters() || totalCount > 0 ) && (
 					<div
 						className="woocommerce-product-variations__table-header"
 						role="rowgroup"
@ -388,47 +427,49 @@ export const VariationsTable = forwardRef<
 							</div>
 						</div>

-						<div
-							className="woocommerce-product-variations__table-row"
-							role="rowheader"
-						>
+						{ totalCount > 0 && (
 							<div
-								className="woocommerce-product-variations__table-column woocommerce-product-variations__selection"
-								role="columnheader"
+								className="woocommerce-product-variations__table-row woocommerce-product-variations__table-rowheader"
+								role="rowheader"
 							>
-								<CheckboxControl
-									value="all"
-									checked={ areAllSelected }
-									// @ts-expect-error Property 'indeterminate' does not exist
-									indeterminate={
-										! areAllSelected && areSomeSelected
-									}
-									onChange={ onSelectPage }
-									aria-label={ __(
-										'Select all',
-										'woocommerce'
-									) }
-								/>
+								<div
+									className="woocommerce-product-variations__table-column woocommerce-product-variations__selection"
+									role="columnheader"
+								>
+									<CheckboxControl
+										value="all"
+										checked={ areAllSelected }
+										// @ts-expect-error Property 'indeterminate' does not exist
+										indeterminate={
+											! areAllSelected && areSomeSelected
+										}
+										onChange={ onSelectPage }
+										aria-label={ __(
+											'Select all',
+											'woocommerce'
+										) }
+									/>
+								</div>
+								<div
+									className="woocommerce-product-variations__table-column"
+									role="columnheader"
+								>
+									{ __( 'Variation', 'woocommerce' ) }
+								</div>
+								<div
+									className="woocommerce-product-variations__table-column woocommerce-product-variations__price"
+									role="columnheader"
+								>
+									{ __( 'Price', 'woocommerce' ) }
+								</div>
+								<div
+									className="woocommerce-product-variations__table-column"
+									role="columnheader"
+								>
+									{ __( 'Stock', 'woocommerce' ) }
+								</div>
 							</div>
-							<div
-								className="woocommerce-product-variations__table-column"
-								role="columnheader"
-							>
-								{ __( 'Variation', 'woocommerce' ) }
-							</div>
-							<div
-								className="woocommerce-product-variations__table-column woocommerce-product-variations__price"
-								role="columnheader"
-							>
-								{ __( 'Price', 'woocommerce' ) }
-							</div>
-							<div
-								className="woocommerce-product-variations__table-column"
-								role="columnheader"
-							>
-								{ __( 'Stock', 'woocommerce' ) }
-							</div>
-						</div>
+						) }
 					</div>
 				) }

@ -449,33 +490,7 @@ export const VariationsTable = forwardRef<
 						) }
 					</div>
 				) : (
-					<Sortable
-						className="woocommerce-product-variations__table-body"
-						role="rowgroup"
-					>
-						{ variations.map( ( variation ) => (
-							<ListItem
-								key={ `${ variation.id }` }
-								className="woocommerce-product-variations__table-row"
-								role="row"
-							>
-								<VariationsTableRow
-									variation={ variation }
-									variableAttributes={ variableAttributes }
-									isUpdating={ isUpdating[ variation.id ] }
-									isSelected={ isSelected( variation ) }
-									isSelectionDisabled={ isSelectingAll }
-									hideActionButtons={ ! areSomeSelected }
-									onChange={ handleVariationChange }
-									onDelete={ handleDeleteVariationClick }
-									onEdit={ editVariationClickHandler(
-										variation
-									) }
-									onSelect={ onSelect( variation ) }
-								/>
-							</ListItem>
-						) ) }
-					</Sortable>
+					renderTableBody()
 				) }

 				{ totalCount > 5 && (