Advanced settings component registry ⇒ kibana platform plugin

.i18nrc.json

@@ -26,6 +26,7 @@
  "src/legacy/core_plugins/management",
  "src/plugins/management"
  ],
+ "advancedSettings": "src/plugins/advanced_settings",
  "kibana_react": "src/legacy/core_plugins/kibana_react",
  "kibana-react": "src/plugins/kibana_react",
  "kibana_utils": "src/plugins/kibana_utils",

rfcs/text/0006_management_section_service.md

@@ -257,15 +257,7 @@ Current public contracts owned by the legacy service:
 ```js
 // ui/management/index
 interface API {
- PAGE_TITLE_COMPONENT: string; // actually related to advanced settings?
- PAGE_SUBTITLE_COMPONENT: string; // actually related to advanced settings?
- PAGE_FOOTER_COMPONENT: string; // actually related to advanced settings?
  SidebarNav: React.FC<any>;
- registerSettingsComponent: (
- id: string,
- component: string | React.FC<any>,
- allowOverride: boolean
- ) => void;
  management: new ManagementSection();
  MANAGEMENT_BREADCRUMB: {
  text: string;

src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.test.tsx

@@ -27,7 +27,9 @@ import {
  UiSettingsType,
 } from '../../../../../../../core/public';
 import { FieldSetting } from './types';
+
 import { AdvancedSettings } from './advanced_settings';
+jest.mock('ui/new_platform');
 
 jest.mock('ui/new_platform', () => ({
  npStart: mockConfig(),
@@ -215,6 +217,22 @@ function mockConfig() {
  core: {
  uiSettings: config,
  },
+ plugins: {
+ advancedSettings: {
+ component: {
+ register: jest.fn(),
+ get: () => {
+ const foo: React.ComponentType = () => <div>Hello</div>;
+ foo.displayName = 'foo_component';
+ return foo;
+ },
+ componentType: {
+ PAGE_TITLE_COMPONENT: 'page_title_component',
+ PAGE_SUBTITLE_COMPONENT: 'page_subtitle_component',
+ },
+ },
+ },
+ },
  };
 }
 

src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.tsx

@@ -31,14 +31,6 @@ import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
 
 import { FieldSetting, IQuery } from './types';
 
-import {
- registerDefaultComponents,
- PAGE_TITLE_COMPONENT,
- PAGE_SUBTITLE_COMPONENT,
- PAGE_FOOTER_COMPONENT,
-} from './components/default_component_registry';
-import { getSettingsComponent } from './components/component_registry';
-
 interface AdvancedSettingsProps {
  queryText: string;
  enableSaving: boolean;
@@ -75,8 +67,6 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
  footerQueryMatched: false,
  filteredSettings: this.mapSettings(Query.execute(parsedQuery, this.settings)),
  };
-
- registerDefaultComponents();
  }
 
  init(config: IUiSettingsClient) {
@@ -166,10 +156,13 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
 
  render() {
  const { filteredSettings, query, footerQueryMatched } = this.state;
+ const componentRegistry = npStart.plugins.advancedSettings.component;
 
- const PageTitle = getSettingsComponent(PAGE_TITLE_COMPONENT);
- const PageSubtitle = getSettingsComponent(PAGE_SUBTITLE_COMPONENT);
- const PageFooter = getSettingsComponent(PAGE_FOOTER_COMPONENT);
+ const PageTitle = componentRegistry.get(componentRegistry.componentType.PAGE_TITLE_COMPONENT);
+ const PageSubtitle = componentRegistry.get(
+ componentRegistry.componentType.PAGE_SUBTITLE_COMPONENT
+ );
+ const PageFooter = componentRegistry.get(componentRegistry.componentType.PAGE_FOOTER_COMPONENT);
 
  return (
  <div>

src/legacy/core_plugins/telemetry/public/views/management/management.js

@@ -19,14 +19,15 @@
 import React from 'react';
 import routes from 'ui/routes';
 
-import { registerSettingsComponent, PAGE_FOOTER_COMPONENT } from 'ui/management';
+import { npSetup } from 'ui/new_platform';
 import { TelemetryOptInProvider } from '../../services';
 import { TelemetryForm } from '../../components';
 
 routes.defaults(/\/management/, {
  resolve: {
  telemetryManagementSection: function(Private) {
  const telemetryOptInProvider = Private(TelemetryOptInProvider);
+ const componentRegistry = npSetup.plugins.advancedSettings.component;
 
  const Component = props => (
  <TelemetryForm
@@ -36,7 +37,11 @@ routes.defaults(/\/management/, {
  />
  );
 
- registerSettingsComponent(PAGE_FOOTER_COMPONENT, Component, true);
+ componentRegistry.register(
+ componentRegistry.componentType.PAGE_FOOTER_COMPONENT,
+ Component,
+ true
+ );
  },
  },
 });