[Lens] Move configuration popover to flyout (#76046)

* Moving to a Flyout implementation
* Fix up inner layout of flyout
* Fix up form rows

x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss

@@ -11,7 +11,7 @@
 
 .lnsFrameLayout__pageContent {
   display: flex;
-  overflow: auto;
+  overflow: hidden;
   flex-grow: 1;
 }
 
@@ -39,11 +39,16 @@
 }
 
 .lnsFrameLayout__sidebar--right {
-  @include euiScrollBar;
+  flex-basis: 25%;
   background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk);
   min-width: $lnsPanelMinWidth + $euiSizeXL;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: $euiSize 0 $euiSize $euiSize;
+  max-width: $euiFormMaxWidth + $euiSizeXXL;
   max-height: 100%;
+
+  .lnsConfigPanel {
+    @include euiScrollBar;
+    padding: $euiSize 0 $euiSize $euiSize;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import './config_panel.scss';
 
 import React, { useMemo, memo } from 'react';
 import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui';

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss

@@ -0,0 +1,29 @@
+@import '@elastic/eui/src/components/flyout/variables';
+@import '@elastic/eui/src/components/flyout/mixins';
+
+.lnsDimensionContainer {
+  // Use the EuiFlyout style
+  @include euiFlyout;
+  // But with custom positioning to keep it within the sidebar contents
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
+}
+
+.lnsDimensionContainer--noAnimation {
+  animation: none;
+}
+
+.lnsDimensionContainer__footer,
+.lnsDimensionContainer__header {
+  padding: $euiSizeS;
+}
+
+.lnsDimensionContainer__trigger {
+  width: 100%;
+  display: block;
+  word-break: break-word;
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx

@@ -0,0 +1,134 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import './dimension_container.scss';
+
+import React, { useState, useEffect } from 'react';
+import {
+  EuiFlyoutHeader,
+  EuiFlyoutFooter,
+  EuiTitle,
+  EuiButtonEmpty,
+  EuiFlexItem,
+  EuiFocusTrap,
+} from '@elastic/eui';
+
+import classNames from 'classnames';
+import { i18n } from '@kbn/i18n';
+import { VisualizationDimensionGroupConfig } from '../../../types';
+import { DimensionContainerState } from './types';
+
+export function DimensionContainer({
+  dimensionContainerState,
+  setDimensionContainerState,
+  groups,
+  accessor,
+  groupId,
+  trigger,
+  panel,
+  panelTitle,
+}: {
+  dimensionContainerState: DimensionContainerState;
+  setDimensionContainerState: (newState: DimensionContainerState) => void;
+  groups: VisualizationDimensionGroupConfig[];
+  accessor: string;
+  groupId: string;
+  trigger: React.ReactElement;
+  panel: React.ReactElement;
+  panelTitle: React.ReactNode;
+}) {
+  const [openByCreation, setIsOpenByCreation] = useState(
+    dimensionContainerState.openId === accessor
+  );
+  const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
+  const [flyoutIsVisible, setFlyoutIsVisible] = useState(false);
+
+  const noMatch = dimensionContainerState.isOpen
+    ? !groups.some((d) => d.accessors.includes(accessor))
+    : false;
+
+  const closeFlyout = () => {
+    setDimensionContainerState({
+      isOpen: false,
+      openId: null,
+      addingToGroupId: null,
+    });
+    setIsOpenByCreation(false);
+    setFocusTrapIsEnabled(false);
+    setFlyoutIsVisible(false);
+  };
+
+  const openFlyout = () => {
+    setFlyoutIsVisible(true);
+    setTimeout(() => {
+      setFocusTrapIsEnabled(true);
+    }, 255);
+  };
+
+  const flyoutShouldBeOpen =
+    dimensionContainerState.isOpen &&
+    (dimensionContainerState.openId === accessor ||
+      (noMatch && dimensionContainerState.addingToGroupId === groupId));
+
+  useEffect(() => {
+    if (flyoutShouldBeOpen) {
+      openFlyout();
+    }
+  });
+
+  useEffect(() => {
+    if (!flyoutShouldBeOpen) {
+      if (flyoutIsVisible) {
+        setFlyoutIsVisible(false);
+      }
+      if (focusTrapIsEnabled) {
+        setFocusTrapIsEnabled(false);
+      }
+    }
+  }, [flyoutShouldBeOpen, flyoutIsVisible, focusTrapIsEnabled]);
+
+  const flyout = flyoutIsVisible && (
+    <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
+      <div
+        role="dialog"
+        aria-labelledby="lnsDimensionContainerTitle"
+        className={classNames('lnsDimensionContainer', {
+          'lnsDimensionContainer--noAnimation': openByCreation,
+        })}
+      >
+        <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
+          <EuiTitle size="xs">
+            <EuiButtonEmpty
+              onClick={closeFlyout}
+              data-test-subj="lns-indexPattern-dimensionContainerTitle"
+              id="lnsDimensionContainerTitle"
+              iconType="sortLeft"
+              flush="left"
+            >
+              <strong>{panelTitle}</strong>
+            </EuiButtonEmpty>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlexItem className="eui-yScrollWithShadows" grow={1}>
+          {panel}
+        </EuiFlexItem>
+        <EuiFlyoutFooter className="lnsDimensionContainer__footer">
+          <EuiButtonEmpty flush="left" size="s" iconType="cross" onClick={closeFlyout}>
+            {i18n.translate('xpack.lens.dimensionContainer.close', {
+              defaultMessage: 'Close',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </div>
+    </EuiFocusTrap>
+  );
+
+  return (
+    <>
+      <div className="lnsDimensionContainer__trigger">{trigger}</div>
+      {flyout}
+    </>
+  );
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss → x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss

@@ -52,6 +52,5 @@
 }
 
 .lnsLayerPanel__styleEditor {
-  width: $euiSize * 30;
-  padding: $euiSizeS;
+  padding: 0 $euiSizeS $euiSizeS;
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx

@@ -13,7 +13,7 @@ import {
   DatasourceMock,
 } from '../../mocks';
 import { ChildDragDropProvider } from '../../../drag_drop';
-import { EuiFormRow, EuiPopover } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
 import { mount } from 'enzyme';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { Visualization } from '../../../types';
@@ -203,7 +203,7 @@ describe('LayerPanel', () => {
       expect(group).toHaveLength(1);
     });
 
-    it('should render the datasource and visualization panels inside the dimension popover', () => {
+    it('should render the datasource and visualization panels inside the dimension container', () => {
       mockVisualization.getConfiguration.mockReturnValueOnce({
         groups: [
           {
@@ -221,16 +221,16 @@ describe('LayerPanel', () => {
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
 
-      const group = component.find('DimensionPopover');
+      const group = component.find('DimensionContainer');
       const panel = mount(group.prop('panel'));
 
-      expect(panel.find('EuiTabbedContent').prop('tabs')).toHaveLength(2);
+      expect(panel.children()).toHaveLength(2);
     });
 
-    it('should keep the popover open when configuring a new dimension', () => {
+    it('should keep the DimensionContainer open when configuring a new dimension', () => {
       /**
        * The ID generation system for new dimensions has been messy before, so
-       * this tests that the ID used in the first render is used to keep the popover
+       * this tests that the ID used in the first render is used to keep the container
        * open in future renders
        */
       (generateId as jest.Mock).mockReturnValueOnce(`newid`);
@@ -264,20 +264,20 @@ describe('LayerPanel', () => {
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
 
-      const group = component.find('DimensionPopover');
+      const group = component.find('DimensionContainer');
       const triggerButton = mountWithIntl(group.prop('trigger'));
       act(() => {
         triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
       });
       component.update();
 
-      expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
+      expect(component.find('EuiFlyoutHeader').exists()).toBe(true);
     });
 
-    it('should close the popover when the active visualization changes', () => {
+    it('should close the DimensionContainer when the active visualization changes', () => {
       /**
        * The ID generation system for new dimensions has been messy before, so
-       * this tests that the ID used in the first render is used to keep the popover
+       * this tests that the ID used in the first render is used to keep the container
        * open in future renders
        */
 
@@ -312,18 +312,18 @@ describe('LayerPanel', () => {
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
 
-      const group = component.find('DimensionPopover');
+      const group = component.find('DimensionContainer');
       const triggerButton = mountWithIntl(group.prop('trigger'));
       act(() => {
         triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
       });
       component.update();
-      expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
+      expect(component.find('EuiFlyoutHeader').exists()).toBe(true);
       act(() => {
         component.setProps({ activeVisualizationId: 'vis2' });
       });
       component.update();
-      expect(component.find(EuiPopover).prop('isOpen')).toBe(false);
+      expect(component.find('EuiFlyoutHeader').exists()).toBe(false);
     });
   });