Plugins: Add elementId attribute to angular_deprecation_docs_clicked interaction (#72800)

Add elementId attribute to angular_deprecation_docs_clicked interaction

public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx

@@ -109,6 +109,7 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
             pluginId={plugin.meta.id}
             pluginType={plugin.meta.type}
             angularSupportEnabled={config?.angularSupportEnabled}
+            interactionElementId="panel-options"
           />
         )}
         <div className={styles.formRow}>

public/app/features/plugins/admin/components/PluginDetailsPage.tsx

@@ -82,6 +82,7 @@ export function PluginDetailsPage({
               pluginId={plugin.id}
               pluginType={plugin.type}
               showPluginDetailsLink={false}
+              interactionElementId="plugin-details-page"
             />
           )}
           <PluginDetailsSignature plugin={plugin} className={styles.alert} />

public/app/features/plugins/angularDeprecation/AngularDeprecationPluginNotice.test.tsx

@@ -89,12 +89,13 @@ describe('AngularDeprecationPluginNotice', () => {
   });
 
   it('reports interaction when clicking on the link', async () => {
-    render(<AngularDeprecationPluginNotice pluginId="test-id" />);
+    render(<AngularDeprecationPluginNotice pluginId="test-id" interactionElementId="some-identifier" />);
     const c = 'Read our deprecation notice and migration advice.';
     expect(screen.getByText(c)).toBeInTheDocument();
     await userEvent.click(screen.getByText(c));
     expect(reportInteraction).toHaveBeenCalledWith('angular_deprecation_docs_clicked', {
       pluginId: 'test-id',
+      elementId: 'some-identifier',
     });
   });
 });

public/app/features/plugins/angularDeprecation/AngularDeprecationPluginNotice.tsx

@@ -12,6 +12,8 @@ type Props = {
 
   angularSupportEnabled?: boolean;
   showPluginDetailsLink?: boolean;
+
+  interactionElementId?: string;
 };
 
 function deprecationMessage(pluginType?: string, angularSupportEnabled?: boolean): string {
@@ -42,8 +44,17 @@ function deprecationMessage(pluginType?: string, angularSupportEnabled?: boolean
 // An Alert showing information about Angular deprecation notice.
 // If the plugin does not use Angular (!plugin.angularDetected), it returns null.
 export function AngularDeprecationPluginNotice(props: Props): React.ReactElement | null {
-  const { className, angularSupportEnabled, pluginId, pluginType, showPluginDetailsLink } = props;
+  const { className, angularSupportEnabled, pluginId, pluginType, showPluginDetailsLink, interactionElementId } = props;
   const [dismissed, setDismissed] = useState(false);
+
+  const interactionAttributes: Record<string, string> = {};
+  if (pluginId) {
+    interactionAttributes.pluginId = pluginId;
+  }
+  if (interactionElementId) {
+    interactionAttributes.elementId = interactionElementId;
+  }
+
   return dismissed ? null : (
     <Alert severity="warning" title="Angular plugin" className={className} onRemove={() => setDismissed(true)}>
       <p>{deprecationMessage(pluginType, angularSupportEnabled)}</p>
@@ -56,9 +67,7 @@ export function AngularDeprecationPluginNotice(props: Props): React.ReactElement
               target="_blank"
               rel="noreferrer"
               onClick={() => {
-                reportInteraction('angular_deprecation_docs_clicked', {
+                reportInteraction('angular_deprecation_docs_clicked', interactionAttributes);
-                  pluginId,
-                });
               }}
             >
               Read our deprecation notice and migration advice.

public/app/features/query/components/QueryGroup.tsx

@@ -261,6 +261,7 @@ export class QueryGroup extends PureComponent<Props, State> {
             pluginType={PluginType.datasource}
             angularSupportEnabled={config?.angularSupportEnabled}
             showPluginDetailsLink={true}
+            interactionElementId="datasource-query"
           />
         )}
       </div>