From 2596c9d73e8fb38157b836c678749ed55270cdb0 Mon Sep 17 00:00:00 2001
From: sainthkh <sainthkh@naver.com>
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 | any>(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) {
<HistoryViewer
settings={readOnlySettings}
req={viewingReq}
- ResizeChecker={ResizeChecker}
/>
</div>
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<HTMLDivElement | null>(null);
const viewerRef = useRef<any | null>(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,
}}
>
<EditorContextProvider settings={settings.toJSON()}>
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<any, any> {
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<any, any> {
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 = $('<div>').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($('<div>'));
- });
- });
-
- 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';