diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
index 3143207db55..88edcf8bcfe 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import AnalyticsConfig, { Props } from './AnalyticsConfig';
 
 const setup = (propsFunc?: (props: Props) => Props) => {
@@ -47,14 +47,14 @@ const setup = (propsFunc?: (props: Props) => Props) => {
     props = propsFunc(props);
   }
 
-  return shallow(<AnalyticsConfig {...props} />);
+  return render(<AnalyticsConfig {...props} />);
 };
 
 describe('Render', () => {
   it('should render component', () => {
     const wrapper = setup();
 
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.baseElement).toMatchSnapshot();
   });
 
   it('should disable log analytics credentials form', () => {
@@ -68,7 +68,7 @@ describe('Render', () => {
         },
       },
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.baseElement).toMatchSnapshot();
   });
 
   it('should enable azure log analytics load workspaces button', () => {
@@ -87,6 +87,37 @@ describe('Render', () => {
         },
       },
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.baseElement).toMatchSnapshot();
+  });
+
+  it('should not render the Switch to use different creds for log analytics by default', () => {
+    setup((props) => ({
+      ...props,
+      options: {
+        ...props.options,
+        jsonData: {
+          ...props.options.jsonData,
+          azureLogAnalyticsSameAs: undefined,
+        },
+      },
+    }));
+    expect(screen.queryByLabelText('Same details as Azure Monitor API')).not.toBeInTheDocument();
+    expect(screen.queryByText('is deprecated', { exact: false })).not.toBeInTheDocument();
+  });
+
+  // Remove this test with deprecated code
+  it('should not render the Switch if different creds for log analytics were set from before', () => {
+    setup((props) => ({
+      ...props,
+      options: {
+        ...props.options,
+        jsonData: {
+          ...props.options.jsonData,
+          azureLogAnalyticsSameAs: false,
+        },
+      },
+    }));
+    expect(screen.queryByLabelText('Same details as Azure Monitor API')).toBeInTheDocument();
+    expect(screen.queryByText('is deprecated', { exact: false })).toBeInTheDocument();
   });
 });
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
index 12fd326a06c..50cf4fc7485 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useMemo, useReducer, useState } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { AzureCredentialsForm } from './AzureCredentialsForm';
-import { InlineFormLabel, LegacyForms, Button } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, Button, Alert } from '@grafana/ui';
 const { Select, Switch } = LegacyForms;
 import { AzureDataSourceSettings, AzureCredentials } from '../types';
 import {
@@ -23,11 +23,15 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
   const { updateOptions, getSubscriptions, getWorkspaces } = props;
   const primaryCredentials = useMemo(() => getCredentials(props.options), [props.options]);
   const logAnalyticsCredentials = useMemo(() => getLogAnalyticsCredentials(props.options), [props.options]);
+
   const subscriptionId = logAnalyticsCredentials
     ? logAnalyticsCredentials.defaultSubscriptionId
     : primaryCredentials.defaultSubscriptionId;
 
-  const credentialsEnabled = primaryCredentials.authType === 'clientsecret';
+  // Only show a section for setting LogAnalytics credentials if they were set from before
+  // And the authType is supported
+  const [credentialsUsed, _] = useState(!!logAnalyticsCredentials);
+  const credentialsEnabled = credentialsUsed && primaryCredentials.authType === 'clientsecret';
 
   const hasRequiredFields =
     subscriptionId &&
@@ -134,6 +138,7 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
             onChange={onLogAnalyticsSameAsChange}
             {...tooltipAttribute}
           />
+
           {showSameAsHelpMsg && (
             <div className="grafana-info-box m-t-2">
               <div className="alert-body">
@@ -141,13 +146,23 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
               </div>
             </div>
           )}
+
           {logAnalyticsCredentials && (
-            <AzureCredentialsForm
-              managedIdentityEnabled={false}
-              credentials={logAnalyticsCredentials}
-              onCredentialsChange={onCredentialsChange}
-              getSubscriptions={getSubscriptions}
-            />
+            <>
+              <Alert severity="info" title="Deprecated">
+                Using different credentials for Azure Monitor Logs is deprecated and will be removed in a future
+                version.
+                <br />
+                Create a different Data Source if you need to use different credentials.
+              </Alert>
+
+              <AzureCredentialsForm
+                managedIdentityEnabled={false}
+                credentials={logAnalyticsCredentials}
+                onCredentialsChange={onCredentialsChange}
+                getSubscriptions={getSubscriptions}
+              />
+            </>
           )}
         </>
       )}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
