IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Remove Form usage in NewFolderForm components (#83028)

Browse Source 
* 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
This commit is contained in:
Dan83 2024-02-21 12:56:04 +01:00 committed by GitHub
parent bfdb4625a0
commit b6b5935992
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
public/app/features/browse-dashboards/components/NewFolderForm.tsx
View File

@ -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>
);
}