Support the warning state for crawler validation steps (#110864)

Author: byronhulcher

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/add_domain/utils.ts

@@ -62,10 +62,12 @@ export const getDomainWithProtocol = async (domain: string) => {
 
 export const domainValidationStateToPanelColor = (
   state: CrawlerDomainValidationStepState
-): 'success' | 'danger' | 'subdued' => {
+): 'success' | 'warning' | 'danger' | 'subdued' => {
   switch (state) {
     case 'valid':
       return 'success';
+    case 'warning':
+      return 'warning';
     case 'invalid':
       return 'danger';
     default:

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/add_domain/validation_state_icon.test.tsx

@@ -20,6 +20,12 @@ describe('ValidationStateIcon', () => {
     expect(wrapper.find(EuiIcon).prop('color')).toEqual('success');
   });
 
+  it('shows a warning icon when warning', () => {
+    const wrapper = shallow(<ValidationStateIcon state="warning" />);
+
+    expect(wrapper.find(EuiIcon).prop('color')).toEqual('warning');
+  });
+
   it('shows a danger icon when invalid', () => {
     const wrapper = shallow(<ValidationStateIcon state="invalid" />);
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/add_domain/validation_state_icon.tsx

@@ -14,7 +14,14 @@ import { CrawlerDomainValidationStepState } from '../../types';
 export const ValidationStateIcon: React.FC<{ state: CrawlerDomainValidationStepState }> = ({
   state,
 }) => {
-  if (state === 'valid') return <EuiIcon color="success" type="checkInCircleFilled" />;
-  if (state === 'invalid') return <EuiIcon color="danger" type="crossInACircleFilled" />;
-  return <EuiLoadingSpinner />;
+  switch (state) {
+    case 'valid':
+      return <EuiIcon color="success" type="check" />;
+    case 'warning':
+      return <EuiIcon color="warning" type="alert" />;
+    case 'invalid':
+      return <EuiIcon color="danger" type="cross" />;
+    default:
+      return <EuiLoadingSpinner />;
+  }
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/add_domain/validation_step_panel.test.tsx

@@ -19,24 +19,42 @@ describe('ValidationStepPanel', () => {
     const wrapper = shallow(
       <ValidationStepPanel step={{ state: 'valid' }} label={'Initial validation'} />
     );
+
     it('passed the correct color to the EuiPanel', () => {
       expect(wrapper.find(EuiPanel).prop('color')).toEqual('success');
     });
+
     it('contains a validation state icon', () => {
       expect(wrapper.find(ValidationStateIcon)).toHaveLength(1);
     });
+
     it('renders a label', () => {
       expect(wrapper.find('h3').text()).toEqual('Initial validation');
     });
   });
   describe('invalid messages and actions', () => {
     const errorMessage = 'Error message';
     const action = <div data-test-subj="action" />;
+
     it('displays the passed error message and action is invalid', () => {
       const wrapper = shallow(
         <ValidationStepPanel
           step={{ state: 'invalid', message: errorMessage }}
-          label={'initialValidation'}
+          label="initialValidation"
+          action={action}
+        />
+      );
+      expect(wrapper.find('[data-test-subj="errorMessage"]').dive().text()).toContain(
+        'Error message'
+      );
+      expect(wrapper.find('[data-test-subj="action"]')).toHaveLength(1);
+    });
+
+    it('displays the passed error message and action when state is warning', () => {
+      const wrapper = shallow(
+        <ValidationStepPanel
+          step={{ state: 'warning', message: errorMessage }}
+          label="initialValidation"
           action={action}
         />
       );
@@ -45,11 +63,12 @@ describe('ValidationStepPanel', () => {
       );
       expect(wrapper.find('[data-test-subj="action"]')).toHaveLength(1);
     });
-    it('does not display the passed error message or action when state is not invalid', () => {
+
+    it('does not display the passed error message or action when state is loading', () => {
       const wrapper = shallow(
         <ValidationStepPanel
           step={{ state: 'loading', message: errorMessage }}
-          label={'initialValidation'}
+          label="initialValidation"
           action={action}
         />
       );

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/add_domain/validation_step_panel.tsx

@@ -25,19 +25,21 @@ export const ValidationStepPanel: React.FC<ValidationStepPanelProps> = ({
   label,
   action,
 }) => {
+  const showErrorMessage = step.state === 'invalid' || step.state === 'warning';
+
   return (
     <EuiPanel hasShadow={false} color={domainValidationStateToPanelColor(step.state)}>
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>
-          <ValidationStateIcon state={step?.state} />
+          <ValidationStateIcon state={step.state} />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiTitle size="xs">
             <h3>{label}</h3>
           </EuiTitle>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {step.state === 'invalid' && (
+      {showErrorMessage && (
         <>
           <EuiText size="s" data-test-subj="errorMessage">
             <p>{step.message}</p>

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/types.ts

@@ -135,7 +135,7 @@ export interface CrawlerDomainValidationResultFromServer {
   }>;
 }
 
-export type CrawlerDomainValidationStepState = '' | 'loading' | 'valid' | 'invalid';
+export type CrawlerDomainValidationStepState = '' | 'loading' | 'valid' | 'warning' | 'invalid';
 
 export interface CrawlerDomainValidationStep {
   state: CrawlerDomainValidationStepState;

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/utils.test.ts

@@ -203,7 +203,7 @@ describe('crawlDomainValidationToResult', () => {
 
     expect(crawlDomainValidationToResult(data)).toEqual({
       blockingFailure: false,
-      state: 'invalid',
+      state: 'warning',
       message: 'A warning, not failure',
     } as CrawlerDomainValidationStep);
   });

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/utils.ts

@@ -99,7 +99,7 @@ export function crawlDomainValidationToResult(
 
   if (warningResult) {
     return {
-      state: 'invalid',
+      state: 'warning',
       blockingFailure: !data.valid,
       message: warningResult.comment,
     };