From 5dfe505f94e6d93eeefd5ceea5ea70b8a294cfad Mon Sep 17 00:00:00 2001 From: Moon Date: Thu, 4 Mar 2021 18:37:18 -0800 Subject: [PATCH] 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 --- .../woocommerce-admin/TESTING-INSTRUCTIONS.md | 8 ++++++++ .../client/header/activity-panel/index.js | 20 +++++++++++++++++-- plugins/woocommerce-admin/readme.txt | 1 + 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index 0afd8a836b0..b76d60975bf 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/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. diff --git a/plugins/woocommerce-admin/client/header/activity-panel/index.js b/plugins/woocommerce-admin/client/header/activity-panel/index.js index a0a638de42d..b59f2973957 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/index.js +++ b/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: , + 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 ); }; diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 8bdcf69d38e..2bd34b32815 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/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