ref(ui): Use DropdownMenuV2 for dashboard widget dropdown (#31688)

* ref(ui): Use DropdownMenuV2 for dashboard widget dropdown

* fix(test): Update tests related to dashboard widget dropdowns

Necessary given the new implementation of DropdownMenuV2.

* fix(acceptance): Update acceptance tests for Dashboards

* ref(ui): Limit query card dropdown height

* ref(test): Use `findBy` instead of `await tick()` in issueWidgetCard

* style: Merge similar menuOptions in widgetCardContextMenu

* ref(test): Use `findBy` instead of `await tick()` in widgetCard test

* ref(test): Remove `data-test-href` attribute

Instead, check for href values by clicking on the link and checking for route changes.

Author: vuluongj20

static/app/views/dashboardsV2/widgetCard/widgetCardContextMenu.tsx

@@ -1,12 +1,19 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import * as qs from 'query-string';
 
 import {openDashboardWidgetQuerySelectorModal} from 'sentry/actionCreators/modal';
 import {parseArithmetic} from 'sentry/components/arithmeticInput/parser';
-import Confirm from 'sentry/components/confirm';
-import Link from 'sentry/components/links/link';
-import MenuItem from 'sentry/components/menuItem';
+import {openConfirmModal} from 'sentry/components/confirm';
+import DropdownMenuControlV2 from 'sentry/components/dropdownMenuControlV2';
+import {MenuItemProps} from 'sentry/components/dropdownMenuItemV2';
+import {
+  IconCopy,
+  IconDelete,
+  IconEdit,
+  IconEllipsis,
+  IconIssues,
+  IconTelescope,
+} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, PageFilters} from 'sentry/types';
@@ -17,7 +24,6 @@ import {DisplayModes} from 'sentry/utils/discover/types';
 import {eventViewFromWidget} from 'sentry/views/dashboardsV2/utils';
 import {DisplayType} from 'sentry/views/dashboardsV2/widgetBuilder/utils';
 
