feat(codecov): Add onboarding radio selector for GHA or CLI

static/app/views/codecov/tests/onboarding.spec.tsx

@@ -1,18 +1,100 @@
-import {OrganizationFixture} from 'sentry-fixture/organization';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import TestsOnboardingPage from 'sentry/views/codecov/tests/onboarding';
 
-import TestAnalyticsOnboardingPage from 'sentry/views/codecov/tests/onboarding';
+describe('TestsOnboardingPage', () => {
+  it('renders with GitHub Actions selected by default if no query param is provided', () => {
+    render(<TestsOnboardingPage />, {
+      initialRouterConfig: {
+        location: {
+          pathname: '/codecov/tests/new',
+          query: {},
+        },
+      },
+    });
+
+    const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI');
+    expect(githubRadio).toBeChecked();
 
-const COVERAGE_FEATURE = 'codecov-ui';
+    const cliRadio = screen.getByLabelText(
+      "Use Sentry Prevent's CLI to upload testing reports"
+    );
+    expect(cliRadio).not.toBeChecked();
+  });
 
-describe('TestAnalyticsOnboardingPage', () => {
-  it('renders the placeholder content', () => {
-    render(<TestAnalyticsOnboardingPage />, {
-      organization: OrganizationFixture({features: [COVERAGE_FEATURE]}),
+  it('renders with GitHub Actions selected by default if empty opt query param is provided', () => {
+    render(<TestsOnboardingPage />, {
+      initialRouterConfig: {
+        location: {
+          pathname: '/codecov/tests/new',
+          query: {opt: ''},
+        },
+      },
     });
 
-    const testContent = screen.getByText('Test Analytics Onboarding');
-    expect(testContent).toBeInTheDocument();
+    const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI');
+    expect(githubRadio).toBeChecked();
+
+    const cliRadio = screen.getByLabelText(
+      "Use Sentry Prevent's CLI to upload testing reports"
+    );
+    expect(cliRadio).not.toBeChecked();
+  });
+
+  it('renders with CLI selected when opt=cli in URL', () => {
+    render(<TestsOnboardingPage />, {
+      initialRouterConfig: {
+        location: {
+          pathname: '/codecov/tests/new',
+          query: {opt: 'cli'},
+        },
+      },
+    });
+
+    const cliRadio = screen.getByLabelText(
+      "Use Sentry Prevent's CLI to upload testing reports"
+    );
+    expect(cliRadio).toBeChecked();
+
+    const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI');
+    expect(githubRadio).not.toBeChecked();
+  });
+
+  it('updates URL when GitHub Actions option is selected', async () => {
+    const {router} = render(<TestsOnboardingPage />, {
+      initialRouterConfig: {
+        location: {
+          pathname: '/codecov/tests/new',
+          query: {opt: 'cli'},
+        },
+      },
+    });
+
+    const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI');
+    expect(githubRadio).not.toBeChecked();
+
+    await userEvent.click(githubRadio);
+
+    expect(router.location.search).toBe('?opt=githubAction');
+  });
+
+  it('updates URL when CLI option is selected', async () => {
+    const {router} = render(<TestsOnboardingPage />, {
+      initialRouterConfig: {
+        location: {
+          pathname: '/codecov/tests/new',
+          query: {opt: ''},
+        },
+      },
+    });
+
+    const cliRadio = screen.getByLabelText(
+      "Use Sentry Prevent's CLI to upload testing reports"
+    );
+    expect(cliRadio).not.toBeChecked();
+
+    await userEvent.click(cliRadio);
+
+    expect(router.location.search).toBe('?opt=cli');
   });
 });

static/app/views/codecov/tests/onboarding.tsx

@@ -1,13 +1,47 @@
+import {useCallback} from 'react';
+import {useSearchParams} from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import RadioGroup from 'sentry/components/forms/controls/radioGroup';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import TestPreOnboardingPage from 'sentry/views/codecov/tests/preOnboarding';
+
+type SetupOption = 'githubAction' | 'cli';
 
 export default function TestsOnboardingPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const opt = searchParams.get('opt');
+
+  const handleRadioChange = useCallback(
+    (newOption: SetupOption) => {
+      setSearchParams({opt: newOption});
+    },
+    [setSearchParams]
+  );
+
   return (
     <LayoutGap>
       <p>Test Analytics Onboarding</p>
-      <TestPreOnboardingPage />
+      <OnboardingContainer>
+        <IntroContainer>
+          <GetStartedHeader>{t('Get Started with Test Analytics')}</GetStartedHeader>
+          <TAValueText>
+            {t(
+              'Test Analytics offers data on test run times, failure rates, and identifies flaky tests to help decrease the risk of deployment failures and make it easier to ship new features quickly.'
+            )}
+          </TAValueText>
+        </IntroContainer>
+        <SelectOptionHeader>{t('Select a setup option')}</SelectOptionHeader>
+        <RadioGroup
+          label="Select a setup option"
+          value={opt === 'cli' ? 'cli' : 'githubAction'}
+          onChange={handleRadioChange}
+          choices={[
+            ['githubAction', t('Use GitHub Actions to run my CI')],
+            ['cli', t("Use Sentry Prevent's CLI to upload testing reports")],
+          ]}
+        />
+      </OnboardingContainer>
     </LayoutGap>
   );
 }
@@ -16,3 +50,31 @@ const LayoutGap = styled('div')`
   display: grid;
   gap: ${space(2)};
 `;
+
+const OnboardingContainer = styled('div')`
+  padding: ${space(1.5)} ${space(4)};
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+`;
+
+const IntroContainer = styled('div')`
+  border-bottom: 1px solid ${p => p.theme.border};
+  padding-bottom: ${space(3)};
+`;
+
+const GetStartedHeader = styled('h2')`
+  font-size: 1.625rem;
+  color: ${p => p.theme.tokens.content.primary};
+  line-height: 40px;
+`;
+
+const TAValueText = styled('p')`
+  font-size: ${p => p.theme.fontSizeLarge};
+  color: ${p => p.theme.tokens.content.primary};
+`;
+
+const SelectOptionHeader = styled('h5')`
+  font-size: ${p => p.theme.fontSizeExtraLarge};
+  color: ${p => p.theme.tokens.content.primary};
+  margin-top: ${space(3)};
+`;