[FieldFormats] fix example plugin: register examples format on server (#119483)

examples/field_formats_example/common/example_currency_format.ts

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+import { KBN_FIELD_TYPES } from '@kbn/field-types';
+import { FieldFormat } from '../../../src/plugins/field_formats/common';
+
+// 1. Create a custom formatter by extending {@link FieldFormat}
+export class ExampleCurrencyFormat extends FieldFormat {
+  static id = 'example-currency';
+  static title = 'Currency (example)';
+
+  // 2. Specify field types that this formatter supports
+  static fieldType = KBN_FIELD_TYPES.NUMBER;
+
+  // Or pass an array in case supports multiple types
+  // static fieldType = [KBN_FIELD_TYPES.NUMBER, KBN_FIELD_TYPES.DATE];
+
+  // 3. This formats support a `currency` param. Use `EUR` as a default.
+  getParamDefaults() {
+    return {
+      currency: 'EUR',
+    };
+  }
+
+  // 4. Implement a conversion function
+  textConvert = (val: unknown) => {
+    if (typeof val !== 'number') return `${val}`;
+
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: this.param('currency'),
+    }).format(val);
+  };
+}

examples/field_formats_example/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 { ExampleCurrencyFormat } from './example_currency_format';

examples/field_formats_example/kibana.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "kibanaVersion": "kibana",
   "ui": true,
+  "server": true,
   "owner": {
     "name": "App Services",
     "githubTeam": "kibana-app-services"

examples/field_formats_example/public/app.tsx

@@ -29,7 +29,11 @@ import * as example2 from './examples/2_creating_custom_formatter';
 // @ts-ignore
 import example1SampleCode from '!!raw-loader!./examples/1_using_existing_format';
 // @ts-ignore
-import example2SampleCode from '!!raw-loader!./examples/2_creating_custom_formatter';
+import example2SampleCodePart1 from '!!raw-loader!../common/example_currency_format';
+// @ts-ignore
+import example2SampleCodePart2 from '!!raw-loader!./examples/2_creating_custom_formatter';
+// @ts-ignore
+import example2SampleCodePart3 from '!!raw-loader!../server/examples/2_creating_custom_formatter';
 // @ts-ignore
 import example3SampleCode from '!!raw-loader!./examples/3_creating_custom_format_editor';
 
@@ -88,11 +92,16 @@ const CreatingCustomFieldFormat: React.FC<{ deps: Deps }> = (props) => {
       <EuiText>
         <p>
           This example shows how to create a custom field formatter. As an example, we create a
-          currency formatter and then display some values as <EuiCode>USD</EuiCode>.
+          currency formatter and then display some values as <EuiCode>USD</EuiCode>. Custom field
+          formatter has to be registered both client and server side.
         </p>
       </EuiText>
       <EuiSpacer size={'s'} />
-      <EuiCodeBlock>{example2SampleCode}</EuiCodeBlock>
+      <EuiCodeBlock>{example2SampleCodePart1}</EuiCodeBlock>
+      <EuiSpacer size={'xs'} />
+      <EuiCodeBlock>{example2SampleCodePart2}</EuiCodeBlock>
+      <EuiSpacer size={'xs'} />
+      <EuiCodeBlock>{example2SampleCodePart3}</EuiCodeBlock>
       <EuiSpacer size={'s'} />
       <EuiBasicTable
         items={sample}

examples/field_formats_example/public/examples/2_creating_custom_formatter.ts

@@ -6,44 +6,20 @@
  * Side Public License, v 1.
  */
 
-import { KBN_FIELD_TYPES } from '@kbn/field-types';
-import { FieldFormat, SerializedFieldFormat } from '../../../../src/plugins/field_formats/common';
+import { SerializedFieldFormat } from '../../../../src/plugins/field_formats/common';
 import { FieldFormatsSetup, FieldFormatsStart } from '../../../../src/plugins/field_formats/public';
 
-// 1. Create a custom formatter by extending {@link FieldFormat}
-export class ExampleCurrencyFormat extends FieldFormat {
-  static id = 'example-currency';
-  static title = 'Currency (example)';
-
-  // 2. Specify field types that this formatter supports
-  static fieldType = KBN_FIELD_TYPES.NUMBER;
-
-  // Or pass an array in case supports multiple types
-  // static fieldType = [KBN_FIELD_TYPES.NUMBER, KBN_FIELD_TYPES.DATE];
-
-  // 3. This formats support a `currency` param. Use `EUR` as a default.
-  getParamDefaults() {
-    return {
-      currency: 'EUR',
-    };
-  }
-
-  // 4. Implement a conversion function
-  textConvert = (val: unknown) => {
-    if (typeof val !== 'number') return `${val}`;
-
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: this.param('currency'),
-    }).format(val);
-  };
-}
+import { ExampleCurrencyFormat } from '../../common';
 
 export function registerExampleFormat(fieldFormats: FieldFormatsSetup) {
-  // 5. Register a field format. This should happen in setup plugin lifecycle phase.
+  // 5.1 Register a field format. This should happen in setup plugin lifecycle phase.
   fieldFormats.register([ExampleCurrencyFormat]);
 }
 
