Hide list controls when no items are selected (#40434)

* The Select all and Clear selection buttons are only displayed when at least 1 item is selected

* Add changelog file

packages/js/product-editor/changelog/add-40194

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+The Select all and Clear selection buttons are only displayed when at least 1 item is selected

packages/js/product-editor/src/components/variations-table/variations-table.tsx

@@ -349,20 +349,24 @@ export const VariationsTable = forwardRef<
 					/>
 				</div>
 				<div className="woocommerce-product-variations__filters">
-					<Button
-						variant="tertiary"
-						disabled={ areAllSelected( variationIds ) }
-						onClick={ () => onSelectAll( variationIds )( true ) }
-					>
-						{ __( 'Select all', 'woocommerce' ) }
-					</Button>
-					<Button
-						variant="tertiary"
-						disabled={ ! hasSelection( variationIds ) }
-						onClick={ () => onClearSelection() }
-					>
-						{ __( 'Clear selection', 'woocommerce' ) }
-					</Button>
+					{ hasSelection( variationIds ) && (
+						<>
+							<Button
+								variant="tertiary"
+								onClick={ () =>
+									onSelectAll( variationIds )( true )
+								}
+							>
+								{ __( 'Select all', 'woocommerce' ) }
+							</Button>
+							<Button
+								variant="tertiary"
+								onClick={ onClearSelection }
+							>
+								{ __( 'Clear selection', 'woocommerce' ) }
+							</Button>
+						</>
+					) }
 				</div>
 				<div>
 					<VariationsActionsMenu