feat(discover): Beta Badges on Add to Dashboard buttons (#29262)

Added Beta Badges to Add to Dashboard menu items in Discover

static/app/views/eventsV2/queryList.tsx

@@ -12,6 +12,7 @@ import {Client} from 'app/api';
 import Feature from 'app/components/acl/feature';
 import DropdownMenu from 'app/components/dropdownMenu';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
+import FeatureBadge from 'app/components/featureBadge';
 import MenuItem from 'app/components/menuItem';
 import Pagination from 'app/components/pagination';
 import TimeSince from 'app/components/timeSince';
@@ -201,12 +202,12 @@ class QueryList extends React.Component<Props> {
                 return (
                   hasFeature && (
                     <ContextMenu>
-                      <MenuItem
+                      <StyledMenuItem
                         data-test-id="add-query-to-dashboard"
                         onClick={this.handleAddQueryToDashboard(eventView)}
                       >
-                        {t('Add to Dashboard')}
-                      </MenuItem>
+                        {t('Add to Dashboard')} <FeatureBadge type="beta" noTooltip />
+                      </StyledMenuItem>
                     </ContextMenu>
                   )
                 );
@@ -279,12 +280,12 @@ class QueryList extends React.Component<Props> {
               >
                 {({hasFeature}) =>
                   hasFeature && (
-                    <MenuItem
+                    <StyledMenuItem
                       data-test-id="add-query-to-dashboard"
                       onClick={this.handleAddQueryToDashboard(eventView, savedQuery)}
                     >
-                      {t('Add to Dashboard')}
-                    </MenuItem>
+                      {t('Add to Dashboard')} <FeatureBadge type="beta" noTooltip />
+                    </StyledMenuItem>
                   )
                 }
               </Feature>
@@ -403,4 +404,11 @@ const StyledEmptyStateWarning = styled(EmptyStateWarning)`
   grid-column: 1 / 4;
 `;
 
+const StyledMenuItem = styled(MenuItem)`
+  white-space: nowrap;
+  span {
+    align-items: baseline;
+  }
+`;
+
 export default withApi(QueryList);

static/app/views/eventsV2/savedQuery/index.tsx

@@ -15,6 +15,7 @@ import Button from 'app/components/button';
 import ButtonBar from 'app/components/buttonBar';
 import {CreateAlertFromViewButton} from 'app/components/createAlertButton';
 import DropdownControl from 'app/components/dropdownControl';
+import FeatureBadge from 'app/components/featureBadge';
 import Hovercard from 'app/components/hovercard';
 import MenuItem from 'app/components/menuItem';
 import {IconDelete, IconStar} from 'app/icons';
@@ -376,12 +377,12 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
   renderDiscoverQueryMenu() {
     const menuOptions: React.ReactNode[] = [];
     menuOptions.push(
-      <MenuItem
+      <StyledMenuItem
         key="add-dashboard-widget-from-discover"
         onClick={this.handleAddDashboardWidget}
       >
-        {t('Add to Dashboard')}
-      </MenuItem>
+        {t('Add to Dashboard')} <FeatureBadge type="beta" noTooltip />
+      </StyledMenuItem>
     );
     return <DiscoverQueryMenu>{menuOptions}</DiscoverQueryMenu>;
   }
@@ -462,4 +463,11 @@ const IconUpdate = styled('div')`
   background-color: ${p => p.theme.yellow300};
 `;
 
+const StyledMenuItem = styled(MenuItem)`
+  white-space: nowrap;
+  span {
+    align-items: baseline;
+  }
+`;
+
 export default withProjects(withApi(SavedQueryButtonGroup));

tests/js/spec/views/eventsV2/queryList.spec.jsx

@@ -214,7 +214,9 @@ describe('EventsV2 > QueryList', function () {
 
     const menuItems = wrapper.find('MenuItem');
     expect(menuItems.length).toEqual(3);
-    expect(menuItems.at(0).find('span').children().html()).toEqual('Add to Dashboard');
+    expect(menuItems.at(0).find('span').children().first().html()).toEqual(
+      'Add to Dashboard'
+    );
     expect(menuItems.at(1).find('span').children().html()).toEqual('Delete Query');
     expect(menuItems.at(2).find('span').children().html()).toEqual('Duplicate Query');
   });