"`;
+exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"
Flyout content
"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = `
Array [
@@ -74,4 +74,4 @@ Array [
]
`;
-exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`;
+exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`;
diff --git a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
index 3928c54f90179..131ec836f5252 100644
--- a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
+++ b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
@@ -29,7 +29,7 @@ Array [
]
`;
-exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`;
+exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`;
exports[`ModalService openModal() with a currently active modal replaces the current modal with a new one 1`] = `
Array [
diff --git a/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/mode/script_highlight_rules.js b/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/mode/script_highlight_rules.js
index 801580f4e158c..b3999c76493c0 100644
--- a/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/mode/script_highlight_rules.js
+++ b/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/mode/script_highlight_rules.js
@@ -61,7 +61,6 @@ export function ScriptHighlightRules() {
},
{
token: 'script.keyword.operator',
-
regex:
'\\?\\.|\\*\\.|=~|==~|!|%|&|\\*|\\-\\-|\\-|\\+\\+|\\+|~|===|==|=|!=|!==|<=|>=|<<=|>>=|>>>=|<>|<|>|->|!|&&|\\|\\||\\?\\:|\\*=|%=|\\+=|\\-=|&=|\\^=|\\b(?:in|instanceof|new|typeof|void)',
},
diff --git a/src/legacy/core_plugins/input_control_vis/index.ts b/src/legacy/core_plugins/input_control_vis/index.ts
new file mode 100644
index 0000000000000..8f6178e26126b
--- /dev/null
+++ b/src/legacy/core_plugins/input_control_vis/index.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { resolve } from 'path';
+import { Legacy } from 'kibana';
+
+import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy/types';
+
+const inputControlVisPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
+ new Plugin({
+ id: 'input_control_vis',
+ require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'data'],
+ publicDir: resolve(__dirname, 'public'),
+ uiExports: {
+ styleSheetPaths: resolve(__dirname, 'public/index.scss'),
+ hacks: [resolve(__dirname, 'public/legacy')],
+ injectDefaultVars: server => ({}),
+ },
+ init: (server: Legacy.Server) => ({}),
+ config(Joi: any) {
+ return Joi.object({
+ enabled: Joi.boolean().default(true),
+ }).default();
+ },
+ } as Legacy.PluginSpecOptions);
+
+// eslint-disable-next-line import/no-default-export
+export default inputControlVisPluginInitializer;
diff --git a/src/legacy/core_plugins/input_control_vis/public/__snapshots__/input_control_fn.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/__snapshots__/input_control_fn.test.ts.snap
similarity index 100%
rename from src/legacy/core_plugins/input_control_vis/public/__snapshots__/input_control_fn.test.js.snap
rename to src/legacy/core_plugins/input_control_vis/public/__snapshots__/input_control_fn.test.ts.snap
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.tsx.snap
similarity index 73%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.tsx.snap
index 809214f756713..632fe63e9e148 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.tsx.snap
@@ -16,9 +16,33 @@ exports[`renders ControlsTab 1`] = `
"size": 5,
"type": "terms",
},
+ "parent": "parent",
"type": "list",
}
}
+ deps={
+ Object {
+ "core": Object {
+ "getStartServices": [MockFunction],
+ "injectedMetadata": Object {
+ "getInjectedVar": [MockFunction],
+ },
+ },
+ "data": Object {
+ "query": Object {
+ "filterManager": Object {
+ "fieldName": "myField",
+ "getAppFilters": [MockFunction],
+ "getGlobalFilters": [MockFunction],
+ "getIndexPattern": [Function],
+ },
+ "timefilter": Object {
+ "timefilter": Object {},
+ },
+ },
+ },
+ }
+ }
getIndexPattern={[Function]}
handleCheckboxOptionChange={[Function]}
handleFieldNameChange={[Function]}
@@ -49,9 +73,33 @@ exports[`renders ControlsTab 1`] = `
"options": Object {
"step": 1,
},
+ "parent": "parent",
"type": "range",
}
}
+ deps={
+ Object {
+ "core": Object {
+ "getStartServices": [MockFunction],
+ "injectedMetadata": Object {
+ "getInjectedVar": [MockFunction],
+ },
+ },
+ "data": Object {
+ "query": Object {
+ "filterManager": Object {
+ "fieldName": "myField",
+ "getAppFilters": [MockFunction],
+ "getGlobalFilters": [MockFunction],
+ "getIndexPattern": [Function],
+ },
+ "timefilter": Object {
+ "timefilter": Object {},
+ },
+ },
+ },
+ }
+ }
getIndexPattern={[Function]}
handleCheckboxOptionChange={[Function]}
handleFieldNameChange={[Function]}
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.tsx.snap
similarity index 98%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.tsx.snap
index ff3d1ffc146e3..9bc8b1b9ac5cd 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`renders dynamic options should display disabled dynamic options with tooltip for non-string fields 1`] = `
{
+ return fields.find(({ name: n }) => n === name);
+};
+
+export const getDepsMock = (): InputControlVisDependencies =>
+ ({
+ core: {
+ getStartServices: jest.fn().mockReturnValue([
+ null,
+ {
+ data: {
+ ui: {
+ IndexPatternSelect: () => () as any,
+ },
+ indexPatterns: {
+ get: () => ({
+ fields,
+ }),
+ },
+ },
+ },
+ ]),
+ injectedMetadata: {
+ getInjectedVar: jest.fn().mockImplementation(key => {
+ switch (key) {
+ case 'autocompleteTimeout':
+ return 1000;
+ case 'autocompleteTerminateAfter':
+ return 100000;
+ default:
+ return '';
+ }
+ }),
+ },
+ },
+ data: {
+ query: {
+ filterManager: {
+ fieldName: 'myField',
+ getIndexPattern: () => ({
+ fields,
+ }),
+ getAppFilters: jest.fn().mockImplementation(() => []),
+ getGlobalFilters: jest.fn().mockImplementation(() => []),
+ },
+ timefilter: {
+ timefilter: {},
+ },
+ },
+ },
+ } as any);
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_pattern_mock.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_pattern_mock.ts
similarity index 82%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_pattern_mock.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_pattern_mock.ts
index c693bf100e265..638dd7170cb8d 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_pattern_mock.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_pattern_mock.ts
@@ -17,7 +17,12 @@
* under the License.
*/
-export const getIndexPatternMock = () => {
+import { IIndexPattern } from '../../../../../../../plugins/data/public';
+
+/**
+ * Returns forced **Partial** IndexPattern for use in tests
+ */
+export const getIndexPatternMock = (): Promise => {
return Promise.resolve({
id: 'mockIndexPattern',
title: 'mockIndexPattern',
@@ -26,5 +31,5 @@ export const getIndexPatternMock = () => {
{ name: 'textField', type: 'string', aggregatable: false },
{ name: 'numberField', type: 'number', aggregatable: true },
],
- });
+ } as IIndexPattern);
};
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_patterns_mock.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_patterns_mock.ts
similarity index 100%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_patterns_mock.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_index_patterns_mock.ts
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_search_service_mock.ts b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_search_service_mock.ts
new file mode 100644
index 0000000000000..9da47bedcc784
--- /dev/null
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/get_search_service_mock.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 { SearchSource } from '../../../legacy_imports';
+
+export const getSearchSourceMock = (esSearchResponse?: any): SearchSource =>
+ jest.fn().mockImplementation(() => ({
+ setParent: jest.fn(),
+ setField: jest.fn(),
+ fetch: jest.fn().mockResolvedValue(
+ esSearchResponse
+ ? esSearchResponse
+ : {
+ aggregations: {
+ termsAgg: {
+ buckets: [
+ {
+ key: 'Zurich Airport',
+ doc_count: 691,
+ },
+ {
+ key: 'Xi an Xianyang International Airport',
+ doc_count: 526,
+ },
+ ],
+ },
+ },
+ }
+ ),
+ }));
diff --git a/src/legacy/core_plugins/input_control_vis/index.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/update_component.ts
similarity index 65%
rename from src/legacy/core_plugins/input_control_vis/index.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/update_component.ts
index a21b79e28fb7f..881412a7c56fd 100644
--- a/src/legacy/core_plugins/input_control_vis/index.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__tests__/update_component.ts
@@ -17,14 +17,15 @@
* under the License.
*/
-import { resolve } from 'path';
+import { ShallowWrapper, ReactWrapper } from 'enzyme';
-export default function(kibana) {
- return new kibana.Plugin({
- uiExports: {
- visTypes: ['plugins/input_control_vis/register_vis'],
- interpreter: ['plugins/input_control_vis/input_control_fn'],
- styleSheetPaths: resolve(__dirname, 'public/index.scss'),
- },
- });
-}
+export const updateComponent = async (
+ component:
+ | ShallowWrapper, React.Component<{}, {}, any>>
+ | ReactWrapper, React.Component<{}, {}, any>>
+) => {
+ // Ensure all promises resolve
+ await new Promise(resolve => process.nextTick(resolve));
+ // Ensure the state changes are reflected
+ component.update();
+};
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.tsx
similarity index 72%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.tsx
index cc31b8d238dbe..dbac5d9d94371 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.tsx
@@ -17,13 +17,10 @@
* under the License.
*/
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { RangeControlEditor } from './range_control_editor';
-import { ListControlEditor } from './list_control_editor';
-import { getTitle } from '../../editor_utils';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import React, { PureComponent, ChangeEvent } from 'react';
+import { InjectedIntlProps } from 'react-intl';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import {
EuiAccordion,
EuiButtonIcon,
@@ -32,11 +29,45 @@ import {
EuiFormRow,
EuiPanel,
EuiSpacer,
+ EuiSwitchEvent,
} from '@elastic/eui';
-class ControlEditorUi extends Component {
- changeLabel = evt => {
- this.props.handleLabelChange(this.props.controlIndex, evt);
+import { RangeControlEditor } from './range_control_editor';
+import { ListControlEditor } from './list_control_editor';
+import { getTitle, ControlParams, CONTROL_TYPES, ControlParamsOptions } from '../../editor_utils';
+import { IIndexPattern } from '../../../../../../plugins/data/public';
+import { InputControlVisDependencies } from '../../plugin';
+
+interface ControlEditorUiProps {
+ controlIndex: number;
+ controlParams: ControlParams;
+ handleLabelChange: (controlIndex: number, event: ChangeEvent) => void;
+ moveControl: (controlIndex: number, direction: number) => void;
+ handleRemoveControl: (controlIndex: number) => void;
+ handleIndexPatternChange: (controlIndex: number, indexPatternId: string) => void;
+ handleFieldNameChange: (controlIndex: number, fieldName: string) => void;
+ getIndexPattern: (indexPatternId: string) => Promise;
+ handleCheckboxOptionChange: (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: EuiSwitchEvent
+ ) => void;
+ handleNumberOptionChange: (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: ChangeEvent
+ ) => void;
+ parentCandidates: Array<{
+ value: string;
+ text: string;
+ }>;
+ handleParentChange: (controlIndex: number, event: ChangeEvent) => void;
+ deps: InputControlVisDependencies;
+}
+
+class ControlEditorUi extends PureComponent {
+ changeLabel = (event: ChangeEvent) => {
+ this.props.handleLabelChange(this.props.controlIndex, event);
};
removeControl = () => {
@@ -51,18 +82,18 @@ class ControlEditorUi extends Component {
this.props.moveControl(this.props.controlIndex, 1);
};
- changeIndexPattern = evt => {
- this.props.handleIndexPatternChange(this.props.controlIndex, evt);
+ changeIndexPattern = (indexPatternId: string) => {
+ this.props.handleIndexPatternChange(this.props.controlIndex, indexPatternId);
};
- changeFieldName = evt => {
- this.props.handleFieldNameChange(this.props.controlIndex, evt);
+ changeFieldName = (fieldName: string) => {
+ this.props.handleFieldNameChange(this.props.controlIndex, fieldName);
};
renderEditor() {
let controlEditor = null;
switch (this.props.controlParams.type) {
- case 'list':
+ case CONTROL_TYPES.LIST:
controlEditor = (
);
break;
- case 'range':
+ case CONTROL_TYPES.RANGE:
controlEditor = (
);
break;
@@ -167,24 +200,4 @@ class ControlEditorUi extends Component {
}
}
-ControlEditorUi.propTypes = {
- controlIndex: PropTypes.number.isRequired,
- controlParams: PropTypes.object.isRequired,
- handleLabelChange: PropTypes.func.isRequired,
- moveControl: PropTypes.func.isRequired,
- handleRemoveControl: PropTypes.func.isRequired,
- handleIndexPatternChange: PropTypes.func.isRequired,
- handleFieldNameChange: PropTypes.func.isRequired,
- getIndexPattern: PropTypes.func.isRequired,
- handleCheckboxOptionChange: PropTypes.func.isRequired,
- handleNumberOptionChange: PropTypes.func.isRequired,
- parentCandidates: PropTypes.arrayOf(
- PropTypes.shape({
- value: PropTypes.string.isRequired,
- text: PropTypes.string.isRequired,
- })
- ).isRequired,
- handleParentChange: PropTypes.func.isRequired,
-};
-
export const ControlEditor = injectI18n(ControlEditorUi);
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
similarity index 87%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
index 28f435c27ea8f..4e7c9bafbf510 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
@@ -17,45 +17,36 @@
* under the License.
*/
-jest.mock('../../../../../core_plugins/data/public/legacy', () => ({
- indexPatterns: {
- indexPatterns: {
- get: jest.fn(),
- },
- },
-}));
-
-jest.mock('ui/new_platform', () => ({
- npStart: {
- plugins: {
- data: {
- ui: {
- IndexPatternSelect: () => {
- return ;
- },
- },
- },
- },
- },
-}));
-
import React from 'react';
import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
+// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';
+import { getDepsMock } from './__tests__/get_deps_mock';
import { getIndexPatternMock } from './__tests__/get_index_pattern_mock';
-import { ControlsTab } from './controls_tab';
+import { ControlsTab, ControlsTabUiProps } from './controls_tab';
const indexPatternsMock = {
get: getIndexPatternMock,
};
-let props;
+let props: ControlsTabUiProps;
beforeEach(() => {
props = {
+ deps: getDepsMock(),
vis: {
API: {
indexPatterns: indexPatternsMock,
},
+ type: {
+ name: 'test',
+ title: 'test',
+ visualization: null,
+ requestHandler: 'test',
+ responseHandler: 'test',
+ stage: 'beta',
+ requiresSearch: false,
+ hidden: false,
+ },
},
stateParams: {
controls: [
@@ -71,6 +62,7 @@ beforeEach(() => {
size: 5,
order: 'desc',
},
+ parent: 'parent',
},
{
id: '2',
@@ -81,10 +73,12 @@ beforeEach(() => {
options: {
step: 1,
},
+ parent: 'parent',
},
],
},
setValue: jest.fn(),
+ intl: null as any,
};
});
@@ -105,7 +99,7 @@ describe('behavior', () => {
'controls',
expect.arrayContaining(props.stateParams.controls)
);
- expect(props.setValue.mock.calls[0][1].length).toEqual(3);
+ expect((props.setValue as jest.Mock).mock.calls[0][1].length).toEqual(3);
});
test('remove control button', () => {
@@ -120,6 +114,7 @@ describe('behavior', () => {
fieldName: 'numberField',
label: '',
type: 'range',
+ parent: 'parent',
options: {
step: 1,
},
@@ -142,6 +137,7 @@ describe('behavior', () => {
fieldName: 'numberField',
label: '',
type: 'range',
+ parent: 'parent',
options: {
step: 1,
},
@@ -152,6 +148,7 @@ describe('behavior', () => {
fieldName: 'keywordField',
label: 'custom label',
type: 'list',
+ parent: 'parent',
options: {
type: 'terms',
multiselect: true,
@@ -177,6 +174,7 @@ describe('behavior', () => {
fieldName: 'numberField',
label: '',
type: 'range',
+ parent: 'parent',
options: {
step: 1,
},
@@ -187,6 +185,7 @@ describe('behavior', () => {
fieldName: 'keywordField',
label: 'custom label',
type: 'list',
+ parent: 'parent',
options: {
type: 'terms',
multiselect: true,
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.tsx
similarity index 68%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.tsx
index 97036d7b0f5df..56381ef7d1570 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.tsx
@@ -17,14 +17,10 @@
* under the License.
*/
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { ControlEditor } from './control_editor';
-import { addControl, moveControl, newControl, removeControl, setControl } from '../../editor_utils';
-import { getLineageMap, getParentCandidates } from '../../lineage';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { npStart } from 'ui/new_platform';
+import React, { PureComponent, ChangeEvent } from 'react';
+import { InjectedIntlProps } from 'react-intl';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import {
EuiButton,
EuiFlexGroup,
@@ -32,55 +28,97 @@ import {
EuiFormRow,
EuiPanel,
EuiSelect,
+ EuiSwitchEvent,
} from '@elastic/eui';
-class ControlsTabUi extends Component {
+import { ControlEditor } from './control_editor';
+import {
+ addControl,
+ moveControl,
+ newControl,
+ removeControl,
+ setControl,
+ ControlParams,
+ CONTROL_TYPES,
+ ControlParamsOptions,
+} from '../../editor_utils';
+import { getLineageMap, getParentCandidates } from '../../lineage';
+import { IIndexPattern } from '../../../../../../plugins/data/public';
+import { VisOptionsProps } from '../../legacy_imports';
+import { InputControlVisDependencies } from '../../plugin';
+
+interface ControlsTabUiState {
+ type: CONTROL_TYPES;
+}
+
+interface ControlsTabUiParams {
+ controls: ControlParams[];
+}
+type ControlsTabUiInjectedProps = InjectedIntlProps &
+ Pick, 'vis' | 'stateParams' | 'setValue'> & {
+ deps: InputControlVisDependencies;
+ };
+
+export type ControlsTabUiProps = ControlsTabUiInjectedProps;
+
+class ControlsTabUi extends PureComponent {
state = {
- type: 'list',
+ type: CONTROL_TYPES.LIST,
};
- getIndexPattern = async indexPatternId => {
- return await npStart.plugins.data.indexPatterns.get(indexPatternId);
+ getIndexPattern = async (indexPatternId: string): Promise => {
+ const [, startDeps] = await this.props.deps.core.getStartServices();
+ return await startDeps.data.indexPatterns.get(indexPatternId);
};
- onChange = value => this.props.setValue('controls', value);
+ onChange = (value: ControlParams[]) => this.props.setValue('controls', value);
- handleLabelChange = (controlIndex, evt) => {
+ handleLabelChange = (controlIndex: number, event: ChangeEvent) => {
const updatedControl = this.props.stateParams.controls[controlIndex];
- updatedControl.label = evt.target.value;
+ updatedControl.label = event.target.value;
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
};
- handleIndexPatternChange = (controlIndex, indexPatternId) => {
+ handleIndexPatternChange = (controlIndex: number, indexPatternId: string) => {
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.indexPattern = indexPatternId;
updatedControl.fieldName = '';
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
};
- handleFieldNameChange = (controlIndex, fieldName) => {
+ handleFieldNameChange = (controlIndex: number, fieldName: string) => {
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.fieldName = fieldName;
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
};
- handleCheckboxOptionChange = (controlIndex, optionName, evt) => {
+ handleCheckboxOptionChange = (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: EuiSwitchEvent
+ ) => {
const updatedControl = this.props.stateParams.controls[controlIndex];
- updatedControl.options[optionName] = evt.target.checked;
+ // @ts-ignore
+ updatedControl.options[optionName] = event.target.checked;
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
};
- handleNumberOptionChange = (controlIndex, optionName, evt) => {
+ handleNumberOptionChange = (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: ChangeEvent
+ ) => {
const updatedControl = this.props.stateParams.controls[controlIndex];
- updatedControl.options[optionName] = parseFloat(evt.target.value);
+ // @ts-ignore
+ updatedControl.options[optionName] = parseFloat(event.target.value);
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
};
- handleRemoveControl = controlIndex => {
+ handleRemoveControl = (controlIndex: number) => {
this.onChange(removeControl(this.props.stateParams.controls, controlIndex));
};
- moveControl = (controlIndex, direction) => {
+ moveControl = (controlIndex: number, direction: number) => {
this.onChange(moveControl(this.props.stateParams.controls, controlIndex, direction));
};
@@ -88,9 +126,9 @@ class ControlsTabUi extends Component {
this.onChange(addControl(this.props.stateParams.controls, newControl(this.state.type)));
};
- handleParentChange = (controlIndex, evt) => {
+ handleParentChange = (controlIndex: number, event: ChangeEvent) => {
const updatedControl = this.props.stateParams.controls[controlIndex];
- updatedControl.parent = evt.target.value;
+ updatedControl.parent = event.target.value;
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
};
@@ -117,6 +155,7 @@ class ControlsTabUi extends Component {
handleNumberOptionChange={this.handleNumberOptionChange}
parentCandidates={parentCandidates}
handleParentChange={this.handleParentChange}
+ deps={this.props.deps}
/>
);
});
@@ -137,14 +176,14 @@ class ControlsTabUi extends Component {
data-test-subj="selectControlType"
options={[
{
- value: 'range',
+ value: CONTROL_TYPES.RANGE,
text: intl.formatMessage({
id: 'inputControl.editor.controlsTab.select.rangeDropDownOptionLabel',
defaultMessage: 'Range slider',
}),
},
{
- value: 'list',
+ value: CONTROL_TYPES.LIST,
text: intl.formatMessage({
id: 'inputControl.editor.controlsTab.select.listDropDownOptionLabel',
defaultMessage: 'Options list',
@@ -152,7 +191,7 @@ class ControlsTabUi extends Component {
},
]}
value={this.state.type}
- onChange={evt => this.setState({ type: evt.target.value })}
+ onChange={event => this.setState({ type: event.target.value as CONTROL_TYPES })}
aria-label={intl.formatMessage({
id: 'inputControl.editor.controlsTab.select.controlTypeAriaLabel',
defaultMessage: 'Select control type',
@@ -186,9 +225,8 @@ class ControlsTabUi extends Component {
}
}
-ControlsTabUi.propTypes = {
- vis: PropTypes.object.isRequired,
- setValue: PropTypes.func.isRequired,
-};
-
export const ControlsTab = injectI18n(ControlsTabUi);
+
+export const getControlsTab = (deps: InputControlVisDependencies) => (
+ props: Omit
+) => ;
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx
similarity index 70%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx
index 456ff17a316a1..bde2f09ab0a47 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx
@@ -18,43 +18,59 @@
*/
import _ from 'lodash';
-import PropTypes from 'prop-types';
import React, { Component } from 'react';
+import { InjectedIntlProps } from 'react-intl';
+
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+
+import { IIndexPattern, IFieldType } from '../../../../../../plugins/data/public';
+
+interface FieldSelectUiState {
+ isLoading: boolean;
+ fields: Array>;
+ indexPatternId: string;
+}
+
+export type FieldSelectUiProps = InjectedIntlProps & {
+ getIndexPattern: (indexPatternId: string) => Promise;
+ indexPatternId: string;
+ onChange: (value: any) => void;
+ fieldName?: string;
+ filterField?: (field: IFieldType) => boolean;
+ controlIndex: number;
+};
-import { EuiFormRow, EuiComboBox } from '@elastic/eui';
+class FieldSelectUi extends Component {
+ private hasUnmounted: boolean;
-class FieldSelectUi extends Component {
- constructor(props) {
+ constructor(props: FieldSelectUiProps) {
super(props);
- this._hasUnmounted = false;
+ this.hasUnmounted = false;
this.state = {
isLoading: false,
fields: [],
indexPatternId: props.indexPatternId,
};
- this.filterField = _.get(props, 'filterField', () => {
- return true;
- });
}
componentWillUnmount() {
- this._hasUnmounted = true;
+ this.hasUnmounted = true;
}
componentDidMount() {
this.loadFields(this.state.indexPatternId);
}
- UNSAFE_componentWillReceiveProps(nextProps) {
+ UNSAFE_componentWillReceiveProps(nextProps: FieldSelectUiProps) {
if (this.props.indexPatternId !== nextProps.indexPatternId) {
- this.loadFields(nextProps.indexPatternId);
+ this.loadFields(nextProps.indexPatternId ?? '');
}
}
- loadFields = indexPatternId => {
+ loadFields = (indexPatternId: string) => {
this.setState(
{
isLoading: true,
@@ -65,12 +81,12 @@ class FieldSelectUi extends Component {
);
};
- debouncedLoad = _.debounce(async indexPatternId => {
+ debouncedLoad = _.debounce(async (indexPatternId: string) => {
if (!indexPatternId || indexPatternId.length === 0) {
return;
}
- let indexPattern;
+ let indexPattern: IIndexPattern;
try {
indexPattern = await this.props.getIndexPattern(indexPatternId);
} catch (err) {
@@ -78,7 +94,7 @@ class FieldSelectUi extends Component {
return;
}
- if (this._hasUnmounted) {
+ if (this.hasUnmounted) {
return;
}
@@ -88,17 +104,15 @@ class FieldSelectUi extends Component {
return;
}
- const fieldsByTypeMap = new Map();
- const fields = [];
- indexPattern.fields.filter(this.filterField).forEach(field => {
- if (fieldsByTypeMap.has(field.type)) {
- const fieldsList = fieldsByTypeMap.get(field.type);
+ const fieldsByTypeMap = new Map();
+ const fields: Array> = [];
+ indexPattern.fields
+ .filter(this.props.filterField ?? (() => true))
+ .forEach((field: IFieldType) => {
+ const fieldsList = fieldsByTypeMap.get(field.type) ?? [];
fieldsList.push(field.name);
fieldsByTypeMap.set(field.type, fieldsList);
- } else {
- fieldsByTypeMap.set(field.type, [field.name]);
- }
- });
+ });
fieldsByTypeMap.forEach((fieldsList, fieldType) => {
fields.push({
@@ -117,11 +131,11 @@ class FieldSelectUi extends Component {
this.setState({
isLoading: false,
- fields: fields,
+ fields,
});
}, 300);
- onChange = selectedOptions => {
+ onChange = (selectedOptions: Array>) => {
this.props.onChange(_.get(selectedOptions, '0.value'));
};
@@ -165,13 +179,4 @@ class FieldSelectUi extends Component {
}
}
-FieldSelectUi.propTypes = {
- getIndexPattern: PropTypes.func.isRequired,
- indexPatternId: PropTypes.string,
- onChange: PropTypes.func.isRequired,
- fieldName: PropTypes.string,
- filterField: PropTypes.func,
- controlIndex: PropTypes.number.isRequired,
-};
-
export const FieldSelect = injectI18n(FieldSelectUi);
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx
similarity index 73%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx
index 7d7fbc0539de0..66fdbca64f053 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx
@@ -17,15 +17,20 @@
* under the License.
*/
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ComponentType } from 'react';
import { injectI18n } from '@kbn/i18n/react';
import { EuiFormRow } from '@elastic/eui';
+import { InjectedIntlProps } from 'react-intl';
+import { IndexPatternSelect } from 'src/plugins/data/public';
-import { npStart } from 'ui/new_platform';
-const { IndexPatternSelect } = npStart.plugins.data.ui;
+export type IndexPatternSelectFormRowUiProps = InjectedIntlProps & {
+ onChange: (opt: any) => void;
+ indexPatternId: string;
+ controlIndex: number;
+ IndexPatternSelect: ComponentType;
+};
-function IndexPatternSelectFormRowUi(props) {
+function IndexPatternSelectFormRowUi(props: IndexPatternSelectFormRowUiProps) {
const { controlIndex, indexPatternId, intl, onChange } = props;
const selectId = `indexPatternSelect-${controlIndex}`;
@@ -37,7 +42,7 @@ function IndexPatternSelectFormRowUi(props) {
defaultMessage: 'Index Pattern',
})}
>
-
);
}
-IndexPatternSelectFormRowUi.propTypes = {
- onChange: PropTypes.func.isRequired,
- indexPatternId: PropTypes.string,
- controlIndex: PropTypes.number.isRequired,
-};
-
export const IndexPatternSelectFormRow = injectI18n(IndexPatternSelectFormRowUi);
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx
similarity index 80%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx
index 24b14943c8bb3..de0187f87212f 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx
@@ -17,31 +17,21 @@
* under the License.
*/
-jest.mock('ui/new_platform', () => ({
- npStart: {
- plugins: {
- data: {
- ui: {
- IndexPatternSelect: () => {
- return ;
- },
- },
- },
- },
- },
-}));
-
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
-import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';
-import { getIndexPatternMock } from './__tests__/get_index_pattern_mock';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { getDepsMock } from './__tests__/get_deps_mock';
+import { getIndexPatternMock } from './__tests__/get_index_pattern_mock';
import { ListControlEditor } from './list_control_editor';
+import { ControlParams } from '../../editor_utils';
+import { updateComponent } from './__tests__/update_component';
-const controlParams = {
+const controlParamsBase: ControlParams = {
id: '1',
indexPattern: 'indexPattern1',
fieldName: 'keywordField',
@@ -53,11 +43,13 @@ const controlParams = {
dynamicOptions: false,
size: 10,
},
+ parent: '',
};
-let handleFieldNameChange;
-let handleIndexPatternChange;
-let handleCheckboxOptionChange;
-let handleNumberOptionChange;
+const deps = getDepsMock();
+let handleFieldNameChange: sinon.SinonSpy;
+let handleIndexPatternChange: sinon.SinonSpy;
+let handleCheckboxOptionChange: sinon.SinonSpy;
+let handleNumberOptionChange: sinon.SinonSpy;
beforeEach(() => {
handleFieldNameChange = sinon.spy();
@@ -68,8 +60,9 @@ beforeEach(() => {
describe('renders', () => {
test('should not display any options until field is selected', async () => {
- const controlParams = {
+ const controlParams: ControlParams = {
id: '1',
+ label: 'mock',
indexPattern: 'mockIndexPattern',
fieldName: '',
type: 'list',
@@ -79,9 +72,11 @@ describe('renders', () => {
dynamicOptions: true,
size: 5,
},
+ parent: '',
};
const component = shallow(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
expect(component).toMatchSnapshot();
});
@@ -109,9 +101,10 @@ describe('renders', () => {
];
const component = shallow(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
expect(component).toMatchSnapshot();
});
describe('dynamic options', () => {
test('should display dynamic options for string fields', async () => {
- const controlParams = {
+ const controlParams: ControlParams = {
id: '1',
+ label: 'mock',
indexPattern: 'mockIndexPattern',
fieldName: 'keywordField',
type: 'list',
@@ -142,9 +133,11 @@ describe('renders', () => {
dynamicOptions: true,
size: 5,
},
+ parent: '',
};
const component = shallow(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
expect(component).toMatchSnapshot();
});
test('should display size field when dynamic options is disabled', async () => {
- const controlParams = {
+ const controlParams: ControlParams = {
id: '1',
+ label: 'mock',
indexPattern: 'mockIndexPattern',
fieldName: 'keywordField',
type: 'list',
@@ -177,9 +168,11 @@ describe('renders', () => {
dynamicOptions: false,
size: 5,
},
+ parent: '',
};
const component = shallow(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
expect(component).toMatchSnapshot();
});
test('should display disabled dynamic options with tooltip for non-string fields', async () => {
- const controlParams = {
+ const controlParams: ControlParams = {
id: '1',
+ label: 'mock',
indexPattern: 'mockIndexPattern',
fieldName: 'numberField',
type: 'list',
@@ -212,9 +203,11 @@ describe('renders', () => {
dynamicOptions: true,
size: 5,
},
+ parent: '',
};
const component = shallow(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
expect(component).toMatchSnapshot();
});
@@ -240,9 +230,10 @@ describe('renders', () => {
test('handleCheckboxOptionChange - multiselect', async () => {
const component = mountWithIntl(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
const checkbox = findTestSubject(component, 'listControlMultiselectInput');
checkbox.simulate('click');
@@ -268,10 +256,10 @@ test('handleCheckboxOptionChange - multiselect', async () => {
handleCheckboxOptionChange,
expectedControlIndex,
expectedOptionName,
- sinon.match(evt => {
- // Synthetic `evt.target.checked` does not get altered by EuiSwitch,
+ sinon.match(event => {
+ // Synthetic `event.target.checked` does not get altered by EuiSwitch,
// but its aria attribute is correctly updated
- if (evt.target.getAttribute('aria-checked') === 'true') {
+ if (event.target.getAttribute('aria-checked') === 'true') {
return true;
}
return false;
@@ -282,9 +270,10 @@ test('handleCheckboxOptionChange - multiselect', async () => {
test('handleNumberOptionChange - size', async () => {
const component = mountWithIntl(
{
/>
);
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
+ await updateComponent(component);
const input = findTestSubject(component, 'listControlSizeInput');
input.simulate('change', { target: { value: 7 } });
@@ -310,8 +296,8 @@ test('handleNumberOptionChange - size', async () => {
handleNumberOptionChange,
expectedControlIndex,
expectedOptionName,
- sinon.match(evt => {
- if (evt.target.value === 7) {
+ sinon.match(event => {
+ if (event.target.value === 7) {
return true;
}
return false;
@@ -322,9 +308,10 @@ test('handleNumberOptionChange - size', async () => {
test('field name change', async () => {
const component = shallowWithIntl(
{
/>
);
- const update = async () => {
- // Ensure all promises resolve
- await new Promise(resolve => process.nextTick(resolve));
- // Ensure the state changes are reflected
- component.update();
- };
-
// ensure that after async loading is complete the DynamicOptionsSwitch is not disabled
expect(
component.find('[data-test-subj="listControlDynamicOptionsSwitch"][disabled=false]')
).toHaveLength(0);
- await update();
+ await updateComponent(component);
expect(
component.find('[data-test-subj="listControlDynamicOptionsSwitch"][disabled=false]')
).toHaveLength(1);
component.setProps({
controlParams: {
- ...controlParams,
+ ...controlParamsBase,
fieldName: 'numberField',
},
});
@@ -361,20 +341,20 @@ test('field name change', async () => {
expect(
component.find('[data-test-subj="listControlDynamicOptionsSwitch"][disabled=true]')
).toHaveLength(0);
- await update();
+ await updateComponent(component);
expect(
component.find('[data-test-subj="listControlDynamicOptionsSwitch"][disabled=true]')
).toHaveLength(1);
component.setProps({
- controlParams,
+ controlParams: controlParamsBase,
});
// ensure that after async loading is complete the DynamicOptionsSwitch is not disabled again, because we switched to original "string" field
expect(
component.find('[data-test-subj="listControlDynamicOptionsSwitch"][disabled=false]')
).toHaveLength(0);
- await update();
+ await updateComponent(component);
expect(
component.find('[data-test-subj="listControlDynamicOptionsSwitch"][disabled=false]')
).toHaveLength(1);
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.tsx
similarity index 70%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.tsx
index 2ee225475b0fe..ff74d30a6e1a8 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.tsx
@@ -17,35 +17,90 @@
* under the License.
*/
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, ChangeEvent, ComponentType } from 'react';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+ EuiFormRow,
+ EuiFieldNumber,
+ EuiSwitch,
+ EuiSelect,
+ EuiSelectProps,
+ EuiSwitchEvent,
+} from '@elastic/eui';
+
import { IndexPatternSelectFormRow } from './index_pattern_select_form_row';
import { FieldSelect } from './field_select';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { ControlParams, ControlParamsOptions } from '../../editor_utils';
+import {
+ IIndexPattern,
+ IFieldType,
+ IndexPatternSelect,
+} from '../../../../../../plugins/data/public';
+import { InputControlVisDependencies } from '../../plugin';
-import { EuiFormRow, EuiFieldNumber, EuiSwitch, EuiSelect } from '@elastic/eui';
+interface ListControlEditorState {
+ isLoadingFieldType: boolean;
+ isStringField: boolean;
+ prevFieldName: string;
+ IndexPatternSelect: ComponentType | null;
+}
-function filterField(field) {
- return field.aggregatable && ['number', 'boolean', 'date', 'ip', 'string'].includes(field.type);
+interface ListControlEditorProps {
+ getIndexPattern: (indexPatternId: string) => Promise;
+ controlIndex: number;
+ controlParams: ControlParams;
+ handleFieldNameChange: (fieldName: string) => void;
+ handleIndexPatternChange: (indexPatternId: string) => void;
+ handleCheckboxOptionChange: (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: EuiSwitchEvent
+ ) => void;
+ handleNumberOptionChange: (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: ChangeEvent
+ ) => void;
+ handleParentChange: (controlIndex: number, event: ChangeEvent) => void;
+ parentCandidates: EuiSelectProps['options'];
+ deps: InputControlVisDependencies;
}
-export class ListControlEditor extends Component {
- state = {
+function filterField(field: IFieldType) {
+ return (
+ Boolean(field.aggregatable) &&
+ ['number', 'boolean', 'date', 'ip', 'string'].includes(field.type)
+ );
+}
+
+export class ListControlEditor extends PureComponent<
+ ListControlEditorProps,
+ ListControlEditorState
+> {
+ private isMounted: boolean = false;
+
+ state: ListControlEditorState = {
isLoadingFieldType: true,
isStringField: false,
prevFieldName: this.props.controlParams.fieldName,
+ IndexPatternSelect: null,
};
componentDidMount() {
- this._isMounted = true;
+ this.isMounted = true;
this.loadIsStringField();
+ this.getIndexPatternSelect();
}
componentWillUnmount() {
- this._isMounted = false;
+ this.isMounted = false;
}
- static getDerivedStateFromProps = (nextProps, prevState) => {
+ static getDerivedStateFromProps = (
+ nextProps: ListControlEditorProps,
+ prevState: ListControlEditorState
+ ) => {
const isNewFieldName = prevState.prevFieldName !== nextProps.controlParams.fieldName;
if (!prevState.isLoadingFieldType && isNewFieldName) {
return {
@@ -63,13 +118,20 @@ export class ListControlEditor extends Component {
}
};
+ async getIndexPatternSelect() {
+ const [, { data }] = await this.props.deps.core.getStartServices();
+ this.setState({
+ IndexPatternSelect: data.ui.IndexPatternSelect,
+ });
+ }
+
loadIsStringField = async () => {
if (!this.props.controlParams.indexPattern || !this.props.controlParams.fieldName) {
this.setState({ isLoadingFieldType: false });
return;
}
- let indexPattern;
+ let indexPattern: IIndexPattern;
try {
indexPattern = await this.props.getIndexPattern(this.props.controlParams.indexPattern);
} catch (err) {
@@ -77,13 +139,13 @@ export class ListControlEditor extends Component {
return;
}
- if (!this._isMounted) {
+ if (!this.isMounted) {
return;
}
- const field = indexPattern.fields.find(field => {
- return field.name === this.props.controlParams.fieldName;
- });
+ const field = (indexPattern.fields as IFieldType[]).find(
+ ({ name }) => name === this.props.controlParams.fieldName
+ );
if (!field) {
return;
}
@@ -121,8 +183,8 @@ export class ListControlEditor extends Component {
{
- this.props.handleParentChange(this.props.controlIndex, evt);
+ onChange={event => {
+ this.props.handleParentChange(this.props.controlIndex, event);
}}
/>
@@ -147,9 +209,9 @@ export class ListControlEditor extends Component {
defaultMessage="Multiselect"
/>
}
- checked={this.props.controlParams.options.multiselect}
- onChange={evt => {
- this.props.handleCheckboxOptionChange(this.props.controlIndex, 'multiselect', evt);
+ checked={this.props.controlParams.options.multiselect ?? true}
+ onChange={event => {
+ this.props.handleCheckboxOptionChange(this.props.controlIndex, 'multiselect', event);
}}
data-test-subj="listControlMultiselectInput"
/>
@@ -180,9 +242,9 @@ export class ListControlEditor extends Component {
defaultMessage="Dynamic Options"
/>
}
- checked={this.props.controlParams.options.dynamicOptions}
- onChange={evt => {
- this.props.handleCheckboxOptionChange(this.props.controlIndex, 'dynamicOptions', evt);
+ checked={this.props.controlParams.options.dynamicOptions ?? false}
+ onChange={event => {
+ this.props.handleCheckboxOptionChange(this.props.controlIndex, 'dynamicOptions', event);
}}
disabled={this.state.isStringField ? false : true}
data-test-subj="listControlDynamicOptionsSwitch"
@@ -212,8 +274,8 @@ export class ListControlEditor extends Component {
{
- this.props.handleNumberOptionChange(this.props.controlIndex, 'size', evt);
+ onChange={event => {
+ this.props.handleNumberOptionChange(this.props.controlIndex, 'size', event);
}}
data-test-subj="listControlSizeInput"
/>
@@ -225,12 +287,17 @@ export class ListControlEditor extends Component {
};
render() {
+ if (this.state.IndexPatternSelect === null) {
+ return null;
+ }
+
return (
-
+ <>
{this.renderOptions()}
-
+
);
}
}
-
-ListControlEditor.propTypes = {
- getIndexPattern: PropTypes.func.isRequired,
- controlIndex: PropTypes.number.isRequired,
- controlParams: PropTypes.object.isRequired,
- handleFieldNameChange: PropTypes.func.isRequired,
- handleIndexPatternChange: PropTypes.func.isRequired,
- handleCheckboxOptionChange: PropTypes.func.isRequired,
- handleNumberOptionChange: PropTypes.func.isRequired,
- parentCandidates: PropTypes.arrayOf(
- PropTypes.shape({
- value: PropTypes.string.isRequired,
- text: PropTypes.string.isRequired,
- })
- ).isRequired,
- handleParentChange: PropTypes.func.isRequired,
-};
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.tsx
similarity index 93%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.tsx
index ef84d37ca8de5..36ec4d4446fd6 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.tsx
@@ -21,17 +21,19 @@ import React from 'react';
import { shallow } from 'enzyme';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { OptionsTab } from './options_tab';
+import { OptionsTab, OptionsTabProps } from './options_tab';
+import { Vis } from '../../legacy_imports';
describe('OptionsTab', () => {
- let props;
+ let props: OptionsTabProps;
beforeEach(() => {
props = {
- vis: {},
+ vis: {} as Vis,
stateParams: {
updateFiltersOnChange: false,
useTimeFilter: false,
+ pinFilters: false,
},
setValue: jest.fn(),
};
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.tsx
similarity index 74%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.tsx
index 236624b11118c..43f9e15302e51 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.tsx
@@ -17,24 +17,37 @@
* under the License.
*/
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
import { EuiForm, EuiFormRow, EuiSwitch } from '@elastic/eui';
-
import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiSwitchEvent } from '@elastic/eui';
+
+import { VisOptionsProps } from '../../legacy_imports';
+
+interface OptionsTabParams {
+ updateFiltersOnChange: boolean;
+ useTimeFilter: boolean;
+ pinFilters: boolean;
+}
+type OptionsTabInjectedProps = Pick<
+ VisOptionsProps,
+ 'vis' | 'setValue' | 'stateParams'
+>;
+
+export type OptionsTabProps = OptionsTabInjectedProps;
-export class OptionsTab extends Component {
- handleUpdateFiltersChange = evt => {
- this.props.setValue('updateFiltersOnChange', evt.target.checked);
+export class OptionsTab extends PureComponent {
+ handleUpdateFiltersChange = (event: EuiSwitchEvent) => {
+ this.props.setValue('updateFiltersOnChange', event.target.checked);
};
- handleUseTimeFilter = evt => {
- this.props.setValue('useTimeFilter', evt.target.checked);
+ handleUseTimeFilter = (event: EuiSwitchEvent) => {
+ this.props.setValue('useTimeFilter', event.target.checked);
};
- handlePinFilters = evt => {
- this.props.setValue('pinFilters', evt.target.checked);
+ handlePinFilters = (event: EuiSwitchEvent) => {
+ this.props.setValue('pinFilters', event.target.checked);
};
render() {
@@ -85,8 +98,3 @@ export class OptionsTab extends Component {
);
}
}
-
-OptionsTab.propTypes = {
- vis: PropTypes.object.isRequired,
- setValue: PropTypes.func.isRequired,
-};
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
deleted file mode 100644
index 6e1754b28647f..0000000000000
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
+++ /dev/null
@@ -1,102 +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 PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
-import { IndexPatternSelectFormRow } from './index_pattern_select_form_row';
-import { FieldSelect } from './field_select';
-
-import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
-
-import { FormattedMessage } from '@kbn/i18n/react';
-
-function filterField(field) {
- return field.type === 'number';
-}
-
-export function RangeControlEditor(props) {
- const stepSizeId = `stepSize-${props.controlIndex}`;
- const decimalPlacesId = `decimalPlaces-${props.controlIndex}`;
- const handleDecimalPlacesChange = evt => {
- props.handleNumberOptionChange(props.controlIndex, 'decimalPlaces', evt);
- };
- const handleStepChange = evt => {
- props.handleNumberOptionChange(props.controlIndex, 'step', evt);
- };
- return (
-
-
-
-
-
-
- }
- >
-
-
-
-
- }
- >
-
-
-
- );
-}
-
-RangeControlEditor.propTypes = {
- getIndexPattern: PropTypes.func.isRequired,
- controlIndex: PropTypes.number.isRequired,
- controlParams: PropTypes.object.isRequired,
- handleFieldNameChange: PropTypes.func.isRequired,
- handleIndexPatternChange: PropTypes.func.isRequired,
- handleNumberOptionChange: PropTypes.func.isRequired,
-};
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx
similarity index 71%
rename from src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js
rename to src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx
index 145b18a42dc15..e7f9b6083890c 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx
@@ -18,30 +18,20 @@
*/
import React from 'react';
-import sinon from 'sinon';
import { shallow } from 'enzyme';
+import { SinonSpy, spy, assert, match } from 'sinon';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
-jest.mock('ui/new_platform', () => ({
- npStart: {
- plugins: {
- data: {
- ui: {
- IndexPatternSelect: () => {
- return ;
- },
- },
- },
- },
- },
-}));
-
+// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';
import { getIndexPatternMock } from './__tests__/get_index_pattern_mock';
import { RangeControlEditor } from './range_control_editor';
+import { ControlParams } from '../../editor_utils';
+import { getDepsMock } from './__tests__/get_deps_mock';
+import { updateComponent } from './__tests__/update_component';
-const controlParams = {
+const controlParams: ControlParams = {
id: '1',
indexPattern: 'indexPattern1',
fieldName: 'numberField',
@@ -51,20 +41,23 @@ const controlParams = {
decimalPlaces: 0,
step: 1,
},
+ parent: '',
};
-let handleFieldNameChange;
-let handleIndexPatternChange;
-let handleNumberOptionChange;
+const deps = getDepsMock();
+let handleFieldNameChange: SinonSpy;
+let handleIndexPatternChange: SinonSpy;
+let handleNumberOptionChange: SinonSpy;
beforeEach(() => {
- handleFieldNameChange = sinon.spy();
- handleIndexPatternChange = sinon.spy();
- handleNumberOptionChange = sinon.spy();
+ handleFieldNameChange = spy();
+ handleIndexPatternChange = spy();
+ handleNumberOptionChange = spy();
});
-test('renders RangeControlEditor', () => {
+test('renders RangeControlEditor', async () => {
const component = shallow(
{
handleNumberOptionChange={handleNumberOptionChange}
/>
);
+
+ await updateComponent(component);
+
expect(component).toMatchSnapshot(); // eslint-disable-line
});
-test('handleNumberOptionChange - step', () => {
+test('handleNumberOptionChange - step', async () => {
const component = mountWithIntl(
{
handleNumberOptionChange={handleNumberOptionChange}
/>
);
+
+ await updateComponent(component);
+
findTestSubject(component, 'rangeControlSizeInput0').simulate('change', {
target: { value: 0.5 },
});
- sinon.assert.notCalled(handleFieldNameChange);
- sinon.assert.notCalled(handleIndexPatternChange);
+ assert.notCalled(handleFieldNameChange);
+ assert.notCalled(handleIndexPatternChange);
const expectedControlIndex = 0;
const expectedOptionName = 'step';
- sinon.assert.calledWith(
+ assert.calledWith(
handleNumberOptionChange,
expectedControlIndex,
expectedOptionName,
- sinon.match(evt => {
- if (evt.target.value === 0.5) {
+ match(event => {
+ if (event.target.value === 0.5) {
return true;
}
return false;
@@ -107,9 +107,10 @@ test('handleNumberOptionChange - step', () => {
);
});
-test('handleNumberOptionChange - decimalPlaces', () => {
+test('handleNumberOptionChange - decimalPlaces', async () => {
const component = mountWithIntl(
{
handleNumberOptionChange={handleNumberOptionChange}
/>
);
+
+ await updateComponent(component);
+
findTestSubject(component, 'rangeControlDecimalPlacesInput0').simulate('change', {
target: { value: 2 },
});
- sinon.assert.notCalled(handleFieldNameChange);
- sinon.assert.notCalled(handleIndexPatternChange);
+ assert.notCalled(handleFieldNameChange);
+ assert.notCalled(handleIndexPatternChange);
const expectedControlIndex = 0;
const expectedOptionName = 'decimalPlaces';
- sinon.assert.calledWith(
+ assert.calledWith(
handleNumberOptionChange,
expectedControlIndex,
expectedOptionName,
- sinon.match(evt => {
- if (evt.target.value === 2) {
+ match(event => {
+ if (event.target.value === 2) {
return true;
}
return false;
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.tsx b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.tsx
new file mode 100644
index 0000000000000..44477eafda6b1
--- /dev/null
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.tsx
@@ -0,0 +1,139 @@
+/*
+ * 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 React, { Component, Fragment, ChangeEvent, ComponentType } from 'react';
+
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { IndexPatternSelectFormRow } from './index_pattern_select_form_row';
+import { FieldSelect } from './field_select';
+import { ControlParams, ControlParamsOptions } from '../../editor_utils';
+import {
+ IIndexPattern,
+ IFieldType,
+ IndexPatternSelect,
+} from '../../../../../../plugins/data/public';
+import { InputControlVisDependencies } from '../../plugin';
+
+interface RangeControlEditorProps {
+ controlIndex: number;
+ controlParams: ControlParams;
+ getIndexPattern: (indexPatternId: string) => Promise;
+ handleFieldNameChange: (fieldName: string) => void;
+ handleIndexPatternChange: (indexPatternId: string) => void;
+ handleNumberOptionChange: (
+ controlIndex: number,
+ optionName: keyof ControlParamsOptions,
+ event: ChangeEvent
+ ) => void;
+ deps: InputControlVisDependencies;
+}
+
+interface RangeControlEditorState {
+ IndexPatternSelect: ComponentType | null;
+}
+
+function filterField(field: IFieldType) {
+ return field.type === 'number';
+}
+
+export class RangeControlEditor extends Component<
+ RangeControlEditorProps,
+ RangeControlEditorState
+> {
+ state: RangeControlEditorState = {
+ IndexPatternSelect: null,
+ };
+
+ componentDidMount() {
+ this.getIndexPatternSelect();
+ }
+
+ async getIndexPatternSelect() {
+ const [, { data }] = await this.props.deps.core.getStartServices();
+ this.setState({
+ IndexPatternSelect: data.ui.IndexPatternSelect,
+ });
+ }
+
+ render() {
+ const stepSizeId = `stepSize-${this.props.controlIndex}`;
+ const decimalPlacesId = `decimalPlaces-${this.props.controlIndex}`;
+ if (this.state.IndexPatternSelect === null) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+ }
+ >
+ {
+ this.props.handleNumberOptionChange(this.props.controlIndex, 'step', event);
+ }}
+ data-test-subj={`rangeControlSizeInput${this.props.controlIndex}`}
+ />
+
+
+
+ }
+ >
+ {
+ this.props.handleNumberOptionChange(this.props.controlIndex, 'decimalPlaces', event);
+ }}
+ data-test-subj={`rangeControlDecimalPlacesInput${this.props.controlIndex}`}
+ />
+
+
+ );
+ }
+}
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.tsx.snap
similarity index 98%
rename from src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
rename to src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.tsx.snap
index 6437cb19aef97..ba183cc40b126 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.tsx.snap
@@ -47,7 +47,6 @@ exports[`renders disabled control with tooltip 1`] = `
anchorClassName="eui-displayBlock"
content="I am disabled for testing purposes"
delay="regular"
- placement="top"
position="top"
>