Skip to content

Commit

Permalink
[Logs onboarding] Error handling in configureLogs step (elastic#162241)
Browse files Browse the repository at this point in the history
Closes elastic#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="https://github.com/elastic/kibana/assets/1313018/24cc166e-c143-4b35-9372-0fcdb4e78f4a">

#### After
<img width="2200" alt="image"
src="https://github.com/elastic/kibana/assets/1313018/72302aa6-1597-439b-8d80-88e7debf1010">
  • Loading branch information
yngrdyn authored and Ruhshan committed Jul 19, 2023
1 parent c38cacf commit e0476d0
Showing 1 changed file with 13 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand All @@ -217,6 +228,8 @@ export function ConfigureLogs() {
onChange={(event) =>
setDatasetName(replaceSpecialChars(event.target.value))
}
isInvalid={isDatasetNameInvalid}
onInput={() => setDatasetNameTouched(true)}
/>
</EuiFormRow>
<EuiSpacer size="m" />
Expand Down

0 comments on commit e0476d0

Please sign in to comment.