-import ContextMenu from '../contextMenu';
 import {Widget, WidgetType} from '../types';
 
 type Props = {
@@ -47,16 +53,29 @@ function WidgetCardContextMenu({
     return null;
   }
 
-  const menuOptions: React.ReactNode[] = [];
+  const menuOptions: MenuItemProps[] = [];
+  const disabledKeys: string[] = [];
 
   if (isPreview) {
     return (
       <ContextWrapper>
-        <ContextMenu>
-          <PreviewMessage>
-            {t('This is a preview only. To edit, you must add this dashboard.')}
-          </PreviewMessage>
-        </ContextMenu>
+        <DropdownMenuControlV2
+          items={[
+            {
+              key: 'preview',
+              label: t('This is a preview only. To edit, you must add this dashboard.'),
+            },
+          ]}
+          triggerProps={{
+            'aria-label': t('Widget actions'),
+            size: 'xsmall',
+            borderless: true,
+            showChevron: false,
+            icon: <IconEllipsis direction="down" size="sm" />,
+          }}
+          placement="bottom right"
+          disabledKeys={['preview']}
+        />
       </ContextWrapper>
     );
   }
@@ -118,38 +137,28 @@ function WidgetCardContextMenu({
       const discoverPath = `${discoverLocation.pathname}?${qs.stringify({
         ...discoverLocation.query,
       })}`;
-      if (widget.queries.length === 1) {
-        menuOptions.push(
-          <Link
-            key="open-discover-link"
-            to={discoverPath}
-            onClick={() => {
-              trackAdvancedAnalyticsEvent('dashboards_views.open_in_discover.opened', {
-                organization,
-                widget_type: widget.displayType,
-              });
-            }}
-          >
-            <StyledMenuItem key="open-discover">{t('Open in Discover')}</StyledMenuItem>
-          </Link>
-        );
-      } else {
-        menuOptions.push(
-          <StyledMenuItem
-            key="open-discover"
-            onClick={event => {
-              event.preventDefault();
-              trackAdvancedAnalyticsEvent('dashboards_views.query_selector.opened', {
-                organization,
-                widget_type: widget.displayType,
-              });
-              openDashboardWidgetQuerySelectorModal({organization, widget});
-            }}
-          >
-            {t('Open in Discover')}
-          </StyledMenuItem>
-        );
-      }
+
+      menuOptions.push({
+        key: 'open-in-discover',
+        label: t('Open in Discover'),
+        leadingItems: <IconTelescope />,
+        to: widget.queries.length === 1 ? discoverPath : undefined,
+        onAction: () => {
+          if (widget.queries.length === 1) {
+            trackAdvancedAnalyticsEvent('dashboards_views.open_in_discover.opened', {
+              organization,
+              widget_type: widget.displayType,
+            });
+            return;
+          }
+
+          trackAdvancedAnalyticsEvent('dashboards_views.query_selector.opened', {
+            organization,
+            widget_type: widget.displayType,
+          });
+          openDashboardWidgetQuerySelectorModal({organization, widget});
+        },
+      });
     }
   }
 
@@ -165,43 +174,42 @@ function WidgetCardContextMenu({
       ...datetime,
     })}`;
 
-    menuOptions.push(
-      <Link to={issuesLocation} key="open-issues-link">
-        <StyledMenuItem key="open-issues">{t('Open in Issues')}</StyledMenuItem>
-      </Link>
-    );
+    menuOptions.push({
+      key: 'open-in-issues',
+      label: t('Open in Issues'),
+      leadingItems: <IconIssues />,
+      to: issuesLocation,
+    });
   }
 
   if (organization.features.includes('dashboards-edit')) {
-    menuOptions.push(
-      <StyledMenuItem
-        key="duplicate-widget"
-        data-test-id="duplicate-widget"
-        onSelect={onDuplicate}
-        disabled={widgetLimitReached}
-      >
-        {t('Duplicate Widget')}
-      </StyledMenuItem>
-    );
-
-    menuOptions.push(
-      <StyledMenuItem key="edit-widget" data-test-id="edit-widget" onSelect={onEdit}>
-        {t('Edit Widget')}
-      </StyledMenuItem>
-    );
-
-    menuOptions.push(
-      <Confirm
-        key="delete-widget"
-        priority="danger"
-        message={t('Are you sure you want to delete this widget?')}
-        onConfirm={onDelete}
-      >
-        <StyledMenuItem data-test-id="delete-widget" danger>
-          {t('Delete Widget')}
-        </StyledMenuItem>
-      </Confirm>
-    );
+    menuOptions.push({
+      key: 'duplicate-widget',
+      label: t('Duplicate Widget'),
+      leadingItems: <IconCopy />,
+      onAction: () => onDuplicate(),
+    });
+    widgetLimitReached && disabledKeys.push('duplicate-widget');
+
+    menuOptions.push({
+      key: 'edit-widget',
+      label: t('Edit Widget'),
+      leadingItems: <IconEdit />,
+      onAction: () => onEdit(),
+    });
+
+    menuOptions.push({
+      key: 'delete-widget',
+      label: t('Delete Widget'),
+      leadingItems: <IconDelete />,
+      onAction: () => {
+        openConfirmModal({
+          message: t('Are you sure you want to delete this widget?'),
+          priority: 'danger',
+          onConfirm: () => onDelete(),
+        });
+      },
+    });
   }
 
   if (!menuOptions.length) {
@@ -210,26 +218,27 @@ function WidgetCardContextMenu({
 
   return (
     <ContextWrapper>
-      <ContextMenu>{menuOptions}</ContextMenu>
+      <DropdownMenuControlV2
+        items={menuOptions}
+        triggerProps={{
+          'aria-label': t('Widget actions'),
+          size: 'xsmall',
+          borderless: true,
+          showChevron: false,
+          icon: <IconEllipsis direction="down" size="sm" />,
+        }}
+        placement="bottom right"
+        disabledKeys={disabledKeys}
+      />
     </ContextWrapper>
   );
 }
 
 export default WidgetCardContextMenu;
 
 const ContextWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  height: ${space(3)};
   margin-left: ${space(1)};
 `;
-
-const StyledMenuItem = styled(MenuItem)<{danger?: boolean}>`
-  white-space: nowrap;
-  color: ${p => (p.danger ? p.theme.red300 : p.theme.textColor)};
-  :hover {
-    color: ${p => (p.danger ? p.theme.red300 : p.theme.textColor)};
-  }
-`;
-
-const PreviewMessage = styled('span')`
-  padding: ${space(1)};
-  display: block;
-`;

tests/acceptance/test_organization_dashboards.py

@@ -118,11 +118,11 @@ def test_duplicate_widget_in_view_mode(self):
         with self.feature(FEATURE_NAMES + EDIT_FEATURE):
             self.page.visit_dashboard_detail()
 
-            self.browser.element('[data-test-id="context-menu"]').click()
+            self.browser.element('[aria-haspopup="true"]').click()
             self.browser.element('[data-test-id="duplicate-widget"]').click()
             self.page.wait_until_loaded()
 
-            self.browser.elements('[data-test-id="context-menu"]')[0].click()
+            self.browser.element('[aria-haspopup="true"]').click()
             self.browser.element('[data-test-id="duplicate-widget"]').click()
             self.page.wait_until_loaded()
 
@@ -132,7 +132,7 @@ def test_delete_widget_in_view_mode(self):
         with self.feature(FEATURE_NAMES + EDIT_FEATURE):
             self.page.visit_dashboard_detail()
 
-            self.browser.element('[data-test-id="context-menu"]').click()
+            self.browser.element('[aria-haspopup="true"]').click()
             self.browser.element('[data-test-id="delete-widget"]').click()
             self.browser.element('[data-test-id="confirm-button"]').click()
 
@@ -476,11 +476,11 @@ def test_duplicate_widget_in_view_mode(self):
         with self.feature(FEATURE_NAMES + EDIT_FEATURE):
             self.page.visit_dashboard_detail()
 
-            self.browser.element('[data-test-id="context-menu"]').click()
+            self.browser.element('[aria-haspopup="true"]').click()
             self.browser.element('[data-test-id="duplicate-widget"]').click()
             self.page.wait_until_loaded()
 
-            self.browser.elements('[data-test-id="context-menu"]')[0].click()
+            self.browser.element('[aria-haspopup="true"]').click()
             self.browser.element('[data-test-id="duplicate-widget"]').click()
             self.page.wait_until_loaded()
 
@@ -507,7 +507,7 @@ def test_delete_widget_in_view_mode(self):
         with self.feature(FEATURE_NAMES + EDIT_FEATURE):
             self.page.visit_dashboard_detail()
 
-            self.browser.element('[data-test-id="context-menu"]').click()
+            self.browser.element('[aria-haspopup="true"]').click()
             self.browser.element('[data-test-id="delete-widget"]').click()
             self.browser.element('[data-test-id="confirm-button"]').click()
 
@@ -643,8 +643,8 @@ def test_deleting_stacked_widgets_by_context_menu_does_not_trigger_confirm_on_ed
         ):
             self.page.visit_dashboard_detail()
 
