use plain link to link to unsupported GHES versions (#32204)

components/release-notes/GHESReleaseNotes.tsx

@@ -11,10 +11,12 @@ import { GHESReleaseNotesContextT } from './types'
 import { GHESReleaseNotePatch } from './GHESReleaseNotePatch'
 
 import styles from './PatchNotes.module.scss'
+import { PlainLink } from './PlainLink'
 
 type Props = {
   context: GHESReleaseNotesContextT
 }
+
 export function GHESReleaseNotes({ context }: Props) {
   const router = useRouter()
   const { currentProduct } = useMainContext()
@@ -59,16 +61,24 @@ export function GHESReleaseNotes({ context }: Props) {
               {releases.map((release) => {
                 const releaseLink = `/${router.locale}/${currentVersion.plan}@${release.version}/${currentProduct?.id}/release-notes`
 
+                // Use client-side router link component only if it's a supported release.
+                // Otherwise, it will trigger a NextJS data XHR fetch for releases
+                // that are deprecated when in fact you should load it regularly
+                // so it's read as a proxy from the archive.
+                const LinkComponent = currentVersion.releases.includes(release.version)
+                  ? Link
+                  : PlainLink
+
                 if (!release.patches || release.patches.length === 0) {
                   return (
                     <li key={release.version} className="border-bottom">
-                      <Link
+                      <LinkComponent
                         href={releaseLink}
                         className="Link--primary no-underline px-3 py-4 my-0 d-flex flex-items-center flex-justify-between"
                       >
                         {release.version}
                         <LinkExternalIcon />
-                      </Link>
+                      </LinkComponent>
                     </li>
                   )
                 }
@@ -86,7 +96,7 @@ export function GHESReleaseNotes({ context }: Props) {
 
                 return (
                   <li key={release.version} className="border-bottom">
-                    <Link
+                    <LinkComponent
                       className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between"
                       href={releaseLink}
                     >
@@ -95,7 +105,7 @@ export function GHESReleaseNotes({ context }: Props) {
                         {release.patches.length}{' '}
                         {release.patches.length === 1 ? 'release' : 'releases'}
                       </span>
-                    </Link>
+                    </LinkComponent>
                   </li>
                 )
               })}

components/release-notes/PlainLink.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react'
+
+type PlainLinkProps = {
+  href: string
+  children: ReactNode
+  className?: string
+}
+
+export function PlainLink({ href, className, children }: PlainLinkProps) {
+  return (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  )
+}

components/release-notes/types.ts

@@ -3,6 +3,7 @@ export type CurrentVersion = {
   planTitle: string
   versionTitle: string
   currentRelease: string
+  releases: string[]
 }
 
 export type GHESMessage = {

pages/[versionId]/admin/release-notes.tsx

@@ -1,5 +1,7 @@
 import { GetServerSideProps } from 'next'
 import { Liquid } from 'liquidjs'
+import pick from 'lodash/pick'
+
 import { MainContextT, MainContext, getMainContext } from 'components/context/MainContext'
 import { DefaultLayout } from 'components/DefaultLayout'
 import { GHAEReleaseNotes } from 'components/release-notes/GHAEReleaseNotes'
@@ -27,7 +29,18 @@ export default function ReleaseNotes({ mainContext, ghesContext, ghaeContext }:
 export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
   const req = context.req as any
   const res = context.res as any
-  const currentVersion = req.context.allVersions[req.context.currentVersion]
+
+  // The `req.context.allVersion[X]` entries contains more keys (and values)
+  // than we need so only pick out the keys that are actually needed
+  // explicitly in the components served from these props.
+  const currentVersion = pick(req.context.allVersions[req.context.currentVersion], [
+    'plan',
+    'planTitle',
+    'versionTitle',
+    'currentRelease',
+    'releases',
+  ])
+
   const { latestPatch = '', latestRelease = '' } = req.context
   return {
     props: {