Convert to new site tree (github#19450)

Author: rachmari

components/SidebarNav.tsx

@@ -3,18 +3,15 @@ import Link from 'next/link'
 import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
 import { useTranslation } from './hooks/useTranslation'
 import { useMainContext } from './context/MainContext'
-import { ProductSiteTree } from './product/ProductSiteTree'
 import { ProductSiteTreeNew } from './product/ProductSiteTreeNew'
 import { AllProductsLink } from './product/AllProductsLink'
 import { useVersion } from './hooks/useVersion'
-import { useFeatureFlags } from './hooks/useFeatureFlags'
 
 type Props = {}
 export const SidebarNav = (props: Props) => {
   const router = useRouter()
   const { currentVersion } = useVersion()
   const { error, relativePath } = useMainContext()
-  const { FEATURE_NEW_SITETREE } = useFeatureFlags()
   const { t } = useTranslation('header')
 
   return (
@@ -44,7 +41,7 @@ export const SidebarNav = (props: Props) => {
           </ul>
         ) : (
           <ul className="sidebar-products">
-            {FEATURE_NEW_SITETREE ? <ProductSiteTreeNew /> : <ProductSiteTree />}
+            <ProductSiteTreeNew />
           </ul>
         )}
       </nav>

components/context/MainContext.tsx

@@ -25,36 +25,17 @@ type VersionItem = {
   versionTitle: string
 }
 
-type Article = {
-  href: string
-  title: string
-  shortTitle?: string
-  hidden?: boolean
-}
-type ProductSiteTree = {
-  title: string
-  href: string
-  external?: boolean
-  categories?: Record<
-    string,
-    Article & {
-      standalone?: boolean
-      articles?: Record<string, Article>
-      maptopics?: Record<string, Article & { articles?: Record<string, Article> }>
-    }
-  >
-}
-
-export type SiteTreePage = {
+export type CurrentProductTree = {
   page: {
     hidden?: boolean
     documentType: 'article' | 'mapTopic'
     title: string
+    shortTitle: string
   }
   renderedShortTitle?: string
   renderedFullTitle: string
   href: string
-  childPages: Array<SiteTreePage>
+  childPages: Array<CurrentProductTree>
 }
 
 type DataT = {
@@ -100,8 +81,7 @@ export type MainContextT = {
   currentLanguage: string
   languages: Record<string, LanguageItem>
   allVersions: Record<string, VersionItem>
-  productSiteTree?: ProductSiteTree
-  productSiteTreeNew?: SiteTreePage
+  currentProductTree?: CurrentProductTree
   featureFlags: FeatureFlags
   page: {
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
@@ -179,19 +159,8 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     ),
     allVersions: req.context.allVersions,
     // this gets rid of some `undefined` values, which is necessary so next.js can serialize the data
-    productSiteTree: !req.context.FEATURE_NEW_SITETREE
-      ? JSON.parse(
-          JSON.stringify(
-            req.context.siteTree[req.context.currentLanguage][req.context.currentVersion].products[
-              req.context.currentProduct
-            ]
-          )
-        )
-      : null,
-    productSiteTreeNew: req.context.FEATURE_NEW_SITETREE ? req.context.siteTree : null,
-    featureFlags: {
-      FEATURE_NEW_SITETREE: req.context.FEATURE_NEW_SITETREE || false,
-    },
+    currentProductTree: JSON.parse(JSON.stringify(req.context.currentProductTree)),
+    featureFlags: {},
   }
 }
 

components/context/ProductLandingContext.tsx

@@ -19,15 +19,6 @@ export type CodeExample = {
 export type Product = {
   title: string
   href: string
-  categories: Record<
-    string,
-    {
-      href: string
-      title: string
-      standalone?: boolean
-      articles?: Record<string, { href: string; title: string; shortTitle?: string }>
-    }
-  >
 }
 
 export type ProductLandingContextT = {
@@ -79,14 +70,7 @@ export const useProductLandingContext = (): ProductLandingContextT => {
 }
 
 export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
-  const {
-    currentCategory,
-    currentPath,
-    siteTree,
-    currentLanguage,
-    currentVersion,
-    currentProduct,
-  } = req.context
+  const productTree = req.context.currentProductTree
   return {
     ...pick(req.context.page, [
       'title',
@@ -97,14 +81,13 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       'product_video',
       'changelog',
     ]),
-    product: JSON.parse(
-      JSON.stringify(siteTree[currentLanguage][currentVersion].products[currentProduct])
-    ),
-    whatsNewChangelog: req.context.whatsNewChangelog,
-    changelogUrl: req.context.changelogUrl,
-
+    product: {
+      href: productTree.href,
+      title: productTree.renderedShortTitle || productTree.renderedFullTitle,
+    },
+    whatsNewChangelog: req.context.whatsNewChangelog || [],
+    changelogUrl: req.context.changelogUrl || [],
     productCodeExamples: req.context.productCodeExamples || [],
-
     productCommunityExamples: req.context.productCommunityExamples || [],
 
     productUserExamples: (req.context.productUserExamples || []).map(
@@ -114,11 +97,13 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: Object.fromEntries(
-      Object.entries(req.context.page.introLinks || {}).filter(([key, val]) => !!val)
-    ),
+    introLinks: {
+      quickstart: productTree.page.introLinks.quickstart,
+      reference: productTree.page.introLinks.reference,
+      overview: productTree.page.introLinks.overview,
+    },
 
-    guideCards: (req.context.featuredLinks.guideCards || []).map((link: any) => {
+    guideCards: (req.context.featuredLinks ? (req.context.featuredLinks.guideCards || []) : []).map((link: any) => {
       return {
         href: link.href,
         title: link.title,
@@ -127,14 +112,14 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       }
     }),
 
-    featuredArticles: Object.entries(req.context.featuredLinks)
+    featuredArticles: Object.entries(req.context.featuredLinks || [])
       .filter(([key]) => {
         return key === 'guides' || key === 'popular'
       })
       .map(([key, links]: any) => {
         return {
           label: req.context.site.data.ui.toc[key],
-          viewAllHref: key === 'guides' && !currentCategory ? `${currentPath}/${key}` : '',
+          viewAllHref: key === 'guides' && !req.context.currentCategory ? `${req.context.currentPath}/${key}` : '',
           articles: links.map((link: any) => {
             return {
               hideIntro: key === 'popular',
@@ -145,6 +130,7 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
             }
           }),
         }
-      }),
+      }
+    ),
   }
 }

components/hooks/useFeatureFlags.tsx

@@ -1,8 +1,6 @@
 import { useMainContext } from 'components/context/MainContext'
 
-export type FeatureFlags = {
-  FEATURE_NEW_SITETREE: boolean
-}
+export type FeatureFlags = {}
 
 export const useFeatureFlags = (): FeatureFlags => {
   const { featureFlags } = useMainContext()

components/landing/AllArticlesProduct.tsx

@@ -1,21 +1,22 @@
 import Link from 'next/link'
 
+import cx from 'classnames'
 import { useState } from 'react'
 import { ChevronUpIcon } from '@primer/octicons-react'
-import { SiteTreePage, useMainContext } from 'components/context/MainContext'
+import { CurrentProductTree, useMainContext } from 'components/context/MainContext'
 
 const maxArticles = 10
 
 export const ProductArticlesList = () => {
-  const { productSiteTreeNew } = useMainContext()
+  const { currentProductTree } = useMainContext()
 
-  if (!productSiteTreeNew) {
+  if (!currentProductTree) {
     return null
   }
 
   return (
     <div className="d-flex gutter flex-wrap">
-      {productSiteTreeNew.childPages.map((childPage) => {
+      {currentProductTree.childPages.map((childPage) => {
         if (childPage.page.documentType === 'article') {
           return null
         }
@@ -26,7 +27,7 @@ export const ProductArticlesList = () => {
   )
 }
 
-const ArticleList = ({ page }: { page: SiteTreePage }) => {
+const ArticleList = ({ page }: { page: CurrentProductTree }) => {
   const [isShowingMore, setIsShowingMore] = useState(false)
 
   return (
@@ -38,13 +39,13 @@ const ArticleList = ({ page }: { page: SiteTreePage }) => {
       </h4>
 
       <ul className="list-style-none">
-        {page.childPages.map((grandchildPage) => {
+        {page.childPages.map((grandchildPage, index) => {
           if (page.childPages[0].page.documentType === 'mapTopic' && grandchildPage.page.hidden) {
             return null
           }
 
           return (
-            <li className="mb-3 { page.childPages.length > maxArticles ? d-none : null }">
+            <li className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}>
               <Link href={grandchildPage.href}>
                 <a>{grandchildPage.page.title}</a>
               </Link>

components/landing/ProductArticlesList.tsx

@@ -13,7 +13,7 @@ import { AllProductsLink } from 'components/product/AllProductsLink'
 //  -->
 export const ProductSiteTreeNew = () => {
   const router = useRouter()
-  const { productSiteTreeNew: currentProductTree } = useMainContext()
+  const { currentProductTree: currentProductTree } = useMainContext()
 
   if (!currentProductTree) {
     return null

components/product/ProductSiteTreeNew.tsx

@@ -21,8 +21,6 @@ import { CommunityExamples } from 'components/landing/CommunityExamples'
 import { CodeExamples } from 'components/landing/CodeExamples'
 import { LandingSection } from 'components/landing/LandingSection'
 import { useTranslation } from 'components/hooks/useTranslation'
-import { useFeatureFlags } from 'components/hooks/useFeatureFlags'
-import { AllArticlesProduct } from 'components/landing/AllArticlesProduct'
 import { ProductArticlesList } from 'components/landing/ProductArticlesList'
 
 type Props = {
@@ -43,7 +41,6 @@ const ProductPageInner = () => {
   const { title, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
     useProductLandingContext()
   const { t } = useTranslation('product_landing')
-  const { FEATURE_NEW_SITETREE } = useFeatureFlags()
 
   return (
     <DefaultLayout>
@@ -82,7 +79,7 @@ const ProductPageInner = () => {
       )}
 
       <LandingSection sectionLink="all-docs" title={`All ${title} Docs`}>
-        {FEATURE_NEW_SITETREE ? <ProductArticlesList /> : <AllArticlesProduct />}
+        <ProductArticlesList />
       </LandingSection>
     </DefaultLayout>
   )