feat(codecov): Add in routes for new Codecov views (#88712)

This PR adds in the routes that are being used to display the various
pages for Codecov content. As well as renaming directories from
`pipeline` to `codecov` and updating the codeowners file accordingly.

Author: nsdeschenes

.github/CODEOWNERS

@@ -369,9 +369,9 @@ tests/sentry/api/endpoints/test_organization_dashboard_widget_details.py     @ge
 ## End of DevToolbar
 
 ## Codecov Merge UX
-/static/app/components/pipeline/  @getsentry/codecov-merge-ux
-/static/app/utils/pipeline/       @getsentry/codecov-merge-ux
-/static/app/views/pipeline/       @getsentry/codecov-merge-ux
+/static/app/components/codecov/  @getsentry/codecov-merge-ux
+/static/app/utils/codecov/       @getsentry/codecov-merge-ux
+/static/app/views/codecov/       @getsentry/codecov-merge-ux
 ## End of Codecov Merge UX
 
 ## Frontend

static/app/routes.tsx

@@ -2007,6 +2007,101 @@ function buildRoutes() {
     />
   );
 
+  const codecovCommitRoutes = (
+    /* This is a layout route that will render a header for a commit */
+    <Route
+      path="commits/:sha/"
+      component={make(
+        () => import('sentry/views/codecov/coverage/commits/commitWrapper')
+      )}
+    >
+      <IndexRoute
+        component={make(
+          () => import('sentry/views/codecov/coverage/commits/commitDetail')
+        )}
+      />
+      <Route
+        path="history/"
+        component={make(
+          () => import('sentry/views/codecov/coverage/commits/commitHistory')
+        )}
+      />
+      <Route
+        path="yaml/"
+        component={make(() => import('sentry/views/codecov/coverage/commits/commitYaml'))}
+      />
+    </Route>
+  );
+  const codecovPRRoutes = (
+    /* This is a layout route that will render a header for a pull request */
+    <Route
+      path="pulls/:pullId/"
+      component={make(() => import('sentry/views/codecov/coverage/pulls/pullWrapper'))}
+    >
+      <IndexRoute
+        component={make(() => import('sentry/views/codecov/coverage/pulls/pullDetail'))}
+      />
+    </Route>
+  );
+  const codecovChildrenRoutes = (
+    <Fragment>
+      <Route path="coverage/">
+        {/* This is a layout route that will render a header for coverage */}
+        <Route
+          component={make(() => import('sentry/views/codecov/coverage/coverageWrapper'))}
+        >
+          <IndexRoute
+            component={make(() => import('sentry/views/codecov/coverage/coverage'))}
+          />
+          <Route
+            path="commits/"
+            component={make(() => import('sentry/views/codecov/coverage/commits'))}
+          />
+          <Route
+            path="pulls/"
+            component={make(() => import('sentry/views/codecov/coverage/pulls'))}
+          />
+          <Route
+            path="coverage-trend/"
+            component={make(() => import('sentry/views/codecov/coverage/coverageTrend'))}
+          />
+        </Route>
+
+        {/* Render coverage onboarding without any layout wrapping */}
+        <Route
+          path="new/"
+          component={make(() => import('sentry/views/codecov/coverage/onboarding'))}
+        />
+
+        {codecovCommitRoutes}
+        {codecovPRRoutes}
+      </Route>
+      <Route path="tests/">
+        {/* Render tests onboarding with layout wrapper */}
+        <Route component={make(() => import('sentry/views/codecov/tests/testsWrapper'))}>
+          <IndexRoute
+            component={make(() => import('sentry/views/codecov/tests/tests'))}
+          />
+        </Route>
+
+        {/* Render tests onboarding without any layout wrapping */}
+        <Route
+          path="new/"
+          component={make(() => import('sentry/views/codecov/tests/onboarding'))}
+        />
+      </Route>
+    </Fragment>
+  );
+  const codecovRoutes = (
+    <Route
+      path="/codecov/"
+      withOrgPath
+      component={make(() => import('sentry/views/codecov/index'))}
+    >
+      {codecovChildrenRoutes}
+    </Route>
+  );
+
   const feedbackV2ChildRoutes = (
     <Fragment>
       <IndexRoute
@@ -2402,6 +2497,7 @@ function buildRoutes() {
       {feedbackv2Routes}
       {issueRoutes}
       {alertRoutes}
+      {codecovRoutes}
       {cronsRoutes}
       {replayRoutes}
       {releasesRoutes}

static/app/views/pipeline/coverage/commits.spec.tsx renamed to static/app/views/codecov/coverage/commits.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CommitsListPage from 'sentry/views/pipeline/coverage/commits';
+import CommitsListPage from 'sentry/views/codecov/coverage/commits';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/commits.tsx renamed to static/app/views/codecov/coverage/commits.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CommitDetailPage from 'sentry/views/pipeline/coverage/commits/commitDetail';
+import CommitDetailPage from 'sentry/views/codecov/coverage/commits/commitDetail';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/commits/commitDetail.spec.tsx renamed to static/app/views/codecov/coverage/commits/commitDetail.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CommitHistoryPage from 'sentry/views/pipeline/coverage/commits/commitHistory';
+import CommitHistoryPage from 'sentry/views/codecov/coverage/commits/commitHistory';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/commits/commitDetail.tsx renamed to static/app/views/codecov/coverage/commits/commitDetail.tsx

@@ -0,0 +1,20 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import CommitDetailWrapper from 'sentry/views/codecov/coverage/commits/commitWrapper';
+
+const COVERAGE_FEATURE = 'codecov-ui';
+
+describe('CommitDetailWrapper', () => {
+  describe('when the wrapper is used', () => {
+    it('renders the document title', () => {
+      render(<CommitDetailWrapper />, {
+        organization: OrganizationFixture({features: [COVERAGE_FEATURE]}),
+      });
+
+      const testTitle = screen.getByText('Commit Page Wrapper');
+      expect(testTitle).toBeInTheDocument();
+    });
+  });
+});

static/app/views/pipeline/coverage/commits/commitHistory.spec.tsx renamed to static/app/views/codecov/coverage/commits/commitHistory.spec.tsx

@@ -1,15 +1,12 @@
+import {Outlet} from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import useOrganization from 'sentry/utils/useOrganization';
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function CommitDetailWrapper({children}: Props) {
+export default function CommitDetailWrapper() {
   const organization = useOrganization();
 
   return (
@@ -26,7 +23,9 @@ export default function CommitDetailWrapper({children}: Props) {
         </Layout.HeaderContent>
       </Layout.Header>
       <Layout.Body>
-        <Layout.Main fullWidth>{children}</Layout.Main>
+        <Layout.Main fullWidth>
+          <Outlet />
+        </Layout.Main>
       </Layout.Body>
     </SentryDocumentTitle>
   );

static/app/views/pipeline/coverage/commits/commitHistory.tsx renamed to static/app/views/codecov/coverage/commits/commitHistory.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CommitYamlPage from 'sentry/views/pipeline/coverage/commits/commitYaml';
+import CommitYamlPage from 'sentry/views/codecov/coverage/commits/commitYaml';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/codecov/coverage/commits/commitWrapper.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CoveragePage from 'sentry/views/pipeline/coverage/coverage';
+import CoveragePage from 'sentry/views/codecov/coverage/coverage';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/commits/commitWrapper.tsx renamed to static/app/views/codecov/coverage/commits/commitWrapper.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CoverageTrendPage from 'sentry/views/pipeline/coverage/coverageTrend';
+import CoverageTrendPage from 'sentry/views/codecov/coverage/coverageTrend';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/commits/commitYaml.spec.tsx renamed to static/app/views/codecov/coverage/commits/commitYaml.spec.tsx

@@ -0,0 +1,21 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import CoveragePageWrapper from 'sentry/views/codecov/coverage/coverageWrapper';
+import {COVERAGE_PAGE_TITLE} from 'sentry/views/codecov/settings';
+
+const COVERAGE_FEATURE = 'codecov-ui';
+
+describe('CoveragePageWrapper', () => {
+  describe('when the wrapper is used', () => {
+    it('renders the document title', () => {
+      render(<CoveragePageWrapper />, {
+        organization: OrganizationFixture({features: [COVERAGE_FEATURE]}),
+      });
+
+      const testTitle = screen.getByText(COVERAGE_PAGE_TITLE);
+      expect(testTitle).toBeInTheDocument();
+    });
+  });
+});

static/app/views/pipeline/coverage/commits/commitYaml.tsx renamed to static/app/views/codecov/coverage/commits/commitYaml.tsx

@@ -1,16 +1,13 @@
+import {Outlet} from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import useOrganization from 'sentry/utils/useOrganization';
-import {COVERAGE_PAGE_TITLE} from 'sentry/views/pipeline/settings';
+import {COVERAGE_PAGE_TITLE} from 'sentry/views/codecov/settings';
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function CoveragePageWrapper({children}: Props) {
+export default function CoveragePageWrapper() {
   const organization = useOrganization();
 
   return (
@@ -26,7 +23,9 @@ export default function CoveragePageWrapper({children}: Props) {
         </Layout.HeaderContent>
       </Layout.Header>
       <Layout.Body>
-        <Layout.Main fullWidth>{children}</Layout.Main>
+        <Layout.Main fullWidth>
+          <Outlet />
+        </Layout.Main>
       </Layout.Body>
     </SentryDocumentTitle>
   );

static/app/views/pipeline/coverage/coverage.spec.tsx renamed to static/app/views/codecov/coverage/coverage.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import CoverageOnboardingPage from 'sentry/views/pipeline/coverage/onboarding';
+import CoverageOnboardingPage from 'sentry/views/codecov/coverage/onboarding';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/coverage.tsx renamed to static/app/views/codecov/coverage/coverage.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import PullsListPage from 'sentry/views/pipeline/coverage/pulls';
+import PullsListPage from 'sentry/views/codecov/coverage/pulls';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/coverageTrend.spec.tsx renamed to static/app/views/codecov/coverage/coverageTrend.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import PullDetailPage from 'sentry/views/pipeline/coverage/pulls/pullDetail';
+import PullDetailPage from 'sentry/views/codecov/coverage/pulls/pullDetail';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 

static/app/views/pipeline/coverage/coverageTrend.tsx renamed to static/app/views/codecov/coverage/coverageTrend.tsx

@@ -0,0 +1,20 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import PullDetailWrapper from 'sentry/views/codecov/coverage/pulls/pullWrapper';
+
+const COVERAGE_FEATURE = 'codecov-ui';
+
+describe('PullDetailWrapper', () => {
+  describe('when the wrapper is used', () => {
+    it('renders the document title', () => {
+      render(<PullDetailWrapper />, {
+        organization: OrganizationFixture({features: [COVERAGE_FEATURE]}),
+      });
+
+      const testTitle = screen.getByText('Pull Page Wrapper');
+      expect(testTitle).toBeInTheDocument();
+    });
+  });
+});

static/app/views/codecov/coverage/coverageWrapper.spec.tsx

@@ -1,15 +1,12 @@
+import {Outlet} from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import useOrganization from 'sentry/utils/useOrganization';
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function PullDetailWrapper({children}: Props) {
+export default function PullDetailWrapper() {
   const organization = useOrganization();
 
   return (
@@ -26,7 +23,9 @@ export default function PullDetailWrapper({children}: Props) {
         </Layout.HeaderContent>
       </Layout.Header>
       <Layout.Body>
-        <Layout.Main fullWidth>{children}</Layout.Main>
+        <Layout.Main fullWidth>
+          <Outlet />
+        </Layout.Main>
       </Layout.Body>
     </SentryDocumentTitle>
   );

static/app/views/pipeline/coverage/index.tsx renamed to static/app/views/codecov/coverage/coverageWrapper.tsx

@@ -2,17 +2,17 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import PipelinePage from 'sentry/views/pipeline';
+import CodecovPage from 'sentry/views/codecov';
 
 const COVERAGE_FEATURE = 'codecov-ui';
 
-describe('PipelinePage', () => {
+describe('CodecovPage', () => {
   describe('when the user has access to the feature', () => {
     it('renders the passed children', () => {
       render(
-        <PipelinePage>
+        <CodecovPage>
           <p>Test content</p>
-        </PipelinePage>,
+        </CodecovPage>,
         {organization: OrganizationFixture({features: [COVERAGE_FEATURE]})}
       );
 
@@ -24,9 +24,9 @@ describe('PipelinePage', () => {
   describe('when the user does not have access to the feature', () => {
     it('renders the NoAccess component', () => {
       render(
-        <PipelinePage>
+        <CodecovPage>
           <p>Test content</p>
-        </PipelinePage>,
+        </CodecovPage>,
         {organization: OrganizationFixture({features: []})}
       );