Notifications: Hide display of trace ID behind feature flag (#48057)

* Notifications: Hide display of trace ID behind feature flag

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -54,6 +54,7 @@ export interface FeatureToggles {
   storageLocalUpload?: boolean;
   azureMonitorResourcePickerForMetrics?: boolean;
   explore2Dashboard?: boolean;
+  tracing?: boolean;
   persistNotifications?: boolean;
   commandPalette?: boolean;
   savedItems?: boolean;

pkg/services/featuremgmt/registry.go

@@ -215,6 +215,12 @@ var (
 			State:        FeatureStateBeta,
 			FrontendOnly: true,
 		},
+		{
+			Name:         "tracing",
+			Description:  "Adds trace ID to error notifications",
+			State:        FeatureStateAlpha,
+			FrontendOnly: true,
+		},
 		{
 			Name:         "persistNotifications",
 			Description:  "PoC Notifications page",

pkg/services/featuremgmt/toggles_gen.go

@@ -159,6 +159,10 @@ const (
 	// Experimental Explore to Dashboard workflow
 	FlagExplore2Dashboard = "explore2Dashboard"
 
+	// FlagTracing
+	// Adds trace ID to error notifications
+	FlagTracing = "tracing"
+
 	// FlagPersistNotifications
 	// PoC Notifications page
 	FlagPersistNotifications = "persistNotifications"

public/app/core/components/AppNotifications/AppNotificationItem.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useEffectOnce } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { Alert, useStyles2 } from '@grafana/ui';
 import { AppNotification, timeoutMap } from 'app/types';
 
@@ -20,6 +21,8 @@ export default function AppNotificationItem({ appNotification, onClearNotificati
     }, timeoutMap[appNotification.severity]);
   });
 
+  const showTraceId = config.featureToggles.tracing && appNotification.traceId;
+
   return (
     <Alert
       severity={appNotification.severity}
@@ -29,7 +32,7 @@ export default function AppNotificationItem({ appNotification, onClearNotificati
     >
       <div className={styles.wrapper}>
         <span>{appNotification.component || appNotification.text}</span>
-        {appNotification.traceId && <span className={styles.trace}>Trace ID: {appNotification.traceId}</span>}
+        {showTraceId && <span className={styles.trace}>Trace ID: {appNotification.traceId}</span>}
       </div>
     </Alert>
   );

public/app/core/components/AppNotifications/StoredNotificationItem.tsx

@@ -3,6 +3,7 @@ import { formatDistanceToNow } from 'date-fns';
 import React, { ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { Icon, IconButton, IconName, useTheme2 } from '@grafana/ui';
 import { getIconFromSeverity } from '@grafana/ui/src/components/Alert/Alert';
 
@@ -27,6 +28,7 @@ export const StoredNotificationItem = ({
 }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme, severity);
+  const showTraceId = config.featureToggles.tracing && traceId;
 
   return (
     <div className={styles.wrapper}>
@@ -35,7 +37,7 @@ export const StoredNotificationItem = ({
       </div>
       <div className={styles.title}>{title}</div>
       <div className={styles.body}>{children}</div>
-      <span className={styles.trace}>{traceId && `Trace ID: ${traceId}`}</span>
+      <span className={styles.trace}>{showTraceId && `Trace ID: ${traceId}`}</span>
       <div className={styles.close}>
         <IconButton aria-label="Close alert" name="times" onClick={onRemove} size="lg" type="button" />
       </div>