78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { useForm } from 'react-hook-form';
|
|
|
|
import { selectors } from '@grafana/e2e-selectors';
|
|
import { Button, Input, Field, Stack } from '@grafana/ui';
|
|
import { Trans, t } from 'app/core/internationalization';
|
|
|
|
import { validationSrv } from '../../manage-dashboards/services/ValidationSrv';
|
|
|
|
interface Props {
|
|
onConfirm: (folderName: string) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
interface FormModel {
|
|
folderName: string;
|
|
}
|
|
|
|
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.'
|
|
);
|
|
const validateFolderName = async (folderName: string) => {
|
|
try {
|
|
await validationSrv.validateNewFolderName(folderName);
|
|
return true;
|
|
} catch (e) {
|
|
if (e instanceof Error) {
|
|
return e.message;
|
|
} else {
|
|
throw e;
|
|
}
|
|
}
|
|
};
|
|
|
|
const fieldNameLabel = t('browse-dashboards.new-folder-form.name-label', 'Folder name');
|
|
|
|
return (
|
|
<form
|
|
name="addFolder"
|
|
onSubmit={handleSubmit((form) => onConfirm(form.folderName))}
|
|
data-testid={selectors.pages.BrowseDashboards.NewFolderForm.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>
|
|
);
|
|
}
|