Add link to versions doc in version picker (github#25012)

* Add link to 'about versions' in version picker

* Add translation string

* Match article short title

* Better text contrast

* Key names is 'docs_versions'

* 'About versions'

* Show version picker when only 1 version

Co-authored-by: Matt Pollard <[email protected]>
Co-authored-by: Laura Coursen <[email protected]>

Author: 3 people

components/page-header/VersionPicker.tsx

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router'
-import { ArrowRightIcon } from '@primer/octicons-react'
+import { ArrowRightIcon, InfoIcon } from '@primer/octicons-react'
 
 import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
-import { useVersion } from 'components/hooks/useVersion'
+import { DEFAULT_VERSION, useVersion } from 'components/hooks/useVersion'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Picker } from 'components/ui/Picker'
 
@@ -17,7 +17,7 @@ export const VersionPicker = ({ variant }: Props) => {
   const { allVersions, page, enterpriseServerVersions } = useMainContext()
   const { t } = useTranslation(['pages', 'picker'])
 
-  if (page.permalinks && page.permalinks.length <= 1) {
+  if (page.permalinks && page.permalinks.length < 1) {
     return null
   }
 
@@ -37,7 +37,7 @@ export const VersionPicker = ({ variant }: Props) => {
       item: (
         <Link
           href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
-          className="f6 no-underline color-fg-muted"
+          className="f6 no-underline"
         >
           {t('all_enterprise_releases')}{' '}
           <ArrowRightIcon verticalAlign="middle" size={15} className="mr-2" />
@@ -46,6 +46,23 @@ export const VersionPicker = ({ variant }: Props) => {
     })
   }
 
+  if (allLinks) {
+    const currentVersionPathSegment = currentVersion === DEFAULT_VERSION ? '' : `/${currentVersion}`
+
+    allLinks.push({
+      text: t('docs_versions'),
+      selected: false,
+      item: (
+        <Link
+          href={`/${router.locale}${currentVersionPathSegment}/get-started/learning-about-github/about-versions-of-github-docs`}
+          className="f6 no-underline"
+        >
+          {t('about_versions')} <InfoIcon verticalAlign="middle" size={15} className="mr-2" />
+        </Link>
+      ),
+    })
+  }
+
   return (
     <Picker
       variant={variant}

data/ui.yml

@@ -54,6 +54,7 @@ pages:
   miniToc: In this article
   contributor_callout: This article is contributed and maintained by
   all_enterprise_releases: All Enterprise Server releases
+  about_versions: About versions
 errors:
   oops: Ooops!
   something_went_wrong: It looks like something went wrong.