[Console] Actions menu alignment (#47227)

* Fix default font size alignment

* Git update newline behaviour

* Fix console menu for IE11

* Slightly smarter algorithm for discovering space

* - Move inline styles to SCSS
- Clean up use of formatted message in aria-label
- Remove unused prop from component

* Set flex group to not use responsive layout optimization

src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx

@@ -19,7 +19,7 @@
 
 import React, { Component } from 'react';
 
-import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
+import { EuiIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -103,18 +103,16 @@ export class ConsoleMenu extends Component<Props, State> {
 
   render() {
     const button = (
-      <EuiButtonIcon
-        iconType="wrench"
+      <button
+        className="euiButtonIcon--primary"
         onClick={this.onButtonClick}
         data-test-subj="toggleConsoleMenu"
-        // @ts-ignore
-        aria-label={
-          <FormattedMessage
-            id="console.requestOptionsButtonAriaLabel"
-            defaultMessage="Request options"
-          />
-        }
-      />
+        aria-label={i18n.translate('console.requestOptionsButtonAriaLabel', {
+          defaultMessage: 'Request options',
+        })}
+      >
+        <EuiIcon type="wrench" />
+      </button>
     );
 
     const items = [

src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 
 import $ from 'jquery';
 
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useAppContext } from '../../../../context';
 import { useUIAceKeyboardMode } from '../use_ui_ace_keyboard_mode';
 import { ConsoleMenu } from '../../../../components';
@@ -173,33 +173,43 @@ function _Editor({ previousStateLocation = 'stored' }: EditorProps) {
     <div style={abs} className="conApp">
       <div className="conApp__editor">
         <ul className="conApp__autoComplete" id="autocomplete" />
-        <div ref={actionsRef} className="conApp__editorActions" id="ConAppEditorActions">
-          <EuiToolTip
-            content={i18n.translate('console.sendRequestButtonTooltip', {
-              defaultMessage: 'click to send request',
-            })}
-          >
-            <button
-              onClick={sendCurrentRequestToES}
-              data-test-subj="sendRequestButton"
-              className="conApp__editorActionButton conApp__editorActionButton--success"
+        <EuiFlexGroup
+          ref={actionsRef}
+          className="conApp__editorActions"
+          id="ConAppEditorActions"
+          gutterSize="none"
+          responsive={false}
+        >
+          <EuiFlexItem>
+            <EuiToolTip
+              content={i18n.translate('console.sendRequestButtonTooltip', {
+                defaultMessage: 'click to send request',
+              })}
             >
-              <EuiIcon type="play" />
-            </button>
-          </EuiToolTip>
-          <ConsoleMenu
-            getCurl={(cb: any) => {
-              editorInstanceRef.current!.getRequestsAsCURL(cb);
-            }}
-            getDocumentation={() => {
-              return getDocumentation(editorInstanceRef.current!, docLinkVersion);
-            }}
-            autoIndent={(event: any) => {
-              autoIndent(editorInstanceRef.current!, event);
-            }}
-            addNotification={({ title }) => notifications.toasts.add({ title })}
-          />
-        </div>
+              <button
+                onClick={sendCurrentRequestToES}
+                data-test-subj="sendRequestButton"
+                className="conApp__editorActionButton conApp__editorActionButton--success"
+              >
+                <EuiIcon type="play" />
+              </button>
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <ConsoleMenu
+              getCurl={(cb: any) => {
+                editorInstanceRef.current!.getRequestsAsCURL(cb);
+              }}
+              getDocumentation={() => {
+                return getDocumentation(editorInstanceRef.current!, docLinkVersion);
+              }}
+              autoIndent={(event: any) => {
+                autoIndent(editorInstanceRef.current!, event);
+              }}
+              addNotification={({ title }) => notifications.toasts.add({ title })}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
         <div
           ref={editorRef}
           id="ConAppEditor"

src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts

@@ -19,6 +19,11 @@
 
 export function subscribeResizeChecker(ResizeChecker: any, $el: any, ...editors: any[]) {
   const checker = new ResizeChecker($el);
-  checker.on('resize', () => editors.forEach(e => e.resize()));
+  checker.on('resize', () =>
+    editors.forEach(e => {
+      e.resize();
+      if (e.updateActionsBar) e.updateActionsBar();
+    })
+  );
   return () => checker.destroy();
 }

src/legacy/core_plugins/console/public/quarantined/_app.scss

@@ -37,12 +37,17 @@
 }
 
 .conApp__editorActions {
+  button {
+    line-height: inherit;
+  }
   position: absolute;
   z-index: $euiZLevel1;
   top: 0;
   // Adjust for possible scrollbars
   right: $euiSize;
   line-height: 1;
+  // For IE11
+  min-width: 40px;
 }
 
 .conApp__editorActionButton {

src/legacy/core_plugins/console/public/quarantined/src/sense_editor/editor.js

@@ -624,26 +624,35 @@ export default function SenseEditor($el) {
         // pageY is relative to page, so subtract the offset
         // from pageY to get the new top value
         const offsetFromPage = editor.$el.offset().top;
-        let startRow = CURRENT_REQ_RANGE.start.row;
+        const startRow = CURRENT_REQ_RANGE.start.row;
         const startColumn = CURRENT_REQ_RANGE.start.column;
         const session = editor.session;
         const firstLine = session.getLine(startRow);
-
-        if (firstLine.length > session.getWrapLimit() - 5) {
-          // overlap first row
-          if (startRow > 0) {
-            startRow--;
-          }
-          else {
-            startRow++;
-          }
-        }
-
-
-        const topOfReq = editor.renderer.textToScreenCoordinates(startRow, startColumn).pageY - offsetFromPage;
+        const maxLineLength = session.getWrapLimit() - 5;
+        const isWrapping = firstLine.length > maxLineLength;
+        const getScreenCoords = (row) => editor.renderer.textToScreenCoordinates(row, startColumn).pageY - offsetFromPage;
+        const topOfReq = getScreenCoords(startRow);
 
         if (topOfReq >= 0) {
-          return set(topOfReq);
+          let offset = 0;
+          if (isWrapping) {
+            // Try get the line height of the text area in pixels.
+            const textArea = editor.$el.find('textArea');
+            const hasRoomOnNextLine = session.getLine(startRow + 1).length < maxLineLength;
+            if (textArea && hasRoomOnNextLine) {
+              // Line height + the number of wraps we have on a line.
+              offset += (session.getRowLength(startRow) * textArea.height());
+            } else {
+              if (startRow > 0) {
+                set(getScreenCoords(startRow - 1, startColumn));
+                return;
+              }
+              set(getScreenCoords(startRow + 1, startColumn));
+              return;
+            }
+          }
+          set(topOfReq + offset);
+          return;
         }
 
         const bottomOfReq = editor.renderer.textToScreenCoordinates(
@@ -652,7 +661,8 @@ export default function SenseEditor($el) {
         ).pageY - offsetFromPage;
 
         if (bottomOfReq >= 0) {
-          return set(0);
+          set(0);
+          return;
         }
       }