[Unified search] Make resizable button as the EUI one (#137698)

* [Unified search] Make resizable button as the EUI one

* Fix jest test

* Add keyboard support

* Convert to button, move to the border

* Address PR comments

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

* Fix the margin

* recommended css changes

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Michael Marcialis <michael.marcialis@elastic.co>

src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx

@@ -44,6 +44,7 @@ import {
   getDocumentationSections,
 } from './helpers';
 import { EditorFooter } from './editor_footer';
+import { ResizableButton } from './resizable_button';
 
 import './overwrite.scss';
 
@@ -61,6 +62,9 @@ const FONT_WIDTH = 8;
 const EDITOR_ONE_LINER_UNUSED_SPACE = 180;
 const EDITOR_ONE_LINER_UNUSED_SPACE_WITH_ERRORS = 220;
 
+const KEYCODE_ARROW_UP = 38;
+const KEYCODE_ARROW_DOWN = 40;
+
 const languageId = (language: string) => {
   switch (language) {
     case 'sql':
@@ -95,7 +99,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const [isCompactFocused, setIsCompactFocused] = useState(isCodeEditorExpanded);
   const [isCodeEditorExpandedFocused, setIsCodeEditorExpandedFocused] = useState(false);
   const [isWordWrapped, setIsWordWrapped] = useState(true);
-  const [userDrags, setUserDrags] = useState(false);
   const [isHelpOpen, setIsHelpOpen] = useState<boolean>(false);
   const [editorErrors, setEditorErrors] = useState<
     Array<{ startLineNumber: number; message: string }>
@@ -125,19 +128,17 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
 
   // When the editor is on full size mode, the user can resize the height of the editor.
   const onMouseDownResizeHandler = useCallback(
-    (mouseDownEvent: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    (mouseDownEvent) => {
       const startSize = editorHeight;
       const startPosition = mouseDownEvent.pageY;
 
       function onMouseMove(mouseMoveEvent: MouseEvent) {
         const height = startSize - startPosition + mouseMoveEvent.pageY;
         const validatedHeight = Math.min(Math.max(height, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
         setEditorHeight(validatedHeight);
-        setUserDrags(true);
       }
       function onMouseUp() {
         document.body.removeEventListener('mousemove', onMouseMove);
-        setUserDrags(false);
       }
 
       document.body.addEventListener('mousemove', onMouseMove);
@@ -146,6 +147,22 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     [editorHeight]
   );
 
+  const onKeyDownResizeHandler = useCallback(
+    (keyDownEvent) => {
+      let height = editorHeight;
+      if (
+        keyDownEvent.keyCode === KEYCODE_ARROW_UP ||
+        keyDownEvent.keyCode === KEYCODE_ARROW_DOWN
+      ) {
+        const step = keyDownEvent.keyCode === KEYCODE_ARROW_UP ? -10 : 10;
+        height = height + step;
+        const validatedHeight = Math.min(Math.max(height, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
+        setEditorHeight(validatedHeight);
+      }
+    },
+    [editorHeight]
+  );
+
   const updateHeight = () => {
     if (editor1.current) {
       const linesCount = editorModel.current?.getLineCount() || 1;
@@ -601,17 +618,10 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         <EditorFooter lines={lines} containerCSS={styles.bottomContainer} errors={editorErrors} />
       )}
       {isCodeEditorExpanded && (
-        <div css={styles.dragResizeContainer} onMouseDown={onMouseDownResizeHandler}>
-          {!userDrags && (
-            <EuiButtonIcon
-              color="primary"
-              iconType="grab"
-              aria-label="Resize editor"
-              data-test-subj="unifiedTextLangEditor-resize"
-              css={styles.dragResizeButton}
-            />
-          )}
-        </div>
+        <ResizableButton
+          onMouseDownResizeHandler={onMouseDownResizeHandler}
+          onKeyDownResizeHandler={onKeyDownResizeHandler}
+        />
       )}
     </>
   );

src/plugins/unified_search/public/query_string_input/text_based_languages_editor/resizable_button.scss

@@ -0,0 +1,87 @@
+.unifiedTextLangEditor--resizableButtonContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.unifiedTextLangEditor--resizableButton {
+  position: relative;
+  flex-shrink: 0;
+  z-index: 1;
+  cursor: row-resize;
+  height: $euiSize;
+  margin-top: -($euiSize / 2);
+  margin-bottom: -($euiSize / 2);
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $euiSizeM;
+    height: 1px;
+    background-color: $euiColorDarkestShade;
+    transition: (
+      width $euiAnimSpeedFast ease,
+      height $euiAnimSpeedFast ease,
+      transform $euiAnimSpeedFast ease,
+      background-color $euiAnimSpeedFast ease
+    );
+  }
+
+  &:before {
+    transform: translate(-50%, -2px);
+  }
+
+  &:after {
+    transform: translate(-50%, 2px);
+  }
+
+  //Lighten the "grab" icon on :hover
+  &:hover:not(:disabled) {
+    &:before,
+    &:after {
+      background-color: $euiColorMediumShade;
+      transition-delay: $euiAnimSpeedFast; //Delay transition on hover so animation is not accidentally triggered on mouse over
+    }
+  }
+
+  //Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
+  &:focus:not(:disabled) {
+    background-color: transparentize($euiColorPrimary, .9);
+
+    &:before,
+    &:after {
+      background-color: $euiColorPrimary;
+      // Overrides default transition so that "grab" icon background-color doesn't animate
+      transition: (
+        width $euiAnimSpeedFast ease,
+        height $euiAnimSpeedFast ease,
+        transform $euiAnimSpeedFast ease
+      );
+      transition-delay: $euiAnimSpeedFast / 2;
+    }
+  }
+
+  //Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    &:before,
+    &:after {
+      width: 100%;
+    }
+
+    &:before {
+      transform: translate(-50%, -1px);
+    }
+
+    &:after {
+      transform: translate(-50%, 0);
+    }
+  }
+}

src/plugins/unified_search/public/query_string_input/text_based_languages_editor/resizable_button.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import './resizable_button.scss';
+
+export function ResizableButton({
+  onMouseDownResizeHandler,
+  onKeyDownResizeHandler,
+}: {
+  onMouseDownResizeHandler: (
+    mouseDownEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onKeyDownResizeHandler: (keyDownEvernt: React.KeyboardEvent) => void;
+}) {
+  const setFocus = (e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.focus();
+
+  return (
+    <div className="unifiedTextLangEditor--resizableButtonContainer">
+      <button
+        data-test-subj="unifiedTextLangEditor-resize"
+        className="unifiedTextLangEditor--resizableButton"
+        onMouseDown={onMouseDownResizeHandler}
+        onKeyDown={onKeyDownResizeHandler}
+        onClick={setFocus}
+      />
+    </div>
+  );
+}

src/plugins/unified_search/public/query_string_input/text_based_languages_editor/text_based_languages_editor.styles.ts

@@ -79,6 +79,7 @@ export const textBasedLanguagedEditorStyles = (
       position: 'relative' as 'relative', // cast string to type 'relative',
       marginTop: 0,
       marginLeft: 0,
+      marginBottom: 0,
       borderBottomLeftRadius: '6px',
       borderBottomRightRadius: '6px',
     },

src/plugins/unified_search/public/search_bar/search_bar.styles.ts

@@ -13,6 +13,7 @@ export const searchBarStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
     uniSearchBar: css`
       padding: ${euiTheme.size.s};
+      position: relative;
     `,
     detached: css`
       border-bottom: ${euiTheme.border.thin};