Hide Variations section when it is empty

plugins/woocommerce-admin/client/products/sections/product-variations-section.tsx

@@ -3,7 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
-import { Link } from '@woocommerce/components';
+import { Link, useFormContext } from '@woocommerce/components';
+import { useSelect } from '@wordpress/data';
+import {
+	EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
+	Product,
+} from '@woocommerce/data';
 
 /**
  * Internal dependencies
@@ -12,6 +17,29 @@ import { ProductSectionLayout } from '../layout/product-section-layout';
 import { Variations } from '../fields/variations';
 
 export const ProductVariationsSection: React.FC = () => {
+	const { values } = useFormContext< Product >();
+	const productId = values.id;
+
+	const { totalCount } = useSelect(
+		( select ) => {
+			const { getProductVariationsTotalCount } = select(
+				EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME
+			);
+			const requestParams = {
+				product_id: productId,
+			};
+			return {
+				totalCount:
+					getProductVariationsTotalCount< number >( requestParams ),
+			};
+		},
+		[ productId ]
+	);
+
+	if ( totalCount === 0 || isNaN( totalCount ) ) {
+		return null;
+	}
+
 	return (
 		<ProductSectionLayout
 			title={ __( 'Variations', 'woocommerce' ) }