Field overrides: extracting the field config factory into its own reusable module. (#30214)

* extracting the field config registry factory method into its own module.

* added docs comment.

packages/grafana-data/src/index.ts

@@ -19,3 +19,4 @@ export {
   RangeValueMatcherOptions,
 } from './transformations/matchers/valueMatchers/types';
 export { PanelPlugin } from './panel/PanelPlugin';
+export { createFieldConfigRegistry } from './panel/registryFactories';

packages/grafana-data/src/panel/PanelPlugin.ts

@@ -13,7 +13,8 @@ import { FieldConfigEditorBuilder, PanelOptionsEditorBuilder } from '../utils/Op
 import { ComponentClass, ComponentType } from 'react';
 import set from 'lodash/set';
 import { deprecationWarning } from '../utils';
-import { FieldConfigOptionsRegistry, standardFieldConfigEditorRegistry } from '../field';
+import { FieldConfigOptionsRegistry } from '../field';
+import { createFieldConfigRegistry } from './registryFactories';
 
 type StandardOptionConfig = {
   defaultValue?: any;
@@ -312,55 +313,7 @@ export class PanelPlugin<TOptions = any, TFieldConfigOptions extends object = an
    */
   useFieldConfig(config: SetFieldConfigOptionsArgs<TFieldConfigOptions> = {}) {
     // builder is applied lazily when custom field configs are accessed
-    this._initConfigRegistry = () => {
+    this._initConfigRegistry = () => createFieldConfigRegistry(config, this.meta.name);
-      const registry = new FieldConfigOptionsRegistry();
-
-      // Add custom options
-      if (config.useCustomConfig) {
-        const builder = new FieldConfigEditorBuilder<TFieldConfigOptions>();
-        config.useCustomConfig(builder);
-
-        for (const customProp of builder.getRegistry().list()) {
-          customProp.isCustom = true;
-          customProp.category = [`${this.meta.name} options`].concat(customProp.category || []);
-          // need to do something to make the custom items not conflict with standard ones
-          // problem is id (registry index) is used as property path
-          // so sort of need a property path on the FieldPropertyEditorItem
-          customProp.id = 'custom.' + customProp.id;
-          registry.register(customProp);
-        }
-      }
-
-      for (let fieldConfigProp of standardFieldConfigEditorRegistry.list()) {
-        if (config.disableStandardOptions) {
-          const isDisabled = config.disableStandardOptions.indexOf(fieldConfigProp.id as FieldConfigProperty) > -1;
-          if (isDisabled) {
-            continue;
-          }
-        }
-        if (config.standardOptions) {
-          const customDefault: any = config.standardOptions[fieldConfigProp.id as FieldConfigProperty]?.defaultValue;
-          const customSettings: any = config.standardOptions[fieldConfigProp.id as FieldConfigProperty]?.settings;
-          if (customDefault) {
-            fieldConfigProp = {
-              ...fieldConfigProp,
-              defaultValue: customDefault,
-            };
-          }
-
-          if (customSettings) {
-            fieldConfigProp = {
-              ...fieldConfigProp,
-              settings: fieldConfigProp.settings ? { ...fieldConfigProp.settings, ...customSettings } : customSettings,
-            };
-          }
-        }
-
-        registry.register(fieldConfigProp);
-      }
-
-      return registry;
-    };
 
     return this;
   }

packages/grafana-data/src/panel/registryFactories.ts

@@ -0,0 +1,65 @@
+import { FieldConfigOptionsRegistry } from '../field/FieldConfigOptionsRegistry';
+import { standardFieldConfigEditorRegistry } from '../field/standardFieldConfigEditorRegistry';
+import { FieldConfigProperty } from '../types/fieldOverrides';
+import { FieldConfigEditorBuilder } from '../utils/OptionsUIBuilders';
+import { SetFieldConfigOptionsArgs } from './PanelPlugin';
+
+/**
+ * Helper functionality to create a field config registry.
+ *
+ * @param config - configuration to base the registry on.
+ * @param pluginName - name of the plugin that will use the registry.
+ * @internal
+ */
+export function createFieldConfigRegistry<TFieldConfigOptions>(
+  config: SetFieldConfigOptionsArgs<TFieldConfigOptions> = {},
+  pluginName: string
+): FieldConfigOptionsRegistry {
+  const registry = new FieldConfigOptionsRegistry();
+
+  // Add custom options
+  if (config.useCustomConfig) {
+    const builder = new FieldConfigEditorBuilder<TFieldConfigOptions>();
+    config.useCustomConfig(builder);
+
+    for (const customProp of builder.getRegistry().list()) {
+      customProp.isCustom = true;
+      customProp.category = [`${pluginName} options`].concat(customProp.category || []);
+      // need to do something to make the custom items not conflict with standard ones
+      // problem is id (registry index) is used as property path
+      // so sort of need a property path on the FieldPropertyEditorItem
+      customProp.id = 'custom.' + customProp.id;
+      registry.register(customProp);
+    }
+  }
+
+  for (let fieldConfigProp of standardFieldConfigEditorRegistry.list()) {
+    if (config.disableStandardOptions) {
+      const isDisabled = config.disableStandardOptions.indexOf(fieldConfigProp.id as FieldConfigProperty) > -1;
+      if (isDisabled) {
+        continue;
+      }
+    }
+    if (config.standardOptions) {
+      const customDefault: any = config.standardOptions[fieldConfigProp.id as FieldConfigProperty]?.defaultValue;
+      const customSettings: any = config.standardOptions[fieldConfigProp.id as FieldConfigProperty]?.settings;
+      if (customDefault) {
+        fieldConfigProp = {
+          ...fieldConfigProp,
+          defaultValue: customDefault,
+        };
+      }
+
+      if (customSettings) {
+        fieldConfigProp = {
+          ...fieldConfigProp,
+          settings: fieldConfigProp.settings ? { ...fieldConfigProp.settings, ...customSettings } : customSettings,
+        };
+      }
+    }
+
+    registry.register(fieldConfigProp);
+  }
+
+  return registry;
+}