Plugins: Consistent Angular deprecation messages and tracking on docs link click (#71715)

* reportInteraction when clicking on angular deprecation docs link

* Made messages consistent, removed duplicate component

* Revert unnecessary changes in PluginDetailsPage.test.tsx

* Moved angular deprecation notice to different folder

* Fix component names

* Dismissable alert

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

@@ -1,48 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2, PanelPlugin } from '@grafana/data';
-import { Alert, useStyles2 } from '@grafana/ui';
-
-export interface Props {
-  plugin: PanelPlugin;
-}
-
-export function AngularPanelPluginWarning({ plugin }: Props) {
-  const styles = useStyles2(getStyles);
-
-  return (
-    <div className={styles.wrapper}>
-      <Alert title="Angular panel plugin" severity="warning">
-        <div className="markdown-html">
-          <p>The selected panel plugin is using deprecated plugin APIs.</p>
-          <ul>
-            <li>
-              <a
-                href="https://grafana.com/docs/grafana/latest/developers/angular_deprecation/"
-                className="external-link"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Read more on Angular deprecation
-              </a>
-            </li>
-            <li>
-              <a href={`plugins/${encodeURIComponent(plugin.meta.id)}`} className="external-link">
-                View plugin details
-              </a>
-            </li>
-          </ul>
-        </div>
-      </Alert>
-    </div>
-  );
-}
-
-export function getStyles(theme: GrafanaTheme2) {
-  return {
-    wrapper: css({
-      padding: theme.spacing(1),
-    }),
-  };
-}

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

@@ -2,12 +2,13 @@ import { css } from '@emotion/css';
 import React, { useMemo, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { AngularDeprecationPluginNotice } from 'app/features/plugins/angularDeprecation/AngularDeprecationPluginNotice';
 
 import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
 
 import { AngularPanelOptions } from './AngularPanelOptions';
-import { AngularPanelPluginWarning } from './AngularPanelPluginWarning';
 import { OptionsPaneCategory } from './OptionsPaneCategory';
 import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
 import { getFieldOverrideCategories } from './getFieldOverrideElements';
@@ -101,7 +102,15 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.formBox}>
-        {panel.isAngularPlugin() && <AngularPanelPluginWarning plugin={plugin} />}
+        {panel.isAngularPlugin() && (
+          <AngularDeprecationPluginNotice
+            className={styles.angularDeprecationWrapper}
+            showPluginDetailsLink={true}
+            pluginId={plugin.meta.id}
+            pluginType={plugin.meta.type}
+            angularSupportEnabled={config?.angularSupportEnabled}
+          />
+        )}
         <div className={styles.formRow}>
           <FilterInput width={0} value={searchQuery} onChange={setSearchQuery} placeholder={'Search options'} />
         </div>
@@ -205,4 +214,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     border-top: none;
     flex-grow: 1;
   `,
+  angularDeprecationWrapper: css`
+    padding: ${theme.spacing(1)};
+  `,
 });