feat(Codecov): add Codecov repository picker (#92068)

This PR adds the RepoPicker and RepoSelector components as well as
adding them to the Test page.

Author: adrianviquez

static/app/components/codecov/repoPicker/repoPicker.tsx

@@ -0,0 +1,23 @@
+import {useSearchParams} from 'react-router-dom';
+
+import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
+import {RepoSelector} from 'sentry/components/codecov/repoPicker/repoSelector';
+
+export function RepoPicker() {
+  const {repository} = useCodecovContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <RepoSelector
+      repository={repository}
+      onChange={newRepository => {
+        const currentParams = Object.fromEntries(searchParams.entries());
+        const updatedParams = {
+          ...currentParams,
+          repository: newRepository,
+        };
+        setSearchParams(updatedParams);
+      }}
+    />
+  );
+}

static/app/components/codecov/repoPicker/repoSelector.tsx

@@ -0,0 +1,97 @@
+import {useCallback, useMemo} from 'react';
+import styled from '@emotion/styled';
+
+import type {SelectOption, SingleSelectProps} from 'sentry/components/core/compactSelect';
+import {CompactSelect} from 'sentry/components/core/compactSelect';
+import DropdownButton from 'sentry/components/dropdownButton';
+import {t} from 'sentry/locale';
+
+const CODECOV_PLACEHOLDER_REPOS = ['test repo 1', 'test-repo-2', 'Test Repo 3'];
+
+export interface RepoSelectorProps {
+  onChange: (data: string) => void;
+  /**
+   * Repository value
+   */
+  repository: string | null;
+  /**
+   * Optional trigger for the assignee selector. If nothing passed in,
+   * the default trigger will be used
+   */
+  trigger?: (
+    props: Omit<React.HTMLAttributes<HTMLElement>, 'children'>,
+    isOpen: boolean
+  ) => React.ReactNode;
+}
+
+export function RepoSelector({onChange, trigger, repository}: RepoSelectorProps) {
+  const options = useMemo((): Array<SelectOption<string>> => {
+    // TODO: When API is ready, replace placeholder w/ api response
+    const repoSet = new Set([
+      ...(repository ? [repository] : []),
+      ...(CODECOV_PLACEHOLDER_REPOS.length ? CODECOV_PLACEHOLDER_REPOS : []),
+    ]);
+
+    return [...repoSet].map((value): SelectOption<string> => {
+      return {
+        // TODO: ideally this has a unique id, possibly adjust set to an
+        // object when you have backend response
+        value,
+        label: <OptionLabel>{value}</OptionLabel>,
+        textValue: value,
+      };
+    });
+  }, [repository]);
+
+  const handleChange = useCallback<NonNullable<SingleSelectProps<string>['onChange']>>(
+    newSelected => {
+      onChange(newSelected.value);
+    },
+    [onChange]
+  );
+
+  return (
+    <CompactSelect
+      options={options}
+      value={repository ?? ''}
+      onChange={handleChange}
+      menuWidth={'16rem'}
+      trigger={
+        trigger ??
+        ((triggerProps, isOpen) => {
+          const defaultLabel = options.some(item => item.value === repository)
+            ? repository?.toUpperCase()
+            : t('Select Repo');
+
+          return (
+            <DropdownButton
+              isOpen={isOpen}
+              data-test-id="page-filter-codecov-repository-selector"
+              {...triggerProps}
+            >
+              <TriggerLabelWrap>
+                <TriggerLabel>{defaultLabel}</TriggerLabel>
+              </TriggerLabelWrap>
+            </DropdownButton>
+          );
+        })
+      }
+    />
+  );
+}
+
+const TriggerLabelWrap = styled('span')`
+  position: relative;
+  min-width: 0;
+`;
+
+const TriggerLabel = styled('span')`
+  ${p => p.theme.overflowEllipsis}
+  width: auto;
+`;
+
+const OptionLabel = styled('span')`
+  div {
+    margin: 0;
+  }
+`;

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

@@ -1,19 +1,20 @@
-import {OrganizationFixture} from 'sentry-fixture/organization';
-
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import TestsPage from 'sentry/views/codecov/tests/tests';
 
-const COVERAGE_FEATURE = 'codecov-ui';
-
 describe('CoveragePageWrapper', () => {
   describe('when the wrapper is used', () => {
-    it('renders the passed children', () => {
+    it('renders the passed children', async () => {
       render(<TestsPage />, {
-        organization: OrganizationFixture({features: [COVERAGE_FEATURE]}),
+        initialRouterConfig: {
+          location: {
+            pathname: '/codecov/tests',
+            query: {codecovPeriod: '7d'},
+          },
+        },
       });
 
-      const testsAnalytics = screen.getByText('Test Analytics');
+      const testsAnalytics = await screen.findByText('Test Analytics');
       expect(testsAnalytics).toBeInTheDocument();
     });
   });

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

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 
+import CodecovProvider from 'sentry/components/codecov/container/codecovParamsProvider';
 import {DatePicker} from 'sentry/components/codecov/datePicker/datePicker';
-// import TestAnalyticsTable from 'sentry/components/codecov/testAnalytics/testAnalyticsTable';
+import {RepoPicker} from 'sentry/components/codecov/repoPicker/repoPicker';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {space} from 'sentry/styles/space';
@@ -72,6 +73,11 @@ export default function TestsPage() {
           <DatePicker />
         </PageFilterBar>
       </PageFiltersContainer>
+      <CodecovProvider>
+        <PageFilterBar condensed>
+          <RepoPicker />
+        </PageFilterBar>
+      </CodecovProvider>
       {/* TODO: Conditionally show these if the branch we're in is the main branch */}
       <Summaries />
       <TestAnalyticsTable response={fakeApiResponse} sort={sorts[0]} />