Azure Monitor: Fix config editor style (#60563)

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
+import { selectors } from '../e2e/selectors';
+
 import AzureCredentialsForm, { Props } from './AzureCredentialsForm';
 
 const setup = (propsFunc?: (props: Props) => Props) => {
@@ -64,7 +66,9 @@ describe('Render', () => {
         clientSecret: 'e7f3f661-a933-4b3f-8176-51c4f982ec48',
       },
     }));
-    await waitFor(() => expect(screen.getByText('Load Subscriptions')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button)).not.toBeDisabled()
+    );
   });
 
   describe('when disabled', () => {
@@ -83,7 +87,9 @@ describe('Render', () => {
         ...props,
         disabled: true,
       }));
-      await waitFor(() => expect(screen.queryByText('Load Subscriptions')).not.toBeInTheDocument());
+      await waitFor(() =>
+        expect(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button)).toBeDisabled()
+      );
     });
 
     it('should render children components', () => {

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FunctionComponent, useEffect, useReducer, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, LegacyForms, Button, Select, InlineField } from '@grafana/ui';
+import { LegacyForms, Button, Select, InlineField } from '@grafana/ui';
 
 import { isCredentialsComplete } from '../credentials';
 import { selectors } from '../e2e/selectors';
@@ -230,19 +230,19 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
           </InlineField>
           {!disabled &&
             (typeof credentials.clientSecret === 'symbol' ? (
-              <div className="gf-form-inline">
+              <InlineField label="Client Secret" labelWidth={LABEL_WIDTH} htmlFor="client-secret">
-                <div className="gf-form">
+                <div className="width-30" style={{ display: 'flex', gap: '4px' }}>
-                  <InlineFormLabel className="width-12">Client Secret</InlineFormLabel>
+                  <Input
-                  <Input data-testid="client-secret" className="width-25" placeholder="configured" disabled={true} />
+                    aria-label="Client Secret"
+                    placeholder="configured"
+                    disabled={true}
+                    data-testid={'client-secret'}
+                  />
+                  <Button variant="secondary" type="button" onClick={onClientSecretReset} disabled={disabled}>
+                    Reset
+                  </Button>
                 </div>
-                <div className="gf-form">
+              </InlineField>
-                  <div className="max-width-30 gf-form-inline">
-                    <Button variant="secondary" type="button" onClick={onClientSecretReset} disabled={disabled}>
-                      reset
-                    </Button>
-                  </div>
-                </div>
-              </div>
             ) : (
               <InlineField
                 label="Client Secret"
@@ -256,6 +256,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                   value={credentials.clientSecret || ''}
                   onChange={onClientSecretChange}
+                  id="client-secret"
                   disabled={disabled}
                 />
               </InlineField>
@@ -263,45 +264,36 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
         </>
       )}
       {getSubscriptions && (
-        <>
+        <InlineField
-          <div className="gf-form-inline">
+          label="Default Subscription"
-            <div className="gf-form" data-testid={selectors.components.configEditor.defaultSubscription.input}>
+          labelWidth={LABEL_WIDTH}
-              <InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
+          data-testid={selectors.components.configEditor.defaultSubscription.input}
-              <div className="width-30">
+          htmlFor="default-subscription"
-                <Select
+        >
-                  aria-label="Default Subscription"
+          <div className="width-30" style={{ display: 'flex', gap: '4px' }}>
-                  value={
+            <Select
-                    credentials.defaultSubscriptionId
+              inputId="default-subscription"
-                      ? subscriptions.find((opt) => opt.value === credentials.defaultSubscriptionId)
+              aria-label="Default Subscription"
-                      : undefined
+              value={
-                  }
+                credentials.defaultSubscriptionId
-                  options={subscriptions}
+                  ? subscriptions.find((opt) => opt.value === credentials.defaultSubscriptionId)
-                  onChange={onSubscriptionChange}
+                  : undefined
-                  disabled={disabled}
+              }
-                />
+              options={subscriptions}
-              </div>
+              onChange={onSubscriptionChange}
-            </div>
+              disabled={disabled}
+            />
+            <Button
+              variant="secondary"
+              type="button"
+              onClick={onLoadSubscriptions}
+              disabled={!hasRequiredFields || disabled}
+              data-testid={selectors.components.configEditor.loadSubscriptions.button}
+            >
+              Load Subscriptions
+            </Button>
           </div>
-          {!disabled && (
+        </InlineField>
-            <div className="gf-form-inline">
-              <div className="gf-form">
-                <div className="max-width-30 gf-form-inline">
-                  <Button
-                    variant="secondary"
-                    aria-label="Load Subscriptions"
-                    size="sm"
-                    type="button"
-                    onClick={onLoadSubscriptions}
-                    disabled={!hasRequiredFields}
-                    data-testid={selectors.components.configEditor.loadSubscriptions.button}
-                  >
-                    Load Subscriptions
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </>
       )}
       {props.children}
     </div>