index 948182572f5..a8784310821 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
@@ -1,281 +1,820 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should disable log analytics credentials form 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Azure Monitor Logs
-  </h3>
-  <Switch
-    checked={true}
-    label="Same details as Azure Monitor API"
-    onChange={[Function]}
-    tooltip="Workspaces are pulled from default subscription selected above."
-  />
-  <div
-    className="gf-form-group"
-  >
+<body>
+  <div>
+    <h3
+      class="page-heading"
+    >
+      Azure Monitor Logs
+    </h3>
     <div
-      className="gf-form-inline"
+      class="gf-form-group"
     >
       <div
-        className="gf-form"
+        class="gf-form-inline"
       >
-        <FormLabel
-          className="width-12"
-          tooltip="Choose the default/preferred Workspace for Azure Log Analytics queries."
-        >
-          Default Workspace
-        </FormLabel>
         <div
-          className="width-25"
+          class="gf-form"
         >
-          <Select
-            allowCustomValue={false}
-            autoFocus={false}
-            backspaceRemovesValue={true}
-            className=""
-            components={
-              Object {
-                "Group": [Function],
-                "IndicatorsContainer": [Function],
-                "MenuList": [Function],
-                "Option": [Function],
-                "SingleValue": [Function],
-              }
-            }
-            isClearable={false}
-            isDisabled={false}
-            isLoading={false}
-            isMulti={false}
-            isSearchable={true}
-            maxMenuHeight={300}
-            onChange={[Function]}
-            openMenuOnFocus={false}
-            options={Array []}
-            tabSelectsValue={true}
-          />
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Default Workspace
+            <div
+              class="gf-form-help-icon gf-form-help-icon--right-normal"
+            >
+              <div
+                class="css-1vzus6i-Icon"
+              />
+            </div>
+          </label>
+          <div
+            class="width-25"
+          >
+            <div>
+              <div
+                class="gf-form-input gf-form-input--form-dropdown css-1daubv-SelectContainer"
+              >
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
+                <div
+                  class="gf-form-select-box__control css-1g8ily9-Control"
+                >
+                  <div
+                    class="gf-form-select-box__value-container css-pilx6v-ValueContainer"
+                  >
+                    <div
+                      class="gf-form-select-box__placeholder css-ovmm9z-Placeholder"
+                    >
+                      Choose
+                    </div>
+                    <div
+                      class="css-17yls17-Input"
+                    >
+                      <div
+                        class="gf-form-select-box__input"
+                        style="display: inline-block;"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
+                          id="react-select-4-input"
+                          spellcheck="false"
+                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="gf-form-select-box__indicators css-1pmvkci-IndicatorsContainer"
+                  >
+                    <div
+                      class="css-1vzus6i-Icon"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
       <div
-        className="gf-form"
+        class="gf-form-inline"
       >
         <div
-          className="max-width-30 gf-form-inline"
+          class="gf-form"
         >
-          <Button
-            disabled={true}
-            onClick={[Function]}
-            size="sm"
-            type="button"
-            variant="secondary"
+          <div
+            class="max-width-30 gf-form-inline"
           >
-            Load Workspaces
-          </Button>
+            <button
+              class="css-17xyotq-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="css-1mhnkuh"
+              >
+                Load Workspaces
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</Fragment>
+</body>
 `;
 
 exports[`Render should enable azure log analytics load workspaces button 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Azure Monitor Logs
-  </h3>
-  <Switch
-    checked={false}
-    label="Same details as Azure Monitor API"
-    onChange={[Function]}
-  />
-  <AzureCredentialsForm
-    credentials={
-      Object {
-        "authType": "clientsecret",
-        "azureCloud": "azuremonitor",
-        "clientId": "44693801-6ee6-49de-9b2d-9106972f9572",
-        "clientSecret": undefined,
-        "defaultSubscriptionId": "e3fe4fde-ad5e-4d60-9974-e2f3562ffdf2",
-        "tenantId": "e7f3f661-a933-4b3f-8176-51c4f982ec48",
-      }
-    }
-    getSubscriptions={[MockFunction]}
-    managedIdentityEnabled={false}
-    onCredentialsChange={[Function]}
-  />
-  <div
-    className="gf-form-group"
-  >
+<body>
+  <div>
+    <h3
+      class="page-heading"
+    >
+      Azure Monitor Logs
+    </h3>
     <div
