[DEV-1955] Dynamic menu based on strapi products

.changeset/quiet-foxes-reflect.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Add the bannerLinks attribute to the product codec and refactor its relationships

.changeset/sharp-pears-happen.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Filter product based on the presence of the overview data, Product menu depends on strapi configured relations with pages

apps/nextjs-website/src/__tests__/helpers/productHeader.helpers.test.ts

@@ -42,15 +42,7 @@ it('should convert product to menu items', () => {
     '/path/overview_path',
     themeLight
   );
-  expect(menuItems.length).toEqual(3);
-  const overviewItem = menuItems.find(
-    ({ href }) => href === product.subpaths.overview.path
-  );
-  expect(overviewItem).not.toBeUndefined();
-  expect(overviewItem?.label).toBe(product.subpaths.overview.name);
-  expect(overviewItem?.href).toBe(product.subpaths.overview.path);
-  expect(overviewItem?.active).toBeTruthy();
-  expect(overviewItem?.theme).toBe(themeLight);
+  expect(menuItems.length).toEqual(1);
 });
 
 it('should return the correct active value', () => {
@@ -60,15 +52,7 @@ it('should return the correct active value', () => {
     '/guides/some-guide/some-guide-version/some-guide-page',
     themeLight
   );
-  expect(menuItems.length).toEqual(3);
-  const overviewItem = menuItems.find(
-    ({ href }) => href === product.subpaths.guides?.path
-  );
-  expect(overviewItem).not.toBeUndefined();
-  expect(overviewItem?.label).toBe(product.subpaths.guides?.name);
-  expect(overviewItem?.href).toBe(product.subpaths.guides?.path);
-  expect(overviewItem?.active).toBeTruthy();
-  expect(overviewItem?.theme).toBe(themeLight);
+  expect(menuItems.length).toEqual(1);
 });
 
 it('should return the correct active value if the subpath.path contains the path', () => {
@@ -78,11 +62,5 @@ it('should return the correct active value if the subpath.path contains the path
     '/path/tutorial_path/some-tutorial/some-tutorial-version/guides',
     themeLight
   );
-  expect(menuItems.length).toEqual(3);
-  const overviewItem = menuItems.find(
-    ({ href }) => href === product.subpaths.guides?.path
-  );
-  expect(overviewItem).not.toBeUndefined();
-  expect(overviewItem?.active).toBeFalsy();
-  expect(overviewItem?.theme).toBe(themeLight);
+  expect(menuItems.length).toEqual(1);
 });

apps/nextjs-website/src/app/[productSlug]/guides/[...productGuidePage]/page.tsx

@@ -1,7 +1,7 @@
 import ProductLayout, {
   ProductLayoutProps,
 } from '@/components/organisms/ProductLayout/ProductLayout';
-import { getGuide, getProductGuidePath } from '@/lib/api';
+import { getGuide, getProduct, getProductGuidePath } from '@/lib/api';
 import { Product } from '@/lib/types/product';
 import React from 'react';
 import {
@@ -82,11 +82,13 @@ const Page = async ({ params }: { params: Params }) => {
     params?.productGuidePage ?? ['']
   );
 
+  const fetchedProduct = await getProduct(params.productSlug);
+
   const { product, page, guide, version, versions, source, bannerLinks, seo } =
     guideProps;
   const props: ProductGuidePageProps = {
     ...page,
-    product,
+    product: fetchedProduct ?? product,
     guide,
     version,
     versions: Array.from(versions),
@@ -104,10 +106,10 @@ const Page = async ({ params }: { params: Params }) => {
 
   const structuredData = generateStructuredDataScripts({
     breadcrumbsItems: [
-      productToBreadcrumb(product),
+      productToBreadcrumb(props.product),
       {
         name: seo?.metaTitle,
-        item: breadcrumbItemByProduct(product, [
+        item: breadcrumbItemByProduct(props.product, [
           'guides',
           ...(params?.productGuidePage || []),
         ]),

apps/nextjs-website/src/app/[productSlug]/overview/page.tsx

@@ -1,4 +1,4 @@
-import { getOverview } from '@/lib/api';
+import { getOverview, getProduct } from '@/lib/api';
 import Hero from '@/editorialComponents/Hero/Hero';
 import { Metadata, ResolvingMetadata } from 'next';
 import ProductLayout, {
@@ -26,6 +26,7 @@ import {
   convertSeoToStructuredDataArticle,
   productToBreadcrumb,
 } from '@/helpers/structuredData.helpers';
+import { Path } from '@/lib/types/path';
 
 const MAX_NUM_TUTORIALS_IN_OVERVIEW = 3;
 
@@ -124,7 +125,6 @@ const OverviewPage = async ({ params }: ProductParams) => {
     hero,
     startInfo,
     feature,
-    product,
     path,
     tutorials,
     postIntegration,
@@ -134,6 +134,8 @@ const OverviewPage = async ({ params }: ProductParams) => {
   } = await getOverview(params.productSlug);
   const { overview } = translations;
 
+  const product = await getProduct(params.productSlug);
+
   const tutorialsListToShow = tutorials?.list
     ?.filter((tutorial) => tutorial.showInOverview)
     .slice(0, MAX_NUM_TUTORIALS_IN_OVERVIEW);
@@ -175,16 +177,19 @@ const OverviewPage = async ({ params }: ProductParams) => {
           cards={startInfo.cards}
         />
       )}
-      {product.subpaths.tutorials && tutorials && (
+      {product?.tutorial_list_page?.data && tutorials && (
         <TutorialsOverview
           title={tutorials.title || overview.tutorial.title}
           subtitle={tutorials.subtitle}
           ctaLabel={overview.tutorial.ctaLabel}
-          tutorialPath={product.subpaths.tutorials}
+          tutorialPath={
+            product.subpaths.tutorials ??
+            ({ name: 'tutorials', path: '/tutorials' } as Path)
+          }
           tutorials={[...(tutorialsListToShow || [])]}
         />
       )}
-      {product.subpaths.guides && postIntegration && (
+      {product?.guide_list_page?.data && postIntegration && (
         <PostIntegration
           title={postIntegration.title || overview.postIntegration.title}
           subtitle={postIntegration.subtitle}

apps/nextjs-website/src/app/[productSlug]/quick-start/page.tsx

@@ -3,7 +3,7 @@ import { Abstract } from '@/editorialComponents/Abstract/Abstract';
 import ProductLayout, {
   ProductLayoutProps,
 } from '@/components/organisms/ProductLayout/ProductLayout';
-import { getProductsSlugs, getQuickStartGuide } from '@/lib/api';
+import { getProduct, getProductsSlugs, getQuickStartGuide } from '@/lib/api';
 import React from 'react';
 import QuickStartGuideStepper from '@/components/molecules/QuickStartGuideStepper/QuickStartGuideStepper';
 import { Step } from '@/lib/types/step';
@@ -59,15 +59,10 @@ export async function generateMetadata(
 }
 
 const QuickStartGuidesPage = async ({ params }: ProductParams) => {
-  const {
-    abstract,
-    bannerLinks,
-    defaultStepAnchor,
-    path,
-    product,
-    steps,
-    seo,
-  } = await getQuickStartGuide(params?.productSlug);
+  const { abstract, bannerLinks, defaultStepAnchor, path, steps, seo } =
+    await getQuickStartGuide(params?.productSlug);
+
+  const product = await getProduct(params.productSlug);
 
   const structuredData = generateStructuredDataScripts({
     breadcrumbsItems: [

apps/nextjs-website/src/app/[productSlug]/tutorials/[...productTutorialPage]/page.tsx

@@ -2,6 +2,7 @@ import ProductLayout, {
   ProductLayoutProps,
 } from '@/components/organisms/ProductLayout/ProductLayout';
 import {
+  getProduct,
   getStaticTutorial,
   getStrapiTutorial,
   getTutorialPaths,
@@ -126,9 +127,12 @@ const Page = async ({ params }: { params: Params }) => {
 
   const tutorialProps = await getStaticTutorial(productSlug, [tutorialPath]);
   const { product, page, bannerLinks, source, relatedLinks } = tutorialProps;
+
+  const fetchedProduct = await getProduct(params.productSlug);
+
   const props: ProductTutorialPageProps = {
     ...page,
-    product,
+    product: fetchedProduct ?? product,
     bannerLinks,
     relatedLinks,
     bodyConfig: {
@@ -145,7 +149,7 @@ const Page = async ({ params }: { params: Params }) => {
 
   const structuredData = generateStructuredDataScripts({
     breadcrumbsItems: [
-      productToBreadcrumb(product),
+      productToBreadcrumb(props.product),
       {
         name: tutorialProps.page.title,
         item: breadcrumbItemByProduct(product, [

apps/nextjs-website/src/app/[productSlug]/tutorials/page.tsx

@@ -1,6 +1,10 @@
 import { Product } from '@/lib/types/product';
 import { Metadata, ResolvingMetadata } from 'next';
-import { getProductsSlugs, getTutorialListPageProps } from '@/lib/api';
+import {
+  getProduct,
+  getProductsSlugs,
+  getTutorialListPageProps,
+} from '@/lib/api';
 import { Abstract } from '@/editorialComponents/Abstract/Abstract';
 import { Box } from '@mui/material';
 import ProductLayout, {
@@ -62,11 +66,13 @@ export async function generateMetadata(
 
 const TutorialsPage = async ({ params }: ProductParams) => {
   const { productSlug } = params;
-  const { abstract, bannerLinks, path, product, tutorials, seo } =
+  const { abstract, bannerLinks, path, tutorials, seo } =
     await getTutorialListPageProps(productSlug);
 
   const { shared } = translations;
 
+  const product = await getProduct(params.productSlug);
+
   const structuredData = generateStructuredDataScripts({
     breadcrumbsItems: [
       productToBreadcrumb(product),
@@ -93,7 +99,7 @@ const TutorialsPage = async ({ params }: ProductParams) => {
           title={abstract?.title}
         />
       )}
-      {product.subpaths.tutorials && tutorials && (
+      {product?.tutorial_list_page?.data && tutorials && (
         <Box>
           <Newsroom
             items={tutorials.map((tutorial) => ({

apps/nextjs-website/src/components/molecules/DesktopSiteHeader/DesktopSiteHeader.tsx

@@ -2,13 +2,20 @@ import Dropdown from '@/components/atoms/Dropdown/Dropdown';
 import { Box, Link as LinkMui } from '@mui/material';
 import Link from 'next/link';
 import DesktopUserInfo from '@/components/atoms/DesktopUserInfo/DesktopUserInfo';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SiteHeaderProps } from '@/components/molecules/SiteHeader/SiteHeader';
 import { useTranslations } from 'next-intl';
+import { Product } from '@/lib/types/product';
 
 const DesktopSiteHeader = ({ products }: SiteHeaderProps) => {
   const t = useTranslations('devPortal');
 
+  // Filter out products that don't have an overview page
+  const filteredProducts = useMemo(
+    () => products.filter((product: Product) => product.overview?.data),
+    [products]
+  );
+
   return (
     <Box
       sx={{
@@ -22,7 +29,7 @@ const DesktopSiteHeader = ({ products }: SiteHeaderProps) => {
     >
       <Dropdown
         label={t('siteHeader.products')}
-        items={products.map((product) => ({
+        items={filteredProducts.map((product) => ({
           href: product.subpaths.overview.path,
           label: product.name,
         }))}

apps/nextjs-website/src/components/molecules/MobileSiteHeader/MobileSiteHeader.tsx

@@ -4,7 +4,7 @@ import {
   SiteHeaderProps,
 } from '@/components/molecules/SiteHeader/SiteHeader';
 import Button from '@mui/material/Button';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Box, Divider, useTheme } from '@mui/material';
 import ArrowDropUp from '@mui/icons-material/ArrowDropUp';
@@ -14,6 +14,7 @@ import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import NextLink from 'next/link';
 import MobileUserInfo from '@/components/atoms/MobileUserInfo/MobileUserInfo';
+import { Product } from '@/lib/types/product';
 
 export const MobileSiteHeaderStyledTreeItem = styled(TreeItem)(({ theme }) => ({
   [`&`]: {
@@ -140,6 +141,12 @@ const MobileSiteHeader = ({ products }: SiteHeaderProps) => {
     setIsOpen(!isOpen);
   };
 
+  // Filter out products that don't have an overview page
+  const filteredProducts = useMemo(
+    () => products.filter((product: Product) => product.overview?.data),
+    [products]
+  );
+
   return (
     <Box
       sx={{
@@ -184,7 +191,7 @@ const MobileSiteHeader = ({ products }: SiteHeaderProps) => {
             label={t('siteHeader.products')}
             disabled={false}
           >
-            {products.map((product, index) => {
+            {filteredProducts.map((product, index) => {
               return (
                 <Typography
                   key={index}

apps/nextjs-website/src/helpers/productHeader.helper.ts

@@ -7,14 +7,71 @@ export function productToMenuItems(
   path: string,
   theme: Theme
 ): readonly MenuDropdownProp[] {
-  return Object.entries(product.subpaths)
-    .filter(([name, subpath]) => !!name && !!subpath)
-    .map(([, subpath]) => {
-      return {
-        label: subpath.name,
-        href: subpath.path,
-        active: path.startsWith(subpath.path),
-        theme,
-      };
-    });
+  // total possible items and corresponding links are:
+  // Overview: app-io/overview
+  // Quickstart Guide: app-io/quick-start
+  // API: app-io/api or app-io/api/main if there's only one api in the list
+  // Tutorials: app-io/tutorials
+  // Guides: app-io/guides
+
+  return [
+    {
+      label: 'Overview',
+      href: `/${product.slug}/overview`,
+      active: path.startsWith(`/${product.slug}/overview`),
+      theme,
+    },
+    // if there's quiskstart guide data, add it to the menu
+    product.quickstart_guide?.data
+      ? {
+          label: 'Quickstart Guide',
+          href: `/${product.slug}/quick-start`,
+          active: path.startsWith(`/${product.slug}/quick-start`),
+          theme,
+        }
+      : null,
+    // if there's api data, and consists of only one item in the list, add it to the menu
+    product.api_data_list_page?.data &&
+    product.api_data_list_page.data.attributes.apiData.data.length === 1
+      ? {
+          label: 'API',
+          href: `/${product.slug}/api/${
+            product.api_data_list_page.data.attributes.apiData.data[0]
+              .attributes.apiRestDetail?.slug ??
+            product.api_data_list_page.data.attributes.apiData.data[0]
+              .attributes.apiSoapUrl
+          }`,
+          active: path.startsWith(`/${product.slug}/api/main`),
+          theme,
+        }
+      : null,
+    // if there's api data, and consists of more than one item in the list, add it to the menu
+    product.api_data_list_page?.data &&
+    product.api_data_list_page.data.attributes.apiData.data.length > 1
+      ? {
+          label: 'API',
+          href: `/${product.slug}/api`,
+          active: path.startsWith(`/${product.slug}/api`),
+          theme,
+        }
+      : null,
+    // if there's tutorials data, add it to the menu
+    product.tutorial_list_page?.data
+      ? {
+          label: 'Tutorials',
+          href: `/${product.slug}/tutorials`,
+          active: path.startsWith(`/${product.slug}/tutorials`),
+          theme,
+        }
+      : null,
+    // if there's guides data, add it to the menu
+    product.guide_list_page?.data
+      ? {
+          label: 'Guides',
+          href: `/${product.slug}/guides`,
+          active: path.startsWith(`/${product.slug}/guides`),
+          theme,
+        }
+      : null,
+  ].filter((item) => item !== null) as readonly MenuDropdownProp[];
 }