Management API - simpler interface, remove app context usage (#71144)

Management API - simpler interface, remove app context usage, consolidate rendeing

src/core/MIGRATION.md

@@ -942,7 +942,7 @@ export class MyPlugin implements Plugin<MyPluginSetup> {
         return mountApp(await core.getStartServices(), params);
       },
     });
-    plugins.management.sections.getSection('another').registerApp({
+    plugins.management.sections.section.kibana.registerApp({
       id: 'app',
       title: 'My app',
       order: 1,

src/plugins/advanced_settings/public/plugin.ts

@@ -18,7 +18,6 @@
  */
 import { i18n } from '@kbn/i18n';
 import { CoreSetup, Plugin } from 'kibana/public';
-import { ManagementSectionId } from '../../management/public';
 import { ComponentRegistry } from './component_registry';
 import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types';
 
@@ -31,7 +30,7 @@ const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
 export class AdvancedSettingsPlugin
   implements Plugin<AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup> {
   public setup(core: CoreSetup, { management }: AdvancedSettingsPluginSetup) {
-    const kibanaSection = management.sections.getSection(ManagementSectionId.Kibana);
+    const kibanaSection = management.sections.section.kibana;
 
     kibanaSection.registerApp({
       id: 'settings',

src/plugins/index_pattern_management/public/plugin.ts

@@ -27,7 +27,7 @@ import {
   IndexPatternManagementServiceStart,
 } from './service';
 
-import { ManagementSetup, ManagementSectionId } from '../../management/public';
+import { ManagementSetup } from '../../management/public';
 
 export interface IndexPatternManagementSetupDependencies {
   management: ManagementSetup;
@@ -64,7 +64,7 @@ export class IndexPatternManagementPlugin
     core: CoreSetup<IndexPatternManagementStartDependencies, IndexPatternManagementStart>,
     { management, kibanaLegacy }: IndexPatternManagementSetupDependencies
   ) {
-    const kibanaSection = management.sections.getSection(ManagementSectionId.Kibana);
+    const kibanaSection = management.sections.section.kibana;
 
     if (!kibanaSection) {
       throw new Error('`kibana` management section not found.');

src/plugins/management/kibana.json

@@ -4,5 +4,5 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["kibanaLegacy", "home"],
-  "requiredBundles": ["kibanaReact"]
+  "requiredBundles": ["kibanaReact", "kibanaUtils"]
 }

src/plugins/management/public/application.tsx

@@ -20,21 +20,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { AppMountContext, AppMountParameters } from 'kibana/public';
+import { AppMountParameters } from 'kibana/public';
 import { ManagementApp, ManagementAppDependencies } from './components/management_app';
 
 export const renderApp = async (
-  context: AppMountContext,
   { history, appBasePath, element }: AppMountParameters,
   dependencies: ManagementAppDependencies
 ) => {
   ReactDOM.render(
-    <ManagementApp
-      context={context}
-      dependencies={dependencies}
-      appBasePath={appBasePath}
-      history={history}
-    />,
+    <ManagementApp dependencies={dependencies} appBasePath={appBasePath} history={history} />,
     element
   );
 

src/plugins/management/public/components/index.ts

@@ -18,4 +18,3 @@
  */
 
 export { ManagementApp } from './management_app';
-export { managementSections } from './management_sections';

src/plugins/management/public/components/management_app/management_app.tsx

@@ -17,36 +17,32 @@
  * under the License.
  */
 import React, { useState, useEffect, useCallback } from 'react';
-import {
-  AppMountContext,
-  AppMountParameters,
-  ChromeBreadcrumb,
-  ScopedHistory,
-} from 'kibana/public';
+import { AppMountParameters, ChromeBreadcrumb, ScopedHistory } from 'kibana/public';
 import { I18nProvider } from '@kbn/i18n/react';
 import { EuiPage } from '@elastic/eui';
-import { ManagementStart } from '../../types';
 import { ManagementSection, MANAGEMENT_BREADCRUMB } from '../../utils';
 
 import { ManagementRouter } from './management_router';
 import { ManagementSidebarNav } from '../management_sidebar_nav';
 import { reactRouterNavigate } from '../../../../kibana_react/public';
+import { SectionsServiceStart } from '../../types';
 
 import './management_app.scss';
 
 interface ManagementAppProps {
   appBasePath: string;
-  context: AppMountContext;
   history: AppMountParameters['history'];
   dependencies: ManagementAppDependencies;
 }
 
 export interface ManagementAppDependencies {
-  management: ManagementStart;
+  sections: SectionsServiceStart;
   kibanaVersion: string;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
-export const ManagementApp = ({ context, dependencies, history }: ManagementAppProps) => {
+export const ManagementApp = ({ dependencies, history }: ManagementAppProps) => {
+  const { setBreadcrumbs } = dependencies;
   const [selectedId, setSelectedId] = useState<string>('');
   const [sections, setSections] = useState<ManagementSection[]>();
 
@@ -55,24 +51,24 @@ export const ManagementApp = ({ context, dependencies, history }: ManagementAppP
     window.scrollTo(0, 0);
   }, []);
 
-  const setBreadcrumbs = useCallback(
+  const setBreadcrumbsScoped = useCallback(
     (crumbs: ChromeBreadcrumb[] = [], appHistory?: ScopedHistory) => {
       const wrapBreadcrumb = (item: ChromeBreadcrumb, scopedHistory: ScopedHistory) => ({
         ...item,
         ...(item.href ? reactRouterNavigate(scopedHistory, item.href) : {}),
       });
 
-      context.core.chrome.setBreadcrumbs([
+      setBreadcrumbs([
         wrapBreadcrumb(MANAGEMENT_BREADCRUMB, history),
         ...crumbs.map((item) => wrapBreadcrumb(item, appHistory || history)),
       ]);
     },
-    [context.core.chrome, history]
+    [setBreadcrumbs, history]
   );
 
   useEffect(() => {
-    setSections(dependencies.management.sections.getSectionsEnabled());
-  }, [dependencies.management.sections]);
+    setSections(dependencies.sections.getSectionsEnabled());
+  }, [dependencies.sections]);
 
   if (!sections) {
     return null;
@@ -84,7 +80,7 @@ export const ManagementApp = ({ context, dependencies, history }: ManagementAppP
         <ManagementSidebarNav selectedId={selectedId} sections={sections} history={history} />
         <ManagementRouter
           history={history}
-          setBreadcrumbs={setBreadcrumbs}
+          setBreadcrumbs={setBreadcrumbsScoped}
           onAppMounted={onAppMounted}
           sections={sections}
           dependencies={dependencies}

src/plugins/management/public/components/management_sections.tsx

@@ -17,61 +17,104 @@
  * under the License.
  */
 
-import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiIcon } from '@elastic/eui';
-
+import { i18n } from '@kbn/i18n';
 import { ManagementSectionId } from '../types';
 
-interface ManagementSectionTitleProps {
-  text: string;
-  tip: string;
-}
+const ingestTitle = i18n.translate('management.sections.ingestTitle', {
+  defaultMessage: 'Ingest',
+});
+
+const ingestTip = i18n.translate('management.sections.ingestTip', {
+  defaultMessage: 'Manage how to transform data and load it into the cluster',
+});
+
+const dataTitle = i18n.translate('management.sections.dataTitle', {
+  defaultMessage: 'Data',
+});
+
+const dataTip = i18n.translate('management.sections.dataTip', {
+  defaultMessage: 'Manage your cluster data and backups',
+});
+
+const insightsAndAlertingTitle = i18n.translate('management.sections.insightsAndAlertingTitle', {
+  defaultMessage: 'Alerts and Insights',
+});
+
+const insightsAndAlertingTip = i18n.translate('management.sections.insightsAndAlertingTip', {
+  defaultMessage: 'Manage how to detect changes in your data',
+});
+
+const sectionTitle = i18n.translate('management.sections.section.title', {
+  defaultMessage: 'Security',
+});
+
+const sectionTip = i18n.translate('management.sections.section.tip', {
+  defaultMessage: 'Control access to features and data',
+});
+
+const kibanaTitle = i18n.translate('management.sections.kibanaTitle', {
+  defaultMessage: 'Kibana',
+});
+
+const kibanaTip = i18n.translate('management.sections.kibanaTip', {
+  defaultMessage: 'Customize Kibana and manage saved objects',
+});
+
+const stackTitle = i18n.translate('management.sections.stackTitle', {
+  defaultMessage: 'Stack',
+});
+
+const stackTip = i18n.translate('management.sections.stackTip', {
+  defaultMessage: 'Manage your license and upgrade the Stack',
+});
+
+export const IngestSection = {
+  id: ManagementSectionId.Ingest,
+  title: ingestTitle,
+  tip: ingestTip,
+  order: 0,
+};
+
+export const DataSection = {
+  id: ManagementSectionId.Data,
+  title: dataTitle,
+  tip: dataTip,
+  order: 1,
+};
+
+export const InsightsAndAlertingSection = {
+  id: ManagementSectionId.InsightsAndAlerting,
+  title: insightsAndAlertingTitle,
+  tip: insightsAndAlertingTip,
+  order: 2,
+};
+
+export const SecuritySection = {
+  id: 'security',
+  title: sectionTitle,
+  tip: sectionTip,
+  order: 3,
+};
 
-const ManagementSectionTitle = ({ text, tip }: ManagementSectionTitleProps) => (
-  <EuiToolTip content={tip} position="right">
-    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-      <EuiFlexItem grow={false}>{text}</EuiFlexItem>
+export const KibanaSection = {
+  id: ManagementSectionId.Kibana,
+  title: kibanaTitle,
+  tip: kibanaTip,
+  order: 4,
+};
 
-      <EuiFlexItem grow={false}>
-        <EuiIcon type="questionInCircle" />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiToolTip>
-);
+export const StackSection = {
+  id: ManagementSectionId.Stack,
+  title: stackTitle,
+  tip: stackTip,
+  order: 4,
+};
 
 export const managementSections = [
-  {
-    id: ManagementSectionId.Ingest,
-    title: (
-      <ManagementSectionTitle
-        text="Ingest"
-        tip="Manage how to transform data and load it into the cluster."
-      />
-    ),
-  },
-  {
-    id: ManagementSectionId.Data,
-    title: <ManagementSectionTitle text="Data" tip="Manage your cluster data and backups" />,
-  },
-  {
-    id: ManagementSectionId.InsightsAndAlerting,
-    title: (
-      <ManagementSectionTitle
-        text="Alerts and Insights"
-        tip="Manage how to detect changes in your data"
-      />
-    ),
-  },
-  {
-    id: ManagementSectionId.Security,
-    title: <ManagementSectionTitle text="Security" tip="Control access to features and data" />,
-  },
-  {
-    id: ManagementSectionId.Kibana,
-    title: <ManagementSectionTitle text="Kibana" tip="Customize Kibana and manage saved objects" />,
-  },
-  {
-    id: ManagementSectionId.Stack,
-    title: <ManagementSectionTitle text="Stack" tip="Manage your license and upgrade the Stack" />,
-  },
+  IngestSection,
+  DataSection,
+  InsightsAndAlertingSection,
+  SecuritySection,
+  KibanaSection,
+  StackSection,
 ];

src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.tsx

@@ -21,7 +21,15 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { sortBy } from 'lodash';
 
-import { EuiIcon, EuiSideNav, EuiScreenReaderOnly, EuiSideNavItemType } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiSideNav,
+  EuiScreenReaderOnly,
+  EuiSideNavItemType,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+} from '@elastic/eui';
 import { AppMountParameters } from 'kibana/public';
 import { ManagementApp, ManagementSection } from '../../utils';
 
@@ -79,6 +87,23 @@ export const ManagementSidebarNav = ({
       }),
     }));
 
+  interface TooltipWrapperProps {
+    text: string;
+    tip?: string;
+  }
+
+  const TooltipWrapper = ({ text, tip }: TooltipWrapperProps) => (
+    <EuiToolTip content={tip} position="right">
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+        <EuiFlexItem grow={false}>{text}</EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="questionInCircle" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiToolTip>
+  );
+
   const createNavItem = <T extends ManagementItem>(
     item: T,
     customParams: Partial<EuiSideNavItemType<any>> = {}
@@ -87,7 +112,7 @@ export const ManagementSidebarNav = ({
 
     return {
       id: item.id,
-      name: item.title,
+      name: item.tip ? <TooltipWrapper text={item.title} tip={item.tip} /> : item.title,
       isSelected: item.id === selectedId,
       icon: iconType ? <EuiIcon type={iconType} size="m" /> : undefined,
       'data-test-subj': item.id,

src/plugins/management/public/index.ts

@@ -27,8 +27,8 @@ export function plugin(initializerContext: PluginInitializerContext) {
 export { RegisterManagementAppArgs, ManagementSection, ManagementApp } from './utils';
 
 export {
-  ManagementSectionId,
   ManagementAppMountParams,
   ManagementSetup,
   ManagementStart,
+  DefinedSections,
 } from './types';