Try to merge add-product-page and edit-product-page into a single product-page: running into some issues probably with the controller

plugins/woocommerce-admin/client/layout/controller.js

@@ -24,17 +24,10 @@ import getReports from '../analytics/report/get-reports';
 import { getAdminSetting } from '~/utils/admin-settings';
 import { NoMatch } from './NoMatch';
 
-const EditProductPage = lazy( () =>
-	import(
-		/* webpackChunkName: "edit-product-page" */ '../products/edit-product-page'
-	)
+const ProductPage = lazy( () =>
+	import( /* webpackChunkName: "product-page" */ '../products/product-page' )
 );
 
-const AddProductPage = lazy( () =>
-	import(
-		/* webpackChunkName: "add-product-page" */ '../products/add-product-page'
-	)
-);
 const AnalyticsReport = lazy( () =>
 	import( /* webpackChunkName: "analytics-report" */ '../analytics/report' )
 );
@@ -176,7 +169,7 @@ export const getPages = () => {
 
 	if ( window.wcAdminFeatures[ 'new-product-management-experience' ] ) {
 		pages.push( {
-			container: AddProductPage,
+			container: ProductPage,
 			path: '/add-product',
 			breadcrumbs: [
 				[ '/add-product', __( 'Product', 'woocommerce' ) ],
@@ -190,7 +183,7 @@ export const getPages = () => {
 		} );
 
 		pages.push( {
-			container: EditProductPage,
+			container: ProductPage,
 			path: '/product/:productId',
 			breadcrumbs: [
 				[ '/edit-product', __( 'Product', 'woocommerce' ) ],

plugins/woocommerce-admin/client/products/product-page.tsx

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { Spinner, FormRef } from '@woocommerce/components';
+import {
+	PartialProduct,
+	Product,
+	PRODUCTS_STORE_NAME,
+	WCDataSelector,
+} from '@woocommerce/data';
+import { useParams } from 'react-router-dom';
+/**
+ * Internal dependencies
+ */
+import { ProductFormLayout } from './layout/product-form-layout';
+import './product-page.scss';
+import { ProductForm } from './product-form';
+
+const EditProductPage: React.FC = () => {
+	const { productId } = useParams();
+	const previousProductRef = useRef< PartialProduct >();
+	const formRef = useRef< FormRef< Partial< Product > > >( null );
+	const isEditProduct = Boolean( productId );
+	const { product, isLoading, isPendingAction } = useSelect(
+		( select: WCDataSelector ) => {
+			const {
+				getProduct,
+				hasFinishedResolution,
+				isPending,
+				getPermalinkParts,
+			} = select( PRODUCTS_STORE_NAME );
+			if ( productId ) {
+				const retrievedProduct = getProduct(
+					parseInt( productId, 10 ),
+					undefined
+				);
+				const permalinkParts = getPermalinkParts(
+					parseInt( productId, 10 )
+				);
+				return {
+					product:
+						permalinkParts && retrievedProduct
+							? retrievedProduct
+							: undefined,
+					isLoading:
+						! hasFinishedResolution( 'getProduct', [
+							parseInt( productId, 10 ),
+						] ) ||
+						! hasFinishedResolution( 'getPermalinkParts', [
+							parseInt( productId, 10 ),
+						] ),
+					isPendingAction:
+						isPending( 'createProduct' ) ||
+						isPending(
+							'deleteProduct',
+							parseInt( productId, 10 )
+						) ||
+						isPending( 'updateProduct', parseInt( productId, 10 ) ),
+				};
+			}
+			return {
+				isLoading: false,
+				isPendingAction: false,
+			};
+		}
+	);
+
+	useEffect( () => {
+		// used for determening the wasDeletedUsingAction condition.
+		if (
+			isEditProduct &&
+			previousProductRef.current &&
+			product &&
+			previousProductRef.current.id !== product.id &&
+			formRef.current
+		) {
+			formRef.current.resetForm( product );
+		}
+		previousProductRef.current = product;
+	}, [ product ] );
+
+	useEffect( () => {
+		recordEvent( 'view_new_product_management_experience' );
+	}, [] );
+
+	const wasDeletedUsingAction =
+		previousProductRef.current?.id === product?.id &&
+		previousProductRef.current?.status !== 'trash' &&
+		product?.status === 'trash';
+
+	return isEditProduct ? (
+		<div className="woocommerce-edit-product">
+			{ isLoading && ! product ? (
+				<div className="woocommerce-edit-product__spinner">
+					<Spinner />
+				</div>
+			) : null }
+			{ product &&
+				product.status === 'trash' &&
+				! isPendingAction &&
+				! wasDeletedUsingAction && (
+					<ProductFormLayout>
+						<div className="woocommerce-edit-product__error">
+							{ __(
+								'You cannot edit this item because it is in the Trash. Please restore it and try again.',
+								'woocommerce'
+							) }
+						</div>
+					</ProductFormLayout>
+				) }
+			{ product &&
+				( product.status !== 'trash' || wasDeletedUsingAction ) && (
+					<ProductForm formRef={ formRef } product={ product } />
+				) }
+		</div>
+	) : (
+		<div className="woocommerce-add-product">
+			<ProductForm />
+		</div>
+	);
+};
+
+export default EditProductPage;