Azure data sources: Set selected config type before save (#87481)

* set selected config type before save

* use effect once and move in mssql

* add to prom

* Update ConfigurationEditor.tsx

* Update ConfigurationEditor.tsx

* Delete public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx

* omadsfdsa

* remove unneeded assign

public/app/plugins/datasource/azuremonitor/components/ConfigEditor/MonitorConfig.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -48,6 +49,13 @@ export const MonitorConfig = (props: Props) => {
   const onSubscriptionChange = (subscriptionId?: string) =>
     updateOptions((options) => ({ ...options, jsonData: { ...options.jsonData, subscriptionId } }));
 
+  // The auth type needs to be set on the first load of the data source
+  useEffectOnce(() => {
+    if (!options.jsonData.authType) {
+      onCredentialsChange(credentials);
+    }
+  });
+
   return (
     <>
       <AzureCredentialsForm

public/app/plugins/datasource/mssql/azureauth/AzureAuthSettings.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useEffectOnce } from 'react-use';
 
 import { config } from '@grafana/runtime';
 import { HttpSettingsBaseProps } from '@grafana/ui/src/components/DataSourceSettings/types';
@@ -19,6 +20,13 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
     onChange(updateCredentials(dsSettings, config, credentials));
   };
 
+  // The auth type needs to be set on the first load of the data source
+  useEffectOnce(() => {
+    if (!dsSettings.jsonData.authType) {
+      onCredentialsChange(credentials);
+    }
+  });
+
   return (
     <AzureCredentialsForm
       managedIdentityEnabled={managedIdentityEnabled}

public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx

@@ -1,5 +1,6 @@
 import { cx } from '@emotion/css';
 import React, { FormEvent, useMemo, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 
 import { config } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, InlineSwitch, Input } from '@grafana/ui';
@@ -45,6 +46,13 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
 
   const labelWidth = prometheusConfigOverhaulAuth ? 24 : 26;
 
+  // The auth type needs to be set on the first load of the data source
+  useEffectOnce(() => {
+    if (!dataSourceConfig.jsonData.authType) {
+      onCredentialsChange(credentials);
+    }
+  });
+
   return (
     <>
       <h6>Azure authentication</h6>