Loki: Migrate HTTP settings to new components (#72831)

* Loki: migrate data source http settings

* Remove unused export

* Update e2e tests

* Update unit test

e2e/various-suite/loki-editor.spec.ts

@@ -8,7 +8,7 @@ const addDataSource = () => {
       'Unable to connect with Loki (Failed to call resource). Please check the server logs for more details.',
     name: dataSourceName,
     form: () => {
-      e2e.components.DataSource.DataSourceHttpSettings.urlInput().type('http://loki-url:3100');
+      e2e().get('#connection-url').type('http://loki-url:3100');
     },
   });
 };

e2e/various-suite/loki-query-builder.spec.ts

@@ -9,7 +9,7 @@ const addDataSource = () => {
       'Unable to connect with Loki (Failed to call resource). Please check the server logs for more details.',
     name: dataSourceName,
     form: () => {
-      e2e.components.DataSource.DataSourceHttpSettings.urlInput().type('http://loki-url:3100');
+      e2e().get('#connection-url').type('http://loki-url:3100');
     },
   });
 };

public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx

@@ -15,7 +15,9 @@ describe('ConfigEditor', () => {
 
   it('should render the right sections', () => {
     render(<ConfigEditor onOptionsChange={() => {}} options={createDefaultConfigOptions()} />);
-    expect(screen.getByRole('heading', { name: 'HTTP' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Connection' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Advanced HTTP settings' })).toBeInTheDocument();
     expect(screen.getByText('Maximum lines')).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Derived fields' })).toBeInTheDocument();
   });

public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx

@@ -1,9 +1,16 @@
 import React, { useCallback } from 'react';
 
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import {
+  ConfigSection,
+  DataSourceDescription,
+  ConnectionSettings,
+  Auth,
+  convertLegacyAuthProps,
+  AdvancedHttpSettings,
+} from '@grafana/experimental';
 import { config, reportInteraction } from '@grafana/runtime';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { SecureSocksProxySettings } from '@grafana/ui';
 import { Divider } from 'app/core/components/Divider';
 
 import { LokiOptions } from '../types';
@@ -48,25 +55,27 @@ export const ConfigEditor = (props: Props) => {
         docsLink="https://grafana.com/docs/grafana/latest/datasources/loki"
         hasRequiredFields={false}
       />
-
       <Divider />
-
-      <DataSourceHttpSettings
-        defaultUrl={'http://localhost:3100'}
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+      <ConnectionSettings config={options} onChange={onOptionsChange} />
+      <Divider />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
       />
-
       <Divider />
-
       <ConfigSection
         title="Additional settings"
         description="Additional settings are optional settings that can be configured for more control over your data source."
         isCollapsible={true}
         isInitiallyOpen
       >
+        <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+        <Divider hideLine />
+        {config.secureSocksDSProxyEnabled && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
         <AlertingSettings options={options} onOptionsChange={onOptionsChange} />
         <Divider hideLine />
         <QuerySettings