Add routing and navigation for Saved Articles page behind feature switch

client/components/mma/MMAPage.tsx

@@ -236,6 +236,12 @@ const DeliveryRecordsProblemConfirmation = lazy(() =>
 	})),
 );
 
+const SavedArticles = lazy(() =>
+	import(
+		/* webpackChunkName: "SavedArticles" */ './savedArticles/SavedArticles'
+	).then(({ SavedArticles }) => ({ default: SavedArticles })),
+);
+
 const EmailAndMarketing = lazy(() =>
 	import(
 		/* webpackChunkName: "EmailAndMarketing" */ './identity/emailAndMarketing/EmailAndMarketing'
@@ -319,6 +325,12 @@ const MMARouter = () => {
 							path="/email-prefs"
 							element={<EmailAndMarketing />}
 						/>
+						{featureSwitches.savedArticles && (
+							<Route
+								path="/saved-articles"
+								element={<SavedArticles />}
+							/>
+						)}
 						<Route
 							path="/public-settings"
 							element={<PublicProfile />}

client/components/mma/MMAPageSkeleton.tsx

@@ -97,6 +97,11 @@ const MMALocationObjectArr: LocationObject[] = [
 		path: '/email-prefs',
 		selectedNavItem: NAV_LINKS.emailPrefs,
 	},
+	{
+		title: 'Saved articles',
+		path: '/saved-articles',
+		selectedNavItem: NAV_LINKS.savedArticles,
+	},
 	{
 		title: 'Edit your profile',
 		path: '/public-settings',

client/components/mma/savedArticles/SavedArticles.stories.tsx

@@ -0,0 +1 @@
+// TODO

client/components/mma/savedArticles/SavedArticles.tsx

@@ -0,0 +1,13 @@
+import { NAV_LINKS } from '../../shared/nav/NavConfig';
+import { PageContainer } from '../Page';
+
+export const SavedArticles = () => {
+	return (
+		<PageContainer
+			selectedNavItem={NAV_LINKS.savedArticles}
+			pageTitle={NAV_LINKS.savedArticles.title}
+		>
+			<p>There is nothing to see here yet</p>
+		</PageContainer>
+	);
+};

client/components/shared/nav/DropdownNav.tsx

@@ -203,8 +203,9 @@ export const DropdownNav = () => {
 			</button>
 
 			<ul css={dropdownNavCss(showMenu, isHelpCentre)}>
-				{Object.values(NAV_LINKS).map(
-					(navItem: MenuSpecificNavItem) => (
+				{Object.values(NAV_LINKS)
+					.filter((navItem) => !navItem.isExcludedByFeatureSwitch)
+					.map((navItem: MenuSpecificNavItem) => (
 						<li key={navItem.title}>
 							<a href={navItem.link} css={dropdownNavItemCss}>
 								{navItem.icon && (
@@ -242,8 +243,7 @@ export const DropdownNav = () => {
 								</span>
 							</a>
 						</li>
-					),
-				)}
+					))}
 			</ul>
 		</nav>
 	);

client/components/shared/nav/LeftSideNav.tsx

@@ -91,6 +91,7 @@ export const LeftSideNav = (props: LeftSideNavProps) => (
 	<ul css={leftNavCss}>
 		{Object.values(NAV_LINKS)
 			.filter((navItem) => !navItem.isDropDownExclusive)
+			.filter((navItem) => !navItem.isExcludedByFeatureSwitch)
 			.map((navItem: MenuSpecificNavItem) => (
 				<li
 					css={leftNavItemCss(props.selectedNavItem === navItem)}

client/components/shared/nav/NavConfig.tsx

@@ -1,4 +1,5 @@
 import { conf } from '../../../../server/config';
+import { featureSwitches } from '../../../../shared/featureSwitches';
 import { AccountOverviewIcon } from '../../mma/shared/assets/AccountOverviewIcon';
 import { CreditCardIcon } from '../../mma/shared/assets/CreditCardIcon';
 import { EmailPrefsIcon } from '../../mma/shared/assets/EmailPrefIcon';
@@ -20,13 +21,15 @@ export interface NavItem {
 
 export interface MenuSpecificNavItem extends NavItem {
 	isDropDownExclusive?: boolean;
+	isExcludedByFeatureSwitch?: boolean;
 }
 
 interface NavLinks {
 	accountOverview: MenuSpecificNavItem;
 	billing: MenuSpecificNavItem;
 	profile: MenuSpecificNavItem;
 	settings: MenuSpecificNavItem;
+	savedArticles: MenuSpecificNavItem;
 	emailPrefs: MenuSpecificNavItem;
 	help: MenuSpecificNavItem;
 	comments: MenuSpecificNavItem;
@@ -60,6 +63,12 @@ export const NAV_LINKS: NavLinks = {
 		local: true,
 		icon: ProfileIcon,
 	},
+	savedArticles: {
+		title: 'Saved articles',
+		link: '/saved-articles',
+		local: true,
+		isExcludedByFeatureSwitch: !featureSwitches.savedArticles,
+	},
 	emailPrefs: {
 		title: 'Emails & marketing',
 		link: '/email-prefs',

cypress/integration/parallel-6/savedArticles.spec.ts

@@ -0,0 +1,40 @@
+import { featureSwitches } from '../../../shared/featureSwitches';
+
+if (!featureSwitches.savedArticles) {
+	describe('Feature Switch OFF: Saved Articles', () => {
+		beforeEach(() => {
+			cy.session('auth', () => {
+				cy.setCookie('gu-cmp-disabled', 'true');
+			});
+		});
+
+		it('redirects to account overview homepage from /saved-articles route ', () => {
+			cy.visit('/saved-articles');
+
+			cy.url().should('not.contain', '/saved-articles');
+
+			// check Navigation/Page Title
+			cy.findAllByText('Account overview').should(
+				'have.length.at.least',
+				1,
+			);
+			cy.findAllByText('Saved articles').should('have.length', 0);
+		});
+	});
+}
+
+if (featureSwitches.savedArticles) {
+	describe('Feature Switch ON: Saved Article', () => {
+		beforeEach(() => {
+			cy.session('auth', () => {
+				cy.setCookie('gu-cmp-disabled', 'true');
+			});
+		});
+
+		it('displays Saved Article page', () => {
+			cy.visit('/saved-articles');
+
+			cy.findAllByText('Saved articles').should('have.length', 2);
+		});
+	});
+}

shared/featureSwitches.ts

@@ -27,4 +27,5 @@ export const featureSwitches: Record<string, boolean> = {
 	cancellationProductSwitch: false,
 	accountOverviewNewLayout: false,
 	productSwitching: true,
+	savedArticles: false,
 };