feat(flag): Add organizations:metrics-dashboards-ui flag (#31105)

src/sentry/conf/server.py

@@ -960,8 +960,10 @@ SENTRY_FEATURES = {
     # sentry at the moment.
     "organizations:issue-search-use-cdc-primary": False,
     "organizations:issue-search-use-cdc-secondary": False,
-    # Enable metrics widget (prototype) on Dashboards
+    # Enable metrics feature on the backend
     "organizations:metrics": False,
+    # Enable metrics widget (prototype) on Dashboards
+    "organizations:metrics-dashboards-ui": False,
     # Automatically extract metrics during ingestion.
     #
     # XXX(ja): DO NOT ENABLE UNTIL THIS NOTICE IS GONE. Relay experiences

src/sentry/features/__init__.py

@@ -109,6 +109,7 @@ default_manager.add("organizations:issues-in-dashboards", OrganizationFeature, T
 default_manager.add("organizations:large-debug-files", OrganizationFeature)
 default_manager.add("organizations:metric-alert-builder-aggregate", OrganizationFeature)
 default_manager.add("organizations:metrics", OrganizationFeature, True)
+default_manager.add("organizations:metrics-dashboards-ui", OrganizationFeature, True)
 default_manager.add("organizations:metrics-extraction", OrganizationFeature, True)
 default_manager.add("organizations:metrics-performance-ui", OrganizationFeature, True)
 default_manager.add("organizations:minute-resolution-sessions", OrganizationFeature)

static/app/views/dashboardsV2/addWidget.tsx

@@ -24,7 +24,10 @@ type Props = {
 };
 
 function AddWidget({onAddWidget, onOpenWidgetBuilder, orgFeatures}: Props) {
-  const onClick = orgFeatures.includes('metrics') ? onOpenWidgetBuilder : onAddWidget;
+  const onClick =
+    orgFeatures.includes('metrics') && orgFeatures.includes('metrics-dashboards-ui')
+      ? onOpenWidgetBuilder
+      : onAddWidget;
 
   const {setNodeRef, transform} = useSortable({
     disabled: true,

static/app/views/dashboardsV2/dashboard.tsx

@@ -290,7 +290,10 @@ class Dashboard extends Component<Props, State> {
       handleAddCustomWidget,
     } = this.props;
 
-    if (organization.features.includes('metrics')) {
+    if (
+      organization.features.includes('metrics') &&
+      organization.features.includes('metrics-dashboards-ui')
+    ) {
       onSetWidgetToBeUpdated(widget);
 
       if (paramDashboardId) {

static/app/views/dashboardsV2/widget/index.tsx

@@ -13,7 +13,7 @@ type Props = React.ComponentProps<typeof WidgetBuilder>;
 function WidgetBuilderContainer({organization, ...props}: Props) {
   return (
     <Feature
-      features={['metrics', 'dashboards-edit']}
+      features={['metrics', 'metrics-dashboards-ui', 'dashboards-edit']}
       organization={organization}
       renderDisabled={() => (
         <PageContent>