From d64749978d82314c9ca1c9e3acea0f866ab48961 Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Tue, 24 Mar 2020 14:30:43 -0700
Subject: [PATCH] Show error icon and red text at input and stream levels

---
 .../components/datasource_input_config.tsx    | 51 ++++++++++++++-----
 .../components/datasource_input_panel.tsx     | 37 ++++++++++++--
 .../datasource_input_stream_config.tsx        | 41 ++++++++++++---
 .../services/validate_datasource.ts           |  2 +-
 .../step_configure_datasource.tsx             | 16 +++---
 5 files changed, 113 insertions(+), 34 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
index 7694c35c35ad8..0e8763cb2d4c0 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
@@ -6,23 +6,24 @@
 import React, { useState, Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
+  EuiTextColor,
   EuiSpacer,
   EuiButtonEmpty,
   EuiTitle,
+  EuiIconTip,
 } from '@elastic/eui';
 import { DatasourceInput, RegistryVarsEntry } from '../../../../types';
-import { isAdvancedVar, DatasourceInputValidationResults } from '../services';
+import { isAdvancedVar, DatasourceConfigValidationResults, validationHasErrors } from '../services';
 import { DatasourceInputVarField } from './datasource_input_var_field';
 
 export const DatasourceInputConfig: React.FunctionComponent<{
   packageInputVars?: RegistryVarsEntry[];
   datasourceInput: DatasourceInput;
   updateDatasourceInput: (updatedInput: Partial<DatasourceInput>) => void;
-  inputVarsValidationResults: DatasourceInputValidationResults;
+  inputVarsValidationResults: DatasourceConfigValidationResults;
   forceShowErrors?: boolean;
 }> = ({
   packageInputVars,
@@ -34,6 +35,9 @@ export const DatasourceInputConfig: React.FunctionComponent<{
   // Showing advanced options toggle state
   const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);
 
+  // Errors state
+  const hasErrors = forceShowErrors && validationHasErrors(inputVarsValidationResults);
+
   const requiredVars: RegistryVarsEntry[] = [];
   const advancedVars: RegistryVarsEntry[] = [];
 
@@ -48,15 +52,36 @@ export const DatasourceInputConfig: React.FunctionComponent<{
   }
 
   return (
-    <EuiFlexGrid columns={2}>
-      <EuiFlexItem>
+    <EuiFlexGroup alignItems="flexStart">
+      <EuiFlexItem grow={1}>
         <EuiTitle size="s">
-          <h4>
-            <FormattedMessage
-              id="xpack.ingestManager.createDatasource.stepConfigure.inputSettingsTitle"
-              defaultMessage="Settings"
-            />
-          </h4>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <h4>
+                <EuiTextColor color={hasErrors ? 'danger' : 'default'}>
+                  <FormattedMessage
+                    id="xpack.ingestManager.createDatasource.stepConfigure.inputSettingsTitle"
+                    defaultMessage="Settings"
+                  />
+                </EuiTextColor>
+              </h4>
+            </EuiFlexItem>
+            {hasErrors ? (
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  content={
+                    <FormattedMessage
+                      id="xpack.ingestManager.createDatasource.stepConfigure.inputConfigErrorsTooltip"
+                      defaultMessage="Fix configuration errors"
+                    />
+                  }
+                  position="right"
+                  type="alert"
+                  iconProps={{ color: 'danger' }}
+                />
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
         </EuiTitle>
         <EuiSpacer size="m" />
         <EuiText color="subdued" size="s">
@@ -68,7 +93,7 @@ export const DatasourceInputConfig: React.FunctionComponent<{
           </p>
         </EuiText>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={1}>
         <EuiFlexGroup direction="column" gutterSize="m">
           {requiredVars.map(varDef => {
             const { name: varName, type: varType } = varDef;
@@ -144,6 +169,6 @@ export const DatasourceInputConfig: React.FunctionComponent<{
           ) : null}
         </EuiFlexGroup>
       </EuiFlexItem>
-    </EuiFlexGrid>
+    </EuiFlexGroup>
   );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
index a60ee4b9f6253..6b0c68ccb7d3f 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
@@ -17,9 +17,10 @@ import {
   EuiButtonIcon,
   EuiHorizontalRule,
   EuiSpacer,
+  EuiIconTip,
 } from '@elastic/eui';
 import { DatasourceInput, DatasourceInputStream, RegistryInput } from '../../../../types';
-import { DatasourceInputValidationResults } from '../services';
+import { DatasourceInputValidationResults, validationHasErrors } from '../services';
 import { DatasourceInputConfig } from './datasource_input_config';
 import { DatasourceInputStreamConfig } from './datasource_input_stream_config';
 
@@ -45,6 +46,9 @@ export const DatasourceInputPanel: React.FunctionComponent<{
   // Showing streams toggle state
   const [isShowingStreams, setIsShowingStreams] = useState<boolean>(false);
 
+  // Errors state
+  const hasErrors = forceShowErrors && validationHasErrors(inputValidationResults);
+
   return (
     <EuiPanel>
       {/* Header / input-level toggle */}
@@ -52,9 +56,32 @@ export const DatasourceInputPanel: React.FunctionComponent<{
         <EuiFlexItem grow={false}>
           <EuiSwitch
             label={
-              <EuiText>
-                <h4>{packageInput.title || packageInput.type}</h4>
-              </EuiText>
+              <EuiFlexGroup alignItems="center" gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiText>
+                    <h4>
+                      <EuiTextColor color={hasErrors ? 'danger' : 'default'}>
+                        {packageInput.title || packageInput.type}
+                      </EuiTextColor>
+                    </h4>
+                  </EuiText>
+                </EuiFlexItem>
+                {hasErrors ? (
+                  <EuiFlexItem grow={false}>
+                    <EuiIconTip
+                      content={
+                        <FormattedMessage
+                          id="xpack.ingestManager.createDatasource.stepConfigure.inputLevelErrorsTooltip"
+                          defaultMessage="Fix configuration errors"
+                        />
+                      }
+                      position="right"
+                      type="alert"
+                      iconProps={{ color: 'danger' }}
+                    />
+                  </EuiFlexItem>
+                ) : null}
+              </EuiFlexGroup>
             }
             checked={datasourceInput.enabled}
             onChange={e => {
@@ -131,7 +158,7 @@ export const DatasourceInputPanel: React.FunctionComponent<{
             packageInputVars={packageInput.vars}
             datasourceInput={datasourceInput}
             updateDatasourceInput={updateDatasourceInput}
-            inputVarsValidationResults={inputValidationResults}
+            inputVarsValidationResults={{ config: inputValidationResults.config }}
             forceShowErrors={forceShowErrors}
           />
           <EuiHorizontalRule margin="m" />
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
index 64829c6d08cd4..43e8f5a2c060d 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
@@ -7,16 +7,17 @@ import React, { useState, Fragment } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSwitch,
   EuiText,
   EuiSpacer,
   EuiButtonEmpty,
+  EuiTextColor,
+  EuiIconTip,
 } from '@elastic/eui';
 import { DatasourceInputStream, RegistryStream, RegistryVarsEntry } from '../../../../types';
-import { isAdvancedVar, DatasourceConfigValidationResults } from '../services';
+import { isAdvancedVar, DatasourceConfigValidationResults, validationHasErrors } from '../services';
 import { DatasourceInputVarField } from './datasource_input_var_field';
 
 export const DatasourceInputStreamConfig: React.FunctionComponent<{
@@ -35,6 +36,9 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
   // Showing advanced options toggle state
   const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);
 
+  // Errors state
+  const hasErrors = forceShowErrors && validationHasErrors(inputStreamValidationResults);
+
   const requiredVars: RegistryVarsEntry[] = [];
   const advancedVars: RegistryVarsEntry[] = [];
 
@@ -49,10 +53,33 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
   }
 
   return (
-    <EuiFlexGrid columns={2}>
-      <EuiFlexItem>
+    <EuiFlexGroup>
+      <EuiFlexItem grow={1}>
         <EuiSwitch
-          label={packageInputStream.title || packageInputStream.dataset}
+          label={
+            <EuiFlexGroup alignItems="center" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiTextColor color={hasErrors ? 'danger' : 'default'}>
+                  {packageInputStream.title || packageInputStream.dataset}
+                </EuiTextColor>
+              </EuiFlexItem>
+              {hasErrors ? (
+                <EuiFlexItem grow={false}>
+                  <EuiIconTip
+                    content={
+                      <FormattedMessage
+                        id="xpack.ingestManager.createDatasource.stepConfigure.streamLevelErrorsTooltip"
+                        defaultMessage="Fix configuration errors"
+                      />
+                    }
+                    position="right"
+                    type="alert"
+                    iconProps={{ color: 'danger' }}
+                  />
+                </EuiFlexItem>
+              ) : null}
+            </EuiFlexGroup>
+          }
           checked={datasourceInputStream.enabled}
           onChange={e => {
             const enabled = e.target.checked;
@@ -70,7 +97,7 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
           </Fragment>
         ) : null}
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={1}>
         <EuiFlexGroup direction="column" gutterSize="m">
           {requiredVars.map(varDef => {
             const { name: varName, type: varType } = varDef;
@@ -146,6 +173,6 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
           ) : null}
         </EuiFlexGroup>
       </EuiFlexItem>
-    </EuiFlexGrid>
+    </EuiFlexGroup>
   );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
index 3867ace9a0620..30df27f794db6 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
@@ -204,7 +204,7 @@ export const validationHasErrors = (
   validationResults:
     | DatasourceValidationResults
     | DatasourceInputValidationResults
-    | ValidationEntry
+    | DatasourceConfigValidationResults
 ) => {
   const flattenedValidation = getFlattenedObject(validationResults);
   return !!Object.entries(flattenedValidation).find(([, value]) => !!value);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
index 95c78e2ee2609..aa3bfde9aefd7 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
@@ -9,7 +9,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiSteps,
   EuiPanel,
-  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
@@ -99,8 +98,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
   // Step A, define datasource
   const renderDefineDatasource = () => (
     <EuiPanel>
-      <EuiFlexGrid columns={2}>
-        <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={1}>
           <DatasourceInputVarField
             varDef={{
               name: 'name',
@@ -123,7 +122,7 @@ export const StepConfigureDatasource: React.FunctionComponent<{
             forceShowErrors={submitAttempted}
           />
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={1}>
           <DatasourceInputVarField
             varDef={{
               name: 'description',
@@ -146,7 +145,7 @@ export const StepConfigureDatasource: React.FunctionComponent<{
             forceShowErrors={submitAttempted}
           />
         </EuiFlexItem>
-      </EuiFlexGrid>
+      </EuiFlexGroup>
       <EuiSpacer size="m" />
       <EuiButtonEmpty
         flush="left"
@@ -163,8 +162,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
       {isShowingAdvancedDefine ? (
         <Fragment>
           <EuiSpacer size="m" />
-          <EuiFlexGrid columns={2}>
-            <EuiFlexItem>
+          <EuiFlexGroup>
+            <EuiFlexItem grow={1}>
               <EuiFormRow
                 label={
                   <FormattedMessage
@@ -190,7 +189,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
                 />
               </EuiFormRow>
             </EuiFlexItem>
-          </EuiFlexGrid>
+            <EuiFlexItem grow={1} />
+          </EuiFlexGroup>
         </Fragment>
       ) : null}
     </EuiPanel>