+// 5.2 also register a field formatter with the same `formatId` server-side.
+// This is required for some server-side features like CSV export,
+// see: examples/field_formats_example/public/examples/2_creating_custom_formatter.ts
+
 // 6. Now let's apply the formatter to some sample values
 export function getSample(fieldFormats: FieldFormatsStart) {
   const exampleSerializedFieldFormat: SerializedFieldFormat<{ currency: string }> = {

examples/field_formats_example/public/examples/3_creating_custom_format_editor.tsx

@@ -13,7 +13,7 @@ import {
   FieldFormatEditorFactory,
   IndexPatternFieldEditorSetup,
 } from '../../../../src/plugins/data_view_field_editor/public';
-import { ExampleCurrencyFormat } from './2_creating_custom_formatter';
+import { ExampleCurrencyFormat } from '../../common';
 
 // 1. Create an editor component
 // NOTE: the `params` field is not type checked and a consumer has to know the `param` format that a particular `formatId` expects,

examples/field_formats_example/server/examples/2_creating_custom_formatter.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+// This is server-side continuation of examples/field_formats_example/public/examples/2_creating_custom_formatter.ts
+
+import { FieldFormatsSetup } from '../../../../src/plugins/field_formats/server';
+
+import { ExampleCurrencyFormat } from '../../common';
+
+// When registering a field formatter, be sure to also register it server-side.
+// This would be needed, for example, for CSV generation, as reports are generated server-side.
+export function registerExampleFormat(fieldFormats: FieldFormatsSetup) {
+  fieldFormats.register(ExampleCurrencyFormat);
+}

examples/field_formats_example/server/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+import { FieldFormatsExamplePlugin } from './plugin';
+
+export function plugin() {
+  return new FieldFormatsExamplePlugin();
+}

examples/field_formats_example/server/plugin.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import { CoreSetup, CoreStart, Plugin } from '../../../src/core/server';
+import { FieldFormatsSetup, FieldFormatsStart } from '../../../src/plugins/field_formats/server';
+import { registerExampleFormat } from './examples/2_creating_custom_formatter';
+
+interface SetupDeps {
+  fieldFormats: FieldFormatsSetup;
+}
+
+interface StartDeps {
+  fieldFormats: FieldFormatsStart;
+}
+
+export class FieldFormatsExamplePlugin implements Plugin<void, void, SetupDeps, StartDeps> {
+  public setup(core: CoreSetup<StartDeps>, deps: SetupDeps) {
+    registerExampleFormat(deps.fieldFormats);
+  }
+  public start(core: CoreStart) {
+    return {};
+  }
+  public stop() {}
+}

packages/kbn-test/src/functional_tests/lib/babel_register_for_test_plugins.js

@@ -23,6 +23,7 @@ const transpileKbnPaths = [
   // TODO: should should probably remove this link back to the source
   'x-pack/plugins/task_manager/server/config.ts',
   'src/core/utils/default_app_categories.ts',
+  'src/plugins/field_formats/common',
 ].map((path) => Path.resolve(BASE_REPO_ROOT, path));
 
 // modifies all future calls to require() to automatically