Merge branch 'main' into branch-selector-components

src/App.jsx

@@ -8,6 +8,7 @@ import config from 'config'
 import { SentryRoute } from 'sentry'
 
 import BaseLayout from 'layouts/BaseLayout'
+import EnterpriseLoginLayout from 'layouts/EnterpriseLoginLayout'
 import LoginLayout from 'layouts/LoginLayout'
 import { useLocationParams } from 'services/navigation'
 import { ToastNotificationProvider } from 'services/toastNotification'
@@ -143,9 +144,9 @@ const MainAppRoutes = () => (
     </SentryRoute>
     <SentryRoute path="/" exact>
       {config.IS_SELF_HOSTED ? (
-        <BaseLayout>
+        <EnterpriseLoginLayout>
           <EnterpriseLandingPage />
-        </BaseLayout>
+        </EnterpriseLoginLayout>
       ) : (
         <Redirect to="/login" />
       )}

src/layouts/EnterpriseLoginLayout/EnterpriseLoginLayout.spec.tsx

@@ -0,0 +1,82 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import EnterpriseLoginLayout from './EnterpriseLoginLayout'
+
+jest.mock('./Header', () => () => 'Header')
+jest.mock('layouts/Footer', () => () => 'Footer')
+jest.mock('shared/GlobalBanners', () => () => 'GlobalBanners')
+jest.mock('layouts/ToastNotifications', () => () => 'ToastNotifications')
+jest.mock('ui/SessionExpiryTracker', () => () => 'SessionExpiryTracker')
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route path="/">
+        <EnterpriseLoginLayout>{children}</EnterpriseLoginLayout>
+      </Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+describe('EnterpriseLoginLayout', () => {
+  it('renders children', () => {
+    render(<>children</>, { wrapper })
+
+    const children = screen.getByText(/children/)
+    expect(children).toBeInTheDocument()
+  })
+
+  it('renders global banners', () => {
+    render(<>children</>, { wrapper })
+
+    const globalBanners = screen.getByText(/GlobalBanners/)
+    expect(globalBanners).toBeInTheDocument()
+  })
+
+  it('renders the header', () => {
+    render(<>children</>, { wrapper })
+
+    const header = screen.getByText(/Header/)
+    expect(header).toBeInTheDocument()
+  })
+
+  it('renders the footer', () => {
+    render(<>children</>, { wrapper })
+
+    const footer = screen.getByText(/Footer/)
+    expect(footer).toBeInTheDocument()
+  })
+
+  it('renders toast notifications', () => {
+    render(<>children</>, { wrapper })
+
+    const ToastNotifications = screen.getByText(/ToastNotifications/)
+    expect(ToastNotifications).toBeInTheDocument()
+  })
+
+  it('renders the session expiry tracker if no tracking session found', () => {
+    render(<>children</>, { wrapper })
+
+    const session = screen.getByText(/SessionExpiryTracker/)
+    expect(session).toBeInTheDocument()
+  })
+
+  it('does not render the session expiry tracker if tracking session found', () => {
+    localStorage.setItem('tracking-session-expiry', 'true')
+
+    render(<>children</>, { wrapper })
+
+    const session = screen.queryByText(/SessionExpiryTracker/)
+    expect(session).not.toBeInTheDocument()
+  })
+})

src/layouts/EnterpriseLoginLayout/EnterpriseLoginLayout.tsx

@@ -0,0 +1,45 @@
+import { Suspense } from 'react'
+
+import Footer from 'layouts/Footer'
+import ErrorBoundary from 'layouts/shared/ErrorBoundary'
+import NetworkErrorBoundary from 'layouts/shared/NetworkErrorBoundary'
+import ToastNotifications from 'layouts/ToastNotifications'
+import GlobalBanners from 'shared/GlobalBanners'
+import LoadingLogo from 'ui/LoadingLogo'
+import SessionExpiryTracker from 'ui/SessionExpiryTracker'
+
+import Header from './Header'
+
+const LOCAL_STORAGE_SESSION_TRACKING_KEY = 'tracking-session-expiry'
+
+const FullPageLoader = () => (
+  <div className="mt-16 flex flex-1 items-center justify-center">
+    <LoadingLogo />
+  </div>
+)
+
+function EnterpriseLoginLayout({ children }: { children: React.ReactNode }) {
+  const isTrackingSession = localStorage.getItem(
+    LOCAL_STORAGE_SESSION_TRACKING_KEY
+  )
+  return (
+    <>
+      <Header />
+      {!isTrackingSession && <SessionExpiryTracker />}
+      <Suspense fallback={<FullPageLoader />}>
+        <ErrorBoundary sentryScopes={[['layout', 'base']]}>
+          <NetworkErrorBoundary>
+            <main className="container mb-8 mt-2 flex grow flex-col gap-2 md:p-0">
+              <GlobalBanners />
+              {children}
+            </main>
+          </NetworkErrorBoundary>
+        </ErrorBoundary>
+      </Suspense>
+      <Footer />
+      <ToastNotifications />
+    </>
+  )
+}
+
+export default EnterpriseLoginLayout

src/layouts/EnterpriseLoginLayout/Header/Header.spec.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import Header from './Header'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <MemoryRouter initialEntries={['/']}>
+    <Route path="/" exact>
+      {children}
+    </Route>
+  </MemoryRouter>
+)
+
+describe('Header', () => {
+  it('renders the header', () => {
+    render(<Header />, { wrapper })
+
+    const link = screen.getByText(/Link to Homepage/)
+    expect(link).toBeInTheDocument()
+  })
+
+  it('renders the docs link', () => {
+    render(<Header />, { wrapper })
+
+    const link = screen.getByText(/Docs/)
+    expect(link).toBeInTheDocument()
+  })
+
+  it('renders the support link', () => {
+    render(<Header />, { wrapper })
+
+    const link = screen.getByText(/Support/)
+    expect(link).toBeInTheDocument()
+  })
+
+  it('renders the blog link', () => {
+    render(<Header />, { wrapper })
+
+    const link = screen.getByText(/Blog/)
+    expect(link).toBeInTheDocument()
+  })
+})

