Fix TS errors in plugins/woocommerce/client/admin/client/products/ (w…

…oocommerce#54129) * Fix TS errors in plugins/woocommerce/client/admin/client/products/fills/more-menu-items/classic-editor-menu-item.tsx * Fix TS errors in plugins/woocommerce/client/admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx * Fix TS errors in plugins/woocommerce/client/admin/client/products/fills/product-block-editor-fills.tsx * Update some fix to be more generics * Fix TS errors in plugins/woocommerce/client/admin/client/products/hooks/use-product-entity-record.ts * Fix TS errors in plugins/woocommerce/client/admin/client/products/hooks/use-product-variation-entity-record.ts * Fix plugins/woocommerce/client/admin/client/products/tour/block-editor/use-published-products-count.tsx * Fix plugins/woocommerce/client/admin/client/products/tour/block-editor/use-block-editor-tour-options.ts * Add TODOs to useSelect related fixes * Update todo to remove error expect * Cover the type problems regarding Slot Fills * Add changelog * Expect TS error and mark two places for further investigation * Update the TS error expect * Fix function as a children problem in two Slot Fill places * Add missing changelog files
kimmenbert · Jan 10, 2025 · 2c193d1 · 2c193d1
1 parent 49f1f20
commit 2c193d1
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 35 deletions.
diff --git a/packages/js/components/changelog/fix-54123 b/packages/js/components/changelog/fix-54123
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Typescript types update
diff --git a/packages/js/components/src/utils.tsx b/packages/js/components/src/utils.tsx
@@ -25,7 +25,7 @@ type SlotProps = React.ComponentProps< typeof Slot >;
 function getChildrenAndProps< T = FillProps, S = Record< string, unknown > >(
 	children:
 		| React.ReactNode
-		| ( ( props: T & { order: number } ) => React.ReactElement ),
+		| ( ( props: T & { order: number } ) => React.ReactNode ),
 	order: number,
 	props: T,
 	injectProps?: S
@@ -65,14 +65,22 @@ function getChildrenAndProps< T = FillProps, S = Record< string, unknown > >(
  * @return {Node} Node.
  */
 function createOrderedChildren< T = FillProps, S = Record< string, unknown > >(
-	children: React.ReactNode,
+	children:
+		| React.ReactNode
+		| ( ( props: T & { order: number } ) => React.ReactNode ),
 	order: number,
 	props: T,
 	injectProps?: S
-): React.ReactElement {
+): React.ReactNode {
 	const { children: childrenToRender, props: propsToRender } =
 		getChildrenAndProps( children, order, props, injectProps );
-	return cloneElement( childrenToRender, propsToRender );
+	if ( ! childrenToRender || typeof childrenToRender === 'string' ) {
+		return childrenToRender;
+	}
+	return cloneElement(
+		childrenToRender as React.ReactElement,
+		propsToRender
+	);
 }
 export { createOrderedChildren };
 

diff --git a/packages/js/product-editor/changelog/fix-54123 b/packages/js/product-editor/changelog/fix-54123
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Typescript types update
diff --git a/packages/js/product-editor/src/components/header/woo-more-menu-item/woo-more-menu-item.tsx b/packages/js/product-editor/src/components/header/woo-more-menu-item/woo-more-menu-item.tsx
@@ -10,8 +10,9 @@ import {
 
 export const WC_PRODUCT_MORE_MENU_SLOT_NAME = 'WooProductMenuMenuItem';
 
+type FillProps = React.ComponentProps< typeof Fill >;
 export const WooProductMoreMenuItem: React.FC< {
-	children?: React.ReactNode;
+	children?: FillProps[ 'children' ];
 	order?: number;
 } > & {
 	Slot: React.FC< Slot.Props >;

diff --git a/plugins/woocommerce/changelog/fix-54123 b/plugins/woocommerce/changelog/fix-54123
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix TS errors in plugins/woocommerce/admin/client/products
diff --git a/...ocommerce/client/admin/client/products/fills/more-menu-items/classic-editor-menu-item.tsx b/...ocommerce/client/admin/client/products/fills/more-menu-items/classic-editor-menu-item.tsx
@@ -30,8 +30,10 @@ export const ClassicEditorMenuItem = ( {
 			select( OPTIONS_STORE_NAME );
 
 		const allowTrackingOption =
+			// @ts-expect-error Todo: awaiting more global fix, demo: https://github.com/woocommerce/woocommerce/pull/54146
 			getOption( ALLOW_TRACKING_OPTION_NAME ) || 'no';
 
+		// @ts-expect-error Todo: awaiting more global fix, demo: https://github.com/woocommerce/woocommerce/pull/54146
 		const resolving = ! hasFinishedResolution( 'getOption', [
 			ALLOW_TRACKING_OPTION_NAME,
 		] );
@@ -40,7 +42,7 @@ export const ClassicEditorMenuItem = ( {
 			allowTracking: allowTrackingOption === 'yes',
 			resolving,
 		};
-	} );
+	}, [] );
 
 	const _feature_nonce = getAdminSetting( '_feature_nonce' );
 

diff --git a/...ommerce/client/admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx b/...ommerce/client/admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx
@@ -6,10 +6,7 @@ import { MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
-	ProductVariation,
-} from '@woocommerce/data';
+import { EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME } from '@woocommerce/data';
 import { getNewPath, navigateTo } from '@woocommerce/navigation';
 import {
 	RemoveConfirmationModal,
@@ -42,13 +39,9 @@ export const DeleteVariationMenuItem = ( {
 		variationId,
 	} );
 
-	const [ name ] = useEntityProp< string >(
-		'postType',
-		'product_variation',
-		'name'
-	);
+	const [ name ] = useEntityProp( 'postType', 'product_variation', 'name' );
 
-	const [ status ] = useEntityProp< string >(
+	const [ status ] = useEntityProp(
 		'postType',
 		'product_variation',
 		'status'
@@ -80,7 +73,7 @@ export const DeleteVariationMenuItem = ( {
 			product_status: status,
 		} );
 
-		return deleteProductVariation< Promise< ProductVariation > >( {
+		return deleteProductVariation( {
 			product_id: productId,
 			id: variationId,
 		} )
@@ -128,11 +121,7 @@ export const DeleteVariationMenuItem = ( {
 	return (
 		<>
 			<MenuGroup>
-				<MenuItem
-					isDestructive
-					variant="tertiary"
-					onClick={ handleMenuItemClick }
-				>
+				<MenuItem isDestructive onClick={ handleMenuItemClick }>
 					{ __( 'Delete variation', 'woocommerce' ) }
 				</MenuItem>
 			</MenuGroup>

diff --git a/plugins/woocommerce/client/admin/client/products/fills/product-block-editor-fills.tsx b/plugins/woocommerce/client/admin/client/products/fills/product-block-editor-fills.tsx
@@ -6,10 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
 import { useSelect } from '@wordpress/data';
 import { Product, ProductVariation } from '@woocommerce/data';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useEntityProp } from '@wordpress/core-data';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -28,9 +25,9 @@ export const MoreMenuFill = ( {
 }: MoreMenuFillProps ) => {
 	const [ id ] = useEntityProp( 'postType', productType, 'id' );
 
-	const product = useSelect< Product | ProductVariation >(
+	const product = useSelect(
 		( select ) => {
-			const { getEntityRecord } = select( 'core' );
+			const { getEntityRecord } = select( coreStore );
 
 			return getEntityRecord( 'postType', productType, id ) as
 				| Product

diff --git a/plugins/woocommerce/client/admin/client/products/hooks/use-product-entity-record.ts b/plugins/woocommerce/client/admin/client/products/hooks/use-product-entity-record.ts
@@ -3,6 +3,7 @@
  */
 import { AUTO_DRAFT_NAME } from '@woocommerce/product-editor';
 import { type Product } from '@woocommerce/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { dispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
@@ -17,7 +18,7 @@ export function useProductEntityRecord(
 			return;
 		}
 
-		const createProductPromise = dispatch( 'core' ).saveEntityRecord(
+		const createProductPromise = dispatch( coreStore ).saveEntityRecord(
 			'postType',
 			'product',
 			{

diff --git a/...ins/woocommerce/client/admin/client/products/hooks/use-product-variation-entity-record.ts b/...ins/woocommerce/client/admin/client/products/hooks/use-product-variation-entity-record.ts
@@ -3,6 +3,7 @@
  */
 import { ProductVariation } from '@woocommerce/data';
 import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useState } from '@wordpress/element';
 
 export function useProductVariationEntityRecord(
@@ -14,8 +15,8 @@ export function useProductVariationEntityRecord(
 
 	useEffect( () => {
 		const getRecordPromise: Promise< ProductVariation > = resolveSelect(
-			'core'
-		).getEntityRecord< ProductVariation >(
+			coreStore
+		).getEntityRecord(
 			'postType',
 			'product_variation',
 			Number.parseInt( variationId, 10 )

diff --git a/plugins/woocommerce/client/admin/client/products/product-page.tsx b/plugins/woocommerce/client/admin/client/products/product-page.tsx
@@ -71,7 +71,7 @@ export default function ProductPage() {
 				return (
 					<>
 						<WooProductMoreMenuItem>
-							{ ( { onClose }: { onClose: () => void } ) => (
+							{ ( { onClose } ) => (
 								<MoreMenuFill onClose={ onClose } />
 							) }
 						</WooProductMoreMenuItem>

diff --git a/plugins/woocommerce/client/admin/client/products/product-variation-page.tsx b/plugins/woocommerce/client/admin/client/products/product-variation-page.tsx
@@ -41,7 +41,7 @@ export default function ProductPage() {
 			render: () => (
 				<>
 					<WooProductMoreMenuItem>
-						{ ( { onClose }: { onClose: () => void } ) => (
+						{ ( { onClose } ) => (
 							<>
 								<DeleteVariationMenuItem onClose={ onClose } />
 								<MoreMenuFill

diff --git a/...ocommerce/client/admin/client/products/tour/block-editor/use-block-editor-tour-options.ts b/...ocommerce/client/admin/client/products/tour/block-editor/use-block-editor-tour-options.ts
@@ -14,15 +14,17 @@ export const useBlockEditorTourOptions = () => {
 			select( OPTIONS_STORE_NAME );
 
 		const wasTourShown =
+			// @ts-expect-error Todo: awaiting more global fix, demo: https://github.com/woocommerce/woocommerce/pull/54146
 			getOption( BLOCK_EDITOR_TOUR_SHOWN_OPTION ) === 'yes' ||
+			// @ts-expect-error Todo: awaiting more global fix, demo: https://github.com/woocommerce/woocommerce/pull/54146
 			! hasFinishedResolution( 'getOption', [
 				BLOCK_EDITOR_TOUR_SHOWN_OPTION,
 			] );
 
 		return {
 			shouldTourBeShown: ! wasTourShown,
 		};
-	} );
+	}, [] );
 
 	const dismissModal = () => {
 		updateOptions( {

diff --git a/...ocommerce/client/admin/client/products/tour/block-editor/use-published-products-count.tsx b/...ocommerce/client/admin/client/products/tour/block-editor/use-published-products-count.tsx
@@ -14,11 +14,13 @@ export const usePublishedProductsCount = () => {
 		const { getProductsTotalCount, hasFinishedResolution } =
 			select( PRODUCTS_STORE_NAME );
 
+		// @ts-expect-error Todo: awaiting more global fix, demo: https://github.com/woocommerce/woocommerce/pull/54146
 		const publishedProductsCount = getProductsTotalCount(
 			PUBLISHED_PRODUCTS_QUERY_PARAMS,
 			0
 		) as number;
 
+		// @ts-expect-error Todo: awaiting more global fix, demo: https://github.com/woocommerce/woocommerce/pull/54146
 		const loadingPublishedProductsCount = ! hasFinishedResolution(
 			'getProductsTotalCount',
 			[ PUBLISHED_PRODUCTS_QUERY_PARAMS, 0 ]
@@ -30,5 +32,5 @@ export const usePublishedProductsCount = () => {
 			// we consider a user new if they have no published products
 			isNewUser: publishedProductsCount < 1,
 		};
-	} );
+	}, [] );
 };