-      className="gf-form-inline"
+      class="gf-form-switch-container-react"
+    >
+      <label
+        class="gf-form gf-form-switch-container "
+        for="2"
+      >
+        <div
+          class="gf-form-label   pointer"
+        >
+          Same details as Azure Monitor API
+        </div>
+        <div
+          class="gf-form-switch  "
+        >
+          <input
+            id="2"
+            type="checkbox"
+          />
+          <span
+            class="gf-form-switch__slider"
+          />
+        </div>
+      </label>
+    </div>
+    <div
+      aria-label="Alert info"
+      class="css-7gef9a"
     >
       <div
-        className="gf-form"
+        class="css-ed9azx"
       >
-        <FormLabel
-          className="width-12"
-          tooltip="Choose the default/preferred Workspace for Azure Log Analytics queries."
-        >
-          Default Workspace
-        </FormLabel>
         <div
-          className="width-25"
+          class="css-1vzus6i-Icon"
+        />
+      </div>
+      <div
+        class="css-mqq7gx"
+      >
+        <div
+          class="css-19c9rx9"
         >
-          <Select
-            allowCustomValue={false}
-            autoFocus={false}
-            backspaceRemovesValue={true}
-            className=""
-            components={
-              Object {
-                "Group": [Function],
-                "IndicatorsContainer": [Function],
-                "MenuList": [Function],
-                "Option": [Function],
-                "SingleValue": [Function],
-              }
-            }
-            isClearable={false}
-            isDisabled={false}
-            isLoading={false}
-            isMulti={false}
-            isSearchable={true}
-            maxMenuHeight={300}
-            onChange={[Function]}
-            openMenuOnFocus={false}
-            options={Array []}
-            tabSelectsValue={true}
-          />
+          Deprecated
+        </div>
+        <div
+          class="css-1r38y0g"
+        >
+          Using different credentials for Azure Monitor Logs is deprecated and will be removed in a future version.
+          <br />
+          Create a different Data Source if you need to use different credentials.
         </div>
       </div>
     </div>
     <div
-      className="gf-form-inline"
+      class="gf-form-group"
     >
       <div
-        className="gf-form"
+        class="gf-form-inline"
       >
         <div
-          className="max-width-30 gf-form-inline"
+          class="gf-form"
         >
-          <Button
-            disabled={true}
-            onClick={[Function]}
-            size="sm"
-            type="button"
-            variant="secondary"
+          <label
+            class="width-12 gf-form-label width-10"
           >
