From f992b4bfe0d9b7061a9a947adbe732b38a31f73e Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Thu, 18 Feb 2021 17:31:02 +0100
Subject: [PATCH 1/3] :lipstick: fix centering of the messages

---
 .../workspace_panel/workspace_panel.tsx       | 98 +++++++++++--------
 1 file changed, 55 insertions(+), 43 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index 83d2100a832cfd..585c9d09627a3a 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -375,13 +375,14 @@ export const InnerVisualizationWrapper = ({
               key={longMessage}
               className="eui-textBreakAll"
               data-test-subj="configuration-failure-error"
+              grow={false}
             >
               {longMessage}
             </EuiFlexItem>
           ));
       } else {
         showExtraErrors = (
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiButtonEmpty
               onClick={() => {
                 setLocalState((prevState: WorkspaceState) => ({
@@ -403,35 +404,42 @@ export const InnerVisualizationWrapper = ({
 
     return (
       <EuiFlexGroup
-        style={{ maxWidth: '100%' }}
-        direction="column"
+        style={{ maxWidth: '100%', height: '100%' }}
         alignItems="center"
         data-test-subj="configuration-failure"
       >
         <EuiFlexItem>
-          <EuiIcon type="alert" size="xl" color="danger" />
-        </EuiFlexItem>
-        <EuiFlexItem className="eui-textBreakAll" data-test-subj="configuration-failure-error">
-          {localState.configurationValidationError[0].longMessage}
+          <EuiFlexGroup alignItems="center" direction="column">
+            <EuiFlexItem>
+              <EuiIcon type="alert" size="xl" color="danger" />
+            </EuiFlexItem>
+            <EuiFlexItem className="eui-textBreakAll" data-test-subj="configuration-failure-error">
+              {localState.configurationValidationError[0].longMessage}
+            </EuiFlexItem>
+            {showExtraErrors}
+          </EuiFlexGroup>
         </EuiFlexItem>
-        {showExtraErrors}
       </EuiFlexGroup>
     );
   }
 
   if (localState.expressionBuildError?.length) {
     return (
-      <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
+      <EuiFlexGroup style={{ maxWidth: '100%' }} alignItems="center">
         <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"
-          />
+          <EuiFlexGroup alignItems="center" direction="column">
+            <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"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{localState.expressionBuildError[0].longMessage}</EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>{localState.expressionBuildError[0].longMessage}</EuiFlexItem>
       </EuiFlexGroup>
     );
   }
@@ -451,34 +459,38 @@ export const InnerVisualizationWrapper = ({
           const visibleErrorMessage = getOriginalRequestErrorMessage(error) || errorMessage;
 
           return (
-            <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
+            <EuiFlexGroup style={{ maxWidth: '100%' }} alignItems="center">
               <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."
-                />
-              </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>
+                <EuiFlexGroup alignItems="center" direction="column">
+                  <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."
+                    />
+                  </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}
+                      {localState.expandError ? visibleErrorMessage : null}
+                    </EuiFlexItem>
+                  ) : null}{' '}
+                </EuiFlexGroup>
+              </EuiFlexItem>
             </EuiFlexGroup>
           );
         }}

From e53dffedcc255ccc078db9a01c8acb39dedc5d8e Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Tue, 23 Feb 2021 15:49:28 -0500
Subject: [PATCH 2/3] reduce EuiFlexGroup usage; use EuiEmptyPrompt

---
 .../workspace_panel/workspace_panel.tsx       | 138 ++++++++++--------
 1 file changed, 74 insertions(+), 64 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index be7cbfc31360fe..92775929fc8d5f 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -11,6 +11,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { Ast } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';
 import {
+  EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
@@ -389,58 +390,58 @@ 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"
-              grow={false}
             >
               {longMessage}
-            </EuiFlexItem>
+            </p>
           ));
       } else {
-        showExtraErrors = (
-          <EuiFlexItem grow={false}>
-            <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%', height: '100%' }}
-        alignItems="center"
-        data-test-subj="configuration-failure"
-      >
+      <EuiFlexGroup data-test-subj="configuration-failure">
         <EuiFlexItem>
-          <EuiFlexGroup alignItems="center" direction="column">
-            <EuiFlexItem>
-              <EuiIcon type="alert" size="xl" color="danger" />
-            </EuiFlexItem>
-            <EuiFlexItem className="eui-textBreakAll" data-test-subj="configuration-failure-error">
-              {localState.configurationValidationError[0].longMessage}
-            </EuiFlexItem>
-            {showExtraErrors}
-          </EuiFlexGroup>
+          <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>
       </EuiFlexGroup>
     );
@@ -448,20 +449,24 @@ export const InnerVisualizationWrapper = ({
 
   if (localState.expressionBuildError?.length) {
     return (
-      <EuiFlexGroup style={{ maxWidth: '100%' }} alignItems="center">
+      <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiFlexGroup alignItems="center" direction="column">
-            <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"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>{localState.expressionBuildError[0].longMessage}</EuiFlexItem>
-          </EuiFlexGroup>
+          <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>
       </EuiFlexGroup>
     );
@@ -482,20 +487,11 @@ export const InnerVisualizationWrapper = ({
           const visibleErrorMessage = getOriginalRequestErrorMessage(error) || errorMessage;
 
           return (
-            <EuiFlexGroup style={{ maxWidth: '100%' }} alignItems="center">
+            <EuiFlexGroup>
               <EuiFlexItem>
-                <EuiFlexGroup alignItems="center" direction="column">
-                  <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."
-                    />
-                  </EuiFlexItem>
-                  {visibleErrorMessage ? (
-                    <EuiFlexItem className="eui-textBreakAll" grow={false}>
+                <EuiEmptyPrompt
+                  actions={
+                    visibleErrorMessage ? (
                       <EuiButtonEmpty
                         onClick={() => {
                           setLocalState((prevState: WorkspaceState) => ({
@@ -508,11 +504,25 @@ export const InnerVisualizationWrapper = ({
                           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 ? visibleErrorMessage : null}
-                    </EuiFlexItem>
-                  ) : null}{' '}
-                </EuiFlexGroup>
+                      {localState.expandError ? (
+                        <p className="eui-textBreakAll">visibleErrorMessage</p>
+                      ) : null}
+                    </>
+                  }
+                  iconColor="danger"
+                  iconType="alert"
+                />
               </EuiFlexItem>
             </EuiFlexGroup>
           );

From 34fa14647b6a21a1a0f936bcc9f95c4c395a2277 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Tue, 23 Feb 2021 15:50:05 -0500
Subject: [PATCH 3/3] rm EuiIcon import

---
 .../editor_frame/workspace_panel/workspace_panel.tsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index 92775929fc8d5f..af5411dd4d3b05 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -14,7 +14,6 @@ import {
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiText,
   EuiButtonEmpty,
   EuiLink,