[Logstash Pipeline Management] Fix bottom border of Pipeline Editor (#18834)

* Change pipeline editor markup so bottom border doesn't hide text on last line.

* Add constants for scroll margin size.

* Add comments to editor constants.

* Add PX units to constant names.

x-pack/plugins/grokdebugger/common/constants/editor.js

@@ -9,6 +9,6 @@ export const EDITOR = {
   PATTERN_MAX_LINES: 10,
   SAMPLE_DATA_MIN_LINES: 3,
   SAMPLE_DATA_MAX_LINES: 50,
-  SCROLL_MARGIN_TOP: 4,
-  SCROLL_MARGIN_BOTTOM: 4,
+  SCROLL_MARGIN_TOP_PX: 4,
+  SCROLL_MARGIN_BOTTOM_PX: 4,
 };

x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js

@@ -15,8 +15,8 @@ export function applyEditorOptions(editor, minLines, maxLines) {
     * typing experience.
     */
   editor.renderer.setScrollMargin(
-    EDITOR.SCROLL_MARGIN_TOP,
-    EDITOR.SCROLL_MARGIN_BOTTOM,
+    EDITOR.SCROLL_MARGIN_TOP_PX,
+    EDITOR.SCROLL_MARGIN_BOTTOM_PX,
     0,
     0
   );

x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js

@@ -39,8 +39,8 @@ describe('applyEditorOptions', () => {
     expect(setUseWrapMode.mock.calls[0][0]).toBe(true);
 
     expect(setScrollMargin.mock.calls).toHaveLength(1);
-    expect(setScrollMargin.mock.calls[0][0]).toEqual(EDITOR.SCROLL_MARGIN_TOP);
-    expect(setScrollMargin.mock.calls[0][1]).toEqual(EDITOR.SCROLL_MARGIN_BOTTOM);
+    expect(setScrollMargin.mock.calls[0][0]).toEqual(EDITOR.SCROLL_MARGIN_TOP_PX);
+    expect(setScrollMargin.mock.calls[0][1]).toEqual(EDITOR.SCROLL_MARGIN_BOTTOM_PX);
     expect(setScrollMargin.mock.calls[0][2]).toEqual(0);
     expect(setScrollMargin.mock.calls[0][3]).toEqual(0);
 

x-pack/plugins/logstash/common/constants/editor.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export const EDITOR = {
+  /*
+   * The space between the top of the editor's first-line characters
+   * and the top border of the editor.
+   */
+  PIPELINE_EDITOR_SCROLL_MARGIN_TOP_PX: 4,
+
+  /*
+   * The space between the bottom of the editor's last-line characters
+   * and the bottom border of the editor.
+   */
+  PIPELINE_EDITOR_SCROLL_MARGIN_BOTTOM_PX: 12,
+};

x-pack/plugins/logstash/common/constants/index.js

@@ -13,3 +13,4 @@ export { ES_SCROLL_SETTINGS } from './es_scroll_settings';
 export { TOOLTIPS } from './tooltips';
 export { PIPELINE } from './pipeline';
 export { MONITORING } from './monitoring';
+export { EDITOR } from './editor';

x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.html

@@ -98,16 +98,17 @@
           >
             Pipeline
           </label>
-          <div
-            class="pipeline-editor"
-            ruby-input
-            require-keys="true"
-            ui-ace="{
-              onLoad: aceLoaded
-            }"
-            ng-model="pipelineEdit.pipeline.pipeline"
-            data-test-subj="acePipeline"
-          ></div>
+          <div class="pipeline-editor">
+            <div
+              ruby-input
+              require-keys="true"
+              ui-ace="{
+                onLoad: aceLoaded
+              }"
+              ng-model="pipelineEdit.pipeline.pipeline"
+              data-test-subj="acePipeline"
+            ></div>
+          </div>
         </div>
       </form>
 

x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.js

@@ -14,7 +14,10 @@ import 'plugins/logstash/services/license';
 import 'plugins/logstash/services/security';
 import './pipeline_edit.less';
 import '../../../../components/tooltip';
-import { TOOLTIPS } from '../../../../../common/constants';
+import {
+  EDITOR,
+  TOOLTIPS
+} from '../../../../../common/constants';
 import 'ace';
 
 const app = uiModules.get('xpack/logstash');
@@ -48,6 +51,19 @@ app.directive('pipelineEdit', function ($injector) {
         }
         $scope.aceLoaded = (editor) => {
           this.editor = editor;
+
+          /*
+           * This sets the space between the editor's borders and the
+           * edges of the top/bottom lines to make for a less-crowded
+           * typing experience.
+           */
+          editor.renderer.setScrollMargin(
+            EDITOR.PIPELINE_EDITOR_SCROLL_MARGIN_TOP_PX,
+            EDITOR.PIPELINE_EDITOR_SCROLL_MARGIN_BOTTOM_PX,
+            0,
+            0
+          );
+
           editor.setReadOnly(this.isReadOnly);
           editor.setOptions({
             minLines: 25,

x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.less

@@ -4,7 +4,6 @@
 
 pipeline-edit {
   .pipeline-editor {
-    height:400px;
     border: 1px solid #ecf0f1;
   }
 }