Backport #8342

[console] fix references to getInput function

When splitting the input/output modules into an `initializeInput` and `getInput` pair, it was changed to an esModule. This means that you can no longer require is and execute it's default export directly, as was being done in the console's settings module.

(cherry picked from commit 086a40c476)

src/core_plugins/console/public/src/directives/settings.html

@@ -14,6 +14,7 @@
           type="number"
           required
           class="form-control"
+          data-test-subj="setting-font-size-input"
           >
       </div>
     </div>
@@ -62,7 +63,8 @@
     <button
       type="submit"
       ng-disabled="settingsForm.$invalid"
-      class="btn btn-primary">
+      class="btn btn-primary"
+      data-test-subj="settings-save-button">
       Save
     </button>
   </div>

src/core_plugins/console/public/src/settings.js

@@ -2,6 +2,9 @@ let $ = require('jquery');
 let es = require('./es');
 const storage = require('./storage');
 
+import getInput from './input'
+import getOutput from './output'
+
 function getFontSize() {
   return storage.get('font_size', 14);
 }
@@ -28,7 +31,7 @@ function setBasicAuth(mode) {
   return true;
 }
 
-function getAutocomplete() {
+export function getAutocomplete() {
   return storage.get('autocomplete_settings', { fields: true, indices: true });
 }
 
@@ -37,10 +40,10 @@ function setAutocomplete(settings) {
   return true;
 }
 
-function applyCurrentSettings(editor) {
+export function applyCurrentSettings(editor) {
   if (typeof editor === 'undefined') {
-    applyCurrentSettings(require('./input')());
-    applyCurrentSettings(require('./output')());
+    applyCurrentSettings(getInput());
+    applyCurrentSettings(getOutput());
   }
   if (editor) {
     editor.getSession().setUseWrapMode(getWrapMode());
@@ -48,7 +51,7 @@ function applyCurrentSettings(editor) {
   }
 }
 
-function getCurrentSettings() {
+export function getCurrentSettings() {
   return {
     autocomplete: getAutocomplete(),
     wrapMode: getWrapMode(),
@@ -56,18 +59,10 @@ function getCurrentSettings() {
   };
 }
 
-function updateSettings({ fontSize, wrapMode, autocomplete}) {
+export function updateSettings({ fontSize, wrapMode, autocomplete}) {
   setFontSize(fontSize);
   setWrapMode(wrapMode);
   setAutocomplete(autocomplete);
-  require('./input')().focus();
+  getInput().focus();
   return getCurrentSettings();
 }
-
-module.exports = {
-  getAutocomplete,
-  applyCurrentSettings,
-
-  getCurrentSettings,
-  updateSettings,
-};

src/ui/public/kbn_top_nav/kbn_top_nav.html

@@ -1,4 +1,4 @@
-<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options">
+<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options" data-test-subj="top-nav">
   <div ng-transclude></div>
   <div class="button-group kibana-nav-actions" role="toolbar">
     <button
@@ -13,6 +13,7 @@
       tooltip-placement="bottom"
       tooltip-popup-delay="400"
       tooltip-append-to-body="1"
+      data-test-subj="menu-item-{{menuItem.key}}"
     >
     </button>
   </div>

test/functional/apps/console/_console.js

@@ -54,4 +54,18 @@ bdd.describe('console app', function describeIndexTests() {
       });
     });
   });
+
+  bdd.it('settings should allow changing the text size', async function () {
+    await PageObjects.console.setFontSizeSetting(20);
+    await PageObjects.common.try(async () => {
+      // the settings are not applied synchronously, so we retry for a time
+      expect(await PageObjects.console.getRequestFontSize()).to.be('20px');
+    });
+
+    await PageObjects.console.setFontSizeSetting(24);
+    await PageObjects.common.try(async () => {
+      // the settings are not applied synchronously, so we retry for a time
+      expect(await PageObjects.console.getRequestFontSize()).to.be('24px');
+    });
+  });
 });

test/support/page_objects/console_page.js

@@ -12,12 +12,16 @@ async function getVisibleTextFromAceEditor(editor) {
 }
 
 export default class ConsolePage {
-  init() {
+  init(remote) {
+    this.remote = remote;
+  }
 
+  async getRequestEditor() {
+    return await PageObjects.common.findTestSubject('console request-editor');
   }
 
   async getRequest() {
-    const requestEditor = await PageObjects.common.findTestSubject('console request-editor');
+    const requestEditor = await this.getRequestEditor();
     return await getVisibleTextFromAceEditor(requestEditor);
   }
 
@@ -35,4 +39,33 @@ export default class ConsolePage {
     const closeButton = await PageObjects.common.findTestSubject('console top-nav config-close-button');
     await closeButton.click();
   }
+
+  async openSettings() {
+    const settingsButton = await PageObjects.common.findTestSubject('console top-nav menu-item-settings');
+    await settingsButton.click();
+  }
+
+  async setFontSizeSetting(newSize) {
+    await this.openSettings();
+
+    // while the settings form opens/loads this may fail, so retry for a while
+    await PageObjects.common.try(async () => {
+      const fontSizeInput = await PageObjects.common.findTestSubject('console setting-font-size-input');
+      await fontSizeInput.clearValue();
+      await fontSizeInput.click();
+      await fontSizeInput.type(String(newSize));
+    });
+
+    const saveButton = await PageObjects.common.findTestSubject('console settings-save-button');
+    await saveButton.click();
+  }
+
+  async getFontSize(editor) {
+    const aceLine = await editor.findByClassName('ace_line');
+    return await aceLine.getComputedStyle('font-size');
+  }
+
+  async getRequestFontSize() {
+    return await this.getFontSize(await this.getRequestEditor());
+  }
 }