[Kibana][Dev Console][Autocomplete] Autocomplete missing comma on correct location (#121611)

* Fix autocomplete missing comma on the correct location

* Add a test case


Co-authored-by: Muhammad Ibragimov <muhammad.ibragimov@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/console/public/application/models/sense_editor/integration.test.js

@@ -361,7 +361,7 @@ describe('Integration', () => {
         cursor: { lineNumber: 7, column: 1 },
         initialValue: '',
         addTemplate: true,
-        prefixToAdd: ', ',
+        prefixToAdd: '',
         suffixToAdd: '',
         rangeToReplace: {
           start: { lineNumber: 7, column: 1 },
@@ -374,7 +374,7 @@ describe('Integration', () => {
         cursor: { lineNumber: 6, column: 15 },
         initialValue: '',
         addTemplate: true,
-        prefixToAdd: ', ',
+        prefixToAdd: '',
         suffixToAdd: '',
         rangeToReplace: {
           start: { lineNumber: 6, column: 15 },

src/plugins/console/public/lib/autocomplete/autocomplete.ts

@@ -762,7 +762,18 @@ export default function ({
         break;
       default:
         if (nonEmptyToken && nonEmptyToken.type.indexOf('url') < 0) {
-          context.prefixToAdd = ', ';
+          const { position, value } = nonEmptyToken;
+
+          // We can not rely on prefixToAdd here, because it adds a comma at the beginning of the new token
+          // Since we have access to the position of the previous token here, this could be a good place to insert a comma manually
+          context.prefixToAdd = '';
+          editor.insert(
+            {
+              column: position.column + value.length,
+              lineNumber: position.lineNumber,
+            },
+            ', '
+          );
         }
     }
 

test/functional/apps/console/_console.ts

@@ -85,12 +85,32 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       // Ensure that the text area can be interacted with
       await PageObjects.console.dismissTutorial();
       expect(await PageObjects.console.hasAutocompleter()).to.be(false);
+      await PageObjects.console.enterRequest();
       await PageObjects.console.promptAutocomplete();
       await retry.waitFor('autocomplete to be visible', () =>
         PageObjects.console.hasAutocompleter()
       );
     });
 
+    it('should add comma after previous non empty line on autocomplete', async () => {
+      const LINE_NUMBER = 2;
+
+      await PageObjects.console.dismissTutorial();
+      await PageObjects.console.clearTextArea();
+      await PageObjects.console.enterText(`{\n\t"query": {\n\t\t"match": {}`);
+      await PageObjects.console.pressEnter();
+      await PageObjects.console.pressEnter();
+      await PageObjects.console.pressEnter();
+      await PageObjects.console.promptAutocomplete();
+
+      await retry.try(async () => {
+        const textOfPreviousNonEmptyLine = await PageObjects.console.getVisibleTextAt(LINE_NUMBER);
+        log.debug(textOfPreviousNonEmptyLine);
+        const lastChar = textOfPreviousNonEmptyLine.charAt(textOfPreviousNonEmptyLine.length - 1);
+        expect(lastChar).to.be.equal(',');
+      });
+    });
+
     describe('with a data URI in the load_from query', () => {
       it('loads the data from the URI', async () => {
         await PageObjects.common.navigateToApp('console', {

test/functional/page_objects/console_page.ts

@@ -84,13 +84,8 @@ export class ConsolePageObject extends FtrService {
   }
 
   public async promptAutocomplete() {
-    // This focusses the cursor on the bottom of the text area
-    const editor = await this.getEditor();
-    const content = await editor.findByCssSelector('.ace_content');
-    await content.click();
     const textArea = await this.testSubjects.find('console-textarea');
     // There should be autocomplete for this on all license levels
-    await textArea.pressKeys('\nGET s');
     await textArea.pressKeys([Key.CONTROL, Key.SPACE]);
   }
 
@@ -101,4 +96,47 @@ export class ConsolePageObject extends FtrService {
       return false;
     }
   }
+
+  public async enterRequest(request: string = '\nGET _search') {
+    const textArea = await this.getEditorTextArea();
+    await textArea.pressKeys(request);
+    await textArea.pressKeys(Key.ENTER);
+  }
+
+  public async enterText(text: string) {
+    const textArea = await this.getEditorTextArea();
+    await textArea.pressKeys(text);
+  }
+
+  private async getEditorTextArea() {
+    // This focusses the cursor on the bottom of the text area
+    const editor = await this.getEditor();
+    const content = await editor.findByCssSelector('.ace_content');
+    await content.click();
+    return await this.testSubjects.find('console-textarea');
+  }
+
+  public async getVisibleTextAt(lineIndex: number) {
+    const editor = await this.getEditor();
+    const lines = await editor.findAllByClassName('ace_line_group');
+
+    if (lines.length < lineIndex) {
+      throw new Error(`No line with index: ${lineIndex}`);
+    }
+
+    const line = lines[lineIndex];
+    const text = await line.getVisibleText();
+
+    return text.trim();
+  }
+
+  public async pressEnter() {
+    const textArea = await this.testSubjects.find('console-textarea');
+    await textArea.pressKeys(Key.ENTER);
+  }
+
+  public async clearTextArea() {
+    const textArea = await this.getEditorTextArea();
+    await textArea.clearValueWithKeyboard();
+  }
 }