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

@@ -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;
 }
 
 /**

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;
+  });
+}

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>) {

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>
     );
   }