Merge pull request #2574 from woocommerce/remove/2406-woo-nav

woocommerce · Sep 4, 2024 · 12c09f8 · 12c09f8
2 parents baeac50 + 8731dee
commit 12c09f8
Show file tree

Hide file tree

Showing 25 changed files with 51 additions and 363 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -50,9 +50,6 @@ module.exports = {
 		'<rootDir>/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
@@ -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 (
 		<div className="gla-attribute-mapping">
-			<NavigationClassic />
+			<MainTabNav />
 			<RebrandingTour />
 			<Section
 				title={ __( 'Manage attributes', 'google-listings-and-ads' ) }

diff --git a/js/src/components/main-tab-nav/index.js b/js/src/components/main-tab-nav/index.js
@@ -0,0 +1 @@
+export { default } from './main-tab-nav';
diff --git a/...onents/navigation-classic/main-tab-nav.js → ...c/components/main-tab-nav/main-tab-nav.js b/...onents/navigation-classic/main-tab-nav.js → ...c/components/main-tab-nav/main-tab-nav.js
@@ -9,7 +9,7 @@ import { getNewPath, getPath } from '@woocommerce/navigation';
  */
 import { glaData } from '.~/constants';
 import AppTabNav from '.~/components/app-tab-nav';
-import useLegacyMenuEffect from '.~/hooks/useLegacyMenuEffect';
+import useMenuEffect from '.~/hooks/useMenuEffect';
 
 let tabs = [
 	{
@@ -51,7 +51,7 @@ const getSelectedTabKey = () => {
 };
 
 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
diff --git 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
@@ -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 = () => {
 		<>
 			<div className="gla-dashboard">
 				<DifferentCurrencyNotice context="dashboard" />
-				<NavigationClassic />
+				<MainTabNav />
 				<RebrandingTour />
 				<div className="gla-dashboard__filter">
 					<AppDateRangeFilterPicker

diff --git a/js/src/dashboard/index.test.js b/js/src/dashboard/index.test.js
@@ -54,7 +54,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/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 → js/src/hooks/useMenuEffect.js b/js/src/hooks/useLegacyMenuEffect.js → 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 <Route>.
@@ -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
@@ -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
@@ -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 (
 		<>
-			<NavigationClassic />
+			<MainTabNav />
 			<RebrandingTour />
 			{ isSubmissionSuccessOpen && <SubmissionSuccessGuide /> }
 			{ canCESPromptOpen && (

diff --git 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
@@ -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 (
 		<>
 			<DifferentCurrencyNotice context="reports-products" />
-			<NavigationClassic />
+			<MainTabNav />
 			<RebrandingTour />
 			<ReportsNavigation />
 			{ loaded ? (

diff --git 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 (
 		<>
 			<DifferentCurrencyNotice context={ trackEventId } />
-			<NavigationClassic />
+			<MainTabNav />
 			<RebrandingTour />
 			<ReportsNavigation />
 			<ProgramsReportFilters

diff --git a/js/src/reports/reports-navigation.js b/js/src/reports/reports-navigation.js
@@ -7,8 +7,6 @@ import { getNewPath } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
-import AppTabNav from '.~/components/app-tab-nav';
-import isWCNavigationEnabled from '.~/utils/isWCNavigationEnabled';
 import AppSubNav from '.~/components/app-sub-nav';
 import getSelectedReportKey from '.~/utils/getSelectedReportKey';
 
@@ -26,14 +24,9 @@ const tabs = [
 ];
 
 const ReportsNavigation = () => {
-	const navigationEnabled = isWCNavigationEnabled();
 	const reportKey = getSelectedReportKey();
 
-	return navigationEnabled ? (
-		<AppTabNav tabs={ tabs } selectedKey={ reportKey } />
-	) : (
-		<AppSubNav tabs={ tabs } selectedKey={ reportKey } />
-	);
+	return <AppSubNav tabs={ tabs } selectedKey={ reportKey } />;
 };
 
 export default ReportsNavigation;
diff --git 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 (
 		<div className={ pageClassName }>
 			<EnableNewProductSyncNotice />
-			<NavigationClassic />
+			<MainTabNav />
 			<RebrandingTour />
 			<ContactInformationPreview />
 			<LinkedAccounts />

diff --git 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 ] );