From 2d3fde46074f936743c39759d0b5844be60e5365 Mon Sep 17 00:00:00 2001
From: Angel Kozlev <angelkozlev@gmail.com>
Date: Mon, 28 Jul 2025 16:21:36 +0100
Subject: [PATCH] Pyroscope: Remove LegacyForms from ConfigEditor (#104973)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Pyroscope: Remove LegacyForms from ConfigEditor

* Pyroscope: Align fields in form

* Pyroscope: Add id to input and label for a11y

* Update public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx

---------

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
Co-authored-by: Joey <joey.tawadrous@grafana.com>
---
 .../ConfigEditor.tsx                          | 64 ++++++++-----------
 1 file changed, 25 insertions(+), 39 deletions(-)

diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
index 3b2e3cbb5d0..f3442a6a52d 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
@@ -11,15 +11,7 @@ import {
   convertLegacyAuthProps,
 } from '@grafana/plugin-ui';
 import { config } from '@grafana/runtime';
-import {
-  Divider,
-  EventsWithValidation,
-  LegacyForms,
-  SecureSocksProxySettings,
-  Stack,
-  regexValidation,
-  useStyles2,
-} from '@grafana/ui';
+import { Divider, Field, Input, SecureSocksProxySettings, Stack, useStyles2 } from '@grafana/ui';
 
 import { PyroscopeDataSourceOptions } from './types';
 
@@ -56,7 +48,7 @@ export const ConfigEditor = (props: Props) => {
         isCollapsible={true}
         isInitiallyOpen={false}
       >
-        <Stack gap={5} direction="column">
+        <Stack gap={5} direction="column" maxWidth={72}>
           <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
 
           {config.secureSocksDSProxyEnabled && (
@@ -64,36 +56,30 @@ export const ConfigEditor = (props: Props) => {
           )}
 
           <ConfigSubSection title="Querying">
-            <LegacyForms.FormField
+            <Field
+              noMargin
               label="Minimal step"
-              labelWidth={13}
-              inputEl={
-                <LegacyForms.Input
-                  className="width-6"
-                  value={options.jsonData.minStep}
-                  spellCheck={false}
-                  placeholder="15s"
-                  onChange={(event) => {
-                    onOptionsChange({
-                      ...options,
-                      jsonData: {
-                        ...options.jsonData,
-                        minStep: event.currentTarget.value,
-                      },
-                    });
-                  }}
-                  validationEvents={{
-                    [EventsWithValidation.onBlur]: [
-                      regexValidation(
-                        /^$|^\d+(ms|[Mwdhmsy])$/,
-                        'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
-                      ),
-                    ],
-                  }}
-                />
-              }
-              tooltip="Minimal step used for metric query. Should be the same or higher as the scrape interval setting in the Pyroscope database."
-            />
+              htmlFor="minimal-step"
+              description="Minimal step used for metric query. Should be the same or higher as the scrape interval setting in the Pyroscope database."
+              error="Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s"
+              invalid={!!options.jsonData.minStep && !/^\d+(ms|[Mwdhmsy])$/.test(options.jsonData.minStep)}
+            >
+              <Input
+                id="minimal-step"
+                value={options.jsonData.minStep}
+                spellCheck={false}
+                placeholder="15s"
+                onChange={(event) => {
+                  onOptionsChange({
+                    ...options,
+                    jsonData: {
+                      ...options.jsonData,
+                      minStep: event.currentTarget.value,
+                    },
+                  });
+                }}
+              />
+            </Field>
           </ConfigSubSection>
         </Stack>
       </ConfigSection>