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

This commit is contained in:
Byron Hulcher 2021-09-02 10:00:29 -04:00 committed by GitHub
parent d2fffdcca1
commit f21731fb3a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 48 additions and 12 deletions

View file

@ -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:

View file

@ -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" />);

View file

@ -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 />;
}
};

View file

@ -19,12 +19,15 @@ 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');
});
@ -32,11 +35,12 @@ describe('ValidationStepPanel', () => {
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}
/>
);
@ -45,11 +49,26 @@ 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('displays the passed error message and action when state is warning', () => {
const wrapper = shallow(
<ValidationStepPanel
step={{ state: 'warning', message: errorMessage }}
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('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}
/>
);

View file

@ -25,11 +25,13 @@ 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">
@ -37,7 +39,7 @@ export const ValidationStepPanel: React.FC<ValidationStepPanelProps> = ({
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
{step.state === 'invalid' && (
{showErrorMessage && (
<>
<EuiText size="s" data-test-subj="errorMessage">
<p>{step.message}</p>

View file

@ -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;

View file

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

View file

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