Fix non-GH onboard links (#3517)

src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.test.tsx

@@ -104,7 +104,8 @@ describe('CircleCI', () => {
         return HttpResponse.json({ data: { storeEventMetric: null } })
       })
     )
-    return { mockMetricMutationVariables }
+    const user = userEvent.setup()
+    return { mockMetricMutationVariables, user }
   }
 
   describe('step one', () => {
@@ -114,23 +115,19 @@ describe('CircleCI', () => {
 
       const header = await screen.findByRole('heading', { name: /Step 1/ })
       expect(header).toBeInTheDocument()
-
-      const environmentVariableLink = await screen.findByRole('link', {
-        name: /environment variables/,
-      })
-      expect(environmentVariableLink).toBeInTheDocument()
-      expect(environmentVariableLink).toHaveAttribute(
-        'href',
-        'https://app.circleci.com/settings/project/github/codecov/cool-repo/environment-variables'
-      )
     })
 
     it('renders body', async () => {
       setup({})
       render(<CircleCI />, { wrapper })
 
+      const link = await screen.findByRole('link', {
+        name: 'Environment variables',
+      })
+      expect(link).toBeInTheDocument()
+
       const body = await screen.findByText(
-        'Environment variables in CircleCI can be found in project settings.'
+        /in CircleCI can be found in project settings/
       )
       expect(body).toBeInTheDocument()
     })
@@ -170,6 +167,41 @@ describe('CircleCI', () => {
         expect(token).toBeInTheDocument()
       })
     })
