From 3650af9412ac0e7e8913d27f08d08c887fb48b2e Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <peterbe@github.com>
Date: Tue, 9 Apr 2024 13:55:31 -0400
Subject: [PATCH] Remove "Early Access documentation" sidebar docset link
 (#50065)

---
 src/fixtures/tests/sidebar.js               |  13 +++
 src/frame/components/page-header/Header.tsx | 103 +++++++++++---------
 src/frame/components/sidebar/SidebarNav.tsx |   8 +-
 3 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/src/fixtures/tests/sidebar.js b/src/fixtures/tests/sidebar.js
index 90c448193c80..8383811361c7 100644
--- a/src/fixtures/tests/sidebar.js
+++ b/src/fixtures/tests/sidebar.js
@@ -3,9 +3,13 @@ import { getDOMCached as getDOM } from '#src/tests/helpers/e2etest.js'
 describe('sidebar', () => {
   test('top level product mentioned at top of sidebar', async () => {
     const $ = await getDOM('/get-started')
+    // Desktop
     const sidebarProduct = $('[data-testid="sidebar-product-xl"]')
     expect(sidebarProduct.text()).toBe('Get started')
     expect(sidebarProduct.attr('href')).toBe('/en/get-started')
+    // Mobile
+    expect($('[data-testid="header-subnav"]').length).toBe(1)
+    expect($('[data-testid="header-subnav-hamburger"]').length).toBe(1)
   })
 
   test('REST pages get the REST sidebar', async () => {
@@ -61,4 +65,13 @@ describe('sidebar', () => {
       expect(link.text()).toBe('Pages (HubGit Enterprise Cloud)')
     }
   })
+
+  test('no docset link for early-access', async () => {
+    const $ = await getDOM('/early-access/secrets/deeper/mariana-trench')
+    // Deskop
+    expect($('[data-testid="sidebar-product-xl"]').length).toBe(0)
+    // Mobile
+    expect($('[data-testid="header-subnav"]').length).toBe(1)
+    expect($('[data-testid="header-subnav-hamburger"]').length).toBe(0)
+  })
 })
diff --git a/src/frame/components/page-header/Header.tsx b/src/frame/components/page-header/Header.tsx
index 38d4e5933c33..3fc3112559c0 100644
--- a/src/frame/components/page-header/Header.tsx
+++ b/src/frame/components/page-header/Header.tsx
@@ -44,6 +44,7 @@ export const Header = () => {
   const menuButtonRef = useRef<HTMLButtonElement>(null)
   const { asPath } = useRouter()
   const isSearchResultsPage = router.route === '/search'
+  const isEarlyAccessPage = currentProduct && currentProduct.id === 'early-access'
   const signupCTAVisible =
     hasAccount === false && // don't show if `null`
     (currentVersion === DEFAULT_VERSION || currentVersion === 'enterprise-cloud@latest')
@@ -330,56 +331,62 @@ export const Header = () => {
           </div>
         </div>
         {!isHomepageVersion && !isSearchResultsPage && (
-          <div className="d-flex flex-items-center d-xxl-none mt-2">
-            <div className={cx(styles.sidebarOverlayCloseButtonContainer, 'mr-2')}>
-              <IconButton
-                data-testid="sidebar-hamburger"
-                className="color-fg-muted"
-                variant="invisible"
-                icon={ThreeBarsIcon}
-                aria-label="Open Sidebar"
-                onClick={openSidebar}
-                ref={returnFocusRef}
-              />
-              <Dialog
-                returnFocusRef={returnFocusRef}
-                isOpen={isSidebarOpen}
-                onDismiss={closeSidebar}
-                aria-labelledby="menu-title"
-                sx={{
-                  position: 'fixed',
-                  top: '0',
-                  left: '0',
-                  marginTop: '0',
-                  maxHeight: '100vh',
-                  width: 'auto !important',
-                  transform: 'none',
-                  borderRadius: '0',
-                  borderRight: '1px solid var(--borderColor-default, var(--color-border-default))',
-                }}
+          <div className="d-flex flex-items-center d-xxl-none mt-2" data-testid="header-subnav">
+            {!isEarlyAccessPage && (
+              <div
+                className={cx(styles.sidebarOverlayCloseButtonContainer, 'mr-2')}
+                data-testid="header-subnav-hamburger"
               >
-                <Dialog.Header
-                  style={{ paddingTop: '0px', background: 'none' }}
-                  id="sidebar-overlay-header"
-                  sx={{ display: 'block' }}
+                <IconButton
+                  data-testid="sidebar-hamburger"
+                  className="color-fg-muted"
+                  variant="invisible"
+                  icon={ThreeBarsIcon}
+                  aria-label="Open Sidebar"
+                  onClick={openSidebar}
+                  ref={returnFocusRef}
+                />
+                <Dialog
+                  returnFocusRef={returnFocusRef}
+                  isOpen={isSidebarOpen}
+                  onDismiss={closeSidebar}
+                  aria-labelledby="menu-title"
+                  sx={{
+                    position: 'fixed',
+                    top: '0',
+                    left: '0',
+                    marginTop: '0',
+                    maxHeight: '100vh',
+                    width: 'auto !important',
+                    transform: 'none',
+                    borderRadius: '0',
+                    borderRight:
+                      '1px solid var(--borderColor-default, var(--color-border-default))',
+                  }}
                 >
-                  <AllProductsLink />
-                  {error === '404' || !currentProduct || isSearchResultsPage ? null : (
-                    <div className="mt-3">
-                      <Link
-                        data-testid="sidebar-product-dialog"
-                        href={currentProduct.href}
-                        className="d-block pl-1 mb-2 h3 color-fg-default no-underline"
-                      >
-                        {currentProductName || currentProduct.name}
-                      </Link>
-                    </div>
-                  )}
-                  {isRestPage && <ApiVersionPicker />}
-                </Dialog.Header>
-                <SidebarNav variant="overlay" />
-              </Dialog>
-            </div>
+                  <Dialog.Header
+                    style={{ paddingTop: '0px', background: 'none' }}
+                    id="sidebar-overlay-header"
+                    sx={{ display: 'block' }}
+                  >
+                    <AllProductsLink />
+                    {error === '404' || !currentProduct || isSearchResultsPage ? null : (
+                      <div className="mt-3">
+                        <Link
+                          data-testid="sidebar-product-dialog"
+                          href={currentProduct.href}
+                          className="d-block pl-1 mb-2 h3 color-fg-default no-underline"
+                        >
+                          {currentProductName || currentProduct.name}
+                        </Link>
+                      </div>
+                    )}
+                    {isRestPage && <ApiVersionPicker />}
+                  </Dialog.Header>
+                  <SidebarNav variant="overlay" />
+                </Dialog>
+              </div>
+            )}
             <div className="mr-auto width-full" data-search="breadcrumbs">
               <Breadcrumbs inHeader={true} />
             </div>
diff --git a/src/frame/components/sidebar/SidebarNav.tsx b/src/frame/components/sidebar/SidebarNav.tsx
index 35f8182daf08..da45a4045af1 100644
--- a/src/frame/components/sidebar/SidebarNav.tsx
+++ b/src/frame/components/sidebar/SidebarNav.tsx
@@ -15,6 +15,12 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
   const { currentProduct, currentProductName } = useMainContext()
   const router = useRouter()
   const isRestPage = currentProduct && currentProduct.id === 'rest'
+
+  const showCurrentProductLink =
+    currentProduct &&
+    // Early access does not have a "home page" unless it's local dev
+    (process.env.NODE_ENV === 'development' || currentProduct.id !== 'early-access')
+
   // we need to roughly account for the site header height plus the height of
   // the side nav header (which is taller when we show the API version picker)
   // so we don't cut off the bottom of the sidebar
@@ -30,7 +36,7 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
         {variant === 'full' && currentProduct && (
           <div className={cx('d-none px-4 pb-3 border-bottom d-xxl-block')}>
             <AllProductsLink />
-            {currentProduct && (
+            {showCurrentProductLink && (
               <div className="mt-3" id="allproducts-menu">
                 <Link
                   data-testid="sidebar-product-xl"