[Grok Debugger] Better editor expansion/Fix border hiding bottom line (#18752)

* Update to grok debugger editors: let them grow taller and stop hiding half of bottom line input. * Update custom pattern size to 10 LOC. * Remove unnecessary options, add constants for scroll margin. * Encapsulate editor options in mutate function. * Move editor helper file and prefer "function" declaration over ES6 const. * Add test for new helper function.
2025-04-23 17:28:26 -04:00 · 2018-05-04 12:20:36 -04:00 · 2018-05-04 12:20:36 -04:00 · eb1a07e9fd
commit eb1a07e9fd
parent c3f310a67a
10 changed files with 145 additions and 50 deletions
--- a/x-pack/plugins/grokdebugger/common/constants/editor.js
+++ b/x-pack/plugins/grokdebugger/common/constants/editor.js
@ -0,0 +1,14 @@
+/*
+ * 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 = {
+  PATTERN_MIN_LINES: 3,
+  PATTERN_MAX_LINES: 10,
+  SAMPLE_DATA_MIN_LINES: 3,
+  SAMPLE_DATA_MAX_LINES: 50,
+  SCROLL_MARGIN_TOP: 4,
+  SCROLL_MARGIN_BOTTOM: 4,
+};
--- a/x-pack/plugins/grokdebugger/common/constants/index.js
+++ b/x-pack/plugins/grokdebugger/common/constants/index.js
@ -6,3 +6,4 @@

 export { ROUTES } from './routes';
 export { PLUGIN } from './plugin';
+export { EDITOR } from './editor';
--- a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js
+++ b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js
@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+import { EDITOR } from '../../../common/constants';
+
+export function applyEditorOptions(editor, minLines, maxLines) {
+  editor.getSession().setUseWrapMode(true);
+
+  /*
+    * 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.SCROLL_MARGIN_TOP,
+    EDITOR.SCROLL_MARGIN_BOTTOM,
+    0,
+    0
+  );
+
+  editor.setOptions({
+    highlightActiveLine: false,
+    highlightGutterLine: false,
+    minLines,
+    maxLines
+  });
+
+  editor.$blockScrolling = Infinity;
+}
--- a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js
+++ b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js
@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+import { applyEditorOptions } from './apply_editor_options';
+import { EDITOR } from '../../../common/constants';
+
+describe('applyEditorOptions', () => {
+  let editor;
+  let setUseWrapMode;
+  let setScrollMargin;
+  let setOptions;
+
+  beforeEach(() => {
+    setUseWrapMode = jest.fn();
+    setScrollMargin = jest.fn();
+    setOptions = jest.fn();
+
+    editor = {
+      getSession: () => {
+        return { setUseWrapMode };
+      },
+      renderer: {
+        setScrollMargin,
+      },
+      setOptions,
+    };
+  });
+
+  it('creates default props and given line sizes', () => {
+    const minLines = 14;
+    const maxLines = 90;
+
+    applyEditorOptions(editor, minLines, maxLines);
+
+    expect(setUseWrapMode.mock.calls).toHaveLength(1);
+    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][2]).toEqual(0);
+    expect(setScrollMargin.mock.calls[0][3]).toEqual(0);
+
+    expect(setOptions.mock.calls).toHaveLength(1);
+    expect(setOptions.mock.calls[0][0]).toEqual({
+      highlightActiveLine: false,
+      highlightGutterLine: false,
+      minLines: 14,
+      maxLines: 90,
+    });
+
+    expect(editor.$blockScrolling).toEqual(Infinity);
+  });
+});
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html
@ -22,15 +22,17 @@ MSG message-id=<%{GREEDYDATA}></code></pre>
          </div>
        </div>
      </div>
-      <div
-        class="custom-patterns-input-editor grokdebugger-ace-editor kuiVerticalRhythm"
-        require-keys="true"
-        ui-ace="{
-          onLoad: aceLoaded
-        }"
-        ng-model="customPatternsInput.customPatterns"
-        data-test-subj="aceCustomPatternsInput"
+      <div class="grokdebugger-ace-editor">
+        <div
+          class="custom-patterns-input-editor kuiVerticalRhythm"
+          require-keys="true"
+          ui-ace="{
+            onLoad: aceLoaded
+          }"
+          ng-model="customPatternsInput.customPatterns"
+          data-test-subj="aceCustomPatternsInput"
        ></div>
+      </div>
    </div>
  </toggle-panel>
 </form>
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js
@ -6,6 +6,8 @@

 import { uiModules } from 'ui/modules';
 import { InitAfterBindingsWorkaround } from 'ui/compat';
+import { EDITOR } from '../../../../../common/constants';
+import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
 import template from './custom_patterns_input.html';
 import './custom_patterns_input.less';
 import 'ui/toggle_panel';
@ -32,14 +34,7 @@ app.directive('customPatternsInput', function () {
        });
        $scope.aceLoaded = (editor) => {
          this.editor = editor;
-          editor.getSession().setUseWrapMode(true);
-          editor.setOptions({
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: 3,
-            maxLines: 25
-          });
-          editor.$blockScrolling = Infinity;
+          applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES);
        };
      }

--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html
@ -3,14 +3,16 @@
    <label class="kuiLabel kuiVerticalRhythmSmall">
      Sample Data
    </label>
-    <div
-      class="event-input-editor grokdebugger-ace-editor kuiVerticalRhythmSmall"
-      require-keys="true"
-      ui-ace="{
-        onLoad: aceLoaded
-      }"
-      ng-model="eventInput.rawEvent"
-      data-test-subj="aceEventInput"
-    ></div>
+    <div class="grokdebugger-ace-editor">
+      <div
+        class="event-input-editor kuiVerticalRhythmSmall"
+        require-keys="true"
+        ui-ace="{
+          onLoad: aceLoaded
+        }"
+        ng-model="eventInput.rawEvent"
+        data-test-subj="aceEventInput"
+      ></div>
+    </div>
  </div>
 </form>
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js
@ -5,6 +5,8 @@
 */

 import { uiModules } from 'ui/modules';
+import { EDITOR } from '../../../../../common/constants';
+import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
 import template from './event_input.html';
 import './event_input.less';
 import 'ace';
@ -27,14 +29,7 @@ app.directive('eventInput', function () {
        });
        $scope.aceLoaded = (editor) => {
          this.editor = editor;
-          editor.getSession().setUseWrapMode(true);
-          editor.setOptions({
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: 3,
-            maxLines: 10
-          });
-          editor.$blockScrolling = Infinity;
+          applyEditorOptions(editor, EDITOR.SAMPLE_DATA_MIN_LINES, EDITOR.SAMPLE_DATA_MAX_LINES);
        };
      }
    }
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html
@ -3,14 +3,16 @@
    <label class="kuiLabel kuiVerticalRhythmSmall">
      Grok Pattern
    </label>
