From 7c098c59fd3e87761e80d5ef62ecde0631de0fe8 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Mon, 14 Aug 2023 14:42:14 +0200
Subject: [PATCH] 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         |  2 +-
 e2e/various-suite/loki-query-builder.spec.ts  |  2 +-
 .../loki/configuration/ConfigEditor.test.tsx  |  4 ++-
 .../loki/configuration/ConfigEditor.tsx       | 33 ++++++++++++-------
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/e2e/various-suite/loki-editor.spec.ts b/e2e/various-suite/loki-editor.spec.ts
index 0f33f683b7f..136e543266f 100644
--- a/e2e/various-suite/loki-editor.spec.ts
+++ b/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');
     },
   });
 };
diff --git a/e2e/various-suite/loki-query-builder.spec.ts b/e2e/various-suite/loki-query-builder.spec.ts
index 4dd570560b9..8b61182ddbd 100644
--- a/e2e/various-suite/loki-query-builder.spec.ts
+++ b/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');
     },
   });
 };
diff --git a/public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx b/public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx
index f447279c1d8..3a974a94c85 100644
--- a/public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx
+++ b/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();
   });
diff --git a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
index ada9b47a498..ff8202334ee 100644
--- a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
+++ b/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