maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] Fixes vertical alignment validation messages (#91878)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Michael Marcialis <michael.marcialis@elastic.co>
This commit is contained in:
Marco Liberati 2021-02-25 09:42:08 +01:00 committed by GitHub
parent 321b8bf052
commit 69272cb8b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 85 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file

@ -11,9 +11,9 @@ import { FormattedMessage } from '@kbn/i18n/react';
import { Ast } from '@kbn/interpreter/common';
import { i18n } from '@kbn/i18n';
import {
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiText,
EuiButtonEmpty,
EuiLink,
@ -389,72 +389,84 @@ export const InnerVisualizationWrapper = ({
if (localState.configurationValidationError?.length) {
let showExtraErrors = null;
let showExtraErrorsAction = null;
if (localState.configurationValidationError.length > 1) {
if (localState.expandError) {
showExtraErrors = localState.configurationValidationError
.slice(1)
.map(({ longMessage }) => (
<EuiFlexItem
<p
key={longMessage}
className="eui-textBreakAll"
data-test-subj="configuration-failure-error"
>
{longMessage}
</EuiFlexItem>
</p>
));
} else {
showExtraErrors = (
<EuiFlexItem>
<EuiButtonEmpty
onClick={() => {
setLocalState((prevState: WorkspaceState) => ({
...prevState,
expandError: !prevState.expandError,
}));
}}
data-test-subj="configuration-failure-more-errors"
>
{i18n.translate('xpack.lens.editorFrame.configurationFailureMoreErrors', {
defaultMessage: ` +{errors} {errors, plural, one {error} other {errors}}`,
values: { errors: localState.configurationValidationError.length - 1 },
})}
</EuiButtonEmpty>
</EuiFlexItem>
showExtraErrorsAction = (
<EuiButtonEmpty
onClick={() => {
setLocalState((prevState: WorkspaceState) => ({
...prevState,
expandError: !prevState.expandError,
}));
}}
data-test-subj="configuration-failure-more-errors"
>
{i18n.translate('xpack.lens.editorFrame.configurationFailureMoreErrors', {
defaultMessage: ` +{errors} {errors, plural, one {error} other {errors}}`,
values: { errors: localState.configurationValidationError.length - 1 },
})}
</EuiButtonEmpty>
);
}
}
return (
<EuiFlexGroup
style={{ maxWidth: '100%' }}
direction="column"
alignItems="center"
data-test-subj="configuration-failure"
>
<EuiFlexGroup data-test-subj="configuration-failure">
<EuiFlexItem>
<EuiIcon type="alert" size="xl" color="danger" />
<EuiEmptyPrompt
actions={showExtraErrorsAction}
body={
<>
<p className="eui-textBreakAll" data-test-subj="configuration-failure-error">
{localState.configurationValidationError[0].longMessage}
</p>
{showExtraErrors}
</>
}
iconColor="danger"
iconType="alert"
/>
</EuiFlexItem>
<EuiFlexItem className="eui-textBreakAll" data-test-subj="configuration-failure-error">
{localState.configurationValidationError[0].longMessage}
</EuiFlexItem>
{showExtraErrors}
</EuiFlexGroup>
);
}
if (localState.expressionBuildError?.length) {
return (
<EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
<EuiFlexGroup>
<EuiFlexItem>
<EuiIcon type="alert" size="xl" color="danger" />
</EuiFlexItem>
<EuiFlexItem data-test-subj="expression-failure">
<FormattedMessage
id="xpack.lens.editorFrame.expressionFailure"
defaultMessage="An error occurred in the expression"
<EuiEmptyPrompt
body={
<>
<p data-test-subj="expression-failure">
<FormattedMessage
id="xpack.lens.editorFrame.expressionFailure"
defaultMessage="An error occurred in the expression"
/>
</p>
<p>{localState.expressionBuildError[0].longMessage}</p>
</>
}
iconColor="danger"
iconType="alert"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>{localState.expressionBuildError[0].longMessage}</EuiFlexItem>
</EuiFlexGroup>
);
}
@ -474,34 +486,43 @@ export const InnerVisualizationWrapper = ({
const visibleErrorMessage = getOriginalRequestErrorMessage(error) || errorMessage;
return (
<EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
<EuiFlexGroup>
<EuiFlexItem>
<EuiIcon type="alert" size="xl" color="danger" />
</EuiFlexItem>
<EuiFlexItem data-test-subj="expression-failure">
<FormattedMessage
id="xpack.lens.editorFrame.dataFailure"
defaultMessage="An error occurred when loading data."
<EuiEmptyPrompt
actions={
visibleErrorMessage ? (
<EuiButtonEmpty
onClick={() => {
setLocalState((prevState: WorkspaceState) => ({
...prevState,
expandError: !prevState.expandError,
}));
}}
>
{i18n.translate('xpack.lens.editorFrame.expandRenderingErrorButton', {
defaultMessage: 'Show details of error',
})}
</EuiButtonEmpty>
) : null
}
body={
<>
<p data-test-subj="expression-failure">
<FormattedMessage
id="xpack.lens.editorFrame.dataFailure"
defaultMessage="An error occurred when loading data."
/>
</p>
{localState.expandError ? (
<p className="eui-textBreakAll">visibleErrorMessage</p>
) : null}
</>
}
iconColor="danger"
iconType="alert"
/>
</EuiFlexItem>
{visibleErrorMessage ? (
<EuiFlexItem className="eui-textBreakAll" grow={false}>
<EuiButtonEmpty
onClick={() => {
setLocalState((prevState: WorkspaceState) => ({
...prevState,
expandError: !prevState.expandError,
}));
}}
>
{i18n.translate('xpack.lens.editorFrame.expandRenderingErrorButton', {
defaultMessage: 'Show details of error',
})}
</EuiButtonEmpty>
{localState.expandError ? visibleErrorMessage : null}
</EuiFlexItem>
) : null}
</EuiFlexGroup>
);
}}