From 296e30d620de7cc9938b557c88727456f097068b Mon Sep 17 00:00:00 2001
From: Giuseppe Guerra <giuseppe.guerra@grafana.com>
Date: Tue, 25 Jul 2023 14:35:07 +0200
Subject: [PATCH] Dashboards: Add Angular deprecation alert in data source
 query editor (#72211)

* 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

* Plugins: Add Angular deprecation alert in data source query editor

* Add tests

* Fix test name

* Add const deprecationText

* lint

* PR review feedback
---
 packages/grafana-data/src/types/datasource.ts |  2 ++
 .../plugins/angularDeprecation/utils.ts       |  7 +++++
 .../query/components/QueryGroup.test.tsx      | 30 +++++++++++++++++++
 .../features/query/components/QueryGroup.tsx  | 11 +++++++
 4 files changed, 50 insertions(+)
 create mode 100644 public/app/features/plugins/angularDeprecation/utils.ts

diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts
index a2d839736c4..cabc2dedf74 100644
--- a/packages/grafana-data/src/types/datasource.ts
+++ b/packages/grafana-data/src/types/datasource.ts
@@ -644,6 +644,8 @@ export interface DataSourceInstanceSettings<T extends DataSourceJsonData = DataS
 
   /** When the name+uid are based on template variables, maintain access to the real values */
   rawRef?: DataSourceRef;
+
+  angularDetected?: boolean;
 }
 
 /**
diff --git a/public/app/features/plugins/angularDeprecation/utils.ts b/public/app/features/plugins/angularDeprecation/utils.ts
new file mode 100644
index 00000000000..e7ff92a47ff
--- /dev/null
+++ b/public/app/features/plugins/angularDeprecation/utils.ts
@@ -0,0 +1,7 @@
+import { config } from '@grafana/runtime';
+
+export function isAngularDatasourcePlugin(dsUid: string): boolean {
+  return Object.entries(config.datasources).some(([_, ds]) => {
+    return ds.uid === dsUid && ds.angularDetected;
+  });
+}
diff --git a/public/app/features/query/components/QueryGroup.test.tsx b/public/app/features/query/components/QueryGroup.test.tsx
index da30cb5a836..101ed4fb066 100644
--- a/public/app/features/query/components/QueryGroup.test.tsx
+++ b/public/app/features/query/components/QueryGroup.test.tsx
@@ -123,6 +123,36 @@ describe('QueryGroup', () => {
     const addExpressionButton = screen.queryByTestId('query-tab-add-expression');
     expect(addExpressionButton).not.toBeInTheDocument();
   });
+
+  describe('Angular deprecation', () => {
+    const deprecationText = /legacy platform based on AngularJS/i;
+
+    const oldAngularDetected = mockDS.angularDetected;
+    const oldDatasources = config.datasources;
+
+    afterEach(() => {
+      mockDS.angularDetected = oldAngularDetected;
+      config.datasources = oldDatasources;
+    });
+
+    it('Should render angular deprecation notice for angular plugins', async () => {
+      mockDS.angularDetected = true;
+      config.datasources[mockDS.name] = mockDS;
+      renderScenario({});
+      await waitFor(async () => {
+        expect(await screen.findByText(deprecationText)).toBeInTheDocument();
+      });
+    });
+
+    it('Should not render angular deprecation notice for non-angular plugins', async () => {
+      mockDS.angularDetected = false;
+      config.datasources[mockDS.name] = mockDS;
+      renderScenario({});
+      await waitFor(async () => {
+        expect(await screen.queryByText(deprecationText)).not.toBeInTheDocument();
+      });
+    });
+  });
 });
 
 function renderScenario(overrides: Partial<Props>) {
diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx
index 552cbc30dcf..09cd047c3a2 100644
--- a/public/app/features/query/components/QueryGroup.tsx
+++ b/public/app/features/query/components/QueryGroup.tsx
@@ -9,6 +9,7 @@ import {
   getDefaultTimeRange,
   LoadingState,
   PanelData,
+  PluginType,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { getDataSourceSrv, locationService } from '@grafana/runtime';
@@ -21,10 +22,12 @@ import { addQuery, queryIsEmpty } from 'app/core/utils/query';
 import { DataSourceModal } from 'app/features/datasources/components/picker/DataSourceModal';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 import { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource';
+import { AngularDeprecationPluginNotice } from 'app/features/plugins/angularDeprecation/AngularDeprecationPluginNotice';
 import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
 import { GrafanaQuery } from 'app/plugins/datasource/grafana/types';
 import { QueryGroupOptions } from 'app/types';
 
+import { isAngularDatasourcePlugin } from '../../plugins/angularDeprecation/utils';
 import { PanelQueryRunner } from '../state/PanelQueryRunner';
 import { updateQueries } from '../state/updateQueries';
 
@@ -252,6 +255,14 @@ export class QueryGroup extends PureComponent<Props, State> {
             </>
           )}
         </div>
+        {dataSource && isAngularDatasourcePlugin(dataSource.uid) && (
+          <AngularDeprecationPluginNotice
+            pluginId={dataSource.type}
+            pluginType={PluginType.datasource}
+            angularSupportEnabled={config?.angularSupportEnabled}
+            showPluginDetailsLink={true}
+          />
+        )}
       </div>
     );
   }