fix(ddm): dashboard feature guard (#65057)

static/app/views/ddm/contextMenu.tsx

@@ -1,12 +1,12 @@
-import {Fragment, useMemo} from 'react';
+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 FeatureDisabled from 'sentry/components/acl/featureDisabled';
+import Feature from 'sentry/components/acl/feature';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
-import {Hovercard} from 'sentry/components/hovercard';
 import {
   IconClose,
   IconCopy,
@@ -35,7 +35,6 @@ import {OrganizationContext} from 'sentry/views/organizationContext';
 
 type ContextMenuProps = {
   displayType: MetricDisplayType;
-  hasDashboardFeature: boolean;
   metricsQuery: MetricsQuery;
   widgetIndex: number;
 };
@@ -44,7 +43,6 @@ export function MetricQueryContextMenu({
   metricsQuery,
   displayType,
   widgetIndex,
-  hasDashboardFeature,
 }: ContextMenuProps) {
   const organization = useOrganization();
   const router = useRouter();
@@ -91,24 +89,25 @@ export function MetricQueryContextMenu({
       },
       {
         leadingItems: [<IconDashboard key="icon" />],
-        key: 'add-dashoard',
-        label: hasDashboardFeature ? (
-          <Fragment>{t('Add to Dashboard')}</Fragment>
-        ) : (
-          <Hovercard
-            body={
-              <FeatureDisabled
-                features="organizations:dashboards-edit"
-                hideHelpToggle
-                featureName={t('Dashboard Editing')}
-              />
-            }
+        key: 'add-dashboard',
+        label: (
+          <Feature
+            organization={organization}
+            hookName="feature-disabled:dashboards-edit"
+            features="dashboards-edit"
           >
-            {t('Add to Dashboard')}
-          </Hovercard>
+            {({hasFeature}) => (
+              <AddToDashboardItem disabled={!hasFeature}>
+                {t('Add to Dashboard')}
+              </AddToDashboardItem>
+            )}
+          </Feature>
         ),
-        disabled: !hasDashboardFeature || !createDashboardWidget,
+        disabled: !createDashboardWidget,
         onAction: () => {
+          if (!organization.features.includes('dashboards-edit')) {
+            return;
+          }
           trackAnalytics('ddm.add-to-dashboard', {
             organization,
             source: 'widget',
@@ -147,7 +146,6 @@ export function MetricQueryContextMenu({
       },
     ],
     [
-      hasDashboardFeature,
       createAlert,
       createDashboardWidget,
       metricsQuery.mri,
@@ -232,3 +230,7 @@ export function useCreateDashboardWidget(
       });
   }, [metricsQuery, datetime, displayType, environments, organization, projects, router]);
 }
+
+const AddToDashboardItem = styled('div')<{disabled: boolean}>`
+  color: ${p => (p.disabled ? p.theme.disabled : p.theme.textColor)};
+`;

static/app/views/ddm/layout.tsx

@@ -4,7 +4,6 @@ import * as Sentry from '@sentry/react';
 
 import emptyStateImg from 'sentry-images/spot/custom-metrics-empty-state.svg';
 
-import Feature from 'sentry/components/acl/feature';
 import {Button} from 'sentry/components/button';
 import FeatureBadge from 'sentry/components/featureBadge';
 import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
@@ -64,18 +63,10 @@ export const DDMLayout = memo(() => {
           </Layout.Title>
         </Layout.HeaderContent>
         <Layout.HeaderActions>
-          <Feature
-            hookName="feature-disabled:dashboards-edit"
-            features="organizations:dashboards-edit"
-          >
-            {({hasFeature}) => (
-              <PageHeaderActions
-                showCustomMetricButton={hasMetrics}
-                addCustomMetric={() => addCustomMetric('header')}
-                hasDashboardFeature={hasFeature}
-              />
-            )}
-          </Feature>
+          <PageHeaderActions
+            showCustomMetricButton={hasMetrics}
+            addCustomMetric={() => addCustomMetric('header')}
+          />
         </Layout.HeaderActions>
       </Layout.Header>
       <Layout.Body>

static/app/views/ddm/pageHeaderActions.tsx

@@ -1,12 +1,12 @@
-import {Fragment, useCallback, useMemo} from 'react';
+import {useCallback, useMemo} from 'react';
+import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
 import {navigateTo} from 'sentry/actionCreators/navigation';
-import FeatureDisabled from 'sentry/components/acl/featureDisabled';
+import Feature from 'sentry/components/acl/feature';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
-import {Hovercard} from 'sentry/components/hovercard';
 import {
   IconAdd,
   IconBookmark,
@@ -30,15 +30,10 @@ import {useCreateDashboard} from 'sentry/views/ddm/useCreateDashboard';
 
 interface Props {
   addCustomMetric: () => void;
-  hasDashboardFeature: boolean;
   showCustomMetricButton: boolean;
 }
 
-export function PageHeaderActions({
-  showCustomMetricButton,
-  addCustomMetric,
-  hasDashboardFeature,
-}: Props) {
+export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Props) {
   const router = useRouter();
   const organization = useOrganization();
   const {selection} = usePageFilters();
@@ -87,23 +82,23 @@ export function PageHeaderActions({
       {
         leadingItems: [<IconDashboard key="icon" />],
         key: 'add-dashboard',
-        label: hasDashboardFeature ? (
-          <Fragment>{t('Add to Dashboard')}</Fragment>
-        ) : (
-          <Hovercard
-            body={
-              <FeatureDisabled
-                features="organizations:dashboards-edit"
-                hideHelpToggle
-                featureName={t('Dashboard Editing')}
-              />
-            }
+        label: (
+          <Feature
+            organization={organization}
+            hookName="feature-disabled:dashboards-edit"
+            features="dashboards-edit"
           >
-            {t('Add to Dashboard')}
-          </Hovercard>
+            {({hasFeature}) => (
+              <AddToDashboardItem disabled={!hasFeature}>
+                {t('Add to Dashboard')}
+              </AddToDashboardItem>
+            )}
+          </Feature>
         ),
-        disabled: !hasDashboardFeature,
         onAction: () => {
+          if (!organization.features.includes('dashboards-edit')) {
+            return;
+          }
           trackAnalytics('ddm.add-to-dashboard', {
             organization,
             source: 'global',
@@ -118,14 +113,7 @@ export function PageHeaderActions({
         onAction: () => navigateTo(`/settings/projects/:projectId/metrics/`, router),
       },
     ],
-    [
-      addWidget,
-      createDashboard,
-      hasEmptyWidget,
-      organization,
-      router,
-      hasDashboardFeature,
-    ]
+    [addWidget, createDashboard, hasEmptyWidget, organization, router]
   );
 
   const alertItems = useMemo(
@@ -226,3 +214,7 @@ export function PageHeaderActions({
     </ButtonBar>
   );
 }
+
+const AddToDashboardItem = styled('div')<{disabled: boolean}>`
+  color: ${p => (p.disabled ? p.theme.disabled : p.theme.textColor)};
+`;

static/app/views/ddm/queries.tsx

@@ -2,7 +2,6 @@ import {useCallback, useLayoutEffect} from 'react';
 import styled from '@emotion/styled';
 import * as echarts from 'echarts/core';
 
-import Feature from 'sentry/components/acl/feature';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {MetricWidgetQueryParams} from 'sentry/utils/metrics/types';
@@ -55,27 +54,19 @@ export function Queries() {
               )
             }
             contextMenu={
-              <Feature
-                hookName="feature-disabled:dashboards-edit"
-                features="organizations:dashboards-edit"
-              >
-                {({hasFeature}) => (
-                  <MetricQueryContextMenu
-                    displayType={widget.displayType}
-                    widgetIndex={index}
-                    hasDashboardFeature={hasFeature}
-                    metricsQuery={{
-                      mri: widget.mri,
-                      query: widget.query,
-                      op: widget.op,
-                      groupBy: widget.groupBy,
-                      projects: selection.projects,
-                      datetime: selection.datetime,
-                      environments: selection.environments,
-                    }}
-                  />
-                )}
-              </Feature>
+              <MetricQueryContextMenu
+                displayType={widget.displayType}
+                widgetIndex={index}
+                metricsQuery={{
+                  mri: widget.mri,
+                  query: widget.query,
+                  op: widget.op,
+                  groupBy: widget.groupBy,
+                  projects: selection.projects,
+                  datetime: selection.datetime,
+                  environments: selection.environments,
+                }}
+              />
             }
           />
         </Row>