From b6b5935992f4aa8a962ab075ff780855cb66aeff Mon Sep 17 00:00:00 2001
From: Dan83 <dan83h@live.it>
Date: Wed, 21 Feb 2024 12:56:04 +0100
Subject: [PATCH] Chore: Remove Form usage in NewFolderForm components (#83028)

* Chore: Remove Form usage from NewFolderForm

* Chore: Remove Form usage from NewFolderForm

* Chore: Remove Form usage from NewFolderForm

* Replace HorizontalGroup with Stack

* add Default Values and launch prettier
---
 .../components/NewFolderForm.tsx              | 66 ++++++++++---------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/public/app/features/browse-dashboards/components/NewFolderForm.tsx b/public/app/features/browse-dashboards/components/NewFolderForm.tsx
index d201f8a4e0b..a31594be7f3 100644
--- a/public/app/features/browse-dashboards/components/NewFolderForm.tsx
+++ b/public/app/features/browse-dashboards/components/NewFolderForm.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { useForm } from 'react-hook-form';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Input, Form, Field, HorizontalGroup } from '@grafana/ui';
+import { Button, Input, Field, Stack } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
 import { validationSrv } from '../../manage-dashboards/services/ValidationSrv';
@@ -18,6 +19,12 @@ interface FormModel {
 const initialFormModel: FormModel = { folderName: '' };
 
 export function NewFolderForm({ onCancel, onConfirm }: Props) {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<FormModel>({ defaultValues: initialFormModel });
+
   const translatedFolderNameRequiredPhrase = t(
     'browse-dashboards.action.new-folder-name-required-phrase',
     'Folder name is required.'
@@ -38,37 +45,34 @@ export function NewFolderForm({ onCancel, onConfirm }: Props) {
   const fieldNameLabel = t('browse-dashboards.new-folder-form.name-label', 'Folder name');
 
   return (
-    <Form
-      defaultValues={initialFormModel}
-      onSubmit={(form: FormModel) => onConfirm(form.folderName)}
+    <form
+      name="addFolder"
+      onSubmit={handleSubmit((form) => onConfirm(form.folderName))}
       data-testid={selectors.pages.BrowseDashboards.NewFolderForm.form}
     >
-      {({ register, errors }) => (
-        <>
-          <Field
-            label={fieldNameLabel}
-            invalid={!!errors.folderName}
-            error={errors.folderName && errors.folderName.message}
-          >
-            <Input
-              data-testid={selectors.pages.BrowseDashboards.NewFolderForm.nameInput}
-              id="folder-name-input"
-              {...register('folderName', {
-                required: translatedFolderNameRequiredPhrase,
-                validate: async (v) => await validateFolderName(v),
-              })}
-            />
-          </Field>
-          <HorizontalGroup>
-            <Button variant="secondary" fill="outline" onClick={onCancel}>
-              <Trans i18nKey="browse-dashboards.new-folder-form.cancel-label">Cancel</Trans>
-            </Button>
-            <Button type="submit">
-              <Trans i18nKey="browse-dashboards.new-folder-form.create-label">Create</Trans>
-            </Button>
-          </HorizontalGroup>
-        </>
-      )}
-    </Form>
+      <Field
+        label={fieldNameLabel}
+        invalid={!!errors.folderName}
+        error={errors.folderName && errors.folderName.message}
+      >
+        <Input
+          data-testid={selectors.pages.BrowseDashboards.NewFolderForm.nameInput}
+          id="folder-name-input"
+          defaultValue={initialFormModel.folderName}
+          {...register('folderName', {
+            required: translatedFolderNameRequiredPhrase,
+            validate: async (v) => await validateFolderName(v),
+          })}
+        />
+      </Field>
+      <Stack>
+        <Button variant="secondary" fill="outline" onClick={onCancel}>
+          <Trans i18nKey="browse-dashboards.new-folder-form.cancel-label">Cancel</Trans>
+        </Button>
+        <Button type="submit">
+          <Trans i18nKey="browse-dashboards.new-folder-form.create-label">Create</Trans>
+        </Button>
+      </Stack>
+    </form>
   );
 }