From db5fa24c0e2edbb13342d843f1dda3da1b7060b7 Mon Sep 17 00:00:00 2001 From: Matt Kime Date: Fri, 5 Mar 2021 12:56:39 -0600 Subject: [PATCH 1/3] simplify field format editor rendering --- .../field_format_editor.tsx | 55 ++++++------------- 1 file changed, 17 insertions(+), 38 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx index 1f3e87e69fd4c..155fbc7fd31f5 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx @@ -17,7 +17,6 @@ import { KBN_FIELD_TYPES, ES_FIELD_TYPES, DataPublicPluginStart, - FieldFormat, } from 'src/plugins/data/public'; import { CoreStart } from 'src/core/public'; import { castEsToKbnFieldTypeName } from '../../../../data/public'; @@ -45,7 +44,6 @@ export interface FormatSelectEditorState { fieldTypeFormats: FieldTypeFormat[]; fieldFormatId?: string; fieldFormatParams?: { [key: string]: unknown }; - format: FieldFormat; kbnType: KBN_FIELD_TYPES; } @@ -81,67 +79,48 @@ export class FormatSelectEditor extends PureComponent< > { constructor(props: FormatSelectEditorProps) { super(props); - const { fieldFormats, esTypes, value } = props; + const { fieldFormats, esTypes } = props; const kbnType = castEsToKbnFieldTypeName(esTypes[0] || 'keyword'); - // get current formatter for field, provides default if none exists - const format = value?.id - ? fieldFormats.getInstance(value?.id, value?.params) - : fieldFormats.getDefaultInstance(kbnType, esTypes); - this.state = { fieldTypeFormats: getFieldTypeFormatsList( kbnType, fieldFormats.getDefaultType(kbnType, esTypes) as FieldFormatInstanceType, fieldFormats ), - format, kbnType, }; } - onFormatChange = (formatId: string, params?: any) => { - const { fieldTypeFormats } = this.state; - const { fieldFormats, uiSettings } = this.props; - - const FieldFormatClass = fieldFormats.getType( - formatId || (fieldTypeFormats[0] as InitialFieldTypeFormat).defaultFieldFormat.id - ) as FieldFormatInstanceType; - - const newFormat = new FieldFormatClass(params, (key: string) => uiSettings.get(key)); - - this.setState( - { - fieldFormatId: formatId, - fieldFormatParams: params, - format: newFormat, - }, - () => { - this.props.onChange( - formatId - ? { - id: formatId, - params: params || {}, - } - : undefined - ); - } + onFormatChange = (formatId: string, params?: any) => + this.props.onChange( + formatId + ? { + id: formatId, + params: params || {}, + } + : undefined ); - }; + onFormatParamsChange = (newParams: { fieldType: string; [key: string]: any }) => { const { fieldFormatId } = this.state; this.onFormatChange(fieldFormatId as string, newParams); }; render() { - const { fieldFormatEditors, onError, value } = this.props; + const { fieldFormatEditors, onError, value, fieldFormats, esTypes } = this.props; const fieldFormatId = value?.id; const fieldFormatParams = value?.params; const { kbnType } = this.state; - const { fieldTypeFormats, format } = this.state; + const { fieldTypeFormats } = this.state; const defaultFormat = (fieldTypeFormats[0] as InitialFieldTypeFormat).defaultFieldFormat.title; + // get current formatter for field, provides default if none exists + const format = value?.id + ? fieldFormats.getInstance(value?.id, value?.params) + : fieldFormats.getDefaultInstance(kbnType, esTypes); + const label = defaultFormat ? ( Date: Tue, 9 Mar 2021 23:19:11 -0600 Subject: [PATCH 2/3] add functional test --- .../apps/management/_field_formatter.js | 55 +++++++++++++++++++ test/functional/apps/management/index.ts | 1 + 2 files changed, 56 insertions(+) create mode 100644 test/functional/apps/management/_field_formatter.js diff --git a/test/functional/apps/management/_field_formatter.js b/test/functional/apps/management/_field_formatter.js new file mode 100644 index 0000000000000..a2ffe3dee1f99 --- /dev/null +++ b/test/functional/apps/management/_field_formatter.js @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export default function ({ getService, getPageObjects }) { + const esArchiver = getService('esArchiver'); + const kibanaServer = getService('kibanaServer'); + const browser = getService('browser'); + const PageObjects = getPageObjects(['settings']); + const testSubjects = getService('testSubjects'); + + describe('field formatter', function () { + this.tags(['skipFirefox']); + + before(async function () { + await browser.setWindowSize(1200, 800); + await esArchiver.load('discover'); + // delete .kibana index and then wait for Kibana to re-create it + await kibanaServer.uiSettings.replace({}); + await kibanaServer.uiSettings.update({}); + }); + + after(async function afterAll() { + await PageObjects.settings.navigateTo(); + await PageObjects.settings.clickKibanaIndexPatterns(); + await PageObjects.settings.removeLogstashIndexPatternIfExist(); + }); + + describe('set and change field formatter', function describeIndexTests() { + // addresses https://github.com/elastic/kibana/issues/93349 + it('can change format more than once', async function () { + await PageObjects.settings.navigateTo(); + await PageObjects.settings.clickKibanaIndexPatterns(); + await PageObjects.settings.clickIndexPatternLogstash(); + await PageObjects.settings.clickAddField(); + await PageObjects.settings.setFieldType('Long'); + const formatRow = await testSubjects.find('formatRow'); + const formatRowToggle = ( + await formatRow.findAllByCssSelector('[data-test-subj="toggle"]') + )[0]; + + await formatRowToggle.click(); + await PageObjects.settings.setFieldFormat('duration'); + await PageObjects.settings.setFieldFormat('bytes'); + await PageObjects.settings.setFieldFormat('duration'); + await testSubjects.click('euiFlyoutCloseButton'); + await PageObjects.settings.closeIndexPatternFieldEditor(); + }); + }); + }); +} diff --git a/test/functional/apps/management/index.ts b/test/functional/apps/management/index.ts index fcb4e49dc7548..ac0df0aa90c4d 100644 --- a/test/functional/apps/management/index.ts +++ b/test/functional/apps/management/index.ts @@ -34,6 +34,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { loadTestFile(require.resolve('./_index_patterns_empty')); loadTestFile(require.resolve('./_scripted_fields')); loadTestFile(require.resolve('./_runtime_fields')); + loadTestFile(require.resolve('./_field_formatter')); }); describe('', function () { From 6e5cce794dfda8c731797ddca265a8f78809f472 Mon Sep 17 00:00:00 2001 From: Matt Kime Date: Wed, 10 Mar 2021 09:16:09 -0600 Subject: [PATCH 3/3] clean up test --- test/functional/apps/management/_field_formatter.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/functional/apps/management/_field_formatter.js b/test/functional/apps/management/_field_formatter.js index a2ffe3dee1f99..49b6c162caa41 100644 --- a/test/functional/apps/management/_field_formatter.js +++ b/test/functional/apps/management/_field_formatter.js @@ -19,15 +19,13 @@ export default function ({ getService, getPageObjects }) { before(async function () { await browser.setWindowSize(1200, 800); await esArchiver.load('discover'); - // delete .kibana index and then wait for Kibana to re-create it await kibanaServer.uiSettings.replace({}); await kibanaServer.uiSettings.update({}); }); after(async function afterAll() { await PageObjects.settings.navigateTo(); - await PageObjects.settings.clickKibanaIndexPatterns(); - await PageObjects.settings.removeLogstashIndexPatternIfExist(); + await esArchiver.emptyKibanaIndex(); }); describe('set and change field formatter', function describeIndexTests() {