Add GHEC Trial CTA to header of docs.github (#23324)

* Add GHEC Trial CTA to header of docs.github

* use i18n logic

* add signup cta

* add signup cta

* Update the Trial CTA href to allow users choose trial plan

* Update logic to conditionally display signup CTA. Also remove GH EC Trial CTA

* update logic to use && operator

* fix wrapping search bar bug

components/context/MainContext.tsx

@@ -25,6 +25,7 @@ type VersionItem = {
   versionTitle: string
   currentRelease: string
   latestVersion: string
+  shortName: string
 }
 
 export type ProductTreeNode = {

components/page-header/Header.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { MarkGithubIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
+import { useVersion } from 'components/hooks/useVersion'
 
 import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
@@ -16,12 +17,20 @@ import styles from './Header.module.scss'
 
 export const Header = () => {
   const router = useRouter()
-  const { relativePath, error } = useMainContext()
+  const { relativePath, error, allVersions } = useMainContext()
+  const { currentVersion } = useVersion()
   const { t } = useTranslation(['header', 'homepage'])
   const [isMenuOpen, setIsMenuOpen] = useState(
     router.pathname !== '/' && router.query.query && true
   )
   const [scroll, setScroll] = useState(false)
+  const [signupCTAVisible, setSignupCTAVisible] = useState(false)
+
+  useEffect(() => {
+    const allowedVersions: RegExp = /ghec|fpt/
+    const canShowSignupCTA = allowedVersions.test(allVersions[currentVersion].shortName)
+    setSignupCTAVisible(canShowSignupCTA)
+  }, [currentVersion])
 
   useEffect(() => {
     function onScroll() {
@@ -68,19 +77,31 @@ export const Header = () => {
           >
             <Breadcrumbs />
           </div>
-
-          <div className="mr-2">
-            <VersionPicker />
-          </div>
-
-          <LanguagePicker />
-
-          {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
-          {relativePath !== 'index.md' && error !== '404' && (
-            <div className="d-inline-block ml-3">
-              <Search iconSize={16} isHeaderSearch={true} />
+          <div className="d-flex flex-items-center">
+            <div className="mr-2">
+              <VersionPicker />
             </div>
-          )}
+
+            <LanguagePicker />
+
+            {signupCTAVisible && (
+              <a
+                href="https://github.com/signup?ref_cta=Sign+up&ref_loc=docs+header&ref_page=docs"
+                target="_blank"
+                rel="noopener"
+                className="ml-3 btn color-fg-muted"
+              >
+                {t`sign_up_cta`}
+              </a>
+            )}
+
+            {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
+            {relativePath !== 'index.md' && error !== '404' && (
+              <div className="d-inline-block ml-3">
+                <Search iconSize={16} isHeaderSearch={true} />
+              </div>
+            )}
+          </div>
         </div>
 
         {/* mobile header */}
@@ -128,10 +149,20 @@ export const Header = () => {
 
               <div className="border-top my-2" />
               <LanguagePicker variant="inline" />
+              {signupCTAVisible && (
+                <a
+                  href="https://github.com/signup?ref_cta=Sign+up&ref_loc=docs+header&ref_page=docs"
+                  target="_blank"
+                  rel="noopener"
+                  className="mt-3 py-2 btn color-fg-muted d-block"
+                >
+                  {t`sign_up_cta`}
+                </a>
+              )}
 
               {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
               {relativePath !== 'index.md' && error !== '404' && (
-                <div className="my-2 pt-3">
+                <div className="my-2 pt-2">
                   <Search iconSize={16} isMobileSearch={true} />
                 </div>
               )}

data/ui.yml

@@ -23,6 +23,7 @@ header:
     ghes_release_notes_upgrade_patch_only: 📣 This is not the <a href="#{{ latestPatch }}">latest patch release</a> of Enterprise Server.
     ghes_release_notes_upgrade_release_only: 📣 This is not the <a href="/enterprise-server@{{ latestRelease }}/admin/release-notes">latest release</a> of Enterprise Server.
     ghes_release_notes_upgrade_patch_and_release: 📣 This is not the <a href="#{{ latestPatch }}">latest patch release</a> of this release series, and this is not the <a href="/enterprise-server@{{ latestRelease }}/admin/release-notes">latest release</a> of Enterprise Server.
+  sign_up_cta: Sign up
 picker:
   language_picker_default_text: Choose a language
   product_picker_default_text: All products