In scripted fields, unable to switch the Type - getting a console error which says - Class constructor DecoratedFieldFormat cannot be invoked without 'new' (#59285)

Closes: #58763

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/legacy/ui/public/field_editor/field_editor.js

@@ -66,7 +66,7 @@ import { ScriptingHelpFlyout } from './components/scripting_help';
 import { FieldFormatEditor } from './components/field_format_editor';
 
 import { FIELD_TYPES_BY_LANG, DEFAULT_FIELD_TYPES } from './constants';
-import { copyField, getDefaultFormat, executeScript, isScriptValid } from './lib';
+import { copyField, executeScript, isScriptValid } from './lib';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -76,6 +76,25 @@ import 'brace/mode/groovy';
 
 const getFieldFormats = () => npStart.plugins.data.fieldFormats;
 
+const getFieldTypeFormatsList = (field, defaultFieldFormat) => {
+  const fieldFormats = getFieldFormats();
+  const formatsByType = fieldFormats.getByFieldType(field.type).map(({ id, title }) => ({
+    id,
+    title,
+  }));
+
+  return [
+    {
+      id: '',
+      defaultFieldFormat,
+      title: i18n.translate('common.ui.fieldEditor.defaultFormatDropDown', {
+        defaultMessage: '- Default -',
+      }),
+    },
+    ...formatsByType,
+  ];
+};
+
 export class FieldEditor extends PureComponent {
   static propTypes = {
     indexPattern: PropTypes.object.isRequired,
@@ -137,11 +156,7 @@ export class FieldEditor extends PureComponent {
     field.type = fieldTypes.includes(field.type) ? field.type : fieldTypes[0];
 
     const fieldFormats = getFieldFormats();
-
-    const fieldTypeFormats = [
-      getDefaultFormat(fieldFormats.getDefaultType(field.type, field.esTypes)),
-      ...fieldFormats.getByFieldType(field.type),
-    ];
+    const DefaultFieldFormat = fieldFormats.getDefaultType(field.type, field.esTypes);
 
     this.setState({
       isReady: true,
@@ -150,14 +165,14 @@ export class FieldEditor extends PureComponent {
       errors: [],
       scriptingLangs,
       fieldTypes,
-      fieldTypeFormats,
+      fieldTypeFormats: getFieldTypeFormatsList(field, DefaultFieldFormat),
       fieldFormatId: get(indexPattern, ['fieldFormatMap', field.name, 'type', 'id']),
       fieldFormatParams: field.format.params(),
     });
   }
 
   onFieldChange = (fieldName, value) => {
-    const field = this.state.field;
+    const { field } = this.state;
     field[fieldName] = value;
     this.forceUpdate();
   };
@@ -169,18 +184,11 @@ export class FieldEditor extends PureComponent {
     const DefaultFieldFormat = fieldFormats.getDefaultType(type);
 
     field.type = type;
-
-    const fieldTypeFormats = [
-      getDefaultFormat(DefaultFieldFormat),
-      ...getFieldFormats().getByFieldType(field.type),
-    ];
-
-    const FieldFormat = fieldTypeFormats[0];
-    field.format = new FieldFormat(null, getConfig);
+    field.format = new DefaultFieldFormat(null, getConfig);
 
     this.setState({
-      fieldTypeFormats,
-      fieldFormatId: FieldFormat.id,
+      fieldTypeFormats: getFieldTypeFormatsList(field, DefaultFieldFormat),
+      fieldFormatId: DefaultFieldFormat.id,
       fieldFormatParams: field.format.params(),
     });
   };
@@ -197,12 +205,13 @@ export class FieldEditor extends PureComponent {
   };
 
   onFormatChange = (formatId, params) => {
-    const { getConfig } = this.props.helpers;
+    const fieldFormats = getFieldFormats();
     const { field, fieldTypeFormats } = this.state;
-    const FieldFormat =
-      fieldTypeFormats.find(format => format.id === formatId) || fieldTypeFormats[0];
+    const FieldFormat = fieldFormats.getType(
+      formatId || fieldTypeFormats[0]?.defaultFieldFormat.id
+    );
 
-    field.format = new FieldFormat(params, getConfig);
+    field.format = new FieldFormat(params, this.props.helpers.getConfig);
 
     this.setState({
       fieldFormatId: FieldFormat.id,
@@ -416,7 +425,8 @@ export class FieldEditor extends PureComponent {
   renderFormat() {
     const { field, fieldTypeFormats, fieldFormatId, fieldFormatParams } = this.state;
     const { fieldFormatEditors } = this.props.helpers;
-    const defaultFormat = fieldTypeFormats[0] && fieldTypeFormats[0].resolvedTitle;
+    const defaultFormat = fieldTypeFormats[0]?.defaultFieldFormat.title;
+
     const label = defaultFormat ? (
       <FormattedMessage
         id="common.ui.fieldEditor.defaultFormatHeader"

src/legacy/ui/public/field_editor/lib/__tests__/get_default_format.test.js

@@ -1,40 +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 { getDefaultFormat } from '../get_default_format';
-import { fieldFormats } from '../../../../../../plugins/data/public';
-
-const getConfig = () => {
-  return '0,0.[000]';
-};
-
-describe('getDefaultFormat', () => {
-  it('should create default format', () => {
-    const DefaultFormat = getDefaultFormat(fieldFormats.NumberFormat);
-    const defaultFormatObject = new DefaultFormat(null, getConfig);
-    const formatObject = new fieldFormats.NumberFormat(null, getConfig);
-
-    expect(DefaultFormat.id).toEqual('');
-    expect(DefaultFormat.resolvedTitle).toEqual(fieldFormats.NumberFormat.title);
-    expect(DefaultFormat.title).toEqual('- Default -');
-    expect(JSON.stringify(defaultFormatObject.params())).toEqual(
-      JSON.stringify(formatObject.params())
-    );
-  });
-});

src/legacy/ui/public/field_editor/lib/get_default_format.js

@@ -1,32 +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 { i18n } from '@kbn/i18n';
-
-export const getDefaultFormat = Format => {
-  class DefaultFormat extends Format {
-    static id = '';
-    static resolvedTitle = Format.title;
-    static title = i18n.translate('common.ui.fieldEditor.defaultFormatDropDown', {
-      defaultMessage: '- Default -',
-    });
-  }
-
-  return DefaultFormat;
-};

src/legacy/ui/public/field_editor/lib/index.js

@@ -18,5 +18,4 @@
  */
 
 export { copyField } from './copy_field';
-export { getDefaultFormat } from './get_default_format';
 export { executeScript, isScriptValid } from './validate_script';