From e0476d0cf6e1cd138b4f5f2ed6a2c4090a92f858 Mon Sep 17 00:00:00 2001
From: Yngrid Coello <yngrid.coello@elastic.co>
Date: Wed, 19 Jul 2023 16:05:34 +0200
Subject: [PATCH] [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="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">
---
 .../app/custom_logs/wizard/configure_logs.tsx       | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
index 4d8158eb4a8c8..0feae11d06d6f 100644
--- a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
@@ -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" />