From 14be55f682e0cb50e3319357877d3fb7f76840a3 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 11 May 2023 13:27:18 +0100
Subject: [PATCH] [v10.0.x] AngularDeprecation: Show warnings in panel edit for
 angular panels (#68083)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
(cherry picked from commit 4c536e5942710a6a0f33a37c872f9b611b0ae240)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../PanelEditor/AngularPanelPluginWarning.tsx | 48 +++++++++++++++++++
 .../PanelEditor/OptionsPaneOptions.tsx        |  2 +
 .../components/PanelEditor/PanelEditor.tsx    |  5 ++
 3 files changed, 55 insertions(+)
 create mode 100644 public/app/features/dashboard/components/PanelEditor/AngularPanelPluginWarning.tsx

diff --git a/public/app/features/dashboard/components/PanelEditor/AngularPanelPluginWarning.tsx b/public/app/features/dashboard/components/PanelEditor/AngularPanelPluginWarning.tsx
new file mode 100644
index 00000000000..7351b628f19
--- /dev/null
+++ b/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),
+    }),
+  };
+}
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index 5c2eb9e7189..8fec5bc3feb 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/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>
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index de45e2a6f12..646047d267a 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -542,6 +542,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)};
     `,