-    <div
-      class="pattern-input-editor grokdebugger-ace-editor kuiVerticalRhythmSmall"
-      require-keys="true"
-      ui-ace="{
-        onLoad: aceLoaded
-      }"
-      ng-model="patternInput.pattern"
-      data-test-subj="acePatternInput"
-    ></div>
+    <div class="grokdebugger-ace-editor">
+      <div
+        class="pattern-input-editor kuiVerticalRhythmSmall"
+        require-keys="true"
+        ui-ace="{
+          onLoad: aceLoaded
+        }"
+        ng-model="patternInput.pattern"
+        data-test-subj="acePatternInput"
+      ></div>
+    </div>
  </div>
 </form>
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js
@ -5,6 +5,8 @@
 */

 import { uiModules } from 'ui/modules';
+import { EDITOR } from '../../../../../common/constants';
+import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
 import template from './pattern_input.html';
 import './pattern_input.less';
 import { GrokMode } from '../../../../lib/ace';
@ -27,14 +29,7 @@ app.directive('patternInput', function () {
        });
        $scope.aceLoaded = (editor) => {
          this.editor = editor;
-          editor.getSession().setUseWrapMode(true);
-          editor.setOptions({
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: 3,
-            maxLines: 10
-          });
-          editor.$blockScrolling = Infinity;
+          applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES);
          editor.getSession().setMode(new GrokMode());
        };
      }