From cb1dfbeeb4f6d893c910bfc7a24347f999a6953b Mon Sep 17 00:00:00 2001
From: Aldrin <53973174+Dhoni77@users.noreply.github.com>
Date: Thu, 12 Oct 2023 23:06:22 +0530
Subject: [PATCH] Chore: remove legacy components and CSS classes for
 OpenTsdbDetails Component (#76165)

* chore: remove legacy components and classes

* Update public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* chore: format and add width

* chore: fix formatting

* Update public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
---
 .../opentsdb/components/OpenTsdbDetails.tsx   | 73 +++++++++----------
 1 file changed, 33 insertions(+), 40 deletions(-)

diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
index ef6e1946b46..fa7c5955d25 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
@@ -1,12 +1,10 @@
 import React, { SyntheticEvent, useId } from 'react';
 
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { Select, Input, Field, FieldSet } from '@grafana/ui';
 
 import { OpenTsdbOptions } from '../types';
 
-const { Select, Input } = LegacyForms;
-
 const tsdbVersions = [
   { label: '<=2.1', value: 1 },
   { label: '==2.2', value: 2 },
@@ -30,43 +28,38 @@ export const OpenTsdbDetails = (props: Props) => {
 
   return (
     <>
-      <h5>OpenTSDB settings</h5>
-      <div className="gf-form">
-        <InlineFormLabel width={7} htmlFor={`select-version-${idSuffix}`}>
-          Version
-        </InlineFormLabel>
-        <Select
-          inputId={`select-version-${idSuffix}`}
-          options={tsdbVersions}
-          value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
-          onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
-        />
-      </div>
-      <div className="gf-form">
-        <InlineFormLabel width={7} htmlFor={`select-resolution-${idSuffix}`}>
-          Resolution
-        </InlineFormLabel>
-        <Select
-          inputId={`select-resolution-${idSuffix}`}
-          options={tsdbResolutions}
-          value={
-            tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ??
-            tsdbResolutions[0]
-          }
-          onChange={onSelectChangeHandler('tsdbResolution', value, onChange)}
-        />
-      </div>
-      <div className="gf-form">
-        <InlineFormLabel width={7} htmlFor={`lookup-input-${idSuffix}`}>
-          Lookup limit
-        </InlineFormLabel>
-        <Input
-          id={`lookup-input-${idSuffix}`}
-          type="number"
-          value={value.jsonData.lookupLimit ?? 1000}
-          onChange={onInputChangeHandler('lookupLimit', value, onChange)}
-        />
-      </div>
+      <FieldSet label="OpenTSDB settings">
+        <Field htmlFor={`select-version-${idSuffix}`} label="Version">
+          <Select
+            inputId={`select-version-${idSuffix}`}
+            options={tsdbVersions}
+            value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
+            onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
+            width={20}
+          />
+        </Field>
+        <Field htmlFor={`select-resolution-${idSuffix}`} label="Resolution">
+          <Select
+            inputId={`select-resolution-${idSuffix}`}
+            options={tsdbResolutions}
+            value={
+              tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ??
+              tsdbResolutions[0]
+            }
+            onChange={onSelectChangeHandler('tsdbResolution', value, onChange)}
+            width={20}
+          />
+        </Field>
+        <Field htmlFor={`lookup-input-${idSuffix}`} label="Lookup limit">
+          <Input
+            id={`lookup-input-${idSuffix}`}
+            type="number"
+            value={value.jsonData.lookupLimit ?? 1000}
+            onChange={onInputChangeHandler('lookupLimit', value, onChange)}
+            width={20}
+          />
+        </Field>
+      </FieldSet>
     </>
   );
 };