From 803d80ce35502a8bd2663d82e9a3594f8df53156 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Mon, 24 Apr 2023 09:20:01 -0700 Subject: [PATCH] Revert "[CCI] Replace jquery usage in console plugin with native methods (#3733)" This reverts commit ffe455615eef10d1719884fd131f6953976583ff. --- 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, 52 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fb7c3fd87322..df5b67ddca64 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -191,7 +191,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 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 653e34aa0073..7accc948e6cd 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,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', () => { 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 d143d72e15c2..4973011a2aaa 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,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() { 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 5fe93ca4e094..55ee5fe2a343 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,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)); 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 88f9acc27e7f..cf6df4d31b06 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().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(); }); 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 de67ae1a8908..18d798c28c94 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,6 +30,7 @@ import '../sense_editor.test.mocks'; +import $ from 'jquery'; import _ from 'lodash'; import { create } from '../create'; @@ -50,11 +51,11 @@ describe('Editor', () => {
`; 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(); }); 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 92e86d60104c..6474fcb0ec9d 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,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 +); 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 a933fdeb8010..55c18381cb9c 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,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('#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); }); diff --git a/src/plugins/console/public/lib/osd/osd.js b/src/plugins/console/public/lib/osd/osd.js index cf8126271072..529fba754a93 100644 --- a/src/plugins/console/public/lib/osd/osd.js +++ b/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; }