+
+    describe('has dropdown', () => {
+      it('renders dropdown click target', async () => {
+        setup({})
+        render(<CircleCI />, { wrapper })
+
+        const trigger = await screen.findByText((content) =>
+          content.startsWith(
+            'Your environment variable in CircleCI should look like this:'
+          )
+        )
+        expect(trigger).toBeInTheDocument()
+      })
+      it('renders dropdown content after clicked', async () => {
+        const { user } = setup({})
+        render(<CircleCI />, { wrapper })
+
+        let content = screen.queryByRole('img', {
+          name: /settings environment variable/,
+        })
+        expect(content).not.toBeInTheDocument()
+
+        const trigger = await screen.findByText((content) =>
+          content.startsWith(
+            'Your environment variable in CircleCI should look like this:'
+          )
+        )
+        await user.click(trigger)
+
+        content = await screen.findByRole('img', {
+          name: /settings environment variable/,
+        })
+        expect(content).toBeInTheDocument()
+      })
+    })
   })
 
   describe('step two', () => {
@@ -181,13 +213,18 @@ describe('CircleCI', () => {
       const header = await screen.findByRole('heading', { name: /Step 2/ })
       expect(header).toBeInTheDocument()
 
-      const CircleCIWorkflowLink = await screen.findByRole('link', {
-        name: /config.yml/,
+      const CircleCIJSWorkflowLink = await screen.findByRole('link', {
+        name: 'config.yml',
+      })
+      expect(CircleCIJSWorkflowLink).toBeInTheDocument()
+
+      const CircleCIJSExampleLink = await screen.findByRole('link', {
+        name: /javascript config.yml/,
       })
-      expect(CircleCIWorkflowLink).toBeInTheDocument()
-      expect(CircleCIWorkflowLink).toHaveAttribute(
+      expect(CircleCIJSExampleLink).toBeInTheDocument()
+      expect(CircleCIJSExampleLink).toHaveAttribute(
         'href',
-        'https://github.com/codecov/cool-repo/tree/main/.circleci/config'
+        'https://github.com/codecov/example-javascript/blob/main/.circleci/config.yml'
       )
     })
 
@@ -203,7 +240,7 @@ describe('CircleCI', () => {
     it('renders yaml code', async () => {
       render(<CircleCI />, { wrapper })
 
-      const yamlCode = await screen.findByText(/codecov\/codecov@4.0.1/)
+      const yamlCode = await screen.findByText(/codecov\/codecov@5/)
       expect(yamlCode).toBeInTheDocument()
     })
 

src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx

@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom'
 
+import envVarScreenshot from 'assets/onboarding/env_variable_screenshot.png'
 import {
   EVENT_METRICS,
   useStoreCodecovEventMetric,
@@ -12,12 +13,13 @@ import { providerToInternalProvider } from 'shared/utils/provider'
 import A from 'ui/A'
 import { Card } from 'ui/Card'
 import { CodeSnippet } from 'ui/CodeSnippet'
+import { ExpandableSection } from 'ui/ExpandableSection'
 
 import ExampleBlurb from '../ExampleBlurb'
 import LearnMoreBlurb from '../LearnMoreBlurb'
 
 const orbsString = `orbs:
-  codecov: codecov/codecov@4.0.1
+  codecov: codecov/codecov@5
 workflows:
   upload-to-codecov:
     jobs:
@@ -48,7 +50,7 @@ function CircleCI() {
   const tokenCopy = orgUploadToken ? 'global' : 'repository'
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-5">
       <Step1
         tokenCopy={tokenCopy}
         uploadToken={uploadToken}
@@ -77,7 +79,11 @@ function Step1({ tokenCopy, uploadToken, providerName }: Step1Props) {
     <Card>
       <Card.Header>
         <Card.Title size="base">
-          Step 1: add {tokenCopy} token to{' '}
+          Step 1: add {tokenCopy} token to environment variables
+        </Card.Title>
+      </Card.Header>
+      <Card.Content className="flex flex-col gap-4">
+        <p>
           <A
             hook="circleCIEnvVarsLink"
             isExternal
@@ -86,13 +92,9 @@ function Step1({ tokenCopy, uploadToken, providerName }: Step1Props) {
               options: { provider: providerName },
             }}
           >
-            environment variables
-          </A>
-        </Card.Title>
-      </Card.Header>
-      <Card.Content className="flex flex-col gap-4">
-        <p>
-          Environment variables in CircleCI can be found in project settings.
+            Environment variables
+          </A>{' '}
+          in CircleCI can be found in project settings.
         </p>
         <div className="flex gap-4">
           <CodeSnippet className="basis-1/3" clipboard="CODECOV_TOKEN">
@@ -112,6 +114,20 @@ function Step1({ tokenCopy, uploadToken, providerName }: Step1Props) {
             {uploadToken}
           </CodeSnippet>
         </div>
+        <ExpandableSection className="-mt-px">
+          <ExpandableSection.Trigger>
+            <p className="font-normal">
+              Your environment variable in CircleCI should look like this:
+            </p>
+          </ExpandableSection.Trigger>
+          <ExpandableSection.Content>
+            <img
+              className="size-full object-cover"
+              alt="settings environment variable"
+              src={envVarScreenshot}
+            />
+          </ExpandableSection.Content>
+        </ExpandableSection>
       </Card.Content>
     </Card>
   )
@@ -197,6 +213,7 @@ function FeedbackCTA() {
           >
             this issue
           </A>
+          .
         </p>
       </Card.Content>
     </Card>

src/pages/RepoPage/CoverageOnboarding/ExampleBlurb/ExampleBlurb.test.tsx

@@ -14,24 +14,24 @@ describe('ExampleBlurb', () => {
     render(<ExampleBlurb />, { wrapper })
 
     const docsLink = await screen.findByRole('link', {
-      name: /repo here/,
+      name: /javascript config.yml example/,
     })
     expect(docsLink).toBeInTheDocument()
     expect(docsLink).toHaveAttribute(
       'href',
-      'https://github.com/codecov/example-python/blob/main/.github/workflows/ci.yml'
+      'https://github.com/codecov/example-javascript/blob/main/.circleci/config.yml'
     )
   })
   it('renders correct CLI link', async () => {
     render(<ExampleBlurb />, { wrapper })
 
     const docsLink = await screen.findByRole('link', {
-      name: /our CLI/,
+      name: /the setup on CircleCI/,
     })
     expect(docsLink).toBeInTheDocument()
     expect(docsLink).toHaveAttribute(
       'href',
-      'https://github.com/codecov/codecov-action'
+      'https://app.circleci.com/pipelines/github/codecov/example-javascript/148/workflows/180ae354-0d8c-4205-8815-f4c516a042a4/jobs/130/steps'
     )
   })
 })

src/pages/RepoPage/CoverageOnboarding/ExampleBlurb/ExampleBlurb.tsx

@@ -3,22 +3,23 @@ import A from 'ui/A'
 const ExampleBlurb = () => {
   return (
     <div data-testid="example-blurb">
-      &#128193; See an example{' '}
+      &#128193; View a{' '}
       <A
-        to={{ pageName: 'codecovExampleWorkflow' }}
+        to={{ pageName: 'codecovExampleJSCircleCIWorkflow' }}
         isExternal
         hook="codecov-workflow-intro"
       >
-        repo here
+        javascript config.yml example
       </A>{' '}
-      and{' '}
+      and see{' '}
       <A
-        to={{ pageName: 'codecovActionRepo' }}
+        to={{ pageName: 'codecovExampleJSCircleCIWorkflowSteps' }}
         isExternal
         hook="codecov-cli-intro"
       >
-        our CLI.
+        the setup on CircleCI
       </A>
+      .
     </div>
   )
 }

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.test.tsx

@@ -465,6 +465,14 @@ describe('GitHubActions', () => {
           blurb = await screen.findByText(/about generating coverage reports/)
           expect(blurb).toBeInTheDocument()
         })
+
+        it('uses correct version of codecov-action', async () => {
+          setup({})
+          render(<GitHubActions />, { wrapper })
+
+          const version = await screen.findByText(/codecov\/codecov-action@v5/)
+          expect(version).toBeInTheDocument()
+        })
       })
     })
   })

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.tsx

@@ -68,7 +68,7 @@ jobs:
         run: npx jest --coverage
 
       - name: Upload results to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           token: \${{ secrets.CODECOV_TOKEN }}${
             orgUploadToken
@@ -106,7 +106,7 @@ jobs:
         run: npx vitest run --coverage
 
       - name: Upload results to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           token: \${{ secrets.CODECOV_TOKEN }}${
             orgUploadToken
@@ -144,7 +144,7 @@ jobs:
         run: pytest --cov --cov-report=xml
 
       - name: Upload results to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           token: \${{ secrets.CODECOV_TOKEN }}${
             orgUploadToken
@@ -182,7 +182,7 @@ jobs:
         run: go test -coverprofile=coverage.txt
 
       - name: Upload results to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           token: \${{ secrets.CODECOV_TOKEN }}${
             orgUploadToken
@@ -195,7 +195,7 @@ jobs:
   }
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-5">
       <Step1
         framework={framework}
         frameworkInstructions={frameworkInstructions}
@@ -379,7 +379,7 @@ function Step3({
   const { mutate: storeEventMetric } = useStoreCodecovEventMetric()
 
   const step3Config = `- name: Upload coverage reports to Codecov
-    uses: codecov/codecov-action@v4
+    uses: codecov/codecov-action@v5
     with:
       token: \${{ secrets.CODECOV_TOKEN }}${
         orgUploadToken

src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.tsx

@@ -41,7 +41,7 @@ function OtherCI() {
   }`
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-5">
       <Step1 tokenCopy={tokenCopy} uploadToken={uploadToken} />
       <Step2 />
       <Step3 uploadCommand={uploadCommand} />

src/services/navigation/useNavLinks/useNavLinks.test.tsx

@@ -1761,34 +1761,6 @@ describe('useNavLinks', () => {
     })
   })
 
-  describe('circleCIEnvVars', () => {
-    it('returns the correct link with nothing passed', () => {
-      const { result } = renderHook(() => useNavLinks(), {
-        wrapper: wrapper('/gh/codecov/cool-repo'),
-      })
-
-      const path = result.current.circleCIEnvVars.path()
-      expect(path).toBe(
-        'https://app.circleci.com/settings/project/gh/codecov/cool-repo/environment-variables'
-      )
-    })
-
-    it('can override the params', () => {
-      const { result } = renderHook(() => useNavLinks(), {
-        wrapper: wrapper('/gh/codecov/cool-repo'),
-      })
-
-      const path = result.current.circleCIEnvVars.path({
-        provider: 'bb',
-        owner: 'test-owner',
-        repo: 'test-repo',
-      })
-      expect(path).toBe(
-        'https://app.circleci.com/settings/project/bb/test-owner/test-repo/environment-variables'
-      )
-    })
-  })
-
   describe('circleCI yaml', () => {
     it('returns the correct link with nothing passed', () => {
       const { result } = renderHook(() => useNavLinks(), {

src/services/navigation/useNavLinks/useNavLinks.ts

@@ -788,19 +788,6 @@ export function useNavLinks() {
       isExternalLink: true,
       openNewTab: true,
     },
-    circleCIEnvVars: {
-      text: 'environment variables',
-      path: (
-        { provider = p, owner = o, repo = r } = {
-          provider: p,
-          owner: o,
-          repo: r,
-        }
-      ) =>
-        `https://app.circleci.com/settings/project/${provider}/${owner}/${repo}/environment-variables`,
-      isExternalLink: true,
-      openNewTab: true,
-    },
     circleCIyaml: {
       text: 'config.yml',
       path: ({