From 2596c9d73e8fb38157b836c678749ed55270cdb0 Mon Sep 17 00:00:00 2001 From: sainthkh Date: Sun, 17 Nov 2019 23:22:03 +0900 Subject: [PATCH] =?UTF-8?q?ui/resize=5Fchecker=20=F0=9F=91=89=20src/plugin?= =?UTF-8?q?s/kibana=5Futils=20(#44750)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Moved ResizeChecker to kibana_utils. * Removed ResizeChecker from __LEGACY. --- .../legacy/console_editor/editor.test.tsx | 4 - .../editor/legacy/console_editor/editor.tsx | 2 - .../legacy/console_editor/editor_output.tsx | 7 +- .../console_history/console_history.tsx | 2 - .../legacy/console_history/history_viewer.tsx | 5 +- .../subscribe_console_resize_checker.ts | 5 +- .../application/context/app_context.tsx | 1 - .../np_ready/public/application/index.tsx | 4 +- .../console/np_ready/public/legacy.ts | 3 - .../console/np_ready/public/plugin.ts | 3 +- .../__tests__/resize_checker.js | 208 ------------------ .../components/visualization_chart.tsx | 2 +- src/plugins/kibana_utils/public/index.ts | 1 + .../public/resize_checker/index.ts | 0 .../resize_checker/resize_checker.test.ts | 199 +++++++++++++++++ .../public/resize_checker/resize_checker.ts | 15 +- test/functional/apps/console/_console.ts | 11 + .../connected_components/map/mb/view.js | 2 +- .../timeseriesexplorer/timeseriesexplorer.js | 2 +- 19 files changed, 223 insertions(+), 253 deletions(-) delete mode 100644 src/legacy/ui/public/resize_checker/__tests__/resize_checker.js rename src/{legacy/ui => plugins/kibana_utils}/public/resize_checker/index.ts (100%) create mode 100644 src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts rename src/{legacy/ui => plugins/kibana_utils}/public/resize_checker/resize_checker.ts (89%) diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx index 87558a73087d8..03d5b3f1d8f44 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx @@ -62,10 +62,6 @@ describe('Legacy (Ace) Console Editor Component Smoke Test', () => { updateCurrentState: () => {}, }, }, - // eslint-disable-next-line - ResizeChecker: function() { - return { on: () => {} }; - }, docLinkVersion: 'NA', }; editor = mount( diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx index b2a38a996f6a2..10f1ef34602a6 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx @@ -63,7 +63,6 @@ const DEFAULT_INPUT_VALUE = `GET _search function _Editor({ previousStateLocation = 'stored' }: EditorProps) { const { services: { history, notifications }, - ResizeChecker, docLinkVersion, } = useAppContext(); @@ -130,7 +129,6 @@ function _Editor({ previousStateLocation = 'stored' }: EditorProps) { mappings.retrieveAutoCompleteInfo(); const unsubscribeResizer = subscribeResizeChecker( - ResizeChecker, editorRef.current!, editorInstanceRef.current ); diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx index fcf9f17e3ebd7..d38e86df41464 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx @@ -31,7 +31,6 @@ function _EditorOuput() { const editorInstanceRef = useRef(null); const { services: { settings }, - ResizeChecker, } = useAppContext(); const dispatch = useEditorActionContext(); @@ -42,11 +41,7 @@ function _EditorOuput() { const editor$ = $(editorRef.current!); editorInstanceRef.current = initializeOutput(editor$, settings); editorInstanceRef.current.update(''); - const unsubscribe = subscribeResizeChecker( - ResizeChecker, - editorRef.current!, - editorInstanceRef.current - ); + const unsubscribe = subscribeResizeChecker(editorRef.current!, editorInstanceRef.current); dispatch({ type: 'setOutputEditor', value: editorInstanceRef.current }); diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx index 881b59e6b3a1c..fdfe9ecc7b94c 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx @@ -45,7 +45,6 @@ const CHILD_ELEMENT_PREFIX = 'historyReq'; export function ConsoleHistory({ close }: Props) { const { services: { history }, - ResizeChecker, } = useAppContext(); const dispatch = useEditorActionContext(); @@ -200,7 +199,6 @@ export function ConsoleHistory({ close }: Props) { diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx index d531e143a79d0..c15bec0563049 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx @@ -31,10 +31,9 @@ import { applyCurrentSettings } from '../console_editor/apply_editor_settings'; interface Props { settings: DevToolsSettings; req: any | null; - ResizeChecker: any; } -export function HistoryViewer({ settings, ResizeChecker, req }: Props) { +export function HistoryViewer({ settings, req }: Props) { const divRef = useRef(null); const viewerRef = useRef(null); @@ -43,7 +42,7 @@ export function HistoryViewer({ settings, ResizeChecker, req }: Props) { viewerRef.current = viewer; viewer.renderer.setShowPrintMargin(false); viewer.$blockScrolling = Infinity; - const unsubscribe = subscribeResizeChecker(ResizeChecker, divRef.current!, viewer); + const unsubscribe = subscribeResizeChecker(divRef.current!, viewer); return () => unsubscribe(); }, []); diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts index c83c593ef404d..4ecd5d415833c 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts +++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts @@ -16,9 +16,10 @@ * specific language governing permissions and limitations * under the License. */ +import { ResizeChecker } from '../../../../../../../../../plugins/kibana_utils/public'; -export function subscribeResizeChecker(ResizeChecker: any, $el: any, ...editors: any[]) { - const checker = new ResizeChecker($el); +export function subscribeResizeChecker(el: HTMLElement, ...editors: any[]) { + const checker = new ResizeChecker(el); checker.on('resize', () => editors.forEach(e => { e.resize(); diff --git a/src/legacy/core_plugins/console/np_ready/public/application/context/app_context.tsx b/src/legacy/core_plugins/console/np_ready/public/application/context/app_context.tsx index 7bbdf731407e3..be7aa87ac2894 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/context/app_context.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/context/app_context.tsx @@ -29,7 +29,6 @@ interface ContextValue { notifications: NotificationsSetup; }; docLinkVersion: string; - ResizeChecker: any; } interface ContextProps { diff --git a/src/legacy/core_plugins/console/np_ready/public/application/index.tsx b/src/legacy/core_plugins/console/np_ready/public/application/index.tsx index d8933e60470c2..aaacfd3894d18 100644 --- a/src/legacy/core_plugins/console/np_ready/public/application/index.tsx +++ b/src/legacy/core_plugins/console/np_ready/public/application/index.tsx @@ -32,10 +32,9 @@ export function legacyBackDoorToSettings() { export function boot(deps: { docLinkVersion: string; I18nContext: any; - ResizeChecker: any; notifications: NotificationsSetup; }) { - const { I18nContext, ResizeChecker, notifications, docLinkVersion } = deps; + const { I18nContext, notifications, docLinkVersion } = deps; const storage = createStorage({ engine: window.localStorage, @@ -51,7 +50,6 @@ export function boot(deps: { value={{ docLinkVersion, services: { storage, history, settings, notifications }, - ResizeChecker, }} > diff --git a/src/legacy/core_plugins/console/np_ready/public/legacy.ts b/src/legacy/core_plugins/console/np_ready/public/legacy.ts index 8c60ff23648be..463aac74da944 100644 --- a/src/legacy/core_plugins/console/np_ready/public/legacy.ts +++ b/src/legacy/core_plugins/console/np_ready/public/legacy.ts @@ -26,7 +26,6 @@ import 'brace/mode/text'; /* eslint-disable @kbn/eslint/no-restricted-paths */ import { npSetup, npStart } from 'ui/new_platform'; import { I18nContext } from 'ui/i18n'; -import { ResizeChecker } from 'ui/resize_checker'; /* eslint-enable @kbn/eslint/no-restricted-paths */ export interface XPluginSet { @@ -34,7 +33,6 @@ export interface XPluginSet { feature_catalogue: FeatureCatalogueSetup; __LEGACY: { I18nContext: any; - ResizeChecker: any; }; } @@ -48,7 +46,6 @@ pluginInstance.setup(npSetup.core, { ...npSetup.plugins, __LEGACY: { I18nContext, - ResizeChecker, }, }); pluginInstance.start(npStart.core); diff --git a/src/legacy/core_plugins/console/np_ready/public/plugin.ts b/src/legacy/core_plugins/console/np_ready/public/plugin.ts index f02b0b5e72999..301b85b6e7395 100644 --- a/src/legacy/core_plugins/console/np_ready/public/plugin.ts +++ b/src/legacy/core_plugins/console/np_ready/public/plugin.ts @@ -30,7 +30,7 @@ export class ConsoleUIPlugin implements Plugin { async setup({ notifications }: CoreSetup, pluginSet: XPluginSet) { const { - __LEGACY: { I18nContext, ResizeChecker }, + __LEGACY: { I18nContext }, devTools, feature_catalogue, } = pluginSet; @@ -62,7 +62,6 @@ export class ConsoleUIPlugin implements Plugin { boot({ docLinkVersion: ctx.core.docLinks.DOC_LINK_VERSION, I18nContext, - ResizeChecker, notifications, }), element diff --git a/src/legacy/ui/public/resize_checker/__tests__/resize_checker.js b/src/legacy/ui/public/resize_checker/__tests__/resize_checker.js deleted file mode 100644 index 5fccf77f8f13d..0000000000000 --- a/src/legacy/ui/public/resize_checker/__tests__/resize_checker.js +++ /dev/null @@ -1,208 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import $ from 'jquery'; -import { delay } from 'bluebird'; -import expect from '@kbn/expect'; -import sinon from 'sinon'; - -import ngMock from 'ng_mock'; -import NoDigestPromises from 'test_utils/no_digest_promises'; - -import { ResizeChecker } from '../resize_checker'; -import EventEmitter from 'events'; - -describe('Resize Checker', () => { - NoDigestPromises.activateForSuite(); - - const teardown = []; - let setup; - - beforeEach(ngMock.module('kibana')); - beforeEach(() => { - setup = () => { - - const createEl = () => { - const el = $('
').appendTo('body').get(0); - teardown.push(() => $(el).remove()); - return el; - }; - - const createChecker = el => { - const checker = new ResizeChecker(el); - teardown.push(() => checker.destroy()); - return checker; - }; - - const createListener = () => { - let resolveFirstCallPromise; - const listener = sinon.spy(() => resolveFirstCallPromise()); - listener.firstCallPromise = new Promise(resolve => (resolveFirstCallPromise = resolve)); - return listener; - }; - - return { createEl, createChecker, createListener }; - }; - }); - - afterEach(() => { - teardown.splice(0).forEach(fn => { - fn(); - }); - }); - - describe('construction', () => { - it('accepts a jQuery wrapped element', () => { - const { createChecker } = setup(); - - createChecker($('
')); - }); - }); - - describe('events', () => { - it('is an event emitter', () => { - const { createEl, createChecker } = setup(); - - const checker = createChecker(createEl()); - expect(checker).to.be.a(EventEmitter); - }); - - it('emits a "resize" event asynchronously', async () => { - const { createEl, createChecker, createListener } = setup(); - - const el = createEl(); - const checker = createChecker(el); - const listener = createListener(); - - checker.on('resize', listener); - $(el).height(100); - sinon.assert.notCalled(listener); - await listener.firstCallPromise; - sinon.assert.calledOnce(listener); - }); - }); - - describe('enable/disabled state', () => { - it('should not trigger events while disabled', async () => { - const { createEl, createListener } = setup(); - - const el = createEl(); - const checker = new ResizeChecker(el, { disabled: true }); - const listener = createListener(); - checker.on('resize', listener); - - expect(listener.notCalled).to.be(true); - $(el).height(100); - await delay(1000); - expect(listener.notCalled).to.be(true); - }); - - it('should trigger resize events after calling enable', async () => { - const { createEl, createListener } = setup(); - - const el = createEl(); - const checker = new ResizeChecker(el, { disabled: true }); - const listener = createListener(); - checker.on('resize', listener); - - expect(listener.notCalled).to.be(true); - checker.enable(); - $(el).height(100); - await listener.firstCallPromise; - expect(listener.calledOnce).to.be(true); - }); - - it('should not trigger the first time after enable when the size does not change', async () => { - const { createEl, createListener } = setup(); - - const el = createEl(); - const checker = new ResizeChecker(el, { disabled: true }); - const listener = createListener(); - checker.on('resize', listener); - - expect(listener.notCalled).to.be(true); - $(el).height(250); - checker.enable(); - $(el).height(250); - await delay(1000); - expect(listener.notCalled).to.be(true); - }); - }); - - describe('#modifySizeWithoutTriggeringResize()', () => { - it(`does not emit "resize" events caused by the block`, async () => { - const { createChecker, createEl, createListener } = setup(); - - const el = createEl(); - const checker = createChecker(el); - const listener = createListener(); - - checker.on('resize', listener); - checker.modifySizeWithoutTriggeringResize(() => { - $(el).height(100); - }); - await delay(1000); - sinon.assert.notCalled(listener); - }); - - it('does emit "resize" when modification is made between the block and resize notification', async () => { - const { createChecker, createEl, createListener } = setup(); - - const el = createEl(); - const checker = createChecker(el); - const listener = createListener(); - - checker.on('resize', listener); - checker.modifySizeWithoutTriggeringResize(() => { - $(el).height(100); - }); - sinon.assert.notCalled(listener); - $(el).height(200); - await listener.firstCallPromise; - sinon.assert.calledOnce(listener); - }); - }); - - describe('#destroy()', () => { - it('destroys internal observer instance', () => { - const { createChecker, createEl, createListener } = setup(); - - const checker = createChecker(createEl()); - createListener(); - - checker.destroy(); - expect(!checker._observer).to.be(true); - }); - - it('does not emit future resize events', async () => { - const { createChecker, createEl, createListener } = setup(); - - const el = createEl(); - const checker = createChecker(el); - const listener = createListener(); - - checker.on('resize', listener); - checker.destroy(); - - $(el).height(100); - await delay(1000); - sinon.assert.notCalled(listener); - }); - }); -}); diff --git a/src/legacy/ui/public/visualize/components/visualization_chart.tsx b/src/legacy/ui/public/visualize/components/visualization_chart.tsx index eb7f130ec1a54..8aec7adeaec9a 100644 --- a/src/legacy/ui/public/visualize/components/visualization_chart.tsx +++ b/src/legacy/ui/public/visualize/components/visualization_chart.tsx @@ -22,7 +22,7 @@ import * as Rx from 'rxjs'; import { debounceTime, filter, share, switchMap } from 'rxjs/operators'; import { PersistedState } from '../../persisted_state'; -import { ResizeChecker } from '../../resize_checker'; +import { ResizeChecker } from '../../../../../plugins/kibana_utils/public'; import { Vis, VisualizationController } from '../../vis'; import { getUpdateStatus } from '../../vis/update_status'; diff --git a/src/plugins/kibana_utils/public/index.ts b/src/plugins/kibana_utils/public/index.ts index 3aaa6d28a9f64..04845c72cb755 100644 --- a/src/plugins/kibana_utils/public/index.ts +++ b/src/plugins/kibana_utils/public/index.ts @@ -21,6 +21,7 @@ export * from './core'; export * from './errors'; export * from './store'; export * from './parse'; +export * from './resize_checker'; export * from './render_complete'; export * from './store'; export * from './errors'; diff --git a/src/legacy/ui/public/resize_checker/index.ts b/src/plugins/kibana_utils/public/resize_checker/index.ts similarity index 100% rename from src/legacy/ui/public/resize_checker/index.ts rename to src/plugins/kibana_utils/public/resize_checker/index.ts diff --git a/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts b/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts new file mode 100644 index 0000000000000..d3013aaf8435d --- /dev/null +++ b/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts @@ -0,0 +1,199 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { ResizeChecker } from './resize_checker'; +import { EventEmitter } from 'events'; + +// If you want to know why these mocks are created, +// please check: https://github.com/elastic/kibana/pull/44750 +jest.mock('resize-observer-polyfill'); +import ResizeObserver from 'resize-observer-polyfill'; + +class MockElement { + public clientWidth: number; + public clientHeight: number; + private onResize: any; + + constructor() { + this.clientHeight = 0; + this.clientWidth = 0; + this.onResize = null; + } + + public addEventListener(name: string, listener: any) { + this.onResize = listener; + } + + public dispatchEvent(name: string) { + if (this.onResize) { + this.onResize(); + } + } + + public removeEventListener(name: string, listener: any) { + this.onResize = null; + } +} + +(ResizeObserver as any).mockImplementation(function(this: any, callback: any) { + this.observe = function(el: MockElement) { + el.addEventListener('resize', callback); + }; + this.disconnect = function() {}; + this.unobserve = function(el: MockElement) { + el.removeEventListener('resize', callback); + }; +}); + +describe('Resize Checker', () => { + describe('events', () => { + it('is an event emitter', () => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any); + + expect(checker).toBeInstanceOf(EventEmitter); + }); + + it('emits a "resize" event', done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any); + const listener = jest.fn(); + + checker.on('resize', listener); + el.clientHeight = 100; + el.dispatchEvent('resize'); + setTimeout(() => { + expect(listener.mock.calls.length).toBe(1); + done(); + }, 100); + }); + }); + + describe('enable/disabled state', () => { + it('should not trigger events while disabled', done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + const listener = jest.fn(); + checker.on('resize', listener); + + expect(listener).not.toBeCalled(); + el.clientHeight = 100; + el.dispatchEvent('resize'); + setTimeout(() => { + expect(listener).not.toBeCalled(); + done(); + }, 100); + }); + + it('should trigger resize events after calling enable', done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + const listener = jest.fn(); + checker.on('resize', listener); + + expect(listener).not.toBeCalled(); + checker.enable(); + el.clientHeight = 100; + el.dispatchEvent('resize'); + setTimeout(() => { + expect(listener).toBeCalled(); + done(); + }, 100); + }); + + it('should not trigger the first time after enable when the size does not change', done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + const listener = jest.fn(); + checker.on('resize', listener); + + expect(listener).not.toBeCalled(); + el.clientHeight = 100; + checker.enable(); + el.clientHeight = 100; + setTimeout(() => { + expect(listener).not.toBeCalled(); + done(); + }, 100); + }); + }); + + describe('#modifySizeWithoutTriggeringResize()', () => { + it(`does not emit "resize" events caused by the block`, done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + const listener = jest.fn(); + checker.on('resize', listener); + + checker.modifySizeWithoutTriggeringResize(() => { + el.clientHeight = 100; + }); + el.dispatchEvent('resize'); + setTimeout(() => { + expect(listener).not.toBeCalled(); + done(); + }, 1000); + }); + + it('does emit "resize" when modification is made between the block and resize notification', done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + const listener = jest.fn(); + checker.on('resize', listener); + + checker.modifySizeWithoutTriggeringResize(() => { + el.clientHeight = 100; + }); + el.dispatchEvent('resize'); + expect(listener).not.toBeCalled(); + + el.clientHeight = 200; + el.dispatchEvent('resize'); + setTimeout(() => { + expect(listener).not.toBeCalled(); + done(); + }, 100); + }); + }); + + describe('#destroy()', () => { + it('destroys internal observer instance', () => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + + checker.destroy(); + expect(!(checker as any).observer).toBe(true); + }); + + it('does not emit future resize events', done => { + const el = new MockElement(); + const checker = new ResizeChecker(el as any, { disabled: true }); + const listener = jest.fn(); + checker.on('resize', listener); + + checker.destroy(); + + el.clientHeight = 100; + el.dispatchEvent('resize'); + setTimeout(() => { + expect(listener).not.toBeCalled(); + done(); + }, 100); + }); + }); +}); diff --git a/src/legacy/ui/public/resize_checker/resize_checker.ts b/src/plugins/kibana_utils/public/resize_checker/resize_checker.ts similarity index 89% rename from src/legacy/ui/public/resize_checker/resize_checker.ts rename to src/plugins/kibana_utils/public/resize_checker/resize_checker.ts index c00603c3b11d6..bc514474e73fb 100644 --- a/src/legacy/ui/public/resize_checker/resize_checker.ts +++ b/src/plugins/kibana_utils/public/resize_checker/resize_checker.ts @@ -18,22 +18,9 @@ */ import { EventEmitter } from 'events'; -import $ from 'jquery'; import { isEqual } from 'lodash'; import ResizeObserver from 'resize-observer-polyfill'; -function validateElArg(el: HTMLElement) { - // the ResizeChecker historically accepted jquery elements, - // so we wrap in jQuery then extract the element - const $el = $(el); - - if ($el.length !== 1) { - throw new TypeError('ResizeChecker must be constructed with a single DOM element.'); - } - - return $el.get(0); -} - function getSize(el: HTMLElement): [number, number] { return [el.clientWidth, el.clientHeight]; } @@ -50,7 +37,7 @@ export class ResizeChecker extends EventEmitter { constructor(el: HTMLElement, args: { disabled?: boolean } = {}) { super(); - this.el = validateElArg(el); + this.el = el; this.observer = new ResizeObserver(() => { if (this.expectedSize) { diff --git a/test/functional/apps/console/_console.ts b/test/functional/apps/console/_console.ts index 642314d1fb7f1..456752c0cd6eb 100644 --- a/test/functional/apps/console/_console.ts +++ b/test/functional/apps/console/_console.ts @@ -35,6 +35,8 @@ GET _search export default function({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); const log = getService('log'); + const find = getService('find'); + const browser = getService('browser'); const PageObjects = getPageObjects(['common', 'console']); describe('console app', function describeIndexTests() { @@ -81,5 +83,14 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { expect(await PageObjects.console.getRequestFontSize()).to.be('24px'); }); }); + + it('should resize the editor', async () => { + const editor = await find.byCssSelector('.conApp'); + await browser.setWindowSize(1300, 1100); + const initialSize = await editor.getSize(); + await browser.setWindowSize(1000, 1100); + const afterSize = await editor.getSize(); + expect(initialSize.width).to.be.greaterThan(afterSize.width); + }); }); } diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js index 7e72fedd4b1bb..8c272cc6c4244 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js @@ -6,7 +6,7 @@ import _ from 'lodash'; import React from 'react'; -import { ResizeChecker } from 'ui/resize_checker'; +import { ResizeChecker } from '../../../../../../../../src/plugins/kibana_utils/public'; import { syncLayerOrderForSingleLayer, removeOrphanedSourcesAndLayers, diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js index 73d1dd2818042..857e12cbbe942 100644 --- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js +++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js @@ -32,7 +32,7 @@ import { import chrome from 'ui/chrome'; import { toastNotifications } from 'ui/notify'; -import { ResizeChecker } from 'ui/resize_checker'; +import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public'; import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../common/constants/search'; import { parseInterval } from '../../common/util/parse_interval';