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,15 +226,19 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => {
 		props.attributes.namespace
 	);
 
+	const isProductsBlock = ! isRelatedProducts( props );
+
 	return (
 		<>
 			<InspectorControls>
-				{ MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
+				{ isProductsBlock &&
+					MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
 						<UpgradeNotice upgradeBlock={ manualUpdate } />
 					) }
 				{ allowedControls?.includes( 'presets' ) && (
 					<PopularPresets { ...props } />
 				) }
+				{ isProductsBlock && (
 					<ToolsPanel
 						className="woocommerce-product-query-toolspanel"
 						label={ __( 'Advanced Filters', 'woocommerce' ) }
@@ -254,6 +259,7 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => {
 								) : null
 						) }
 					</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,15 +83,14 @@ 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 singleOccurranceScenarios ) {
+	for ( const scenario of singleOccurrenceScenarios ) {
 		test( `${ scenario.title } is attached to the page`, async ( {
 			page,
 		} ) => {
@@ -102,5 +101,4 @@ test.describe( 'Compatibility Layer with Product Collection block', () => {
 			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