Related Products: hide unusable options from Inspector Controls (#47845)

* Hide unusable options from Related Products block

* Add changelog

* Fix the dscription of Single Product template compatibility layer tests

* Add E2E test

* Replace editorUtils with editor in E2E tests

* Fix typo

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>

* Fix typo

---------

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>

plugins/woocommerce-blocks/assets/js/blocks/product-query/inspector-controls.tsx

@@ -35,6 +35,7 @@ import {
 import {
 	isCustomInheritGlobalQueryImplementationEnabled,
 	isWooQueryBlockVariation,
+	isRelatedProducts,
 	setQueryAttribute,
 	useAllowedControls,
 } from './utils';
@@ -225,35 +226,40 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => {
 		props.attributes.namespace
 	);
 
+	const isProductsBlock = ! isRelatedProducts( props );
+
 	return (
 		<>
 			<InspectorControls>
-				{ MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
+				{ isProductsBlock &&
-					<UpgradeNotice upgradeBlock={ manualUpdate } />
+					MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
-				) }
+						<UpgradeNotice upgradeBlock={ manualUpdate } />
+					) }
 				{ allowedControls?.includes( 'presets' ) && (
 					<PopularPresets { ...props } />
 				) }
-				<ToolsPanel
+				{ isProductsBlock && (
-					className="woocommerce-product-query-toolspanel"
+					<ToolsPanel
-					label={ __( 'Advanced Filters', 'woocommerce' ) }
+						className="woocommerce-product-query-toolspanel"
-					resetAll={ () => {
+						label={ __( 'Advanced Filters', 'woocommerce' ) }
-						setQueryAttribute( props, defaultWooQueryParams );
+						resetAll={ () => {
-					} }
+							setQueryAttribute( props, defaultWooQueryParams );
-				>
+						} }
-					{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
+					>
-						( [ key, Control ] ) =>
+						{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
-							allowedControls?.includes( key ) ? (
+							( [ key, Control ] ) =>
-								<Control
+								allowedControls?.includes( key ) ? (
-									{ ...props }
+									<Control
-									defaultWooQueryParams={
+										{ ...props }
-										defaultWooQueryParams
+										defaultWooQueryParams={
-									}
+											defaultWooQueryParams
-									key={ key }
+										}
-								/>
+										key={ key }
-							) : null
+									/>
-					) }
+								) : null
-				</ToolsPanel>
+						) }
+					</ToolsPanel>
+				) }
 			</InspectorControls>
 		</>
 	);

plugins/woocommerce-blocks/assets/js/blocks/product-query/utils.tsx

@@ -38,6 +38,16 @@ export function isWooQueryBlockVariation( block: ProductQueryBlock ) {
 	);
 }
 
+/**
+ * Identifies if a block is a Related Products variation.
+ */
+export function isRelatedProducts( block: ProductQueryBlock ) {
+	return (
+		block.name === QUERY_LOOP_ID &&
+		block.attributes.namespace === QueryVariation.RELATED_PRODUCTS
+	);
+}
+
 /**
  * Sets the new query arguments of a Product Query block
  *

plugins/woocommerce-blocks/tests/e2e/tests/related-products/related-products.block_theme.spec.ts

@@ -63,4 +63,51 @@ test.describe( `${ blockData.name } Block`, () => {
 			await editor.getBlockByName( blockData.slug )
 		).toBeVisible();
 	} );
+
+	test( "doesn't display additional Products (Beta) options", async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postId: `woocommerce/woocommerce//single-product`,
+			postType: 'wp_template',
+		} );
+		await editor.enterEditMode();
+		const relatedProducts = await editor.getBlockByName( blockData.slug );
+		await editor.selectBlocks( relatedProducts );
+		await editor.openDocumentSettingsSidebar();
+
+		const inspectorControls = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		const upgradeNotice = inspectorControls.getByRole( 'button', {
+			name: 'Upgrade to Product Collection',
+		} );
+		const advancedFilters = inspectorControls.getByRole( 'heading', {
+			name: 'Advanced filters',
+		} );
+
+		await expect( upgradeNotice ).toBeHidden();
+		await expect( advancedFilters ).toBeHidden();
+
+		// Reality check - the above test will pass if:
+		// 1. options are not there - valid case,
+		// 2. selectors changed or are incorrect - invalid case.
+		//
+		// To confirm test is correct, we verify if Products (Beta)
+		// have these options available using the same locators.
+		await editor.setContent( '' );
+		const querySlug = 'core/query';
+		const productsBetaSlug = 'woocommerce/product-query';
+		await editor.insertBlock( {
+			name: querySlug,
+			attributes: { namespace: productsBetaSlug },
+		} );
+		const productsBeta = await editor.getBlockByName( querySlug );
+		await editor.selectBlocks( productsBeta );
+		await expect( upgradeNotice ).toBeVisible();
+		await expect( advancedFilters ).toBeVisible();
+	} );
 } );

plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template-compatibility-layer.spec.ts

@@ -14,7 +14,7 @@ type Scenario = {
 	amount: number;
 };
 
-const singleOccurranceScenarios: Scenario[] = [
+const singleOccurrenceScenarios: Scenario[] = [
 	{
 		title: 'Before Main Content',
 		dataTestId: 'woocommerce_before_main_content',
@@ -83,24 +83,22 @@ const singleOccurranceScenarios: Scenario[] = [
 	},
 ];
 
-test.describe( 'Compatibility Layer with Product Collection block', () => {
+test.describe( 'Compatibility Layer in Single Product template', () => {
 	test.beforeEach( async ( { requestUtils } ) => {
 		await requestUtils.activatePlugin(
 			'woocommerce-blocks-test-single-product-template-compatibility-layer'
 		);
 	} );
 
-	test.describe( 'Product Archive with Product Collection block', () => {
+	for ( const scenario of singleOccurrenceScenarios ) {
-		for ( const scenario of singleOccurranceScenarios ) {
+		test( `${ scenario.title } is attached to the page`, async ( {
-			test( `${ scenario.title } is attached to the page`, async ( {
+			page,
-				page,
+		} ) => {
-			} ) => {
+			await page.goto( '/product/hoodie/' );
-				await page.goto( '/product/hoodie/' );
+			const hooks = page.getByTestId( scenario.dataTestId );
-				const hooks = page.getByTestId( scenario.dataTestId );
 
-				await expect( hooks ).toHaveCount( scenario.amount );
+			await expect( hooks ).toHaveCount( scenario.amount );
-				await expect( hooks ).toHaveText( scenario.content );
+			await expect( hooks ).toHaveText( scenario.content );
-			} );
+		} );
-		}
+	}
-	} );
 } );

plugins/woocommerce/changelog/fix-related-products-options

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Related Products: hides unusable options from Inspector Controls