Advanced settings component registry ⇒ kibana platform plugin (#55940)

* advanced settings component registry to new platform

.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
+      );
     },
   },
 });