-            context_menu_icon = self.browser.element('[data-test-id="context-menu"]')
-            context_menu_icon.click()
+            dropdown_trigger = self.browser.element('[aria-haspopup="true"]')
+            dropdown_trigger.click()
 
             delete_widget_menu_item = self.browser.element('[data-test-id="delete-widget"]')
             delete_widget_menu_item.click()
@@ -695,8 +695,8 @@ def test_changing_number_widget_to_area_updates_widget_height(
             self.page.visit_dashboard_detail()
 
             # Open edit modal for first widget
-            context_menu_icon = self.browser.element('[data-test-id="context-menu"]')
-            context_menu_icon.click()
+            dropdown_trigger = self.browser.element('[aria-haspopup="true"]')
+            dropdown_trigger.click()
             edit_widget_menu_item = self.browser.element('[data-test-id="edit-widget"]')
             edit_widget_menu_item.click()
 
@@ -743,8 +743,8 @@ def test_changing_number_widget_larger_than_min_height_for_area_chart_keeps_heig
             self.page.visit_dashboard_detail()
 
             # Open edit modal for first widget
-            context_menu_icon = self.browser.element('[data-test-id="context-menu"]')
-            context_menu_icon.click()
+            dropdown_trigger = self.browser.element('[aria-haspopup="true"]')
+            dropdown_trigger.click()
             edit_widget_menu_item = self.browser.element('[data-test-id="edit-widget"]')
             edit_widget_menu_item.click()
 
@@ -791,8 +791,8 @@ def test_changing_area_widget_larger_than_min_height_for_number_chart_keeps_heig
             self.page.visit_dashboard_detail()
 
             # Open edit modal for first widget
-            context_menu_icon = self.browser.element('[data-test-id="context-menu"]')
-            context_menu_icon.click()
+            dropdown_trigger = self.browser.element('[aria-haspopup="true"]')
+            dropdown_trigger.click()
             edit_widget_menu_item = self.browser.element('[data-test-id="edit-widget"]')
             edit_widget_menu_item.click()
 

tests/js/sentry-test/dropdownMenu.tsx

@@ -46,7 +46,7 @@ export async function selectDropdownMenuItem({
   wrapper,
   itemKey,
   specifiers,
-  triggerSelector = 'DropdownTrigger',
+  triggerSelector = 'Button',
 }: SelectDropdownItemProps) {
   /**
    * Returns a ReactWrapper which we'll use to find the

tests/js/spec/components/actions/resolve.spec.jsx

@@ -210,6 +210,7 @@ describe('ResolveActions', function () {
     await selectDropdownMenuItem({
       wrapper,
       itemKey: 'another-release',
+      triggerSelector: 'DropdownTrigger',
     });
 
     expect(wrapper.find('CustomResolutionModal Select').prop('options')).toEqual([