From c42845fa132bdfe5c212ac9e3810155570b46ca8 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 30 Jun 2023 12:55:12 -0700
Subject: [PATCH] clean up flyout

---
 .../public/chart/histogram.tsx                |  1 +
 .../plugins/lens/public/app_plugin/app.scss   |  4 +
 .../get_edit_lens_configuration.tsx           |  1 +
 .../lens_configuration_flyout.tsx             | 87 ++++++++++---------
 4 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/src/plugins/unified_histogram/public/chart/histogram.tsx b/src/plugins/unified_histogram/public/chart/histogram.tsx
index 61320c627bb13c..63a0c9897b8c74 100644
--- a/src/plugins/unified_histogram/public/chart/histogram.tsx
+++ b/src/plugins/unified_histogram/public/chart/histogram.tsx
@@ -146,6 +146,7 @@ export function Histogram({
   const chartCss = css`
     position: relative;
     flex-grow: 1;
+    margin-block: ${euiTheme.size.xs};
 
     & > div {
       height: 100%;
diff --git a/x-pack/plugins/lens/public/app_plugin/app.scss b/x-pack/plugins/lens/public/app_plugin/app.scss
index bd143f3245e930..7e78a24f10c910 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.scss
+++ b/x-pack/plugins/lens/public/app_plugin/app.scss
@@ -38,3 +38,7 @@
     }
   }
 }
+
+.lnsEditConfigurationFlyout {
+  background: none;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
index adf3aec8604392..4b4816823604d4 100644
--- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
@@ -113,6 +113,7 @@ export function getEditLensConfiguration(
           defaultMessage: 'Edit configuration',
         })}
         size="s"
+        className="lnsEditConfigurationFlyout"
         hideCloseButton
       >
         <Provider store={lensStore}>
diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
index 67e3e8c564e180..24ef84fbcc5514 100644
--- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
@@ -7,7 +7,9 @@
 
 import React, { useMemo } from 'react';
 import {
+  EuiButtonEmpty,
   EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,6 +18,7 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import type { CoreStart } from '@kbn/core/public';
 import type { Datatable } from '@kbn/expressions-plugin/public';
@@ -125,46 +128,48 @@ export function LensEditConfigurationFlyout({
     onUpdateStateCb: updateAll,
   };
   return (
-    <EuiFlyoutBody
-      className="lnsEditFlyoutBody"
-      css={css`
-        .euiFlyoutBody__overflowContent {
-          padding: ${euiTheme.size.s};
-        }
-      `}
-    >
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            iconType="menuRight"
-            iconSize="m"
-            size="xs"
-            onClick={closeFlyout}
-            data-test-subj="collapseFlyoutButton"
-            aria-controls="lens-config-close-button"
-            aria-expanded="true"
-            aria-label={i18n.translate('xpack.lens.config.closeFlyoutAriaLabel', {
-              defaultMessage: 'Close flyout',
-            })}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiCallOut
-            title={i18n.translate('xpack.lens.config.configFlyoutCallout', {
-              defaultMessage: 'SQL currently offers limited configuration options',
-            })}
-            iconType="iInCircle"
-          />
-          <EuiSpacer size="m" />
-          <VisualizationToolbar
-            activeVisualization={activeVisualization}
-            framePublicAPI={framePublicAPI}
-            onUpdateStateCb={updateAll}
-          />
-          <EuiSpacer size="m" />
-          <ConfigPanelWrapper {...layerPanelsProps} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlyoutBody>
+    <>
+      <EuiFlyoutBody
+        className="lnsEditFlyoutBody"
+        css={css`
+          .euiFlyoutBody__overflowContent {
+            padding: ${euiTheme.size.s};
+          }
+        `}
+      >
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem>
+            <EuiCallOut
+              size="s"
+              title={i18n.translate('xpack.lens.config.configFlyoutCallout', {
+                defaultMessage: 'SQL currently offers limited configuration options',
+              })}
+              iconType="iInCircle"
+            />
+            <EuiSpacer size="m" />
+            <VisualizationToolbar
+              activeVisualization={activeVisualization}
+              framePublicAPI={framePublicAPI}
+              onUpdateStateCb={updateAll}
+            />
+            <EuiSpacer size="m" />
+            <ConfigPanelWrapper {...layerPanelsProps} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty
+          onClick={closeFlyout}
+          data-test-subj="collapseFlyoutButton"
+          aria-controls="lens-config-close-button"
+          aria-expanded="true"
+          aria-label={i18n.translate('xpack.lens.config.closeFlyoutAriaLabel', {
+            defaultMessage: 'Close flyout',
+          })}
+        >
+          <FormattedMessage id="xpack.lens.config.closeFlyoutLabel" defaultMessage="Close" />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </>
   );
 }