[ES|QL] Design changes for the inline editing flyout

stratoula · Oct 26, 2023 · e531cb1 · e531cb1
1 parent 86d4d37
commit e531cb1
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 153 deletions.
diff --git a/packages/kbn-text-based-editor/src/editor_footer.tsx b/packages/kbn-text-based-editor/src/editor_footer.tsx
@@ -280,6 +280,7 @@ export const EditorFooter = memo(function EditorFooter({
             onClick={runQuery}
             isDisabled={Boolean(disableSubmitAction)}
             data-test-subj="TextBasedLangEditor-run-query-button"
+            minWidth={hasSmallerSpace ? false : undefined}
           >
             <EuiFlexGroup
               gutterSize="xs"

diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/flyout_wrapper.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/flyout_wrapper.tsx
@@ -12,6 +12,7 @@ import {
   EuiFlexItem,
   EuiFlyoutBody,
   EuiFlyoutFooter,
+  EuiFlyoutHeader,
   EuiTitle,
   EuiIcon,
   EuiToolTip,
@@ -27,14 +28,60 @@ import type { FlyoutWrapperProps } from './types';
 export const FlyoutWrapper = ({
   children,
   attributesChanged,
-  isInlineFooterVisible,
+  isInlineFlyoutVisible,
+  isScrollable,
   displayFlyoutHeader,
   onCancel,
   navigateToLensEditor,
   onApply,
 }: FlyoutWrapperProps) => {
   return (
     <>
+      {isInlineFlyoutVisible && displayFlyoutHeader && (
+        <EuiFlyoutHeader
+          hasBorder
+          css={css`
+            pointer-events: auto;
+          `}
+          data-test-subj="editFlyoutHeader"
+        >
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="xs">
+                <EuiFlexItem grow={false}>
+                  <EuiTitle size="xs">
+                    <h2 id="Edit visualization">
+                      {i18n.translate('xpack.lens.config.editVisualizationLabel', {
+                        defaultMessage: 'Edit visualization',
+                      })}
+                    </h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiToolTip
+                    content={i18n.translate('xpack.lens.config.experimentalLabel', {
+                      defaultMessage:
+                        'Technical preview, ES|QL currently offers limited configuration options',
+                    })}
+                  >
+                    <EuiIcon type="beaker" size="m" />
+                  </EuiToolTip>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            {navigateToLensEditor && (
+              <EuiFlexItem grow={false}>
+                <EuiLink onClick={navigateToLensEditor} data-test-subj="navigateToLensEditorLink">
+                  {i18n.translate('xpack.lens.config.editLinkLabel', {
+                    defaultMessage: 'Edit in Lens',
+                  })}
+                </EuiLink>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlyoutHeader>
+      )}
+
       <EuiFlyoutBody
         className="lnsEditFlyoutBody"
         css={css`
@@ -52,61 +99,14 @@ export const FlyoutWrapper = ({
           }
           .euiFlyoutBody__overflowContent {
             padding: 0;
+            block-size: 100%;
+            overflow: ${isScrollable ? 'visible' : 'hidden'};
           }
         `}
       >
-        <EuiFlexGroup gutterSize="none" direction="column">
-          {displayFlyoutHeader && (
-            <EuiFlexItem
-              data-test-subj="editFlyoutHeader"
-              css={css`
-                padding: ${euiThemeVars.euiSizeL};
-                border-block-end: 1px solid ${euiThemeVars.euiBorderColor};
-              `}
-            >
-              <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
-                <EuiFlexItem grow={false}>
-                  <EuiFlexGroup alignItems="center" gutterSize="xs">
-                    <EuiFlexItem grow={false}>
-                      <EuiTitle size="xs">
-                        <h2 id="Edit visualization">
-                          {i18n.translate('xpack.lens.config.editVisualizationLabel', {
-                            defaultMessage: 'Edit visualization',
-                          })}
-                        </h2>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiToolTip
-                        content={i18n.translate('xpack.lens.config.experimentalLabel', {
-                          defaultMessage:
-                            'Technical preview, ES|QL currently offers limited configuration options',
-                        })}
-                      >
-                        <EuiIcon type="beaker" size="m" />
-                      </EuiToolTip>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-                {navigateToLensEditor && (
-                  <EuiFlexItem grow={false}>
-                    <EuiLink
-                      onClick={navigateToLensEditor}
-                      data-test-subj="navigateToLensEditorLink"
-                    >
-                      {i18n.translate('xpack.lens.config.editLinkLabel', {
-                        defaultMessage: 'Edit in Lens',
-                      })}
-                    </EuiLink>
-                  </EuiFlexItem>
-                )}
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          )}
-          {children}
-        </EuiFlexGroup>
+        {children}`
       </EuiFlyoutBody>
-      {isInlineFooterVisible && (
+      {isInlineFlyoutVisible && (
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx
@@ -24,7 +24,7 @@ export function LayerConfiguration({
   datasourceMap,
   datasourceId,
   framePublicAPI,
-  setIsInlineFlyoutFooterVisible,
+  setIsInlineFlyoutVisible,
 }: LayerConfigurationProps) {
   const dispatch = useLensDispatch();
   const { euiTheme } = useEuiTheme();
@@ -56,7 +56,7 @@ export function LayerConfiguration({
     uiActions: startDependencies.uiActions,
     hideLayerHeader: datasourceId === 'textBased',
     indexPatternService,
-    setIsInlineFlyoutFooterVisible,
+    setIsInlineFlyoutVisible,
   };
   return (
     <EuiFlexItem

diff --git a/.../plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx b/.../plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx
@@ -123,6 +123,7 @@ describe('LensEditConfigurationFlyout', () => {
     const newProps = {
       ...props,
       displayFlyoutHeader: true,
+      isInlineFlyoutVisible: true,
       navigateToLensEditor: navigateToLensEditorSpy,
     };
     const { instance } = await prepareAndMountComponent(newProps);