From 2902cdee92890118ba14bc1a8febb53e7f26fcee Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Wed, 1 Nov 2023 12:30:47 +0800
Subject: [PATCH] [CYS] Fix undefined query id warning (#41083)

* Fix Warning: Undefined array key "queryId"

* Add changelog

* Update trigger save button logo

* Update plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

---------

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
---
 .../assembler-hub/sidebar/save-hub.tsx        | 44 ++++++++++++++++---
 .../changelog/fix-undefined-queryId-warning   |  4 ++
 2 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-undefined-queryId-warning

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx
index 9f68178109e..bbdd123c386 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx
@@ -4,7 +4,12 @@
 /**
  * External dependencies
  */
-import { useContext, useState } from '@wordpress/element';
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useState,
+} from '@wordpress/element';
 import { useQuery } from '@woocommerce/navigation';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -25,6 +30,8 @@ import { store as noticesStore } from '@wordpress/notices';
 // @ts-ignore No types for this exist yet.
 import { useEntitiesSavedStatesIsDirty as useIsDirty } from '@wordpress/editor';
 import { recordEvent } from '@woocommerce/tracks';
+// @ts-ignore No types for this exist yet.
+import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
 
 /**
  * Internal dependencies
@@ -38,6 +45,7 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 		name: 'wp_navigation',
 	},
 ];
+let shouldTriggerSave = true;
 
 export const SaveHub = () => {
 	const urlParams = useQuery();
@@ -47,6 +55,7 @@ export const SaveHub = () => {
 	const { resetHighlightedBlockIndex } = useContext(
 		HighlightedBlockContext
 	);
+	const isEditorLoading = useIsSiteEditorLoading();
 	// @ts-ignore No types for this exist yet.
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
@@ -92,7 +101,7 @@ export const SaveHub = () => {
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
-	const save = async () => {
+	const save = useCallback( async () => {
 		for ( const { kind, name, key, property } of dirtyEntityRecords ) {
 			if ( kind === 'root' && name === 'site' ) {
 				await saveSpecifiedEntityEdits( 'root', 'site', undefined, [
@@ -115,7 +124,32 @@ export const SaveHub = () => {
 				__unstableMarkLastChangeAsPersistent();
 			}
 		}
-	};
+	}, [
+		dirtyEntityRecords,
+		editEntityRecord,
+		saveEditedEntityRecord,
+		saveSpecifiedEntityEdits,
+		__unstableMarkLastChangeAsPersistent,
+	] );
+
+	const isMainScreen = urlParams.path === '/customize-store/assembler-hub';
+
+	// Trigger a save when the editor is loaded and there are unsaved changes in main screen. This is needed to ensure FE is displayed correctly because some patterns have dynamic attributes that only generate in Editor.
+	useEffect( () => {
+		if ( isEditorLoading ) {
+			return;
+		}
+
+		if ( ! isMainScreen ) {
+			shouldTriggerSave = false;
+			return;
+		}
+
+		if ( shouldTriggerSave && isDirty ) {
+			save();
+			shouldTriggerSave = false;
+		}
+	}, [ isEditorLoading, isDirty, isMainScreen, save ] );
 
 	const onClickSaveButton = async () => {
 		const source = `${ urlParams.path.replace(
@@ -153,13 +187,13 @@ export const SaveHub = () => {
 	};
 
 	const renderButton = () => {
-		if ( urlParams.path === '/customize-store/assembler-hub' ) {
+		if ( isMainScreen ) {
 			return (
 				<Button
 					variant="primary"
 					onClick={ onDone }
 					className="edit-site-save-hub__button"
-					disabled={ isResolving }
+					disabled={ isResolving || isEditorLoading }
 					aria-disabled={ isResolving }
 					// @ts-ignore No types for this exist yet.
 					__next40pxDefaultSize
diff --git a/plugins/woocommerce/changelog/fix-undefined-queryId-warning b/plugins/woocommerce/changelog/fix-undefined-queryId-warning
new file mode 100644
index 00000000000..568fd3ece77
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-undefined-queryId-warning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Undefined array key "queryId" error