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

Author: calvin-codecov

static/app/routes.tsx

@@ -2022,7 +2022,9 @@ function buildRoutes() {
         {/* Render tests onboarding without any layout wrapping */}
         <Route
           path="new/"
-          component={make(() => import('sentry/views/codecov/tests/onboarding'))}
+          component={make(
+            () => import('sentry/views/codecov/tests/onboarding/onboarding')
+          )}
         />
       </Route>
       <Route path="tokens/">

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

@@ -0,0 +1,71 @@
+import {useState} from 'react';
+import styled from '@emotion/styled';
+
+import RadioGroup from 'sentry/components/forms/controls/radioGroup';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+
+type SetupOption = 'githubAction' | 'cli';
+
+export default function TestsOnboardingPage() {
+  const [selectedOption, setSelectedOption] = useState<SetupOption>('githubAction');
+
+  return (
+    <LayoutGap>
+      <p>Test Analytics Onboarding</p>
+      <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>Select a setup option</SelectOptionHeader>
+        <RadioGroup
+          label="Select a setup option"
+          value={selectedOption}
+          onChange={opt => setSelectedOption(opt as SetupOption)}
+          choices={[
+            ['githubAction', t('Use GitHub Actions to run my CI')],
+            ['cli', t("Use Sentry Prevent's CLI to upload testing reports")],
+          ]}
+        />
+      </OnboardingContainer>
+    </LayoutGap>
+  );
+}
+
+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)};
+`;

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

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+import {space} from 'sentry/styles/space';
+
+const Container = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+  padding: ${space(2)} ${space(3)};
+`;
+
+const Header = styled('h5')`
+  font-size: ${p => p.theme.fontSizeExtraLarge};
+  color: ${p => p.theme.gray300};
+`;
+
+const Content = styled('div')`
+  /* flex-grow: 1; */
+`;
+
+export const OnboardingStep = {
+  Container,
+  Header,
+  Content,
+};

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

@@ -4,6 +4,7 @@ import {DatePicker} from 'sentry/components/codecov/datePicker/datePicker';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {space} from 'sentry/styles/space';
+import TestsOnboardingPage from 'sentry/views/codecov/tests/onboarding/onboarding';
 import {Summaries} from 'sentry/views/codecov/tests/summaries/summaries';
 
 const DEFAULT_CODECOV_DATETIME_SELECTION = {
@@ -26,6 +27,7 @@ export default function TestsPage() {
       </PageFiltersContainer>
       {/* TODO: Conditionally show these if the branch we're in is the main branch */}
       <Summaries />
+      <TestsOnboardingPage />
     </LayoutGap>
   );
 }