[Lens] Register all expression functions to the server

x-pack/plugins/lens/common/expressions/datatable/datatable.ts

@@ -8,6 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import { cloneDeep } from 'lodash';
 import type {
+  ExecutionContext,
   DatatableColumnMeta,
   ExpressionFunctionDefinition,
 } from '../../../../../../src/plugins/expressions/common';
@@ -46,15 +47,13 @@ function isRange(meta: { params?: { id?: string } } | undefined) {
   return meta?.params?.id === 'range';
 }
 
-export const getDatatable = ({
-  formatFactory,
-}: {
-  formatFactory: FormatFactory;
-}): ExpressionFunctionDefinition<
+export const getDatatable = (
+  getFormatFactory: (context: ExecutionContext) => FormatFactory | Promise<FormatFactory>
+): ExpressionFunctionDefinition<
   'lens_datatable',
   LensMultiTable,
   DatatableArgs,
-  DatatableRender
+  Promise<DatatableRender>
 > => ({
   name: 'lens_datatable',
   type: 'render',
@@ -87,12 +86,13 @@ export const getDatatable = ({
       help: '',
     },
   },
-  fn(data, args, context) {
+  async fn(data, args, context) {
     let untransposedData: LensMultiTable | undefined;
     // do the sorting at this level to propagate it also at CSV download
     const [firstTable] = Object.values(data.tables);
     const [layerId] = Object.keys(context.inspectorAdapters.tables || {});
     const formatters: Record<string, ReturnType<FormatFactory>> = {};
+    const formatFactory = await getFormatFactory(context);
 
     firstTable.columns.forEach((column) => {
       formatters[column.id] = formatFactory(column.meta?.params);

x-pack/plugins/lens/kibana.json

@@ -8,6 +8,7 @@
     "data",
     "charts",
     "expressions",
+    "fieldFormats",
     "inspector",
     "navigation",
     "urlForwarding",

x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx

@@ -141,6 +141,7 @@ export const LensTopNavMenu = ({
 }: LensTopNavMenuProps) => {
   const {
     data,
+    fieldFormats,
     navigation,
     uiSettings,
     application,
@@ -255,7 +256,7 @@ export const LensTopNavMenu = ({
                     content: exporters.datatableToCSV(datatable, {
                       csvSeparator: uiSettings.get('csv:separator', ','),
                       quoteValues: uiSettings.get('csv:quoteValues', true),
-                      formatFactory: data.fieldFormats.deserialize,
+                      formatFactory: fieldFormats.deserialize,
                       escapeFormulaValues: false,
                     }),
                     type: exporters.CSV_MIME_TYPE,
@@ -305,7 +306,7 @@ export const LensTopNavMenu = ({
       activeData,
       attributeService,
       dashboardFeatureFlag.allowByValueEmbeddables,
-      data.fieldFormats.deserialize,
+      fieldFormats.deserialize,
       getIsByValueMode,
       initialInput,
       isLinkedToOriginatingApp,

x-pack/plugins/lens/public/app_plugin/mounter.tsx

@@ -46,7 +46,14 @@ export async function getLensServices(
   startDependencies: LensPluginStartDependencies,
   attributeService: () => Promise<LensAttributeService>
 ): Promise<LensAppServices> {
-  const { data, navigation, embeddable, savedObjectsTagging, usageCollection } = startDependencies;
+  const {
+    data,
+    navigation,
+    embeddable,
+    savedObjectsTagging,
+    usageCollection,
+    fieldFormats,
+  } = startDependencies;
 
   const storage = new Storage(localStorage);
   const stateTransfer = embeddable?.getStateTransfer();
@@ -56,6 +63,7 @@ export async function getLensServices(
     data,
     storage,
     navigation,
+    fieldFormats,
     stateTransfer,
     usageCollection,
     savedObjectsTagging,

x-pack/plugins/lens/public/app_plugin/types.ts

@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { History } from 'history';
-import { OnSaveProps } from 'src/plugins/saved_objects/public';
-import {
+import type { History } from 'history';
+import type { OnSaveProps } from 'src/plugins/saved_objects/public';
+import type {
   ApplicationStart,
   AppMountParameters,
   ChromeStart,
@@ -17,25 +17,27 @@ import {
   OverlayStart,
   SavedObjectsStart,
 } from '../../../../../src/core/public';
-import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
-import { UsageCollectionStart } from '../../../../../src/plugins/usage_collection/public';
-import { DashboardStart } from '../../../../../src/plugins/dashboard/public';
-import { LensEmbeddableInput } from '../embeddable/embeddable';
-import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
-import { LensAttributeService } from '../lens_attribute_service';
-import { IStorageWrapper } from '../../../../../src/plugins/kibana_utils/public';
-import { DashboardFeatureFlagConfig } from '../../../../../src/plugins/dashboard/public';
+import type { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
+import type { UsageCollectionStart } from '../../../../../src/plugins/usage_collection/public';
+import type { DashboardStart } from '../../../../../src/plugins/dashboard/public';
+import type { LensEmbeddableInput } from '../embeddable/embeddable';
+import type { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
+import type { LensAttributeService } from '../lens_attribute_service';
+import type { IStorageWrapper } from '../../../../../src/plugins/kibana_utils/public';
+import type { DashboardFeatureFlagConfig } from '../../../../../src/plugins/dashboard/public';
 import type { SavedObjectTaggingPluginStart } from '../../../saved_objects_tagging/public';
 import {
   VisualizeFieldContext,
   ACTION_VISUALIZE_LENS_FIELD,
 } from '../../../../../src/plugins/ui_actions/public';
-import {
+import type {
   EmbeddableEditorState,
   EmbeddableStateTransfer,
 } from '../../../../../src/plugins/embeddable/public';
-import { DatasourceMap, EditorFrameInstance, VisualizationMap } from '../types';
-import { PresentationUtilPluginStart } from '../../../../../src/plugins/presentation_util/public';
+import type { DatasourceMap, EditorFrameInstance, VisualizationMap } from '../types';
+import type { PresentationUtilPluginStart } from '../../../../../src/plugins/presentation_util/public';
+import type { FieldFormatsStart } from '../../../../../src/plugins/field_formats/public';
+
 export interface RedirectToOriginProps {
   input?: LensEmbeddableInput;
   isCopied?: boolean;
@@ -97,6 +99,7 @@ export interface LensAppServices {
   overlays: OverlayStart;
   storage: IStorageWrapper;
   dashboard: DashboardStart;
+  fieldFormats: FieldFormatsStart;
   data: DataPublicPluginStart;
   uiSettings: IUiSettingsClient;
   application: ApplicationStart;

x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { DatatableProps } from '../../common/expressions';
+import type { DatatableProps } from '../../common/expressions';
 import type { LensMultiTable } from '../../common';
 import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
-import type { IFieldFormat } from '../../../../../src/plugins/field_formats/common';
+import type { FormatFactory } from '../../common';
 import { getDatatable } from './expression';
 
 function sampleArgs() {
@@ -83,9 +83,9 @@ function sampleArgs() {
 
 describe('datatable_expression', () => {
   describe('datatable renders', () => {
-    test('it renders with the specified data and args', () => {
+    test('it renders with the specified data and args', async () => {
       const { data, args } = sampleArgs();
-      const result = getDatatable({ formatFactory: (x) => x as IFieldFormat }).fn(
+      const result = await getDatatable(() => Promise.resolve((() => {}) as FormatFactory)).fn(
         data,
         args,
         createMockExecutionContext()

x-pack/plugins/lens/public/datatable_visualization/index.ts

@@ -17,7 +17,7 @@ interface DatatableVisualizationPluginStartPlugins {
 }
 export interface DatatableVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: Promise<FormatFactory>;
+  formatFactory: FormatFactory;
   editorFrame: EditorFrameSetup;
   charts: ChartsPluginSetup;
 }
@@ -37,13 +37,12 @@ export class DatatableVisualization {
         getDatatableVisualization,
       } = await import('../async_services');
       const palettes = await charts.palettes.getPalettes();
-      const resolvedFormatFactory = await formatFactory;
 
       expressions.registerFunction(() => datatableColumn);
-      expressions.registerFunction(() => getDatatable({ formatFactory: resolvedFormatFactory }));
+      expressions.registerFunction(() => getDatatable(() => formatFactory));
       expressions.registerRenderer(() =>
         getDatatableRenderer({
-          formatFactory: resolvedFormatFactory,
+          formatFactory,
           getType: core
             .getStartServices()
             .then(([_, { data: dataStart }]) => dataStart.search.aggs.types.get),

x-pack/plugins/lens/public/heatmap_visualization/expression.tsx

@@ -20,7 +20,7 @@ import type { HeatmapExpressionProps } from './types';
 export { heatmapGridConfig, heatmapLegendConfig, heatmap } from '../../common/expressions';
 
 export const getHeatmapRenderer = (dependencies: {
-  formatFactory: Promise<FormatFactory>;
+  formatFactory: FormatFactory;
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
   timeZone: string;
@@ -37,7 +37,6 @@ export const getHeatmapRenderer = (dependencies: {
     config: HeatmapExpressionProps,
     handlers: IInterpreterRenderHandlers
   ) => {
-    const formatFactory = await dependencies.formatFactory;
     const onClickValue = (data: LensFilterEvent['data']) => {
       handlers.event({ name: 'filter', data });
     };
@@ -53,7 +52,7 @@ export const getHeatmapRenderer = (dependencies: {
             onClickValue={onClickValue}
             onSelectRange={onSelectRange}
             timeZone={dependencies.timeZone}
-            formatFactory={formatFactory}
+            formatFactory={dependencies.formatFactory}
             chartsThemeService={dependencies.chartsThemeService}
             paletteService={dependencies.paletteService}
           />

x-pack/plugins/lens/public/heatmap_visualization/index.ts

@@ -14,7 +14,7 @@ import type { FormatFactory } from '../../common';
 
 export interface HeatmapVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: Promise<FormatFactory>;
+  formatFactory: FormatFactory;
   editorFrame: EditorFrameSetup;
   charts: ChartsPluginSetup;
 }

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx

@@ -20,6 +20,7 @@ import { ChangeIndexPattern } from './change_indexpattern';
 import { EuiProgress, EuiLoadingSpinner } from '@elastic/eui';
 import { documentField } from './document_field';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
+import { fieldFormatsServiceMock } from '../../../../../src/plugins/field_formats/public/mocks';
 import { indexPatternFieldEditorPluginMock } from '../../../../../src/plugins/index_pattern_field_editor/public/mocks';
 import { getFieldByNameFactory } from './pure_helpers';
 import { uiActionsPluginMock } from '../../../../../src/plugins/ui_actions/public/mocks';
@@ -251,6 +252,7 @@ describe('IndexPattern Data Panel', () => {
       indexPatternRefs: [],
       existingFields: {},
       data: dataPluginMock.createStartContract(),
+      fieldFormats: fieldFormatsServiceMock.createStartContract(),
       indexPatternFieldEditor: indexPatternFieldEditorPluginMock.createStartContract(),
       onUpdateIndexPattern: jest.fn(),
       dragDropContext: createMockedDragDropContext(),

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx

@@ -23,14 +23,15 @@ import {
   EuiButtonIcon,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EsQueryConfig, Query, Filter } from '@kbn/es-query';
+import type { EsQueryConfig, Query, Filter } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { CoreStart } from 'kibana/public';
-import { DataPublicPluginStart } from 'src/plugins/data/public';
+import type { CoreStart } from 'kibana/public';
+import type { DataPublicPluginStart } from 'src/plugins/data/public';
+import type { FieldFormatsStart } from 'src/plugins/field_formats/public';
 import { htmlIdGenerator } from '@elastic/eui';
-import { DatasourceDataPanelProps, DataType, StateSetter } from '../types';
+import type { DatasourceDataPanelProps, DataType, StateSetter } from '../types';
 import { ChildDragDropProvider, DragContextState } from '../drag_drop';
-import {
+import type {
   IndexPattern,
   IndexPatternPrivateState,
   IndexPatternField,
@@ -46,6 +47,7 @@ import { VISUALIZE_GEO_FIELD_TRIGGER } from '../../../../../src/plugins/ui_actio
 
 export type Props = Omit<DatasourceDataPanelProps<IndexPatternPrivateState>, 'core'> & {
   data: DataPublicPluginStart;
+  fieldFormats: FieldFormatsStart;
   changeIndexPattern: (
     id: string,
     state: IndexPatternPrivateState,
@@ -118,6 +120,7 @@ export function IndexPatternDataPanel({
   dragDropContext,
   core,
   data,
+  fieldFormats,
   query,
   filters,
   dateRange,
@@ -231,6 +234,7 @@ export function IndexPatternDataPanel({
           dragDropContext={dragDropContext}
           core={core}
           data={data}
+          fieldFormats={fieldFormats}
           charts={charts}
           indexPatternFieldEditor={indexPatternFieldEditor}
           onChangeIndexPattern={onChangeIndexPattern}
@@ -289,6 +293,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   onUpdateIndexPattern,
   core,
   data,
+  fieldFormats,
   indexPatternFieldEditor,
   existingFields,
   charts,
@@ -297,6 +302,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   uiActions,
 }: Omit<DatasourceDataPanelProps, 'state' | 'setState' | 'showNoDataPopover' | 'core'> & {
   data: DataPublicPluginStart;
+  fieldFormats: FieldFormatsStart;
   core: CoreStart;
   currentIndexPatternId: string;
   indexPatternRefs: IndexPatternRef[];
@@ -565,6 +571,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
     () => ({
       core,
       data,
+      fieldFormats,
       indexPattern: currentIndexPattern,
       highlight: localState.nameFilter.toLowerCase(),
       dateRange,
@@ -575,6 +582,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
     [
       core,
       data,
+      fieldFormats,
       currentIndexPattern,
       dateRange,
       query,

x-pack/plugins/lens/public/indexpattern_datasource/field_item.test.tsx

@@ -12,12 +12,12 @@ import { EuiLoadingSpinner, EuiPopover } from '@elastic/eui';
 import { InnerFieldItem, FieldItemProps } from './field_item';
 import { coreMock } from 'src/core/public/mocks';
 import { mountWithIntl } from '@kbn/test/jest';
-import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
-import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
+import { fieldFormatsServiceMock } from '../../../../../src/plugins/field_formats/public/mocks';
 import { IndexPattern } from './types';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { documentField } from './document_field';
 import { uiActionsPluginMock } from '../../../../../src/plugins/ui_actions/public/mocks';
+import { FieldFormatsStart } from '../../../../../src/plugins/field_formats/public';
 
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
 
@@ -29,7 +29,6 @@ describe('IndexPattern Field Item', () => {
   let defaultProps: FieldItemProps;
   let indexPattern: IndexPattern;
   let core: ReturnType<typeof coreMock['createSetup']>;
-  let data: DataPublicPluginStart;
 
   beforeEach(() => {
     indexPattern = {
@@ -84,11 +83,15 @@ describe('IndexPattern Field Item', () => {
     } as IndexPattern;
 
     core = coreMock.createSetup();
-    data = dataPluginMock.createStartContract();
     core.http.post.mockClear();
     defaultProps = {
       indexPattern,
-      data,
+      fieldFormats: ({
+        ...fieldFormatsServiceMock.createStartContract(),
+        getDefaultInstance: jest.fn(() => ({
+          convert: jest.fn((s: unknown) => JSON.stringify(s)),
+        })),
+      } as unknown) as FieldFormatsStart,
       core,
       highlight: '',
       dateRange: {
@@ -112,12 +115,6 @@ describe('IndexPattern Field Item', () => {
       hasSuggestionForField: () => false,
       uiActions: uiActionsPluginMock.createStartContract(),
     };
-
-    data.fieldFormats = ({
-      getDefaultInstance: jest.fn(() => ({
-        convert: jest.fn((s: unknown) => JSON.stringify(s)),
-      })),
-    } as unknown) as DataPublicPluginStart['fieldFormats'];
   });
 
   it('should display displayName of a field', () => {