public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions 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 13:56:04 +02:00
committed by GitHub
parent bfdb4625a0
commit b6b5935992
1 changed files with 35 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/browse-dashboards/components/NewFolderForm.tsx
+35 -31
View File
@@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { useForm } from 'react-hook-form';
import { selectors } from '@grafana/e2e-selectors'; 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 { Trans, t } from 'app/core/internationalization';
import { validationSrv } from '../../manage-dashboards/services/ValidationSrv'; import { validationSrv } from '../../manage-dashboards/services/ValidationSrv';
@@ -18,6 +19,12 @@ interface FormModel {
const initialFormModel: FormModel = { folderName: '' }; const initialFormModel: FormModel = { folderName: '' };
export function NewFolderForm({ onCancel, onConfirm }: Props) { export function NewFolderForm({ onCancel, onConfirm }: Props) {
const {
handleSubmit,
register,
formState: { errors },
} = useForm<FormModel>({ defaultValues: initialFormModel });
const translatedFolderNameRequiredPhrase = t( const translatedFolderNameRequiredPhrase = t(
'browse-dashboards.action.new-folder-name-required-phrase', 'browse-dashboards.action.new-folder-name-required-phrase',
'Folder name is required.' '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'); const fieldNameLabel = t('browse-dashboards.new-folder-form.name-label', 'Folder name');
return ( return (
<Form <form
defaultValues={initialFormModel} name="addFolder"
onSubmit={(form: FormModel) => onConfirm(form.folderName)} onSubmit={handleSubmit((form) => onConfirm(form.folderName))}
data-testid={selectors.pages.BrowseDashboards.NewFolderForm.form} data-testid={selectors.pages.BrowseDashboards.NewFolderForm.form}
> >
{({ register, errors }) => ( <Field
<> label={fieldNameLabel}
<Field invalid={!!errors.folderName}
label={fieldNameLabel} error={errors.folderName && errors.folderName.message}
invalid={!!errors.folderName} >
error={errors.folderName && errors.folderName.message} <Input
> data-testid={selectors.pages.BrowseDashboards.NewFolderForm.nameInput}
<Input id="folder-name-input"
data-testid={selectors.pages.BrowseDashboards.NewFolderForm.nameInput} defaultValue={initialFormModel.folderName}
id="folder-name-input" {...register('folderName', {
{...register('folderName', { required: translatedFolderNameRequiredPhrase,
required: translatedFolderNameRequiredPhrase, validate: async (v) => await validateFolderName(v),
validate: async (v) => await validateFolderName(v), })}
})} />
/> </Field>
</Field> <Stack>
<HorizontalGroup> <Button variant="secondary" fill="outline" onClick={onCancel}>
<Button variant="secondary" fill="outline" onClick={onCancel}> <Trans i18nKey="browse-dashboards.new-folder-form.cancel-label">Cancel</Trans>
<Trans i18nKey="browse-dashboards.new-folder-form.cancel-label">Cancel</Trans> </Button>
</Button> <Button type="submit">
<Button type="submit"> <Trans i18nKey="browse-dashboards.new-folder-form.create-label">Create</Trans>
<Trans i18nKey="browse-dashboards.new-folder-form.create-label">Create</Trans> </Button>
</Button> </Stack>
</HorizontalGroup> </form>
</>
)}
</Form>
); );
} }