src/layouts/EnterpriseLoginLayout/Header/Header.tsx

@@ -0,0 +1,65 @@
+import cs from 'classnames'
+
+import { ReactComponent as CodecovIcon } from 'assets/svg/codecov.svg'
+import { useImpersonate } from 'services/impersonate'
+import A from 'ui/A'
+
+function Header() {
+  const { isImpersonating } = useImpersonate()
+
+  return (
+    <header
+      className={cs('text-white', {
+        'bg-ds-primary-base': !isImpersonating,
+        'bg-ds-pink-tertiary': isImpersonating,
+      })}
+    >
+      <nav
+        className="container mx-auto flex gap-4 px-3 py-4 sm:px-0"
+        data-testid="desktop-menu"
+      >
+        <A
+          to={{
+            pageName: 'root',
+          }}
+          variant="header"
+          data-testid="homepage-link"
+          hook="homepage-link"
+          isExternal
+        >
+          <span className="sr-only">Link to Homepage</span>
+          <CodecovIcon />
+        </A>
+        <A
+          hook="header-enterprise"
+          to={{ pageName: 'docs' }}
+          variant="header"
+          showExternalIcon={false}
+          isExternal
+        >
+          Docs
+        </A>
+        <A
+          to={{ pageName: 'support' }}
+          variant="header"
+          showExternalIcon={false}
+          hook="support-link"
+          isExternal
+        >
+          Support
+        </A>
+        <A
+          to={{ pageName: 'blog' }}
+          variant="header"
+          showExternalIcon={false}
+          hook="blog-link"
+          isExternal
+        >
+          Blog
+        </A>
+      </nav>
+    </header>
+  )
+}
+
+export default Header

src/layouts/EnterpriseLoginLayout/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header'

src/layouts/EnterpriseLoginLayout/index.ts

@@ -0,0 +1 @@
+export { default } from './EnterpriseLoginLayout'

src/pages/PullRequestPage/Header/HeaderDefault/HeaderDefault.jsx

@@ -11,7 +11,6 @@ import Icon from 'ui/Icon'
 import { usePullHeadData } from './hooks'
 
 import { pullStateToColor } from '../constants'
-import PendoLink from '../PendoLink'
 
 function HeaderDefault() {
   const { provider, owner, repo, pullId } = useParams()
@@ -59,7 +58,6 @@ function HeaderDefault() {
           </span>
         </p>
       </div>
-      <PendoLink />
     </div>
   )
 }

src/pages/PullRequestPage/Header/HeaderTeam/HeaderTeam.jsx

@@ -12,7 +12,6 @@ import TotalsNumber from 'ui/TotalsNumber'
 import { usePullHeadDataTeam } from './hooks'
 
 import { pullStateToColor } from '../constants'
-import PendoLink from '../PendoLink'
 
 function HeaderTeam() {
   const { provider, owner, repo, pullId } = useParams()
@@ -72,7 +71,6 @@ function HeaderTeam() {
           />
         </div>
       </div>
-      <PendoLink />
     </div>
   )
 }

src/pages/RepoPage/ComponentsTab/ComponentsTab.jsx

@@ -3,9 +3,7 @@ import { Redirect, useParams } from 'react-router-dom'
 import { SentryRoute } from 'sentry'
 
 import { useRepoSettingsTeam } from 'services/repo'
-import { useRepoFlagsSelect } from 'services/repo/useRepoFlagsSelect'
 import { TierNames, useTier } from 'services/tier'
-import ComponentsNotConfigured from 'shared/ComponentsNotConfigured'
 
 import blurredTable from './assets/blurredTable.png'
 import BackfillBanners from './BackfillBanners/BackfillBanners'
@@ -24,12 +22,7 @@ const showComponentsTable = ({
   return componentsMeasurementsActive && componentsMeasurementsBackfilled
 }
 
-const showComponentsData = ({ componentsData }) => {
-  return componentsData && componentsData?.length > 0
-}
-
 function ComponentsTab() {
-  const { data: componentsData } = useRepoFlagsSelect()
   const { provider, owner, repo } = useParams()
   const { data: tierData } = useTier({ owner, provider })
   const { data: repoSettings } = useRepoSettingsTeam()
@@ -49,10 +42,6 @@ function ComponentsTab() {
     return <TimescaleDisabled />
   }
 
-  if (!showComponentsData({ componentsData })) {
-    return <ComponentsNotConfigured />
-  }
-
   return (
     <div className="mx-4 flex flex-col gap-4 md:mx-0">
       <Header