[Backport 2.x] [CCI] Replace jquery usage in console plugin with native methods (#3858)

* [CCI] Replace jquery usage in console plugin with native methods (#3733)

* Remove jquery import and unused mock test
* Removed jquery imports and replaced jquery functions and methods to native js in console plugin tests
* Removed jquery imports and replaced jquery functions to native js in console plugin
* Adding a changelog entry
* Accept changes from new mappings
* Update to template string

Co-authored-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: Alexei Karikov <karikov.alist.ru@gmail.com>

---------

Signed-off-by: Alexei Karikov <karikov.alist.ru@gmail.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit ffe4556)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

* add changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>

Author: 3 people

CHANGELOG.md

@@ -46,6 +46,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### 🪛 Refactoring
 - [Multiple DataSource] Refactor dev tool console to use opensearch-js client to send requests ([#3544](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3544))
 - [Tech Debt] Clean up docs_link_service organization so that strings are in the right categories. ([#3685](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3685))
+- [Console] Replace jQuery usage in console plugin with native methods ([#3733](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3733))
 
 ### 🔩 Tests
 

src/plugins/console/public/application/models/legacy_core_editor/__tests__/input.test.js

@@ -31,7 +31,6 @@
 import '../legacy_core_editor.test.mocks';
 import RowParser from '../../../../lib/row_parser';
 import { createTokenIterator } from '../../../factories';
-import $ from 'jquery';
 import { create } from '../create';
 
 describe('Input', () => {
@@ -46,10 +45,10 @@ describe('Input', () => {
 
     coreEditor = create(document.querySelector('#ConAppEditor'));
 
-    $(coreEditor.getContainer()).show();
+    coreEditor.getContainer().style.display = '';
   });
   afterEach(() => {
-    $(coreEditor.getContainer()).hide();
+    coreEditor.getContainer().style.display = 'none';
   });
 
   describe('.getLineCount', () => {

src/plugins/console/public/application/models/legacy_core_editor/__tests__/output_tokenization.test.js

@@ -29,7 +29,6 @@
  */
 
 import '../legacy_core_editor.test.mocks';
-import $ from 'jquery';
 import RowParser from '../../../../lib/row_parser';
 import ace from 'brace';
 import { createReadOnlyAceEditor } from '../create_readonly';
@@ -39,11 +38,11 @@ const tokenIterator = ace.acequire('ace/token_iterator');
 describe('Output Tokenization', () => {
   beforeEach(() => {
     output = createReadOnlyAceEditor(document.querySelector('#ConAppOutput'));
-    $(output.container).show();
+    output.container.style.display = '';
   });
 
   afterEach(() => {
-    $(output.container).hide();
+    output.container.style.display = 'none';
   });
 
   function tokensAsList() {

src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts

@@ -30,7 +30,6 @@
 
 import ace from 'brace';
 import { Editor as IAceEditor, IEditSession as IAceEditSession } from 'brace';
-import $ from 'jquery';
 import {
   CoreEditor,
   Position,
@@ -54,11 +53,11 @@ const rangeToAceRange = ({ start, end }: Range) =>
 
 export class LegacyCoreEditor implements CoreEditor {
   private _aceOnPaste: any;
-  $actions: any;
+  actions: any;
   resize: () => void;
 
   constructor(private readonly editor: IAceEditor, actions: HTMLElement) {
-    this.$actions = $(actions);
+    this.actions = actions;
     this.editor.setShowPrintMargin(false);
 
     const session = this.editor.getSession();
@@ -274,20 +273,16 @@ export class LegacyCoreEditor implements CoreEditor {
 
   private setActionsBar = (value?: any, topOrBottom: 'top' | 'bottom' = 'top') => {
     if (value === null) {
-      this.$actions.css('visibility', 'hidden');
+      this.actions.style.visibility = 'hidden';
     } else {
       if (topOrBottom === 'top') {
-        this.$actions.css({
-          bottom: 'auto',
-          top: value,
-          visibility: 'visible',
-        });
+        this.actions.style.bottom = 'auto';
+        this.actions.style.top = value;
+        this.actions.style.visibility = 'visible';
       } else {
-        this.$actions.css({
-          top: 'auto',
-          bottom: value,
-          visibility: 'visible',
-        });
+        this.actions.style.top = 'auto';
+        this.actions.style.bottom = value;
+        this.actions.style.visibility = 'visible';
       }
     }
   };
@@ -318,14 +313,14 @@ export class LegacyCoreEditor implements CoreEditor {
   }
 
   legacyUpdateUI(range: any) {
-    if (!this.$actions) {
+    if (!this.actions) {
       return;
     }
     if (range) {
       // elements are positioned relative to the editor's container
       // pageY is relative to page, so subtract the offset
       // from pageY to get the new top value
-      const offsetFromPage = $(this.editor.container).offset()!.top;
+      const offsetFromPage = this.editor.container.offsetTop;
       const startLine = range.start.lineNumber;
       const startColumn = range.start.column;
       const firstLine = this.getLineValue(startLine);
@@ -345,11 +340,11 @@ export class LegacyCoreEditor implements CoreEditor {
         let offset = 0;
         if (isWrapping) {
           // Try get the line height of the text area in pixels.
-          const textArea = $(this.editor.container.querySelector('textArea')!);
+          const textArea = this.editor.container.querySelector('textArea');
           const hasRoomOnNextLine = this.getLineValue(startLine).length < maxLineLength;
           if (textArea && hasRoomOnNextLine) {
             // Line height + the number of wraps we have on a line.
-            offset += this.getLineValue(startLine).length * textArea.height()!;
+            offset += this.getLineValue(startLine).length * textArea.getBoundingClientRect().height;
           } else {
             if (startLine > 1) {
               this.setActionsBar(getScreenCoords(startLine - 1));

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

@@ -44,11 +44,11 @@ describe('Integration', () => {
       '<div><div id="ConAppEditor" /><div id="ConAppEditorActions" /><div id="ConCopyAsCurl" /></div>';
 
     senseEditor = create(document.querySelector('#ConAppEditor'));
-    $(senseEditor.getCoreEditor().getContainer()).show();
+    senseEditor.getCoreEditor().getContainer().style.display = '';
     senseEditor.autocomplete._test.removeChangeListener();
   });
   afterEach(() => {
-    $(senseEditor.getCoreEditor().getContainer()).hide();
+    senseEditor.getCoreEditor().getContainer().style.display = 'none';
     senseEditor.autocomplete._test.addChangeListener();
   });
 

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

@@ -30,7 +30,6 @@
 
 import '../sense_editor.test.mocks';
 
-import $ from 'jquery';
 import _ from 'lodash';
 
 import { create } from '../create';
@@ -51,11 +50,11 @@ describe('Editor', () => {
       </div>`;
 
     input = create(document.querySelector('#ConAppEditor'));
-    $(input.getCoreEditor().getContainer()).show();
+    input.getCoreEditor().getContainer().style.display = '';
     input.autocomplete._test.removeChangeListener();
   });
   afterEach(function () {
-    $(input.getCoreEditor().getContainer()).hide();
+    input.getCoreEditor().getContainer().style.display = 'none';
     input.autocomplete._test.addChangeListener();
   });
 

src/plugins/console/public/application/models/sense_editor/sense_editor.test.mocks.ts

@@ -31,11 +31,3 @@
 /* eslint no-undef: 0 */
 
 import '../legacy_core_editor/legacy_core_editor.test.mocks';
-
-import jQuery from 'jquery';
-jest.spyOn(jQuery, 'ajax').mockImplementation(
-  () =>
-    new Promise(() => {
-      // never resolve
-    }) as any
-);

src/plugins/console/public/lib/ace_token_provider/token_provider.test.ts

@@ -30,8 +30,6 @@
 
 import '../../application/models/sense_editor/sense_editor.test.mocks';
 
-import $ from 'jquery';
-
 // TODO:
 // We import from application models as a convenient way to bootstrap loading up of an editor using
 // this lib. We also need to import application specific mocks which is not ideal.
@@ -59,14 +57,14 @@ describe('Ace (legacy) token provider', () => {
 
     senseEditor = create(document.querySelector<HTMLElement>('#ConAppEditor')!);
 
-    $(senseEditor.getCoreEditor().getContainer())!.show();
+    senseEditor.getCoreEditor().getContainer().style.display = '';
 
     (senseEditor as any).autocomplete._test.removeChangeListener();
     tokenProvider = senseEditor.getCoreEditor().getTokenProvider();
   });
 
   afterEach(async () => {
-    $(senseEditor.getCoreEditor().getContainer())!.hide();
+    senseEditor.getCoreEditor().getContainer().style.display = 'none';
     (senseEditor as any).autocomplete._test.addChangeListener();
     await senseEditor.update('', true);
   });

src/plugins/console/public/lib/osd/osd.js

@@ -38,7 +38,6 @@ import {
   UsernameAutocompleteComponent,
 } from '../autocomplete/components';
 
-import $ from 'jquery';
 import _ from 'lodash';
 
 import Api from './api';
@@ -174,20 +173,19 @@ function loadApisFromJson(
 // like this, it looks like a minor security issue.
 export function setActiveApi(api) {
   if (!api) {
-    $.ajax({
-      url: '../api/console/api_server',
-      dataType: 'json', // disable automatic guessing
+    fetch('../api/console/api_server', {
+      method: 'GET',
       headers: {
         'osd-xsrf': 'opensearch-dashboards',
       },
-    }).then(
-      function (data) {
+    })
+      .then(function (response) {
+        response.json();
+      })
+      .then(function (data) {
         setActiveApi(loadApisFromJson(data));
-      },
-      function (jqXHR) {
-        console.log("failed to load API '" + api + "': " + jqXHR.responseText);
-      }
-    );
+      })
+      .catch((error) => console.log(`failed to load API '${api}': ${error}`));
     return;
   }