From b62d18e565192bf24834c226cf0388ff13c5dfe1 Mon Sep 17 00:00:00 2001 From: Alexei Karikov Date: Mon, 17 Apr 2023 23:55:11 +0600 Subject: [PATCH] [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 Signed-off-by: Alexei Karikov --------- Signed-off-by: Alexei Karikov Co-authored-by: Josh Romero Signed-off-by: David Sinclair --- CHANGELOG.md | 1 + .../__tests__/input.test.js | 5 ++- .../__tests__/output_tokenization.test.js | 5 ++- .../legacy_core_editor/legacy_core_editor.ts | 31 ++++++++----------- .../__tests__/integration.test.js | 4 +-- .../__tests__/sense_editor.test.js | 5 ++- .../sense_editor/sense_editor.test.mocks.ts | 8 ----- .../ace_token_provider/token_provider.test.ts | 6 ++-- src/plugins/console/public/lib/osd/osd.js | 20 ++++++------ 9 files changed, 33 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 062c3205f947..60e36f05e775 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -183,6 +183,7 @@ 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 diff --git a/src/plugins/console/public/application/models/legacy_core_editor/__tests__/input.test.js b/src/plugins/console/public/application/models/legacy_core_editor/__tests__/input.test.js index 7accc948e6cd..653e34aa0073 100644 --- a/src/plugins/console/public/application/models/legacy_core_editor/__tests__/input.test.js +++ b/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', () => { diff --git a/src/plugins/console/public/application/models/legacy_core_editor/__tests__/output_tokenization.test.js b/src/plugins/console/public/application/models/legacy_core_editor/__tests__/output_tokenization.test.js index 4973011a2aaa..d143d72e15c2 100644 --- a/src/plugins/console/public/application/models/legacy_core_editor/__tests__/output_tokenization.test.js +++ b/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() { diff --git a/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts b/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts index 55ee5fe2a343..5fe93ca4e094 100644 --- a/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts +++ b/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)); diff --git a/src/plugins/console/public/application/models/sense_editor/__tests__/integration.test.js b/src/plugins/console/public/application/models/sense_editor/__tests__/integration.test.js index cf6df4d31b06..88f9acc27e7f 100644 --- a/src/plugins/console/public/application/models/sense_editor/__tests__/integration.test.js +++ b/src/plugins/console/public/application/models/sense_editor/__tests__/integration.test.js @@ -44,11 +44,11 @@ describe('Integration', () => { '
'; 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(); }); diff --git a/src/plugins/console/public/application/models/sense_editor/__tests__/sense_editor.test.js b/src/plugins/console/public/application/models/sense_editor/__tests__/sense_editor.test.js index 18d798c28c94..de67ae1a8908 100644 --- a/src/plugins/console/public/application/models/sense_editor/__tests__/sense_editor.test.js +++ b/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', () => {
`; 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(); }); diff --git a/src/plugins/console/public/application/models/sense_editor/sense_editor.test.mocks.ts b/src/plugins/console/public/application/models/sense_editor/sense_editor.test.mocks.ts index 6474fcb0ec9d..92e86d60104c 100644 --- a/src/plugins/console/public/application/models/sense_editor/sense_editor.test.mocks.ts +++ b/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 -); diff --git a/src/plugins/console/public/lib/ace_token_provider/token_provider.test.ts b/src/plugins/console/public/lib/ace_token_provider/token_provider.test.ts index 55c18381cb9c..a933fdeb8010 100644 --- a/src/plugins/console/public/lib/ace_token_provider/token_provider.test.ts +++ b/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('#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); }); diff --git a/src/plugins/console/public/lib/osd/osd.js b/src/plugins/console/public/lib/osd/osd.js index 529fba754a93..cf8126271072 100644 --- a/src/plugins/console/public/lib/osd/osd.js +++ b/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; }