Support the warning state for crawler validation steps (#110864)
This commit is contained in:
parent
d2fffdcca1
commit
f21731fb3a
8 changed files with 48 additions and 12 deletions
|
@ -62,10 +62,12 @@ export const getDomainWithProtocol = async (domain: string) => {
|
||||||
|
|
||||||
export const domainValidationStateToPanelColor = (
|
export const domainValidationStateToPanelColor = (
|
||||||
state: CrawlerDomainValidationStepState
|
state: CrawlerDomainValidationStepState
|
||||||
): 'success' | 'danger' | 'subdued' => {
|
): 'success' | 'warning' | 'danger' | 'subdued' => {
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case 'valid':
|
case 'valid':
|
||||||
return 'success';
|
return 'success';
|
||||||
|
case 'warning':
|
||||||
|
return 'warning';
|
||||||
case 'invalid':
|
case 'invalid':
|
||||||
return 'danger';
|
return 'danger';
|
||||||
default:
|
default:
|
||||||
|
|
|
@ -20,6 +20,12 @@ describe('ValidationStateIcon', () => {
|
||||||
expect(wrapper.find(EuiIcon).prop('color')).toEqual('success');
|
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', () => {
|
it('shows a danger icon when invalid', () => {
|
||||||
const wrapper = shallow(<ValidationStateIcon state="invalid" />);
|
const wrapper = shallow(<ValidationStateIcon state="invalid" />);
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,14 @@ import { CrawlerDomainValidationStepState } from '../../types';
|
||||||
export const ValidationStateIcon: React.FC<{ state: CrawlerDomainValidationStepState }> = ({
|
export const ValidationStateIcon: React.FC<{ state: CrawlerDomainValidationStepState }> = ({
|
||||||
state,
|
state,
|
||||||
}) => {
|
}) => {
|
||||||
if (state === 'valid') return <EuiIcon color="success" type="checkInCircleFilled" />;
|
switch (state) {
|
||||||
if (state === 'invalid') return <EuiIcon color="danger" type="crossInACircleFilled" />;
|
case 'valid':
|
||||||
return <EuiLoadingSpinner />;
|
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(
|
const wrapper = shallow(
|
||||||
<ValidationStepPanel step={{ state: 'valid' }} label={'Initial validation'} />
|
<ValidationStepPanel step={{ state: 'valid' }} label={'Initial validation'} />
|
||||||
);
|
);
|
||||||
|
|
||||||
it('passed the correct color to the EuiPanel', () => {
|
it('passed the correct color to the EuiPanel', () => {
|
||||||
expect(wrapper.find(EuiPanel).prop('color')).toEqual('success');
|
expect(wrapper.find(EuiPanel).prop('color')).toEqual('success');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('contains a validation state icon', () => {
|
it('contains a validation state icon', () => {
|
||||||
expect(wrapper.find(ValidationStateIcon)).toHaveLength(1);
|
expect(wrapper.find(ValidationStateIcon)).toHaveLength(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders a label', () => {
|
it('renders a label', () => {
|
||||||
expect(wrapper.find('h3').text()).toEqual('Initial validation');
|
expect(wrapper.find('h3').text()).toEqual('Initial validation');
|
||||||
});
|
});
|
||||||
|
@ -32,11 +35,12 @@ describe('ValidationStepPanel', () => {
|
||||||
describe('invalid messages and actions', () => {
|
describe('invalid messages and actions', () => {
|
||||||
const errorMessage = 'Error message';
|
const errorMessage = 'Error message';
|
||||||
const action = <div data-test-subj="action" />;
|
const action = <div data-test-subj="action" />;
|
||||||
|
|
||||||
it('displays the passed error message and action is invalid', () => {
|
it('displays the passed error message and action is invalid', () => {
|
||||||
const wrapper = shallow(
|
const wrapper = shallow(
|
||||||
<ValidationStepPanel
|
<ValidationStepPanel
|
||||||
step={{ state: 'invalid', message: errorMessage }}
|
step={{ state: 'invalid', message: errorMessage }}
|
||||||
label={'initialValidation'}
|
label="initialValidation"
|
||||||
action={action}
|
action={action}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -45,11 +49,26 @@ describe('ValidationStepPanel', () => {
|
||||||
);
|
);
|
||||||
expect(wrapper.find('[data-test-subj="action"]')).toHaveLength(1);
|
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(
|
const wrapper = shallow(
|
||||||
<ValidationStepPanel
|
<ValidationStepPanel
|
||||||
step={{ state: 'loading', message: errorMessage }}
|
step={{ state: 'loading', message: errorMessage }}
|
||||||
label={'initialValidation'}
|
label="initialValidation"
|
||||||
action={action}
|
action={action}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -25,11 +25,13 @@ export const ValidationStepPanel: React.FC<ValidationStepPanelProps> = ({
|
||||||
label,
|
label,
|
||||||
action,
|
action,
|
||||||
}) => {
|
}) => {
|
||||||
|
const showErrorMessage = step.state === 'invalid' || step.state === 'warning';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiPanel hasShadow={false} color={domainValidationStateToPanelColor(step.state)}>
|
<EuiPanel hasShadow={false} color={domainValidationStateToPanelColor(step.state)}>
|
||||||
<EuiFlexGroup gutterSize="s" alignItems="center">
|
<EuiFlexGroup gutterSize="s" alignItems="center">
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<ValidationStateIcon state={step?.state} />
|
<ValidationStateIcon state={step.state} />
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<EuiTitle size="xs">
|
<EuiTitle size="xs">
|
||||||
|
@ -37,7 +39,7 @@ export const ValidationStepPanel: React.FC<ValidationStepPanelProps> = ({
|
||||||
</EuiTitle>
|
</EuiTitle>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
{step.state === 'invalid' && (
|
{showErrorMessage && (
|
||||||
<>
|
<>
|
||||||
<EuiText size="s" data-test-subj="errorMessage">
|
<EuiText size="s" data-test-subj="errorMessage">
|
||||||
<p>{step.message}</p>
|
<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 {
|
export interface CrawlerDomainValidationStep {
|
||||||
state: CrawlerDomainValidationStepState;
|
state: CrawlerDomainValidationStepState;
|
||||||
|
|
|
@ -203,7 +203,7 @@ describe('crawlDomainValidationToResult', () => {
|
||||||
|
|
||||||
expect(crawlDomainValidationToResult(data)).toEqual({
|
expect(crawlDomainValidationToResult(data)).toEqual({
|
||||||
blockingFailure: false,
|
blockingFailure: false,
|
||||||
state: 'invalid',
|
state: 'warning',
|
||||||
message: 'A warning, not failure',
|
message: 'A warning, not failure',
|
||||||
} as CrawlerDomainValidationStep);
|
} as CrawlerDomainValidationStep);
|
||||||
});
|
});
|
||||||
|
|
|
@ -99,7 +99,7 @@ export function crawlDomainValidationToResult(
|
||||||
|
|
||||||
if (warningResult) {
|
if (warningResult) {
|
||||||
return {
|
return {
|
||||||
state: 'invalid',
|
state: 'warning',
|
||||||
blockingFailure: !data.valid,
|
blockingFailure: !data.valid,
|
||||||
message: warningResult.comment,
|
message: warningResult.comment,
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue