Esql docs flyout expandable2

packages/kbn-language-documentation-popover/src/components/as_inline/index.tsx

@@ -15,12 +15,11 @@ import type { LanguageDocumentationSections } from '../../types';
 import { getESQLDocsSections } from '../../sections';
 
 interface DocumentationInlineProps {
+  height: number;
   searchInDescription?: boolean;
 }
 
-const MAX_HEIGHT = 250;
-
-function DocumentationInline({ searchInDescription }: DocumentationInlineProps) {
+function DocumentationInline({ searchInDescription, height }: DocumentationInlineProps) {
   const theme = useEuiTheme();
   const [documentationSections, setDocumentationSections] =
     useState<LanguageDocumentationSections>();
@@ -56,7 +55,7 @@ function DocumentationInline({ searchInDescription }: DocumentationInlineProps)
     <div
       css={css`
         padding: ${theme.euiTheme.size.base};
-        max-height: ${MAX_HEIGHT}px;
+        max-height: ${height}px;
         overflow-y: auto;
         ${scrollBarStyles}
       `}

packages/kbn-text-based-editor/src/editor_footer/index.tsx

@@ -50,7 +50,11 @@ interface EditorFooterProps {
   updateQuery: (qs: string) => void;
   isHistoryOpen: boolean;
   setIsHistoryOpen: (status: boolean) => void;
+  isLanguageComponentOpen: boolean;
+  setIsLanguageComponentOpen: (status: boolean) => void;
   measuredContainerWidth: number;
+  resizableContainerButton?: JSX.Element;
+  resizableContainerHeight: number;
   hideRunQueryText?: boolean;
   editorIsInline?: boolean;
   isSpaceReduced?: boolean;
@@ -73,8 +77,12 @@ export const EditorFooter = memo(function EditorFooter({
   editorIsInline,
   isSpaceReduced,
   hideTimeFilterInfo,
+  resizableContainerButton,
+  resizableContainerHeight,
   isHistoryOpen,
   setIsHistoryOpen,
+  isLanguageComponentOpen,
+  setIsLanguageComponentOpen,
   hideQueryHistory,
   isInCompactMode,
   displayDocumentationAsFlyout,
@@ -84,7 +92,6 @@ export const EditorFooter = memo(function EditorFooter({
   const kibana = useKibana<TextBasedEditorDeps>();
   const { docLinks } = kibana.services;
   const [isErrorPopoverOpen, setIsErrorPopoverOpen] = useState(false);
-  const [isLanguageComponentOpen, setIsLanguageComponentOpen] = useState(false);
   const [isWarningPopoverOpen, setIsWarningPopoverOpen] = useState(false);
 
   const onUpdateAndSubmit = useCallback(
@@ -104,12 +111,12 @@ export const EditorFooter = memo(function EditorFooter({
   const toggleHistoryComponent = useCallback(() => {
     setIsHistoryOpen(!isHistoryOpen);
     setIsLanguageComponentOpen(false);
-  }, [isHistoryOpen, setIsHistoryOpen]);
+  }, [isHistoryOpen, setIsHistoryOpen, setIsLanguageComponentOpen]);
 
   const toggleLanguageComponent = useCallback(async () => {
     setIsLanguageComponentOpen(!isLanguageComponentOpen);
     setIsHistoryOpen(false);
-  }, [isLanguageComponentOpen, setIsHistoryOpen]);
+  }, [isLanguageComponentOpen, setIsHistoryOpen, setIsLanguageComponentOpen]);
 
   const limit = useMemo(() => getLimitFromESQLQuery(code), [code]);
 
@@ -338,15 +345,16 @@ export const EditorFooter = memo(function EditorFooter({
             containerCSS={styles.historyContainer}
             onUpdateAndSubmit={onUpdateAndSubmit}
             containerWidth={measuredContainerWidth}
-            isInCompactMode={isInCompactMode}
+            height={resizableContainerHeight}
           />
         </EuiFlexItem>
       )}
       {isLanguageComponentOpen && editorIsInline && (
         <EuiFlexItem grow={false}>
-          <LanguageDocumentationInline searchInDescription />
+          <LanguageDocumentationInline searchInDescription height={resizableContainerHeight} />
         </EuiFlexItem>
       )}
+      {resizableContainerButton}
     </EuiFlexGroup>
   );
 });

packages/kbn-text-based-editor/src/editor_footer/query_history.tsx

@@ -28,9 +28,6 @@ import { css, Interpolation, Theme } from '@emotion/react';
 import { type QueryHistoryItem, getHistoryItems } from '../history_local_storage';
 import { getReducedSpaceStyling, swapArrayElements } from './query_history_helpers';
 
-const CONTAINER_MAX_HEIGHT_EXPANDED = 190;
-const CONTAINER_MAX_HEIGHT_COMPACT = 250;
-
 export function QueryHistoryAction({
   toggleHistory,
   isHistoryOpen,
@@ -227,12 +224,12 @@ export function QueryHistory({
   containerCSS,
   containerWidth,
   onUpdateAndSubmit,
-  isInCompactMode,
+  height,
 }: {
   containerCSS: Interpolation<Theme>;
   containerWidth: number;
   onUpdateAndSubmit: (qs: string) => void;
-  isInCompactMode?: boolean;
+  height: number;
 }) {
   const theme = useEuiTheme();
   const scrollBarStyles = euiScrollBarStyles(theme);
@@ -342,7 +339,7 @@ export function QueryHistory({
     }
     border-bottom-left-radius: ${euiTheme.border.radius.medium};
     border-top-left-radius: ${euiTheme.border.radius.medium};
-    max-height: ${isInCompactMode ? CONTAINER_MAX_HEIGHT_COMPACT : CONTAINER_MAX_HEIGHT_EXPANDED}px;
+    max-height: ${height}px;
     overflow-y: auto;
     ${scrollBarStyles}
     ${extraStyling}

packages/kbn-text-based-editor/src/helpers.ts

@@ -14,6 +14,14 @@ import type { CoreStart } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import type { MapCache } from 'lodash';
+import {
+  EDITOR_MIN_HEIGHT,
+  EDITOR_MAX_HEIGHT,
+  RESIZABLE_CONTAINER_INITIAL_HEIGHT,
+} from './text_based_languages_editor.styles';
+
+const KEYCODE_ARROW_UP = 38;
+const KEYCODE_ARROW_DOWN = 40;
 
 export type MonacoMessage = monaco.editor.IMarkerData;
 
@@ -237,3 +245,64 @@ export const getESQLSources = async (dataViews: DataViewsPublicPluginStart, core
   ]);
   return [...localIndices, ...remoteIndices, ...integrations];
 };
+
+export const onMouseDownResizeHandler = (
+  mouseDownEvent: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent,
+  height: number,
+  setHeight: (height: number) => void,
+  secondPanelHeight?: number,
+  setSecondPanelHeight?: (height: number) => void
+) => {
+  function isMouseEvent(e: React.TouchEvent | React.MouseEvent): e is React.MouseEvent {
+    return e && 'pageY' in e;
+  }
+
+  const startSize = height;
+  const startPosition = isMouseEvent(mouseDownEvent)
+    ? mouseDownEvent?.pageY
+    : mouseDownEvent?.touches[0].pageY;
+
+  function onMouseMove(mouseMoveEvent: MouseEvent) {
+    const h = startSize - startPosition + mouseMoveEvent.pageY;
+    const firstPanelHeightValidated = Math.min(Math.max(h, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
+    setHeight(firstPanelHeightValidated);
+    if (setSecondPanelHeight && secondPanelHeight) {
+      const maxHeight = height + secondPanelHeight;
+      const secondPanelHeightValidated = Math.min(
+        Math.max(maxHeight - firstPanelHeightValidated, RESIZABLE_CONTAINER_INITIAL_HEIGHT),
+        maxHeight
+      );
+      setSecondPanelHeight?.(secondPanelHeightValidated);
+    }
+  }
+  function onMouseUp() {
+    document.body.removeEventListener('mousemove', onMouseMove);
+  }
+
+  document.body.addEventListener('mousemove', onMouseMove);
+  document.body.addEventListener('mouseup', onMouseUp, { once: true });
+};
+
+export const onKeyDownResizeHandler = (
+  keyDownEvent: React.KeyboardEvent,
+  height: number,
+  setHeight: (height: number) => void,
+  secondPanelHeight?: number,
+  setSecondPanelHeight?: (height: number) => void
+) => {
+  let h = height;
+  if (keyDownEvent.keyCode === KEYCODE_ARROW_UP || keyDownEvent.keyCode === KEYCODE_ARROW_DOWN) {
+    const step = keyDownEvent.keyCode === KEYCODE_ARROW_UP ? -10 : 10;
+    h = h + step;
+    const firstPanelHeightValidated = Math.min(Math.max(h, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
+    setHeight(firstPanelHeightValidated);
+    if (setSecondPanelHeight && secondPanelHeight) {
+      const maxHeight = height + secondPanelHeight;
+      const secondPanelHeightValidated = Math.min(
+        Math.max(maxHeight - firstPanelHeightValidated, RESIZABLE_CONTAINER_INITIAL_HEIGHT),
+        maxHeight
+      );
+      setSecondPanelHeight?.(secondPanelHeightValidated);
+    }
+  }
+};

packages/kbn-text-based-editor/src/resizable_button.tsx

@@ -14,7 +14,6 @@ import { css } from '@emotion/react';
 export function ResizableButton({
   onMouseDownResizeHandler,
   onKeyDownResizeHandler,
-  editorIsInline,
 }: {
   onMouseDownResizeHandler: (
     mouseDownEvent: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent
@@ -30,10 +29,7 @@ export function ResizableButton({
       onTouchStart={onMouseDownResizeHandler}
       indicator="border"
       css={css`
-        position: ${editorIsInline ? 'relative' : 'absolute'};
-        bottom: 0;
-        left: 0;
-        right: 0;
+        position: relative;
       `}
     />
   );

packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts

@@ -13,6 +13,10 @@ export const EDITOR_INITIAL_HEIGHT = 80;
 export const EDITOR_INITIAL_HEIGHT_INLINE_EDITING = 140;
 export const EDITOR_MIN_HEIGHT = 40;
 export const EDITOR_MAX_HEIGHT = 400;
+// resizeable container initial height
+// the resizable container is the container that holds the history component or the inline docs
+// they are never open simultaneously
+export const RESIZABLE_CONTAINER_INITIAL_HEIGHT = 190;
 
 export const textBasedLanguageEditorStyles = (
   euiTheme: EuiThemeComputed,
@@ -23,7 +27,9 @@ export const textBasedLanguageEditorStyles = (
   editorIsInline: boolean,
   hasOutline: boolean
 ) => {
-  const bottomContainerBorderColor = hasErrors ? euiTheme.colors.danger : euiTheme.colors.primary;
+  const bottomContainerBorderColor = hasErrors
+    ? euiTheme.colors.danger
+    : euiTheme.colors.lightestShade;
 
   return {
     editorContainer: {