From 4fc5c0dc215e6e95dfdc5ee47c361a9471a7bb12 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 11 Mar 2024 12:36:24 +0100
Subject: [PATCH] Chore: Remove Form components from TransformationsEditor
 (#83743)

Chore: remove Form components from correlations
---
 .../Forms/TransformationsEditor.tsx           | 90 ++++++++-----------
 1 file changed, 37 insertions(+), 53 deletions(-)

diff --git a/public/app/features/correlations/Forms/TransformationsEditor.tsx b/public/app/features/correlations/Forms/TransformationsEditor.tsx
index f043731ddac..3d83c43126d 100644
--- a/public/app/features/correlations/Forms/TransformationsEditor.tsx
+++ b/public/app/features/correlations/Forms/TransformationsEditor.tsx
@@ -1,72 +1,56 @@
-import { css } from '@emotion/css';
 import React from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useFieldArray } from 'react-hook-form';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Button, FieldArray, Stack, useStyles2 } from '@grafana/ui';
+import { Button, Stack, Text } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
 import TransformationsEditorRow from './TransformationEditorRow';
 
 type Props = { readOnly: boolean };
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  heading: css({
-    fontSize: theme.typography.h5.fontSize,
-    fontWeight: theme.typography.fontWeightRegular,
-  }),
-});
-
 export const TransformationsEditor = (props: Props) => {
   const { control, register } = useFormContext();
+  const { fields, append, remove } = useFieldArray({ control, name: 'config.transformations' });
   const { readOnly } = props;
 
-  const styles = useStyles2(getStyles);
-
   return (
     <>
       <input type="hidden" {...register('id')} />
-      <FieldArray name="config.transformations" control={control}>
-        {({ fields, append, remove }) => (
-          <>
-            <Stack direction="column" alignItems="flex-start">
-              <div className={styles.heading}>
-                <Trans i18nKey="correlations.transform.heading">Transformations</Trans>
-              </div>
-              {fields.length === 0 && (
-                <div>
-                  <Trans i18nKey="correlations.transform.no-transform">No transformations defined.</Trans>
-                </div>
-              )}
-              {fields.length > 0 && (
-                <div>
-                  {fields.map((fieldVal, index) => {
-                    return (
-                      <TransformationsEditorRow
-                        key={index}
-                        value={fieldVal}
-                        index={index}
-                        readOnly={readOnly}
-                        remove={remove}
-                      />
-                    );
-                  })}
-                </div>
-              )}
-              {!readOnly && (
-                <Button
-                  icon="plus"
-                  onClick={() => append({ type: undefined }, { shouldFocus: false })}
-                  variant="secondary"
-                  type="button"
-                >
-                  <Trans i18nKey="correlations.transform.add-button">Add transformation</Trans>
-                </Button>
-              )}
-            </Stack>
-          </>
+      <Stack direction="column" alignItems="flex-start">
+        <Text variant={'h5'}>
+          <Trans i18nKey="correlations.transform.heading">Transformations</Trans>
+        </Text>
+        {fields.length === 0 && (
+          <div>
+            <Trans i18nKey="correlations.transform.no-transform">No transformations defined.</Trans>
+          </div>
         )}
-      </FieldArray>
+        {fields.length > 0 && (
+          <div>
+            {fields.map((fieldVal, index) => {
+              return (
+                <TransformationsEditorRow
+                  key={index}
+                  value={fieldVal}
+                  index={index}
+                  readOnly={readOnly}
+                  remove={remove}
+                />
+              );
+            })}
+          </div>
+        )}
+        {!readOnly && (
+          <Button
+            icon="plus"
+            onClick={() => append({ type: undefined }, { shouldFocus: false })}
+            variant="secondary"
+            type="button"
+          >
+            <Trans i18nKey="correlations.transform.add-button">Add transformation</Trans>
+          </Button>
+        )}
+      </Stack>
     </>
   );
 };