diff --git a/jest.config.js b/jest.config.js index 9bd5f4f10e..600f2b8658 100644 --- a/jest.config.js +++ b/jest.config.js @@ -50,9 +50,6 @@ module.exports = { '/js/build-dev', ], globals: { - wcAdminFeatures: { - navigation: false, - }, wcSettings: { currency: { code: 'USD', diff --git a/js/src/attribute-mapping/index.js b/js/src/attribute-mapping/index.js index 8acfe76903..00cad9991b 100644 --- a/js/src/attribute-mapping/index.js +++ b/js/src/attribute-mapping/index.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; import Section from '.~/wcdl/section'; import AttributeMappingDescription from './attribute-mapping-description'; import AttributeMappingTable from './attribute-mapping-table'; -import NavigationClassic from '.~/components/navigation-classic'; +import MainTabNav from '.~/components/main-tab-nav'; import RebrandingTour from '.~/components/tours/rebranding-tour'; import './index.scss'; @@ -21,7 +21,7 @@ import './index.scss'; const AttributeMapping = () => { return (
- +
{ }; const MainTabNav = () => { - useLegacyMenuEffect(); + useMenuEffect(); const selectedKey = getSelectedTabKey(); diff --git a/js/src/components/navigation-classic/index.js b/js/src/components/navigation-classic/index.js deleted file mode 100644 index 363a9e3e89..0000000000 --- a/js/src/components/navigation-classic/index.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Internal dependencies - */ -import MainTabNav from './main-tab-nav'; -import isWCNavigationEnabled from '.~/utils/isWCNavigationEnabled'; - -/** - * Display tab-based navigation when the new WC Navigation is not enabled. - * - * @return {import("./main-tab-nav").default} Retuns MainTabNav if WC Navigation is not enabled. - */ -const NavigationClassic = () => { - const navigationEnabled = isWCNavigationEnabled(); - - return navigationEnabled ? null : ; -}; - -export default NavigationClassic; diff --git a/js/src/css/shared/_woocommerce-admin.scss b/js/src/css/shared/_woocommerce-admin.scss index 09d897cf0c..4a96bad98d 100644 --- a/js/src/css/shared/_woocommerce-admin.scss +++ b/js/src/css/shared/_woocommerce-admin.scss @@ -10,18 +10,8 @@ .woocommerce-layout { padding-top: 0; - // do not set the header to display: none, - // because we want the offsetHeight value - // and set it to wpbody-content margin-top to counter back. .woocommerce-layout__header { - visibility: hidden; - - // only display the top left WC navigation, - // do not display the h1 page title element - // and the top right activity panel. - &-wrapper > *:not(.woocommerce-navigation) { - display: none; - } + display: none; } // Hide StoreAlerts. @@ -37,28 +27,14 @@ } } } - - // the following is only applicable when WC Navigation is enabled - // and the page is on a large screen with .is-wc-nav-expanded applied. - &.has-woocommerce-navigation.is-wc-nav-expanded { - .woocommerce-layout__header { - // WC Navigation lies inside woocommerce-layout__header, - // so we need to display this. - display: block; - - // width of the WC Navigation sidebar. - width: 240px; - } - } } // Used in .~/hooks/useLayout.js .gla-full-page { - // hack to fix the margin-top when WC Navigation is not enabled - // and width is between 600px and 782px. + // hack to fix the margin-top when width is between 600px and 782px. // without this, the margin-top would be -32px, // and there would be a visible small grey gap. - &.is-wp-toolbar-disabled:not(.has-woocommerce-navigation) { + &.is-wp-toolbar-disabled { @media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium) }) { margin-top: -46px; } diff --git a/js/src/dashboard/index.js b/js/src/dashboard/index.js index 67ac1bca35..926363493c 100644 --- a/js/src/dashboard/index.js +++ b/js/src/dashboard/index.js @@ -11,7 +11,7 @@ import { getNewPath, getQuery, getHistory } from '@woocommerce/navigation'; */ import AppButton from '.~/components/app-button'; import DifferentCurrencyNotice from '.~/components/different-currency-notice'; -import NavigationClassic from '.~/components/navigation-classic'; +import MainTabNav from '.~/components/main-tab-nav'; import CustomerEffortScorePrompt from '.~/components/customer-effort-score-prompt'; import AppDateRangeFilterPicker from './app-date-range-filter-picker'; import SummarySection from './summary-section'; @@ -88,7 +88,7 @@ const Dashboard = () => { <>
- +
() => ( ) ); beforeAll( () => { - // Used in the js/src/hooks/useLegacyMenuEffect.js dependency + // Used in the js/src/hooks/useMenuEffect.js dependency window.wpNavMenuClassChange = jest.fn(); } ); diff --git a/js/src/hooks/useLayout.js b/js/src/hooks/useLayout.js index f7a70d25c5..d9f3186207 100644 --- a/js/src/hooks/useLayout.js +++ b/js/src/hooks/useLayout.js @@ -30,8 +30,8 @@ export default function useLayout( layoutName ) { const bodyClassList = document.body.classList; /** - * For WC Navigation, it already has classes applied, for example, "is-wp-toolbar-disabled". - * Here filter existing classes out to avoid them being removed in the cleanup function. + * Here filter potentially already applied classes out + * to avoid them being removed in the cleanup function. */ const classNames = classNameDict[ layoutName ].filter( ( name ) => ! bodyClassList.contains( name ) diff --git a/js/src/hooks/useLegacyMenuEffect.js b/js/src/hooks/useMenuEffect.js similarity index 52% rename from js/src/hooks/useLegacyMenuEffect.js rename to js/src/hooks/useMenuEffect.js index 53127dd426..42f9d35e80 100644 --- a/js/src/hooks/useLegacyMenuEffect.js +++ b/js/src/hooks/useMenuEffect.js @@ -2,10 +2,6 @@ * External dependencies */ import { useEffect } from '@wordpress/element'; -/** - * Internal dependencies - */ -import isWCNavigationEnabled from '.~/utils/isWCNavigationEnabled'; /** * Mocked result of parsing a page entry from {@link /js/src/index.js} by WC-admin's . @@ -18,25 +14,17 @@ const dashboardPage = { }; /** - * Effect that highlights the GLA Dashboard menu entry in the legacy WC menu. + * Effect that highlights the GLA Dashboard menu entry in the WC menu. * * Should be called for every "root page" (`.~/pages/*`) that wants to open the GLA menu. * - * The hook could be removed once WC Navigation will be always enabled, - * or if we make the plugin fully use the routing feature of WC, + * The hook could be removed once make the plugin fully use the routing feature of WC, * and let this be done by proper matching of URL matchers from {@link /js/src/index.js} * * @see window.wpNavMenuClassChange */ -export default function useLegacyMenuEffect() { - const navigationEnabled = isWCNavigationEnabled(); +export default function useMenuEffect() { return useEffect( () => { - // Highlight the wp-admin dashboard menu - if ( ! navigationEnabled ) { - window.wpNavMenuClassChange( - dashboardPage, - dashboardPage.match.url - ); - } - }, [ navigationEnabled ] ); + window.wpNavMenuClassChange( dashboardPage, dashboardPage.match.url ); + } ); } diff --git a/js/src/index.js b/js/src/index.js index 60a74bf5c2..9bcbce3b28 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -14,7 +14,6 @@ import { getSetting } from '@woocommerce/settings'; // eslint-disable-line impor import './css/index.scss'; import withAdminPageShell from '.~/components/withAdminPageShell'; import './data'; -import isWCNavigationEnabled from './utils/isWCNavigationEnabled'; import { addBaseEventProperties } from '.~/utils/tracks'; const Dashboard = lazy( () => @@ -59,24 +58,11 @@ addFilter( 'woocommerce_admin_pages_list', 'woocommerce/google-listings-and-ads/add-page-routes', ( pages ) => { - const navigationEnabled = isWCNavigationEnabled(); - const initialBreadcrumbs = [ [ '', woocommerceTranslation ] ]; - - /** - * If the WooCommerce Navigation feature is not enabled, - * we want to display the plugin under WC Marketing; - * otherwise, display it under WC Navigation - Extensions. - */ - if ( ! navigationEnabled ) { - initialBreadcrumbs.push( [ - '/marketing', - __( 'Marketing', 'google-listings-and-ads' ), - ] ); - } - - initialBreadcrumbs.push( - __( 'Google for WooCommerce', 'google-listings-and-ads' ) - ); + const initialBreadcrumbs = [ + [ '', woocommerceTranslation ], + [ '/marketing', __( 'Marketing', 'google-listings-and-ads' ) ], + __( 'Google for WooCommerce', 'google-listings-and-ads' ), + ]; const pluginAdminPages = [ { diff --git a/js/src/product-feed/index.js b/js/src/product-feed/index.js index 142c29ad9a..3f17da9c7d 100644 --- a/js/src/product-feed/index.js +++ b/js/src/product-feed/index.js @@ -8,7 +8,7 @@ import { getQuery } from '@woocommerce/navigation'; /** * Internal dependencies */ -import NavigationClassic from '.~/components/navigation-classic'; +import MainTabNav from '.~/components/main-tab-nav'; import IssuesTableCard from './issues-table-card'; import ProductFeedTableCard from './product-feed-table-card'; import SubmissionSuccessGuide from './submission-success-guide'; @@ -47,7 +47,7 @@ const ProductFeed = () => { return ( <> - + { isSubmissionSuccessOpen && } { canCESPromptOpen && ( diff --git a/js/src/product-feed/index.test.js b/js/src/product-feed/index.test.js index 5d9a10ce7e..d14b8a626c 100644 --- a/js/src/product-feed/index.test.js +++ b/js/src/product-feed/index.test.js @@ -43,7 +43,7 @@ jest.mock( '.~/components/customer-effort-score-prompt', () => () => ( ) ); beforeAll( () => { - // Used in the js/src/hooks/useLegacyMenuEffect.js dependency + // Used in the js/src/hooks/useMenuEffect.js dependency window.wpNavMenuClassChange = jest.fn(); } ); diff --git a/js/src/reports/products/index.js b/js/src/reports/products/index.js index c29fd7c549..948b177bcd 100644 --- a/js/src/reports/products/index.js +++ b/js/src/reports/products/index.js @@ -18,7 +18,7 @@ import useMetricsWithFormatter from '../useMetricsWithFormatter'; import useAdsCampaigns from '.~/hooks/useAdsCampaigns'; import AppSpinner from '.~/components/app-spinner'; import DifferentCurrencyNotice from '.~/components/different-currency-notice'; -import NavigationClassic from '.~/components/navigation-classic'; +import MainTabNav from '.~/components/main-tab-nav'; import ProductsReportFilters from './products-report-filters'; import SummarySection from '../summary-section'; import ChartSection from '../chart-section'; @@ -123,7 +123,7 @@ const ProductsReportPage = () => { return ( <> - + { loaded ? ( diff --git a/js/src/reports/programs/index.js b/js/src/reports/programs/index.js index f21e4f1825..24e0b800e7 100644 --- a/js/src/reports/programs/index.js +++ b/js/src/reports/programs/index.js @@ -11,7 +11,7 @@ import { getQuery } from '@woocommerce/navigation'; import useProgramsReport, { usePerformanceReport } from './useProgramsReport'; import useMetricsWithFormatter from '../useMetricsWithFormatter'; import DifferentCurrencyNotice from '.~/components/different-currency-notice'; -import NavigationClassic from '.~/components/navigation-classic'; +import MainTabNav from '.~/components/main-tab-nav'; import ProgramsReportFilters from './programs-report-filters'; import SummarySection from '../summary-section'; import ChartSection from '../chart-section'; @@ -103,7 +103,7 @@ const ProgramsReport = () => { return ( <> - + { - const navigationEnabled = isWCNavigationEnabled(); const reportKey = getSelectedReportKey(); - return navigationEnabled ? ( - - ) : ( - - ); + return ; }; export default ReportsNavigation; diff --git a/js/src/settings/index.js b/js/src/settings/index.js index 3986b238bd..8be37d0fa0 100644 --- a/js/src/settings/index.js +++ b/js/src/settings/index.js @@ -8,7 +8,7 @@ import { getQuery, getHistory } from '@woocommerce/navigation'; * Internal dependencies */ import { API_RESPONSE_CODES } from '.~/constants'; -import useLegacyMenuEffect from '.~/hooks/useLegacyMenuEffect'; +import useMenuEffect from '.~/hooks/useMenuEffect'; import useGoogleAccount from '.~/hooks/useGoogleAccount'; import useUpdateRestAPIAuthorizeStatusByUrlQuery from '.~/hooks/useUpdateRestAPIAuthorizeStatusByUrlQuery'; import { subpaths, getReconnectAccountUrl } from '.~/utils/urls'; @@ -19,7 +19,7 @@ import ReconnectGoogleAccount from './reconnect-google-account'; import EditStoreAddress from './edit-store-address'; import EditPhoneNumber from './edit-phone-number'; import EnableNewProductSyncNotice from '.~/components/enable-new-product-sync-notice'; -import NavigationClassic from '.~/components/navigation-classic'; +import MainTabNav from '.~/components/main-tab-nav'; import RebrandingTour from '.~/components/tours/rebranding-tour'; import './index.scss'; @@ -28,7 +28,7 @@ const pageClassName = 'gla-settings'; const Settings = () => { const { subpath } = getQuery(); // Make the component highlight GLA entry in the WC legacy menu. - useLegacyMenuEffect(); + useMenuEffect(); useUpdateRestAPIAuthorizeStatusByUrlQuery(); @@ -65,7 +65,7 @@ const Settings = () => { return (
- + diff --git a/js/src/settings/reconnect-google-account/reconnect-google-account.js b/js/src/settings/reconnect-google-account/reconnect-google-account.js index 8b3704995a..dfa1f1b8ac 100644 --- a/js/src/settings/reconnect-google-account/reconnect-google-account.js +++ b/js/src/settings/reconnect-google-account/reconnect-google-account.js @@ -16,10 +16,6 @@ import Section from '.~/wcdl/section'; import AppSpinner from '.~/components/app-spinner'; import GoogleAccountCard from '.~/components/google-account-card'; import DisconnectGoogleAccountCard from './disconnect-google-account-card'; -import { - lockInReconnection, - unlockFromReconnection, -} from '../reconnectionLock'; export default function ReconnectGoogleAccount() { const { data } = useAppSelectDispatch( 'getGoogleAccountAccess' ); @@ -38,9 +34,6 @@ export default function ReconnectGoogleAccount() { useEffect( () => { if ( isCompletedReconnection ) { getHistory().replace( getDashboardUrl() ); - unlockFromReconnection(); - } else { - lockInReconnection(); } }, [ isCompletedReconnection ] ); diff --git a/js/src/settings/reconnect-wpcom-account/reconnect-wpcom-account.js b/js/src/settings/reconnect-wpcom-account/reconnect-wpcom-account.js index 60f96b6bf5..1598b993be 100644 --- a/js/src/settings/reconnect-wpcom-account/reconnect-wpcom-account.js +++ b/js/src/settings/reconnect-wpcom-account/reconnect-wpcom-account.js @@ -16,10 +16,6 @@ import AccountCard from '.~/components/account-card'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; import { ConnectWPComAccountCard } from '.~/components/wpcom-account-card'; import LinkedAccountsSectionWrapper from '../linked-accounts-section-wrapper'; -import { - lockInReconnection, - unlockFromReconnection, -} from '../reconnectionLock'; import './reconnect-wpcom-account.scss'; export default function ReconnectWPComAccount() { @@ -29,9 +25,6 @@ export default function ReconnectWPComAccount() { useEffect( () => { if ( isConnected ) { getHistory().replace( getSettingsUrl() ); - unlockFromReconnection(); - } else { - lockInReconnection(); } }, [ isConnected ] ); diff --git a/js/src/settings/reconnectionLock.js b/js/src/settings/reconnectionLock.js deleted file mode 100644 index 5de5f92abb..0000000000 --- a/js/src/settings/reconnectionLock.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * External dependencies - */ -import { getHistory, getNewPath } from '@woocommerce/navigation'; -import { getQueryArgs } from '@wordpress/url'; -import { isEqual } from 'lodash'; - -/** - * Internal dependencies - */ -import { pagePaths } from '.~/utils/urls'; -import isWCNavigationEnabled from '.~/utils/isWCNavigationEnabled'; -import './reconnectionLock.scss'; - -/* - * When required accounts were disconnected, the available link is - * the corresponding reconnecting subpage under the Settings page. - * - * But there is no reliable way to disable the menu link of WC Navigation, - * so the given workaround is using a pair of singleton locking and unlocking - * functions to disable the GLA menu links globally, and lock the current link - * as the available link when redirecting. - */ - -let unlockCallback = null; - -/** - * Disables the GLA menu links of WC Navigation except for the Settings link - * and uses the current link as the locked link. When clicking on the Settings link, - * it will redirect to the locked link. - */ -export function lockInReconnection() { - if ( unlockCallback ) { - return; - } - - const lockedQuery = getQueryArgs( document.location.search ); - const handleClick = ( e ) => { - const { target } = e; - - if ( target.tagName !== 'A' ) { - return; - } - - const paths = [ - pagePaths.dashboard, - pagePaths.reports, - pagePaths.productFeed, - pagePaths.settings, - ]; - - const targetQuery = getQueryArgs( target.getAttribute( 'href' ) ); - if ( paths.includes( targetQuery.path ) ) { - e.stopPropagation(); - e.preventDefault(); - - /** - * With WC Navigation, the available entry link on menu is the GLA Settings; - * With Classic Navigation, the available entry link is the only one link on menu. - * - * When clicking on the available entry link, redirects to the locked link - * if the current link is not the locked link. - */ - const isAvailableEntry = isWCNavigationEnabled() - ? targetQuery.path === pagePaths.settings - : true; - const currentQuery = getQueryArgs( document.location.search ); - if ( isAvailableEntry && ! isEqual( lockedQuery, currentQuery ) ) { - const { path, ...query } = lockedQuery; - - getHistory().push( getNewPath( query, path, null ) ); - } - } - }; - - document.defaultView.addEventListener( 'click', handleClick, true ); - document.body.classList.add( 'gla-reconnection-lock' ); - - unlockCallback = () => { - document.defaultView.removeEventListener( 'click', handleClick, true ); - document.body.classList.remove( 'gla-reconnection-lock' ); - }; -} - -/** - * Enables the GLA menu links of WC Navigation that are locked by - * the `lockInReconnection` function. - */ -export function unlockFromReconnection() { - if ( unlockCallback ) { - unlockCallback(); - unlockCallback = null; - } -} diff --git a/js/src/settings/reconnectionLock.scss b/js/src/settings/reconnectionLock.scss deleted file mode 100644 index 71197b2cb8..0000000000 --- a/js/src/settings/reconnectionLock.scss +++ /dev/null @@ -1,22 +0,0 @@ -// The workaround for making the GLA menu links of WC Navigation appear as disabled -// except for the GLA Settings link. -.gla-reconnection-lock { - .woocommerce-navigation { - .woocommerce-navigation__wrapper { - .components-navigation__item { - .components-button { - &[href*="path=%2Fgoogle%2Fdashboard"], - &[href*="path=%2Fgoogle%2Freports"], - &[href*="path=%2Fgoogle%2Fproduct-feed"] { - cursor: not-allowed; - color: $gray-600; - - &:focus { - box-shadow: none; - } - } - } - } - } - } -} diff --git a/js/src/utils/isWCNavigationEnabled.js b/js/src/utils/isWCNavigationEnabled.js deleted file mode 100644 index fd0472111d..0000000000 --- a/js/src/utils/isWCNavigationEnabled.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Checks whether the WC Navigation feature is enabled. - * - * @return {boolean} True / false. - */ -const isWCNavigationEnabled = () => { - return !! window.wcAdminFeatures?.navigation; -}; - -export default isWCNavigationEnabled; diff --git a/src/Menu/Dashboard.php b/src/Menu/Dashboard.php index fc78457a98..0016ea461d 100644 --- a/src/Menu/Dashboard.php +++ b/src/Menu/Dashboard.php @@ -17,7 +17,6 @@ class Dashboard implements Service, Registerable, MerchantCenterAwareInterface { use MenuFixesTrait; use MerchantCenterAwareTrait; - use WooAdminNavigationTrait; public const PATH = '/google/dashboard'; @@ -32,52 +31,15 @@ public function register(): void { add_action( 'admin_menu', function () { - if ( $this->is_woo_nav_enabled() ) { - $this->register_navigation_pages(); - } else { - $this->register_classic_submenu_page( - [ - 'id' => 'google-listings-and-ads', - 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), - 'parent' => 'woocommerce-marketing', - 'path' => self::PATH, - ] - ); - } + $this->register_classic_submenu_page( + [ + 'id' => 'google-listings-and-ads', + 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), + 'parent' => 'woocommerce-marketing', + 'path' => self::PATH, + ] + ); } ); } - - /** - * Register navigation pages for WC Navigation. - */ - protected function register_navigation_pages(): void { - wc_admin_register_page( - [ - 'id' => 'google-listings-and-ads-category', - 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), - 'parent' => 'woocommerce', - 'path' => self::PATH, - 'nav_args' => [ - 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), - 'is_category' => true, - 'menuId' => 'plugins', - 'is_top_level' => true, - ], - ] - ); - - wc_admin_register_page( - [ - 'id' => 'google-dashboard', - 'title' => __( 'Dashboard', 'google-listings-and-ads' ), - 'parent' => 'google-listings-and-ads-category', - 'path' => self::PATH, - 'nav_args' => [ - 'order' => 10, - 'parent' => 'google-listings-and-ads-category', - ], - ] - ); - } } diff --git a/src/Menu/GetStarted.php b/src/Menu/GetStarted.php index 9343fe9742..bdc8dcb701 100644 --- a/src/Menu/GetStarted.php +++ b/src/Menu/GetStarted.php @@ -17,7 +17,6 @@ class GetStarted implements Service, Registerable, MerchantCenterAwareInterface use MenuFixesTrait; use MerchantCenterAwareTrait; - use WooAdminNavigationTrait; public const PATH = '/google/start'; @@ -32,39 +31,15 @@ public function register(): void { add_action( 'admin_menu', function () { - if ( $this->is_woo_nav_enabled() ) { - $this->register_navigation_pages(); - } else { - $this->register_classic_submenu_page( - [ - 'id' => 'google-listings-and-ads', - 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), - 'parent' => 'woocommerce-marketing', - 'path' => self::PATH, - ] - ); - } + $this->register_classic_submenu_page( + [ + 'id' => 'google-listings-and-ads', + 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), + 'parent' => 'woocommerce-marketing', + 'path' => self::PATH, + ] + ); } ); } - - /** - * Register navigation pages for WC Navigation. - */ - protected function register_navigation_pages(): void { - wc_admin_register_page( - [ - 'id' => 'google-start', - 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), - 'parent' => 'woocommerce', - 'path' => self::PATH, - 'nav_args' => [ - 'title' => __( 'Google for WooCommerce', 'google-listings-and-ads' ), - 'is_category' => false, - 'menuId' => 'plugins', - 'is_top_level' => true, - ], - ] - ); - } } diff --git a/src/Menu/WooAdminNavigationTrait.php b/src/Menu/WooAdminNavigationTrait.php deleted file mode 100644 index 674fc28979..0000000000 --- a/src/Menu/WooAdminNavigationTrait.php +++ /dev/null @@ -1,32 +0,0 @@ -woo_nav_enabled ) ) { - $this->woo_nav_enabled = class_exists( Features::class ) && Features::is_enabled( 'navigation' ); - } - return $this->woo_nav_enabled; - } -}