-            Load Workspaces
-          </Button>
+            Directory (tenant) ID
+          </label>
+          <div
+            class="width-15"
+          >
+            <div
+              style="flex-grow: 1;"
+            >
+              <input
+                class="gf-form-input width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Application (client) ID
+          </label>
+          <div
+            class="width-15"
+          >
+            <div
+              style="flex-grow: 1;"
+            >
+              <input
+                class="gf-form-input width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value="44693801-6ee6-49de-9b2d-9106972f9572"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Client Secret
+          </label>
+          <div
+            class="width-15"
+          >
+            <div
+              style="flex-grow: 1;"
+            >
+              <input
+                class="gf-form-input width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Default Subscription
+          </label>
+          <div
+            class="width-25"
+          >
+            <div>
+              <div
+                class="gf-form-input gf-form-input--form-dropdown css-1daubv-SelectContainer"
+              >
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
+                <div
+                  class="gf-form-select-box__control css-1g8ily9-Control"
+                >
+                  <div
+                    class="gf-form-select-box__value-container css-pilx6v-ValueContainer"
+                  >
+                    <div
+                      class="gf-form-select-box__placeholder css-ovmm9z-Placeholder"
+                    >
+                      Choose
+                    </div>
+                    <div
+                      class="css-17yls17-Input"
+                    >
+                      <div
+                        class="gf-form-select-box__input"
+                        style="display: inline-block;"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
+                          id="react-select-5-input"
+                          spellcheck="false"
+                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="gf-form-select-box__indicators css-1pmvkci-IndicatorsContainer"
+                  >
+                    <div
+                      class="css-1vzus6i-Icon"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <div
+            class="max-width-30 gf-form-inline"
+          >
+            <button
+              class="css-17xyotq-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="css-1mhnkuh"
+              >
+                Load Subscriptions
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="gf-form-group"
+    >
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Default Workspace
+            <div
+              class="gf-form-help-icon gf-form-help-icon--right-normal"
+            >
+              <div
+                class="css-1vzus6i-Icon"
+              />
+            </div>
+          </label>
+          <div
+            class="width-25"
+          >
+            <div>
+              <div
+                class="gf-form-input gf-form-input--form-dropdown css-1daubv-SelectContainer"
+              >
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
+                <div
+                  class="gf-form-select-box__control css-1g8ily9-Control"
+                >
+                  <div
+                    class="gf-form-select-box__value-container css-pilx6v-ValueContainer"
+                  >
+                    <div
+                      class="gf-form-select-box__placeholder css-ovmm9z-Placeholder"
+                    >
+                      Choose
+                    </div>
+                    <div
+                      class="css-17yls17-Input"
+                    >
+                      <div
+                        class="gf-form-select-box__input"
+                        style="display: inline-block;"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
+                          id="react-select-6-input"
+                          spellcheck="false"
+                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="gf-form-select-box__indicators css-1pmvkci-IndicatorsContainer"
+                  >
+                    <div
+                      class="css-1vzus6i-Icon"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <div
+            class="max-width-30 gf-form-inline"
+          >
+            <button
+              class="css-17xyotq-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="css-1mhnkuh"
+              >
+                Load Workspaces
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</Fragment>
+</body>
 `;
 
 exports[`Render should render component 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Azure Monitor Logs
-  </h3>
-  <Switch
-    checked={false}
-    label="Same details as Azure Monitor API"
-    onChange={[Function]}
-  />
-  <AzureCredentialsForm
-    credentials={
-      Object {
-        "authType": "clientsecret",
-        "azureCloud": "azuremonitor",
-        "clientId": undefined,
-        "clientSecret": undefined,
-        "defaultSubscriptionId": undefined,
-        "tenantId": "",
-      }
-    }
-    getSubscriptions={[MockFunction]}
-    managedIdentityEnabled={false}
-    onCredentialsChange={[Function]}
-  />
-  <div
-    className="gf-form-group"
-  >
+<body>
+  <div>
+    <h3
+      class="page-heading"
+    >
+      Azure Monitor Logs
+    </h3>
     <div
-      className="gf-form-inline"
+      class="gf-form-switch-container-react"
+    >
+      <label
+        class="gf-form gf-form-switch-container "
+        for="1"
+      >
+        <div
+          class="gf-form-label   pointer"
+        >
+          Same details as Azure Monitor API
+        </div>
+        <div
+          class="gf-form-switch  "
+        >
+          <input
+            id="1"
+            type="checkbox"
+          />
+          <span
+            class="gf-form-switch__slider"
+          />
+        </div>
+      </label>
+    </div>
+    <div
+      aria-label="Alert info"
+      class="css-7gef9a"
     >
       <div
-        className="gf-form"
+        class="css-ed9azx"
       >
-        <FormLabel
-          className="width-12"
-          tooltip="Choose the default/preferred Workspace for Azure Log Analytics queries."
-        >
-          Default Workspace
-        </FormLabel>
         <div
-          className="width-25"
+          class="css-1vzus6i-Icon"
+        />
+      </div>
+      <div
+        class="css-mqq7gx"
+      >
+        <div
+          class="css-19c9rx9"
         >
