[Unified search] Make resizable button as the EUI one

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

@@ -39,6 +39,7 @@ import {
 import { MemoizedDocumentation, DocumentationSections } from './documentation';
 import { useDebounceWithOptions, parseErrors, getDocumentationSections } from './helpers';
 import { EditorFooter } from './editor_footer';
+import { ResizableButton } from './resizable_button';
 
 import './overwrite.scss';
 
@@ -90,7 +91,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 }>
@@ -128,11 +128,9 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         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);
@@ -597,17 +595,7 @@ 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} />
       )}
     </>
   );

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

@@ -0,0 +1,79 @@
+
+.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%, 1px);
+  }
+
+  //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,30 @@
+/*
+ * 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,
+}: {
+  onMouseDownResizeHandler: (mouseDownEvent: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}) {
+  const setFocus = (e: React.MouseEvent<HTMLDivElement>) => e.currentTarget.focus();
+
+  return (
+    <div
+      data-test-subj="unifiedTextLangEditor-resize"
+      tabIndex={-1}
+      className="unifiedTextLangEditor--resizableButton"
+      onMouseDown={onMouseDownResizeHandler}
+      onClick={setFocus}
+      aria-hidden="true"
+    />
+  );
+}