Alerting: fix alert supported warning when editing data source name (#55886) (#55999)

(cherry picked from commit ef641ea9c9)

public/app/features/datasources/components/BasicSettings.test.tsx

@@ -11,6 +11,7 @@ const setup = () => {
     isDefault: false,
     onDefaultChange: jest.fn(),
     onNameChange: jest.fn(),
+    alertingSupported: false,
   };
 
   return render(<BasicSettings {...props} />);

public/app/features/datasources/components/BasicSettings.tsx

@@ -1,50 +1,75 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { InlineField, InlineSwitch, Input } from '@grafana/ui';
+import { InlineField, InlineSwitch, Input, Badge, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   dataSourceName: string;
   isDefault: boolean;
   onNameChange: (name: string) => void;
   onDefaultChange: (value: boolean) => void;
+  alertingSupported: boolean;
 }
 
-export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNameChange }: Props) {
+export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNameChange, alertingSupported }: Props) {
   return (
-    <div className="gf-form-group" aria-label="Datasource settings page basic settings">
-      <div className="gf-form-inline">
-        {/* Name */}
-        <div className="gf-form max-width-30">
-          <InlineField
-            label="Name"
-            tooltip="The name is used when you select the data source in panels. The default data source is
+    <>
+      {<AlertingEnabled enabled={alertingSupported} />}
+      <div className="gf-form-group" aria-label="Datasource settings page basic settings">
+        <div className="gf-form-inline">
+          {/* Name */}
+          <div className="gf-form max-width-30">
+            <InlineField
+              label="Name"
+              tooltip="The name is used when you select the data source in panels. The default data source is
               'preselected in new panels."
-            grow
-          >
-            <Input
-              id="basic-settings-name"
-              type="text"
-              value={dataSourceName}
-              placeholder="Name"
-              onChange={(event) => onNameChange(event.currentTarget.value)}
-              required
-              aria-label={selectors.pages.DataSource.name}
+              grow
+            >
+              <Input
+                id="basic-settings-name"
+                type="text"
+                value={dataSourceName}
+                placeholder="Name"
+                onChange={(event) => onNameChange(event.currentTarget.value)}
+                required
+                aria-label={selectors.pages.DataSource.name}
+              />
+            </InlineField>
+          </div>
+
+          {/* Is Default */}
+          <InlineField label="Default" labelWidth={8}>
+            <InlineSwitch
+              id="basic-settings-default"
+              value={isDefault}
+              onChange={(event: React.FormEvent<HTMLInputElement>) => {
+                onDefaultChange(event.currentTarget.checked);
+              }}
             />
           </InlineField>
         </div>
-
-        {/* Is Default */}
-        <InlineField label="Default" labelWidth={8}>
-          <InlineSwitch
-            id="basic-settings-default"
-            value={isDefault}
-            onChange={(event: React.FormEvent<HTMLInputElement>) => {
-              onDefaultChange(event.currentTarget.checked);
-            }}
-          />
-        </InlineField>
       </div>
+    </>
+  );
+}
+
+export function AlertingEnabled({ enabled }: { enabled: boolean }) {
+  const styles = useStyles2(getStyles);
+  return (
+    <div className={styles.badge}>
+      {enabled ? (
+        <Badge color="green" icon="check-circle" text="Alerting supported" />
+      ) : (
+        <Badge color="orange" icon="exclamation-triangle" text="Alerting not supported" />
+      )}
     </div>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  badge: css`
+    margin-bottom: ${theme.spacing(2)};
+  `,
+});

public/app/features/datasources/components/EditDataSource.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { DataSourcePluginMeta, DataSourceSettings as DataSourceSettingsType } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import { DataSourceSettingsState, ThunkResult } from 'app/types';
 
@@ -107,9 +108,14 @@ export function EditDataSourceView({
   const { readOnly, hasWriteRights, hasDeleteRights } = dataSourceRights;
   const hasDataSource = dataSource.id > 0;
 
+  const ds = getDataSourceSrv()?.getInstanceSettings(dataSource.uid);
+
+  const hasAlertingEnabled = Boolean(ds?.meta?.alerting ?? false);
+  const isAlertManagerDatasource = ds?.type === 'alertmanager';
+  const alertingSupported = hasAlertingEnabled || isAlertManagerDatasource;
+
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
     await onUpdate({ ...dataSource });
 
     onTest();
@@ -145,6 +151,7 @@ export function EditDataSourceView({
         isDefault={dataSource.isDefault}
         onDefaultChange={onDefaultChange}
         onNameChange={onNameChange}
+        alertingSupported={alertingSupported}
       />
 
       {plugin && (