feat: Add appless pre-PAT onboarding container

src/App.tsx

@@ -20,6 +20,7 @@ import { ThemeContextProvider } from 'shared/ThemeContext'
 
 import AccountSettings from './pages/AccountSettings'
 import AdminSettings from './pages/AdminSettings'
+import { OnboardingContainerProvider } from './pages/OwnerPage/OnboardingContainerContext/context'
 const AnalyticsPage = lazy(() => import('./pages/AnalyticsPage'))
 const CodecovAIPage = lazy(() => import('./pages/CodecovAIPage'))
 const CommitDetailPage = lazy(() => import('./pages/CommitDetailPage'))
@@ -41,7 +42,6 @@ const HomePageRedirect = () => {
   const { data: currentUser } = useUser()
   const { data: internalUser } = useInternalUser({})
   const { params } = useLocationParams()
-  // @ts-expect-error useLocationParams needs to be typed
   const { setup_action: setupAction, to } = params
 
   let redirectURL = '/login'
@@ -197,8 +197,10 @@ function App() {
     <>
       <ThemeContextProvider>
         <ToastNotificationProvider>
-          <ReactQueryDevtools initialIsOpen={false} />
-          <MainAppRoutes />
+          <OnboardingContainerProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+            <MainAppRoutes />
+          </OnboardingContainerProvider>
         </ToastNotificationProvider>
         <Toaster />
       </ThemeContextProvider>

src/layouts/Header/components/UserDropdown/UserDropdown.tsx

@@ -2,6 +2,8 @@ import { useHistory, useParams } from 'react-router-dom'
 
 import config from 'config'
 
+import { useOnboardingContainer } from 'pages/OwnerPage/OnboardingContainerContext/context'
+import { LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER } from 'pages/OwnerPage/OnboardingOrg/constants'
 import { useUser } from 'services/user'
 import { Provider } from 'shared/api/helpers'
 import { providerToName } from 'shared/utils/provider'
@@ -35,16 +37,31 @@ function UserDropdown() {
   const { provider } = useParams<URLParams>()
   const isGh = providerToName(provider) === 'Github'
   const history = useHistory()
+  const { showOnboardingContainer, setShowOnboardingContainer } =
+    useOnboardingContainer()
 
-  const items =
-    !config.IS_SELF_HOSTED && isGh
-      ? [
-          {
-            to: { pageName: 'codecovAppInstallation' },
-            children: 'Install Codecov app',
-          } as DropdownItem,
-        ]
-      : []
+  const items: DropdownItem[] = [
+    {
+      onClick: () => {
+        setShowOnboardingContainer(!showOnboardingContainer)
+        localStorage.setItem(
+          LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER,
+          showOnboardingContainer ? 'false' : 'true'
+        )
+      },
+      hook: 'toggle-onboarding-container',
+      children: showOnboardingContainer
+        ? 'Hide getting started'
+        : 'Show getting started',
+    },
+  ]
+
+  if (!config.IS_SELF_HOSTED && isGh) {
+    items.push({
+      to: { pageName: 'codecovAppInstallation' },
+      children: 'Install Codecov app',
+    } as DropdownItem)
+  }
 
   const handleSignOut = async () => {
     await fetch(`${config.API_URL}/logout`, {

src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx

@@ -25,6 +25,7 @@ import Button from 'ui/Button'
 import Icon from 'ui/Icon/Icon'
 import Select from 'ui/Select'
 
+import { ONBOARDING_SOURCE } from './constants'
 import GitHubHelpBanner from './GitHubHelpBanner'
 import { useMyOrganizations } from './hooks/useMyOrganizations'
 
@@ -140,7 +141,9 @@ function DefaultOrgSelector() {
       fireTrial({ owner: selectedOrg })
     }
 
-    return history.push(`/${provider}/${selectedOrg}?source=onboarding`)
+    return history.push(
+      `/${provider}/${selectedOrg}?source=${ONBOARDING_SOURCE}`
+    )
   }
 
   if (userIsLoading) return null

src/pages/DefaultOrgSelector/constants.ts

@@ -0,0 +1 @@
+export const ONBOARDING_SOURCE = 'onboarding'

src/pages/DefaultOrgSelector/index.js

@@ -1 +1,2 @@
 export { default } from './DefaultOrgSelector'
+export { ONBOARDING_SOURCE } from './constants'

src/pages/OwnerPage/HeaderBanners/GithubConfigBanner/GithubConfigBanner.jsx

@@ -13,7 +13,7 @@ const GithubConfigBanner = () => {
   if (!isGh) return null
 
   return (
-    <div>
+    <div className="mb-2">
       <Banner>
         <BannerHeading>
           <h2 className="flex justify-center gap-2 font-semibold">

src/pages/OwnerPage/OnboardingContainerContext/context.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+
+import { ONBOARDING_SOURCE } from 'pages/DefaultOrgSelector/constants'
+import { LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER } from 'pages/OwnerPage/OnboardingOrg/constants'
+
+import { OnboardingContainerProvider, useOnboardingContainer } from './context'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter>{children}</MemoryRouter>
+)
+
+const TestComponent = () => {
+  const { showOnboardingContainer, setShowOnboardingContainer } =
+    useOnboardingContainer()
+
+  return (
+    <div>
+      <div>Show container: {showOnboardingContainer.toString()}</div>
+      <button
+        onClick={() => {
+          setShowOnboardingContainer(!showOnboardingContainer)
+        }}
+      >
+        toggle container
+      </button>
+    </div>
+  )
+}
+
+describe('OnboardingContainer context', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  describe('when called outside of provider', () => {
+    it('throws error', () => {
+      console.error = () => {}
+      expect(() => render(<TestComponent />, { wrapper })).toThrow(
+        'useOnboardingContainer has to be used within `<OnboardingContainerProvider>`'
+      )
+    })
+  })
+
+  describe('when called inside provider', () => {
+    it('initializes with false when no localStorage value exists', () => {
+      render(
+        <OnboardingContainerProvider>
+          <TestComponent />
+        </OnboardingContainerProvider>,
+        { wrapper }
+      )
+
+      expect(screen.getByText('Show container: false')).toBeInTheDocument()
+    })
+
+    it('initializes with true when source param is onboarding', () => {
+      render(
+        <MemoryRouter initialEntries={[`/?source=${ONBOARDING_SOURCE}`]}>
+          <OnboardingContainerProvider>
+            <TestComponent />
+          </OnboardingContainerProvider>
+        </MemoryRouter>
+      )
+
+      expect(screen.getByText('Show container: true')).toBeInTheDocument()
+      expect(
+        localStorage.getItem(LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER)
+      ).toBe('true')
+    })
+
+    it('initializes with stored localStorage value', () => {
+      localStorage.setItem(LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER, 'true')
+
+      render(
+        <OnboardingContainerProvider>
+          <TestComponent />
+        </OnboardingContainerProvider>,
+        { wrapper }
+      )
+
+      expect(screen.getByText('Show container: true')).toBeInTheDocument()
+    })
+
+    it('can toggle the container visibility', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <OnboardingContainerProvider>
+          <TestComponent />
+        </OnboardingContainerProvider>,
+        { wrapper }
+      )
+
+      expect(screen.getByText('Show container: false')).toBeInTheDocument()
+
+      const button = screen.getByRole('button', { name: 'toggle container' })
+      await user.click(button)
+
+      expect(screen.getByText('Show container: true')).toBeInTheDocument()
+    })
+  })
+})

src/pages/OwnerPage/OnboardingContainerContext/context.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useState } from 'react'
+
+import { ONBOARDING_SOURCE } from 'pages/DefaultOrgSelector/constants'
+import { LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER } from 'pages/OwnerPage/OnboardingOrg/constants'
+import { useLocationParams } from 'services/navigation'
+
+type OnboardingContainerContextValue = {
+  showOnboardingContainer: boolean
+  setShowOnboardingContainer: (showOnboardingContainer: boolean) => void
+}
+
+export const OnboardingContainerContext =
+  createContext<OnboardingContainerContextValue | null>(null)
+
+export const OnboardingContainerProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const { params } = useLocationParams()
+  if (
+    params['source'] === ONBOARDING_SOURCE &&
+    localStorage.getItem(LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER) === null
+  ) {
+    localStorage.setItem(LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER, 'true')
+  }
+  const localStorageValue = localStorage.getItem(
+    LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER
+  )
+
+  const [showOnboardingContainer, setShowOnboardingContainer] =
+    useState<boolean>(localStorageValue === 'true' ? true : false)
+
+  return (
+    <OnboardingContainerContext.Provider
+      value={{
+        showOnboardingContainer,
+        setShowOnboardingContainer,
+      }}
+    >
+      {children}
+    </OnboardingContainerContext.Provider>
+  )
+}
+
+OnboardingContainerContext.displayName = 'OnboardingContainerContext'
+
+export function useOnboardingContainer() {
+  const rawContext = useContext(OnboardingContainerContext)
+
+  if (rawContext === null) {
+    throw new Error(
+      'useOnboardingContainer has to be used within `<OnboardingContainerProvider>`'
+    )
+  }
+
+  return rawContext
+}

src/pages/OwnerPage/OnboardingOrg/OnboardingOrg.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { type Mock, vi } from 'vitest'
+
+import { useLocationParams } from 'services/navigation'
+
+import { LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER } from './constants'
+import OnboardingOrg from './OnboardingOrg'
+
+import { OnboardingContainerProvider } from '../OnboardingContainerContext/context'
+
+vi.mock('services/navigation', async () => {
+  const servicesNavigation = await vi.importActual('services/navigation')
+
+  return {
+    ...servicesNavigation,
+    useLocationParams: vi.fn(),
+  }
+})
+
+const mockedUseLocationParams = useLocationParams as Mock
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <OnboardingContainerProvider>{children}</OnboardingContainerProvider>
+)
+
+describe('OnboardingOrg', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    mockedUseLocationParams.mockReturnValue({ params: {} })
+  })
+
+  it('renders the component correctly', () => {
+    render(<OnboardingOrg />, { wrapper })
+
+    expect(
+      screen.getByText('How to integrate another organization to Codecov')
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('Add your GitHub Organization to Codecov')
+    ).toBeInTheDocument()
+    expect(screen.getByText('Install Codecov')).toBeInTheDocument()
+    expect(screen.getByText('Dismiss')).toBeInTheDocument()
+    expect(
+      screen.getByAltText('GitHub Organization Install List Example')
+    ).toBeInTheDocument()
+  })
+
+  it('handles dismiss button click correctly', async () => {
+    const user = userEvent.setup()
+    render(<OnboardingOrg />, { wrapper })
+
+    // const dismissButton = screen.getByText('Dismiss')
+    const dismissButton = screen.getByTestId('dismiss-onboarding-org')
+    expect(dismissButton).toBeInTheDocument()
+    await user.click(dismissButton)
+
+    expect(localStorage.getItem(LOCAL_STORAGE_SHOW_ONBOARDING_CONTAINER)).toBe(
+      'false'
+    )
+  })
+
+  it('opens and closes the AppInstallModal', async () => {
+    const user = userEvent.setup()
+    render(<OnboardingOrg />, { wrapper })
+
+    // Modal should be closed initially
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+
+    // Click install button to open the modal
+    const installButton = screen.getByText('Install Codecov')
+    await user.click(installButton)
+
+    // Modal should be open
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+    const cancelButton = screen.getByRole('button', { name: /Cancel/i })
+    await user.click(cancelButton)
+
+    // Modal should be closed
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+})