ref(projectDetails): Use SegmentedControl to select issues type (#43931)

**Before ——**
<img width="901" alt="Screenshot 2023-01-31 at 3 12 32 PM"
src="https://user-images.githubusercontent.com/44172267/215904961-e4ad7522-129b-45cc-8d6e-08796cadb160.png">

**After ——**
<img width="901" alt="Screenshot 2023-01-31 at 3 12 01 PM"
src="https://user-images.githubusercontent.com/44172267/215904888-cb31036d-91e0-40b4-91b8-5c1ceee60db6.png">

Part of #43865

Author: vuluongj20

static/app/views/projectDetail/projectIssues.spec.jsx

@@ -1,10 +1,10 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ProjectIssues from 'sentry/views/projectDetail/projectIssues';
 
 describe('ProjectDetail > ProjectIssues', function () {
-  let endpointMock, filteredEndpointMock;
+  let endpointMock, filteredEndpointMock, newIssuesEndpointMock;
   const {organization, router, routerContext} = initializeOrg({
     organization: {
       features: ['discover-basic'],
@@ -22,6 +22,11 @@ describe('ProjectDetail > ProjectIssues', function () {
       body: [TestStubs.Group(), TestStubs.Group({id: '2'})],
     });
 
+    newIssuesEndpointMock = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/?limit=5&query=is%3Aunresolved%20is%3Afor_review&sort=freq&statsPeriod=14d`,
+      body: [TestStubs.Group(), TestStubs.Group({id: '2'})],
+    });
+
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/users/`,
       body: [],
@@ -67,6 +72,28 @@ describe('ProjectDetail > ProjectIssues', function () {
     });
   });
 
+  it('renders a segmented control', function () {
+    render(<ProjectIssues organization={organization} location={router.location} />, {
+      context: routerContext,
+      organization,
+    });
+
+    // "Unhandled" segment is selected
+    const unhandledSegment = screen.getByRole('radio', {name: 'Unhandled 0'});
+    expect(unhandledSegment).toBeInTheDocument();
+    expect(unhandledSegment).toBeChecked();
+
+    // Select "New Issues" segment
+    const newIssuesSegment = screen.getByRole('radio', {name: 'New Issues 0'});
+    expect(newIssuesSegment).toBeInTheDocument();
+    expect(newIssuesSegment).not.toBeChecked();
+
+    userEvent.click(newIssuesSegment);
+    waitFor(() => expect(newIssuesSegment).toBeChecked());
+
+    expect(newIssuesEndpointMock).toHaveBeenCalled();
+  });
+
   it('renders a link to Discover', function () {
     render(<ProjectIssues organization={organization} location={router.location} />, {
       context: routerContext,

static/app/views/projectDetail/projectIssues.tsx

@@ -6,14 +6,15 @@ import pick from 'lodash/pick';
 import * as qs from 'query-string';
 
 import {Client} from 'sentry/api';
-import {Button, ButtonLabel} from 'sentry/components/button';
+import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import DiscoverButton from 'sentry/components/discoverButton';
 import GroupList from 'sentry/components/issues/groupList';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import Pagination from 'sentry/components/pagination';
 import {Panel, PanelBody} from 'sentry/components/panels';
 import QueryCount from 'sentry/components/queryCount';
+import {SegmentedControl} from 'sentry/components/segmentedControl';
 import {DEFAULT_RELATIVE_PERIODS, DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {t, tct} from 'sentry/locale';
@@ -59,8 +60,8 @@ type Props = {
 function ProjectIssues({organization, location, projectId, query, api}: Props) {
   const [pageLinks, setPageLinks] = useState<string | undefined>();
   const [onCursor, setOnCursor] = useState<(() => void) | undefined>();
-  const [issuesType, setIssuesType] = useState<IssuesType | string>(
-    (location.query.issuesType as string) || IssuesType.UNHANDLED
+  const [issuesType, setIssuesType] = useState<IssuesType>(
+    (location.query.issuesType as IssuesType) || IssuesType.UNHANDLED
   );
   const [issuesCount, setIssuesCount] = useState<Count>({
     all: 0,
@@ -241,20 +242,19 @@ function ProjectIssues({organization, location, projectId, query, api}: Props) {
   return (
     <Fragment>
       <ControlsWrapper>
-        <StyledButtonBar active={issuesType} merged>
+        <SegmentedControl
+          aria-label={t('Issue type')}
+          value={issuesType}
+          onChange={value => handleIssuesTypeSelection(value)}
+          size="xs"
+        >
           {issuesTypes.map(({value, label, issueCount}) => (
-            <Button
-              key={value}
-              barId={value}
-              size="xs"
-              onClick={() => handleIssuesTypeSelection(value)}
-              data-test-id={`filter-${value}`}
-            >
-              {label}
+            <SegmentedControl.Item key={value} textValue={label}>
+              {label}&nbsp;
               <QueryCount count={issueCount} max={99} hideParens hideIfEmpty={false} />
-            </Button>
+            </SegmentedControl.Item>
           ))}
-        </StyledButtonBar>
+        </SegmentedControl>
         <OpenInButtonBar gap={1}>
           <Button
             data-test-id="issues-open"
@@ -297,31 +297,14 @@ const ControlsWrapper = styled('div')`
   justify-content: space-between;
   margin-bottom: ${space(1)};
   flex-wrap: wrap;
-  @media (max-width: ${p => p.theme.breakpoints.small}) {
-    display: block;
-  }
-`;
-
-const StyledButtonBar = styled(ButtonBar)`
-  grid-template-columns: repeat(4, 1fr);
-  ${ButtonLabel} {
-    white-space: nowrap;
-    gap: ${space(0.5)};
-    span:last-child {
-      color: ${p => p.theme.buttonCount};
-    }
-  }
-  .active {
-    ${ButtonLabel} {
-      span:last-child {
-        color: ${p => p.theme.buttonCountActive};
-      }
-    }
-  }
 `;
 
 const OpenInButtonBar = styled(ButtonBar)`
   margin-top: ${space(1)};
+
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
+    width: 100%;
+  }
 `;
 
 const StyledPagination = styled(Pagination)`