[Field formats] Fix switching away from duration formatter (#93818) (#94631)

* simplify field format editor rendering, fixes switching away from duration formatter

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 ? (
       <FormattedMessage
         id="indexPatternFieldEditor.defaultFormatHeader"

test/functional/apps/management/_field_formatter.js

@@ -0,0 +1,53 @@
+/*
+ * 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');
+      await kibanaServer.uiSettings.replace({});
+      await kibanaServer.uiSettings.update({});
+    });
+
+    after(async function afterAll() {
+      await PageObjects.settings.navigateTo();
+      await esArchiver.emptyKibanaIndex();
+    });
+
+    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();
+      });
+    });
+  });
+}

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 () {