AngularDeprecation: Show warnings in panel edit for angular panels (#67891)

* AngularDeprecation: Show warnings in panel edit for angular panels

* update wording

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

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

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

---------

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

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

@@ -0,0 +1,48 @@
+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

@@ -7,6 +7,7 @@ import { CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@gra
 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';
@@ -100,6 +101,7 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.formBox}>
+        {panel.isAngularPlugin() && <AngularPanelPluginWarning plugin={plugin} />}
         <div className={styles.formRow}>
           <FilterInput width={0} value={searchQuery} onChange={setSearchQuery} placeholder={'Search options'} />
         </div>

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

@@ -538,6 +538,11 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => {
       justify-content: space-between;
       flex-wrap: wrap;
     `,
+    angularWarning: css`
+      display: flex;
+      height: theme.spacing(4);
+      align-items: center;
+    `,
     toolbarLeft: css`
       padding-left: ${theme.spacing(1)};
     `,