Reorganize Management apps into Ingest, Data, Alerts and Insights, Security, Kibana, and Stack groups

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.js

@@ -18,6 +18,7 @@
  */
 
 import { management } from 'ui/management';
+import { ManagementSectionId } from '../../../../../../../plugins/management/public';
 import './create_index_pattern_wizard';
 import './edit_index_pattern';
 import uiRoutes from 'ui/routes';
@@ -163,7 +164,7 @@ uiModules
     };
   });
 
-management.getSection('kibana').register('index_patterns', {
+management.getSection(ManagementSectionId.Kibana).register('index_patterns', {
   display: i18n.translate('kbn.management.indexPattern.sectionsHeader', {
     defaultMessage: 'Index Patterns',
   }),

src/plugins/advanced_settings/public/plugin.ts

@@ -18,7 +18,7 @@
  */
 import { i18n } from '@kbn/i18n';
 import { CoreSetup, CoreStart, Plugin } from 'kibana/public';
-import { ManagementApp } from '../../management/public';
+import { ManagementApp, ManagementSectionId } from '../../management/public';
 import { ComponentRegistry } from './component_registry';
 import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types';
 
@@ -32,15 +32,12 @@ export class AdvancedSettingsPlugin
   implements Plugin<AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup> {
   private managementApp?: ManagementApp;
   public setup(core: CoreSetup, { management }: AdvancedSettingsPluginSetup) {
-    const kibanaSection = management.sections.getSection('kibana');
-    if (!kibanaSection) {
-      throw new Error('`kibana` management section not found.');
-    }
+    const kibanaSection = management.sections.getSection(ManagementSectionId.Kibana);
 
     this.managementApp = kibanaSection.registerApp({
       id: 'settings',
       title,
-      order: 20,
+      order: 3,
       async mount(params) {
         const { mountManagementSection } = await import(
           './management_app/mount_management_section'

src/plugins/management/public/components/management_sidebar_nav/_sidebar_nav.scss

@@ -1,5 +1,5 @@
 .mgtSideBarNav {
-  width: 192px;
+  width: 210px;
 }
 
 @include euiBreakpoint('xs','s') {

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

@@ -25,14 +25,14 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { LegacySection, LegacyApp } from '../../types';
 import { ManagementApp } from '../../management_app';
 import { ManagementSection } from '../../management_section';
 
 interface NavApp {
   id: string;
-  name: string;
+  name: ReactElement | string;
   [key: string]: unknown;
   order: number; // only needed while merging platform and legacy
 }

src/plugins/management/public/index.ts

@@ -28,6 +28,7 @@ export {
   ManagementSetup,
   ManagementStart,
   RegisterManagementApp,
+  ManagementSectionId,
   RegisterManagementAppArgs,
   ManagementAppMountParams,
 } from './types';

src/plugins/management/public/legacy/index.js

@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { LegacyManagementAdapter } from './sections_register';
+export { LegacyManagementAdapter, sections } from './sections_register';
 export { LegacyManagementSection } from './section';

src/plugins/management/public/legacy/sections_register.js

@@ -17,8 +17,9 @@
  * under the License.
  */
 
-import { LegacyManagementSection } from './section';
 import { i18n } from '@kbn/i18n';
+import { LegacyManagementSection } from './section';
+import { managementSections } from '../management_sections';
 
 export class LegacyManagementAdapter {
   main = undefined;
@@ -33,29 +34,11 @@ export class LegacyManagementAdapter {
       capabilities
     );
 
-    this.main.register('data', {
-      display: i18n.translate('management.connectDataDisplayName', {
-        defaultMessage: 'Connect Data',
-      }),
-      order: 0,
-    });
-
-    this.main.register('elasticsearch', {
-      display: 'Elasticsearch',
-      order: 20,
-      icon: 'logoElasticsearch',
-    });
-
-    this.main.register('kibana', {
-      display: 'Kibana',
-      order: 30,
-      icon: 'logoKibana',
-    });
-
-    this.main.register('logstash', {
-      display: 'Logstash',
-      order: 30,
-      icon: 'logoLogstash',
+    managementSections.forEach(({ id, title }, idx) => {
+      this.main.register(id, {
+        display: title,
+        order: idx,
+      });
     });
 
     return this.main;

src/plugins/management/public/management_section.test.ts

@@ -18,6 +18,7 @@
  */
 
 import { ManagementSection } from './management_section';
+import { ManagementSectionId } from './types';
 // @ts-ignore
 import { LegacyManagementSection } from './legacy';
 import { coreMock } from '../../../core/public/mocks';
@@ -27,7 +28,7 @@ function createSection(registerLegacyApp: () => void) {
   const getLegacySection = () => legacySection;
   const getManagementSections: () => ManagementSection[] = () => [];
 
-  const testSectionConfig = { id: 'test-section', title: 'Test Section' };
+  const testSectionConfig = { id: ManagementSectionId.Data, title: 'Test Section' };
   return new ManagementSection(
     testSectionConfig,
     getManagementSections,

src/plugins/management/public/management_section.ts

@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CreateSection, RegisterManagementAppArgs } from './types';
+import { ReactElement } from 'react';
+
+import { CreateSection, RegisterManagementAppArgs, ManagementSectionId } from './types';
 import { KibanaLegacySetup } from '../../kibana_legacy/public';
 import { StartServicesAccessor } from '../../../core/public';
 // @ts-ignore
 import { LegacyManagementSection } from './legacy';
 import { ManagementApp } from './management_app';
 
 export class ManagementSection {
-  public readonly id: string = '';
-  public readonly title: string = '';
+  public readonly id: ManagementSectionId;
+  public readonly title: string | ReactElement = '';
   public readonly apps: ManagementApp[] = [];
   public readonly order: number;
   public readonly euiIconType?: string;

src/plugins/management/public/management_sections.tsx

@@ -0,0 +1,77 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiIcon } from '@elastic/eui';
+
+import { ManagementSectionId } from './types';
+
+interface Props {
+  text: string;
+  tip: string;
+}
+
+const ManagementSectionTitle = ({ text, tip }: Props) => (
+  <EuiToolTip content={tip} position="right">
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>{text}</EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="questionInCircle" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiToolTip>
+);
+
+export const managementSections = [
+  {
+    id: ManagementSectionId.Ingest,
+    title: (
+      <ManagementSectionTitle
+        text="Ingest"
+        tip="Manage how data is transformed and loaded into the cluster"
+      />
+    ),
+  },
+  {
+    id: ManagementSectionId.Data,
+    title: <ManagementSectionTitle text="Data" tip="Manage your cluster data and backups" />,
+  },
+  {
+    id: ManagementSectionId.InsightsAndAlerting,
+    title: (
+      <ManagementSectionTitle
+        text="Insights and Alerting"
+        tip="Manage how to detect changes in your data"
+      />
+    ),
+  },
+  {
+    id: ManagementSectionId.Security,
+    title: <ManagementSectionTitle text="Security" tip="Control access to data and apps" />,
+  },
+  {
+    id: ManagementSectionId.Kibana,
+    title: <ManagementSectionTitle text="Kibana" tip="Customize Kibana and manage its internals" />,
+  },
+  {
+    id: ManagementSectionId.Stack,
+    title: <ManagementSectionTitle text="Stack" tip="Upgrade the Stack and manage your license" />,
+  },
+];

src/plugins/management/public/management_service.test.ts

@@ -18,6 +18,7 @@
  */
 
 import { ManagementService } from './management_service';
+import { ManagementSectionId } from './types';
 import { coreMock } from '../../../core/public/mocks';
 import { npSetup } from '../../../legacy/ui/public/new_platform/__mocks__';
 
@@ -29,27 +30,11 @@ test('Provides default sections', () => {
     () => {},
     coreMock.createSetup().getStartServices
   );
-  expect(service.getAllSections().length).toEqual(2);
-  expect(service.getSection('kibana')).not.toBeUndefined();
-  expect(service.getSection('elasticsearch')).not.toBeUndefined();
-});
-
-test('Register section, enable and disable', () => {
-  const service = new ManagementService().setup(
-    npSetup.plugins.kibanaLegacy,
-    () => {},
-    coreMock.createSetup().getStartServices
-  );
-  const testSection = service.register({ id: 'test-section', title: 'Test Section' });
-  expect(service.getSection('test-section')).not.toBeUndefined();
-
-  const testApp = testSection.registerApp({
-    id: 'test-app',
-    title: 'Test App',
-    mount: () => () => {},
-  });
-  expect(testSection.getApp('test-app')).not.toBeUndefined();
-  expect(service.getSectionsEnabled().length).toEqual(1);
-  testApp.disable();
-  expect(service.getSectionsEnabled().length).toEqual(0);
+  expect(service.getAllSections().length).toEqual(6);
+  expect(service.getSection(ManagementSectionId.Ingest)).toBeDefined();
+  expect(service.getSection(ManagementSectionId.Data)).toBeDefined();
+  expect(service.getSection(ManagementSectionId.InsightsAndAlerting)).toBeDefined();
+  expect(service.getSection(ManagementSectionId.Security)).toBeDefined();
+  expect(service.getSection(ManagementSectionId.Kibana)).toBeDefined();
+  expect(service.getSection(ManagementSectionId.Stack)).toBeDefined();
 });

src/plugins/management/public/management_service.ts

@@ -17,11 +17,14 @@
  * under the License.
  */
 
+import { ReactElement } from 'react';
+
 import { ManagementSection } from './management_section';
+import { managementSections } from './management_sections';
 import { KibanaLegacySetup } from '../../kibana_legacy/public';
 // @ts-ignore
-import { LegacyManagementSection } from './legacy';
-import { CreateSection } from './types';
+import { LegacyManagementSection, sections } from './legacy';
+import { CreateSection, ManagementSectionId } from './types';
 import { StartServicesAccessor, CoreStart } from '../../../core/public';
 
 export class ManagementService {
@@ -48,7 +51,8 @@ export class ManagementService {
       return newSection;
     };
   }
-  private getSection(sectionId: ManagementSection['id']) {
+
+  private getSection(sectionId: ManagementSectionId) {
     return this.sections.find(section => section.id === sectionId);
   }
 
@@ -63,7 +67,13 @@ export class ManagementService {
   }
 
   private sharedInterface = {
-    getSection: this.getSection.bind(this),
+    getSection: (sectionId: ManagementSectionId) => {
+      const section = this.getSection(sectionId);
+      if (!section) {
+        throw new Error(`Management section with id ${sectionId} is undefined`);
+      }
+      return section;
+    },
     getSectionsEnabled: this.getSectionsEnabled.bind(this),
     getAllSections: this.getAllSections.bind(this),
   };
@@ -79,16 +89,13 @@ export class ManagementService {
       getStartServices
     );
 
-    register({ id: 'kibana', title: 'Kibana', order: 30, euiIconType: 'logoKibana' });
-    register({
-      id: 'elasticsearch',
-      title: 'Elasticsearch',
-      order: 20,
-      euiIconType: 'logoElasticsearch',
-    });
+    managementSections.forEach(
+      ({ id, title }: { id: ManagementSectionId; title: ReactElement }, idx: number) => {
+        register({ id, title, order: idx });
+      }
+    );
 
     return {
-      register,
       ...this.sharedInterface,
     };
   }

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

@@ -30,7 +30,6 @@ const createManagementSectionMock = (): jest.Mocked<PublicMethodsOf<ManagementSe
 
 const createSetupContract = (): DeeplyMockedKeys<ManagementSetup> => ({
   sections: {
-    register: jest.fn(),
     getSection: jest.fn().mockReturnValue(createManagementSectionMock()),
     getAllSections: jest.fn().mockReturnValue([]),
   },