fix(metrics): Add to dashboard disabled state (#72126)

Properly disable the menu item.
Add fallback for self-hosted.

Closes #72125

Author: ArthurKnaus

static/app/views/metrics/metricQueryContextMenu.tsx

@@ -1,12 +1,13 @@
 import {useMemo} from 'react';
-import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
 import {openAddToDashboardModal, openModal} from 'sentry/actionCreators/modal';
 import {navigateTo} from 'sentry/actionCreators/navigation';
 import Feature from 'sentry/components/acl/feature';
+import FeatureDisabled from 'sentry/components/acl/featureDisabled';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {Hovercard} from 'sentry/components/hovercard';
 import {CreateMetricAlertFeature} from 'sentry/components/metrics/createMetricAlertFeature';
 import {
   IconClose,
@@ -66,6 +67,7 @@ export function MetricQueryContextMenu({
 
   // At least one query must remain
   const canDelete = widgets.filter(isMetricsQueryWidget).length > 1;
+  const hasDashboardFeature = organization.features.includes('dashboards-edit');
 
   const items = useMemo<MenuItemProps[]>(
     () => [
@@ -103,15 +105,24 @@ export function MetricQueryContextMenu({
             organization={organization}
             hookName="feature-disabled:dashboards-edit"
             features="dashboards-edit"
-          >
-            {({hasFeature}) => (
-              <AddToDashboardItem disabled={!hasFeature}>
-                {t('Add to Dashboard')}
-              </AddToDashboardItem>
+            renderDisabled={p => (
+              <Hovercard
+                body={
+                  <FeatureDisabled
+                    features={p.features}
+                    hideHelpToggle
+                    featureName={t('Metric Alerts')}
+                  />
+                }
+              >
+                {typeof p.children === 'function' ? p.children(p) : p.children}
+              </Hovercard>
             )}
+          >
+            <span>{t('Add to Dashboard')}</span>
           </Feature>
         ),
-        disabled: !createDashboardWidget,
+        disabled: !createDashboardWidget || !hasDashboardFeature,
         onAction: () => {
           if (!organization.features.includes('dashboards-edit')) {
             return;
@@ -155,10 +166,11 @@ export function MetricQueryContextMenu({
     ],
     [
       createAlert,
+      organization,
       createDashboardWidget,
+      hasDashboardFeature,
       metricsQuery.mri,
       canDelete,
-      organization,
       duplicateWidget,
       widgetIndex,
       router,
@@ -235,7 +247,3 @@ export function useCreateDashboardWidget(
       });
   }, [metricsQuery, selection, displayType, organization, router]);
 }
-
-const AddToDashboardItem = styled('div')<{disabled: boolean}>`
-  color: ${p => (p.disabled ? p.theme.disabled : p.theme.textColor)};
-`;