feat: Add suppressFlowMetricEvents field to flashbars (#3314)

Author: connorlanigan

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -8357,6 +8357,7 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "type": "string",
     },
     {
+      "analyticsTag": "",
       "description": "Specifies flash messages that appear in the same order that they are listed.
 The value is an array of flash message definition objects.
 A flash message object contains the following properties:
@@ -8382,7 +8383,8 @@ If the \`action\` property is set, this property is ignored. **Deprecated**, rep
 * \`id\` (string) - Specifies a unique flash message identifier. This property is used in two ways:
   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
-",
+* \`analyticsMetadata\` (FlashbarProps.ItemAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.
+  * \`suppressFlowMetricEvents\` - Prevent this item from generating events related to flow metrics.",
       "name": "items",
       "optional": false,
       "type": "ReadonlyArray<FlashbarProps.MessageDefinition>",

src/flashbar/__tests__/analytics-metadata.test.tsx

@@ -216,5 +216,12 @@ describe('Flashbar renders correct analytics metadata', () => {
       const wrapper = renderFlashbar({ items: [{ id: '0', type: 'success', loading: true }] });
       expect(wrapper.find(`[${DATA_ATTR_ANALYTICS_FLASHBAR}="info"]`)!.getElement()).toBeInTheDocument();
     });
+
+    test('adds no attribute if suppressFlowMetricEvents is set', () => {
+      const wrapper = renderFlashbar({
+        items: [{ id: '0', type: 'success', analyticsMetadata: { suppressFlowMetricEvents: true } }],
+      });
+      expect(wrapper.find(`[${DATA_ATTR_ANALYTICS_FLASHBAR}]`)).toBeNull();
+    });
   });
 });

src/flashbar/flash.tsx

@@ -114,7 +114,9 @@ export const Flash = React.forwardRef(
       }
     }
 
-    const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);
+    const analyticsMetadata = getAnalyticsMetadataProps(
+      props as BasePropsWithAnalyticsMetadata & FlashbarProps.MessageDefinition
+    );
     const elementRef = useComponentMetadata('Flash', PACKAGE_VERSION, { ...analyticsMetadata });
     const mergedRef = useMergeRefs(ref, elementRef);
 
@@ -176,7 +178,7 @@ export const Flash = React.forwardRef(
           getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar'),
           initialHidden && styles['initial-hidden']
         )}
-        {...analyticsAttributes}
+        {...(analyticsMetadata.suppressFlowMetricEvents ? undefined : analyticsAttributes)}
       >
         <div className={styles['flash-body']}>
           <div className={styles['flash-focus-container']} tabIndex={-1}>

src/flashbar/interfaces.ts

@@ -20,6 +20,11 @@ export namespace FlashbarProps {
     buttonText?: ButtonProps['children'];
     onButtonClick?: ButtonProps['onClick'];
     onDismiss?: ButtonProps['onClick'];
+    analyticsMetadata?: FlashbarProps.ItemAnalyticsMetadata;
+  }
+
+  export interface ItemAnalyticsMetadata {
+    suppressFlowMetricEvents?: boolean;
   }
 
   export interface I18nStrings {
@@ -65,6 +70,9 @@ export interface FlashbarProps extends BaseComponentProps {
    * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:
    *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
    *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
+   * * `analyticsMetadata` (FlashbarProps.ItemAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.
+   *   * `suppressFlowMetricEvents` - Prevent this item from generating events related to flow metrics.
+   * @analytics
    */
   items: ReadonlyArray<FlashbarProps.MessageDefinition>;
 

src/internal/base-component/index.ts

@@ -48,6 +48,8 @@ export interface BasePropsWithAnalyticsMetadata {
  * Helper function to merge beta analytics metadata with the public analytics metadata api.
  * Beta analytics metadata will override the public values to allow for safe migration.
  */
-export function getAnalyticsMetadataProps(props?: BasePropsWithAnalyticsMetadata) {
+export function getAnalyticsMetadataProps<T extends BasePropsWithAnalyticsMetadata>(
+  props?: T
+): NonNullable<T['analyticsMetadata'] & T['__analyticsMetadata']> {
   return { ...props?.analyticsMetadata, ...props?.__analyticsMetadata };
 }