Revert "[CCI] Replace jquery usage in console plugin with native meth…

…ods (#3733)" (#3929)

This reverts commit ffe4556.

CHANGELOG.md

@@ -192,7 +192,6 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Console] Replace jQuery.ajax with core.http when calling OSD APIs in console ([#3080](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3080))
 - [I18n] Fix Listr type errors and error handlers ([#3629](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3629))
 - [Multiple DataSource] Present the authentication type choices in a drop-down ([#3693](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3693))
-- [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,6 +31,7 @@
 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', () => {
@@ -45,10 +46,10 @@ describe('Input', () => {
 
     coreEditor = create(document.querySelector('#ConAppEditor'));
 
-    coreEditor.getContainer().style.display = '';
+    $(coreEditor.getContainer()).show();
   });
   afterEach(() => {
-    coreEditor.getContainer().style.display = 'none';
+    $(coreEditor.getContainer()).hide();
   });
 
   describe('.getLineCount', () => {

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

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

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

@@ -30,6 +30,7 @@
 
 import ace from 'brace';
 import { Editor as IAceEditor, IEditSession as IAceEditSession } from 'brace';
+import $ from 'jquery';
 import {
   CoreEditor,
   Position,
@@ -53,11 +54,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();
@@ -273,16 +274,20 @@ export class LegacyCoreEditor implements CoreEditor {
 
   private setActionsBar = (value?: any, topOrBottom: 'top' | 'bottom' = 'top') => {
     if (value === null) {
-      this.actions.style.visibility = 'hidden';
+      this.$actions.css('visibility', 'hidden');
     } else {
       if (topOrBottom === 'top') {
-        this.actions.style.bottom = 'auto';
-        this.actions.style.top = value;
-        this.actions.style.visibility = 'visible';
+        this.$actions.css({
+          bottom: 'auto',
+          top: value,
+          visibility: 'visible',
+        });
       } else {
-        this.actions.style.top = 'auto';
-        this.actions.style.bottom = value;
-        this.actions.style.visibility = 'visible';
+        this.$actions.css({
+          top: 'auto',
+          bottom: value,
+          visibility: 'visible',
+        });
       }
     }
   };
@@ -313,14 +318,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.offsetTop;
+      const offsetFromPage = $(this.editor.container).offset()!.top;
       const startLine = range.start.lineNumber;
       const startColumn = range.start.column;
       const firstLine = this.getLineValue(startLine);
@@ -340,11 +345,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.getBoundingClientRect().height;
+            offset += this.getLineValue(startLine).length * textArea.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().style.display = '';
+    $(senseEditor.getCoreEditor().getContainer()).show();
     senseEditor.autocomplete._test.removeChangeListener();
   });
   afterEach(() => {
-    senseEditor.getCoreEditor().getContainer().style.display = 'none';
+    $(senseEditor.getCoreEditor().getContainer()).hide();
     senseEditor.autocomplete._test.addChangeListener();
   });
 

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

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

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

@@ -31,3 +31,11 @@
 /* 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,6 +30,8 @@
 
 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.
@@ -57,14 +59,14 @@ describe('Ace (legacy) token provider', () => {
 
     senseEditor = create(document.querySelector<HTMLElement>('#ConAppEditor')!);
 
-    senseEditor.getCoreEditor().getContainer().style.display = '';
+    $(senseEditor.getCoreEditor().getContainer())!.show();
 
     (senseEditor as any).autocomplete._test.removeChangeListener();
     tokenProvider = senseEditor.getCoreEditor().getTokenProvider();
   });
 
   afterEach(async () => {
-    senseEditor.getCoreEditor().getContainer().style.display = 'none';
+    $(senseEditor.getCoreEditor().getContainer())!.hide();
     (senseEditor as any).autocomplete._test.addChangeListener();
     await senseEditor.update('', true);
   });

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

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