add preview site btn in personalize store task (https://github.com/woocommerce/woocommerce-admin/pull/6513)

* Add preview site btn on appearance task

* Add testing instructions and changelog

* Change letter case

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -9,6 +9,14 @@
 3. Note that all the reports exist and navigating to those reports works as expected.
 4. Check that report menu items are marked active when navigating to that page.
 
+### Add preview site button on the appearance task #6457
+
+1. Navigate to Home and click "Personalzie your store" task.
+2. Click on the "Preview Site" button on the header.
+3. A new tab should open and the URL should be the site URL.
+4. Navigate to other tasks such as "Store Details" or "Add products" .
+5. The "Preview Site" should not be shown on the other tasks.
+
 ### Fix double prefixing of navigation URLs #6460
 
 1. Register a navigation menu item with a full URL or admin link.

plugins/woocommerce-admin/client/header/activity-panel/index.js

@@ -8,7 +8,12 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { uniqueId, find } from 'lodash';
 import CrossIcon from 'gridicons/dist/cross-small';
 import classnames from 'classnames';
-import { Icon, help as helpIcon, inbox as inboxIcon } from '@wordpress/icons';
+import {
+	Icon,
+	help as helpIcon,
+	inbox as inboxIcon,
+	external,
+} from '@wordpress/icons';
 import { getAdminLink } from '@woocommerce/wc-admin-settings';
 import { H, Section } from '@woocommerce/components';
 import { OPTIONS_STORE_NAME, useUser } from '@woocommerce/data';
@@ -176,7 +181,18 @@ export const ActivityPanel = ( { isEmbedded, query, userPreferencesData } ) => {
 				! isEmbedded && isHomescreen() && ! isPerformingSetupTask(),
 		};
 
-		return [ inbox, setup, displayOptions, help ].filter(
+		const previewSite = {
+			name: 'previewSite',
+			title: __( 'Preview site', 'woocommerce-admin' ),
+			icon: <Icon icon={ external } />,
+			visible: query.page === 'wc-admin' && query.task === 'appearance',
+			onClick: () => {
+				window.open( window.wcSettings.siteUrl );
+				return null;
+			},
+		};
+
+		return [ inbox, setup, previewSite, displayOptions, help ].filter(
 			( tab ) => tab.visible
 		);
 	};

plugins/woocommerce-admin/readme.txt

@@ -79,6 +79,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Add: Add legacy report items to new navigation #6507
 - Dev: Add initial tests for navigation Menu class #6492
 - Dev: Remove active item from navigation store #6486
+- Add: Add preview site button on the appearance task #6457
 - Fix: Add check for navigating being enabled. #6462
 - Dev: Add nav favorite button tests #6446
 - Dev: Add a changelog lint check to PRs. #6414