Browse Source

ref(issues): Use new dropdown menu in Tag Details (#49817)

**Before ——**
<img width="260" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/e57c9961-8ec8-45e9-86ca-d3c71ab28d0e">


**After ——**
<img width="260" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/a2d91c7f-0b8a-477d-844a-d1a76f8e7976">
Vu Luong 1 year ago
parent
commit
f6c440cc51

+ 7 - 3
static/app/views/issueDetails/groupTagValues.spec.jsx

@@ -1,5 +1,5 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
 
 import GroupTagValues from 'sentry/views/issueDetails/groupTagValues';
 
@@ -44,8 +44,12 @@ describe('GroupTagValues', () => {
       context: routerContext,
     });
 
-    await userEvent.click(screen.getByLabelText('Show more'));
-    await userEvent.click(screen.getByText('Search All Issues with Tag Value'));
+    await userEvent.click(screen.getByRole('button', {name: 'More'}));
+    await userEvent.click(
+      within(
+        screen.getByRole('menuitemradio', {name: 'Search All Issues with Tag Value'})
+      ).getByRole('link')
+    );
 
     expect(router.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/issues/',

+ 46 - 34
static/app/views/issueDetails/groupTagValues.tsx

@@ -2,27 +2,35 @@ import {Fragment} from 'react';
 import {RouteComponentProps, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 
-import Feature from 'sentry/components/acl/feature';
 import AsyncComponent from 'sentry/components/asyncComponent';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import DataExport, {ExportQueryType} from 'sentry/components/dataExport';
 import {DeviceName} from 'sentry/components/deviceName';
-import DropdownLink from 'sentry/components/dropdownLink';
+import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 import UserBadge from 'sentry/components/idBadge/userBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
+import {extractSelectionParameters} from 'sentry/components/organizations/pageFilters/utils';
 import Pagination from 'sentry/components/pagination';
 import {PanelTable} from 'sentry/components/panels';
 import TimeSince from 'sentry/components/timeSince';
 import {IconArrow, IconEllipsis, IconMail, IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {Group, Project, SavedQueryVersions, Tag, TagValue} from 'sentry/types';
+import {
+  Group,
+  Organization,
+  Project,
+  SavedQueryVersions,
+  Tag,
+  TagValue,
+} from 'sentry/types';
 import {isUrl, percent} from 'sentry/utils';
 import EventView from 'sentry/utils/discover/eventView';
+import withOrganization from 'sentry/utils/withOrganization';
 // eslint-disable-next-line no-restricted-imports
 import withSentryRouter from 'sentry/utils/withSentryRouter';
 
@@ -35,6 +43,7 @@ type RouteParams = {
 type Props = {
   baseUrl: string;
   group: Group;
+  organization: Organization;
   environments?: string[];
   project?: Project;
 } & RouteComponentProps<RouteParams, {}>;
@@ -78,7 +87,9 @@ class GroupTagValues extends AsyncComponent<
       project,
       environments: environment,
       group,
+      location: {query},
       params: {orgId, tagKey},
+      organization,
     } = this.props;
     const {tagValueList, tag} = this.state;
     const discoverFields = [
@@ -89,6 +100,8 @@ class GroupTagValues extends AsyncComponent<
       'timestamp',
     ];
 
+    const globalSelectionParams = extractSelectionParameters(query);
+
     return tagValueList?.map((tagValue, tagValueIdx) => {
       const pct = tag?.totalValues
         ? `${percent(tagValue.count, tag?.totalValues).toFixed(2)}%`
@@ -153,36 +166,35 @@ class GroupTagValues extends AsyncComponent<
             <TimeSince date={tagValue.lastSeen} />
           </RightAlignColumn>
           <RightAlignColumn>
-            <DropdownLink
-              anchorRight
-              alwaysRenderMenu={false}
-              caret={false}
-              title={
-                <Button
-                  tooltipProps={{
-                    containerDisplayMode: 'flex',
-                  }}
-                  size="sm"
-                  aria-label={t('Show more')}
-                  icon={<IconEllipsis size="xs" />}
-                />
-              }
-            >
-              <Feature features={['organizations:discover-basic']}>
-                <li>
-                  <Link to={discoverView.getResultsViewUrlTarget(orgId)}>
-                    {t('Open in Discover')}
-                  </Link>
-                </li>
-              </Feature>
-              <li>
-                <GlobalSelectionLink
-                  to={{pathname: issuesPath, query: {query: issuesQuery}}}
-                >
-                  {t('Search All Issues with Tag Value')}
-                </GlobalSelectionLink>
-              </li>
-            </DropdownLink>
+            <DropdownMenu
+              size="sm"
+              position="bottom-end"
+              triggerProps={{
+                size: 'xs',
+                showChevron: false,
+                icon: <IconEllipsis size="xs" />,
+                'aria-label': t('More'),
+              }}
+              items={[
+                {
+                  key: 'open-in-discover',
+                  label: t('Open in Discover'),
+                  to: discoverView.getResultsViewUrlTarget(orgId),
+                  hidden: !organization.features.includes('discover-basic'),
+                },
+                {
+                  key: 'search-issues',
+                  label: t('Search All Issues with Tag Value'),
+                  to: {
+                    pathname: issuesPath,
+                    query: {
+                      ...globalSelectionParams, // preserve page filter selections
+                      query: issuesQuery,
+                    },
+                  },
+                },
+              ]}
+            />
           </RightAlignColumn>
         </Fragment>
       );
@@ -281,7 +293,7 @@ class GroupTagValues extends AsyncComponent<
   }
 }
 
-export default withSentryRouter(GroupTagValues);
+export default withSentryRouter(withOrganization(GroupTagValues));
 
 const TitleWrapper = styled('div')`
   display: flex;