-          <Select
-            allowCustomValue={false}
-            autoFocus={false}
-            backspaceRemovesValue={true}
-            className=""
-            components={
-              Object {
-                "Group": [Function],
-                "IndicatorsContainer": [Function],
-                "MenuList": [Function],
-                "Option": [Function],
-                "SingleValue": [Function],
-              }
-            }
-            isClearable={false}
-            isDisabled={false}
-            isLoading={false}
-            isMulti={false}
-            isSearchable={true}
-            maxMenuHeight={300}
-            onChange={[Function]}
-            openMenuOnFocus={false}
-            options={Array []}
-            tabSelectsValue={true}
-          />
+          Deprecated
+        </div>
+        <div
+          class="css-1r38y0g"
+        >
+          Using different credentials for Azure Monitor Logs is deprecated and will be removed in a future version.
+          <br />
+          Create a different Data Source if you need to use different credentials.
         </div>
       </div>
     </div>
     <div
-      className="gf-form-inline"
+      class="gf-form-group"
     >
       <div
-        className="gf-form"
+        class="gf-form-inline"
       >
         <div
-          className="max-width-30 gf-form-inline"
+          class="gf-form"
         >
-          <Button
-            disabled={true}
-            onClick={[Function]}
-            size="sm"
-            type="button"
-            variant="secondary"
+          <label
+            class="width-12 gf-form-label width-10"
           >
-            Load Workspaces
-          </Button>
+            Directory (tenant) ID
+          </label>
+          <div
+            class="width-15"
+          >
+            <div
+              style="flex-grow: 1;"
+            >
+              <input
+                class="gf-form-input width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Application (client) ID
+          </label>
+          <div
+            class="width-15"
+          >
+            <div
+              style="flex-grow: 1;"
+            >
+              <input
+                class="gf-form-input width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Client Secret
+          </label>
+          <div
+            class="width-15"
+          >
+            <div
+              style="flex-grow: 1;"
+            >
+              <input
+                class="gf-form-input width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Default Subscription
+          </label>
+          <div
+            class="width-25"
+          >
+            <div>
+              <div
+                class="gf-form-input gf-form-input--form-dropdown css-1daubv-SelectContainer"
+              >
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
+                <div
+                  class="gf-form-select-box__control css-1g8ily9-Control"
+                >
+                  <div
+                    class="gf-form-select-box__value-container css-pilx6v-ValueContainer"
+                  >
+                    <div
+                      class="gf-form-select-box__placeholder css-ovmm9z-Placeholder"
+                    >
+                      Choose
+                    </div>
+                    <div
+                      class="css-17yls17-Input"
+                    >
+                      <div
+                        class="gf-form-select-box__input"
+                        style="display: inline-block;"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
+                          id="react-select-2-input"
+                          spellcheck="false"
+                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="gf-form-select-box__indicators css-1pmvkci-IndicatorsContainer"
+                  >
+                    <div
+                      class="css-1vzus6i-Icon"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <div
+            class="max-width-30 gf-form-inline"
+          >
+            <button
+              class="css-17xyotq-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="css-1mhnkuh"
+              >
+                Load Subscriptions
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="gf-form-group"
+    >
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <label
+            class="width-12 gf-form-label width-10"
+          >
+            Default Workspace
+            <div
+              class="gf-form-help-icon gf-form-help-icon--right-normal"
+            >
+              <div
+                class="css-1vzus6i-Icon"
+              />
+            </div>
+          </label>
+          <div
+            class="width-25"
+          >
+            <div>
+              <div
+                class="gf-form-input gf-form-input--form-dropdown css-1daubv-SelectContainer"
+              >
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
+                <div
+                  class="gf-form-select-box__control css-1g8ily9-Control"
+                >
+                  <div
+                    class="gf-form-select-box__value-container css-pilx6v-ValueContainer"
+                  >
+                    <div
+                      class="gf-form-select-box__placeholder css-ovmm9z-Placeholder"
+                    >
+                      Choose
+                    </div>
+                    <div
+                      class="css-17yls17-Input"
+                    >
+                      <div
+                        class="gf-form-select-box__input"
+                        style="display: inline-block;"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
+                          id="react-select-3-input"
+                          spellcheck="false"
+                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="gf-form-select-box__indicators css-1pmvkci-IndicatorsContainer"
+                  >
+                    <div
+                      class="css-1vzus6i-Icon"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gf-form-inline"
+      >
+        <div
+          class="gf-form"
+        >
+          <div
+            class="max-width-30 gf-form-inline"
+          >
+            <button
+              class="css-17xyotq-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="css-1mhnkuh"
+              >
+                Load Workspaces
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</Fragment>
+</body>
 `;