Datasources: Add toggle to control default behaviour of 'Manage alerts via Alerts UI' toggle (#98441)

* Datasources: Add toggle to control default behaviour of 'Manage alerts via Alerts UI' toggle

* Update documentation with suggestions

Co-authored-by: Larissa Wandzura <126723338+lwandz13@users.noreply.github.com>

packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.test.tsx

@@ -0,0 +1,48 @@
+import { render } from '@testing-library/react';
+
+import { config } from '@grafana/runtime';
+
+import { createDefaultConfigOptions } from '../test/__mocks__/datasource';
+
+import { AlertingSettingsOverhaul } from './AlertingSettingsOverhaul';
+
+describe(AlertingSettingsOverhaul.name, () => {
+  describe('Switch checked behavior', () => {
+    describe('when options.jsonData.manageAlerts is unset', () => {
+      it('uses the config default `true`', () => {
+        const options = createDefaultConfigOptions();
+        options.jsonData.manageAlerts = undefined;
+
+        config.defaultDatasourceManageAlertsUiToggle = true;
+
+        const { getByRole } = render(<AlertingSettingsOverhaul onOptionsChange={() => {}} options={options} />);
+
+        expect(getByRole('switch')).toBeChecked();
+      });
+
+      it('uses the config default `false`', () => {
+        const options = createDefaultConfigOptions();
+        options.jsonData.manageAlerts = undefined;
+
+        config.defaultDatasourceManageAlertsUiToggle = false;
+
+        const { getByRole } = render(<AlertingSettingsOverhaul onOptionsChange={() => {}} options={options} />);
+
+        expect(getByRole('switch')).not.toBeChecked();
+      });
+    });
+
+    describe('when options.jsonData.manageAlerts is set', () => {
+      it.each([true, false])('uses the manageAlerts value even when the config default is %s', (configDefault) => {
+        const options = createDefaultConfigOptions();
+        options.jsonData.manageAlerts = true;
+
+        config.defaultDatasourceManageAlertsUiToggle = configDefault;
+
+        const { getByRole } = render(<AlertingSettingsOverhaul onOptionsChange={() => {}} options={options} />);
+
+        expect(getByRole('switch')).toBeChecked();
+      });
+    });
+  });
+});

packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx

@@ -4,6 +4,7 @@ import { cx } from '@emotion/css';
 import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { ConfigSubSection } from '@grafana/experimental';
+import { config } from '@grafana/runtime';
 import { InlineField, Switch, useTheme2 } from '@grafana/ui';
 
 import { docsTip, overhaulStyles } from './ConfigEditor';
@@ -43,7 +44,7 @@ export function AlertingSettingsOverhaul<T extends AlertingConfig>({
               className={styles.switchField}
             >
               <Switch
-                value={options.jsonData.manageAlerts !== false}
+                value={options.jsonData.manageAlerts ?? config.defaultDatasourceManageAlertsUiToggle}
                 onChange={(event) =>
                   onOptionsChange({
                     ...options,

packages/grafana-runtime/src/config.ts

@@ -188,6 +188,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
     maxIdleConns: 100,
     connMaxLifetime: 14400,
   };
+  defaultDatasourceManageAlertsUiToggle = true;
 
   tokenExpirationDayLimit: undefined;
   enableFrontendSandboxForPlugins: string[] = [];