[Logs onboarding] Error handling in configureLogs step (#162241)

Closes https://github.com/elastic/kibana/issues/156529.

`Dataset name` is a field that is auto populated based on the `Log file
path`, if the user deletes the autogenerated value they cannot continue
with the next step but before this changes there were no indicative of
why they cannot continue.

### Changes
- Added validation function to datasetName field.
- Added i18n error.

#### Before
<img width="2199" alt="image"
src="24cc166e-c143-4b35-9372-0fcdb4e78f4a">

#### After
<img width="2200" alt="image"
src="72302aa6-1597-439b-8d80-88e7debf1010">
This commit is contained in:
Yngrid Coello 2023-07-19 16:05:34 +02:00 committed by GitHub
parent 9c0503c523
commit 0fd8a1196e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -25,6 +25,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { isEmpty } from 'lodash';
import React, { useState } from 'react';
import { useWizard } from '.';
import { OptionalFormRow } from '../../../shared/optional_form_row';
@ -37,6 +38,7 @@ import { BackButton } from './back_button';
import { getFilename, replaceSpecialChars } from './get_filename';
export function ConfigureLogs() {
const [datasetNameTouched, setDatasetNameTouched] = useState(false);
const { euiTheme } = useEuiTheme();
const xsFontSize = useEuiFontSize('xs').fontSize;
@ -86,6 +88,13 @@ export function ConfigureLogs() {
}
}
const isDatasetNameInvalid = datasetNameTouched && isEmpty(datasetName);
const datasetNameError = i18n.translate(
'xpack.observability_onboarding.configureLogs.dataset.error',
{ defaultMessage: 'A dataset name is required.' }
);
return (
<StepPanel
title={i18n.translate(
@ -205,6 +214,8 @@ export function ConfigureLogs() {
"Pick a name for your logs. All lowercase, max 100 chars, special characters will be replaced with '_'.",
}
)}
isInvalid={isDatasetNameInvalid}
error={datasetNameError}
>
<EuiFieldText
placeholder={i18n.translate(
@ -217,6 +228,8 @@ export function ConfigureLogs() {
onChange={(event) =>
setDatasetName(replaceSpecialChars(event.target.value))
}
isInvalid={isDatasetNameInvalid}
onInput={() => setDatasetNameTouched(true)}
/>
</EuiFormRow>
<EuiSpacer size="m" />