Browse Source

ref(ui): Change User Feedback nav to use `<ButtonBar>` (#22740)

Instead of using the legacy `btn-group` css, use the `<ButtonBar>` component
Billy Vong 4 years ago
parent
commit
9e3cdd6b4b
1 changed files with 11 additions and 16 deletions
  1. 11 16
      src/sentry/static/sentry/app/views/userFeedback/index.tsx

+ 11 - 16
src/sentry/static/sentry/app/views/userFeedback/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import {Link, RouteComponentProps} from 'react-router';
+import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import {withProfiler} from '@sentry/react';
 import omit from 'lodash/omit';
 
+import Button from 'app/components/button';
+import ButtonBar from 'app/components/buttonBar';
 import EventUserFeedback from 'app/components/events/userFeedback';
 import CompactIssue from 'app/components/issues/compactIssue';
 import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
@@ -118,25 +120,18 @@ class OrganizationUserFeedback extends AsyncView<Props, State> {
             <div data-test-id="user-feedback">
               <Header>
                 <PageHeading>{t('User Feedback')}</PageHeading>
-                <div className="btn-group">
-                  <Link
+                <ButtonBar active={!Array.isArray(status) ? status || '' : ''} merged>
+                  <Button
+                    size="small"
+                    barId="unresolved"
                     to={{pathname, query: unresolvedQuery}}
-                    className={
-                      'btn btn-sm btn-default' +
-                      (status === 'unresolved' ? ' active' : '')
-                    }
                   >
                     {t('Unresolved')}
-                  </Link>
-                  <Link
-                    to={{pathname, query: allIssuesQuery}}
-                    className={
-                      'btn btn-sm btn-default' + (status === '' ? ' active' : '')
-                    }
-                  >
+                  </Button>
+                  <Button size="small" barId="" to={{pathname, query: allIssuesQuery}}>
                     {t('All Issues')}
-                  </Link>
-                </div>
+                  </Button>
+                </ButtonBar>
               </Header>
               <Panel>
                 <PanelBody className="issue-list">{this.renderStreamBody()}</PanelBody>