[App Search] Make URLs in crawler validation messages clickable (#111722)

This commit is contained in:
Orhan Toy 2021-09-10 10:35:15 +02:00 committed by GitHub
parent 544d4f6eaa
commit ab4e05fb67
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 8 deletions

View file

@ -44,7 +44,7 @@ describe('ValidationStepPanel', () => {
action={action}
/>
);
expect(wrapper.find('[data-test-subj="errorMessage"]').dive().text()).toContain(
expect(wrapper.find('[data-test-subj="errorMessage"]').childAt(0).text()).toContain(
'Error message'
);
expect(wrapper.find('[data-test-subj="action"]')).toHaveLength(1);
@ -58,7 +58,7 @@ describe('ValidationStepPanel', () => {
action={action}
/>
);
expect(wrapper.find('[data-test-subj="errorMessage"]').dive().text()).toContain(
expect(wrapper.find('[data-test-subj="errorMessage"]').childAt(0).text()).toContain(
'Error message'
);
expect(wrapper.find('[data-test-subj="action"]')).toHaveLength(1);

View file

@ -7,7 +7,14 @@
import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiMarkdownFormat,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { CrawlerDomainValidationStep } from '../../types';
@ -26,9 +33,14 @@ export const ValidationStepPanel: React.FC<ValidationStepPanelProps> = ({
action,
}) => {
const showErrorMessage = step.state === 'invalid' || step.state === 'warning';
const styleOverride = showErrorMessage ? { paddingBottom: 0 } : {};
return (
<EuiPanel hasShadow={false} color={domainValidationStateToPanelColor(step.state)}>
<EuiPanel
hasShadow={false}
color={domainValidationStateToPanelColor(step.state)}
style={styleOverride}
>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<ValidationStateIcon state={step.state} />
@ -41,13 +53,14 @@ export const ValidationStepPanel: React.FC<ValidationStepPanelProps> = ({
</EuiFlexGroup>
{showErrorMessage && (
<>
<EuiText size="s" data-test-subj="errorMessage">
<p>{step.message}</p>
</EuiText>
<EuiSpacer size="xs" />
<EuiMarkdownFormat textSize="s" data-test-subj="errorMessage">
{step.message || ''}
</EuiMarkdownFormat>
{action && (
<>
<EuiSpacer />
{action}
<EuiSpacer />
</>
)}
</>