Support the warning state for crawler validation steps (#110864)
This commit is contained in:
parent
d2fffdcca1
commit
f21731fb3a
|
@ -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:
|
||||
|
|
|
@ -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" />);
|
||||
|
||||
|
|
|
@ -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 />;
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -203,7 +203,7 @@ describe('crawlDomainValidationToResult', () => {
|
|||
|
||||
expect(crawlDomainValidationToResult(data)).toEqual({
|
||||
blockingFailure: false,
|
||||
state: 'invalid',
|
||||
state: 'warning',
|
||||
message: 'A warning, not failure',
|
||||
} as CrawlerDomainValidationStep);
|
||||
});
|
||||
|
|
|
@ -99,7 +99,7 @@ export function crawlDomainValidationToResult(
|
|||
|
||||
if (warningResult) {
|
||||
return {
|
||||
state: 'invalid',
|
||||
state: 'warning',
|
||||
blockingFailure: !data.valid,
|
||||
message: warningResult.comment,
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue