Management - New platform api

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

@@ -28,7 +28,8 @@ import { I18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import appTemplate from './app.html';
 import landingTemplate from './landing.html';
-import { management, SidebarNav, MANAGEMENT_BREADCRUMB } from 'ui/management';
+import { management, MANAGEMENT_BREADCRUMB } from 'ui/management';
+import { ManagementSidebarNav } from '../../../../../plugins/management/public';
 import {
   FeatureCatalogueRegistryProvider,
   FeatureCatalogueCategory,
@@ -42,6 +43,7 @@ import {
   EuiIcon,
   EuiHorizontalRule,
 } from '@elastic/eui';
+import { npStart } from 'ui/new_platform';
 
 const SIDENAV_ID = 'management-sidenav';
 const LANDING_ID = 'management-landing';
@@ -102,15 +104,20 @@ export function updateLandingPage(version) {
   );
 }
 
-export function updateSidebar(items, id) {
+export function updateSidebar(legacySections, id) {
   const node = document.getElementById(SIDENAV_ID);
   if (!node) {
     return;
   }
 
   render(
     <I18nContext>
-      <SidebarNav sections={items} selectedId={id} className="mgtSideNav" />
+      <ManagementSidebarNav
+        getSections={npStart.plugins.management.sections.getSectionsEnabled}
+        legacySections={legacySections}
+        selectedId={id}
+        className="mgtSideNav"
+      />
     </I18nContext>,
     node
   );

src/legacy/ui/public/_index.scss

@@ -20,6 +20,7 @@
 @import './saved_objects/index';
 @import './share/index';
 @import './style_compile/index';
+@import '../../../plugins/management/public/components/index';
 
 // The following are prefixed with "vis"
 

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

@@ -23,8 +23,6 @@ export {
   PAGE_FOOTER_COMPONENT,
 } from '../../../core_plugins/kibana/public/management/sections/settings/components/default_component_registry';
 export { registerSettingsComponent } from '../../../core_plugins/kibana/public/management/sections/settings/components/component_registry';
-export { SidebarNav } from './components';
 export { MANAGEMENT_BREADCRUMB } from './breadcrumbs';
-
 import { npStart } from 'ui/new_platform';
 export const management = npStart.plugins.management.legacy;

src/plugins/management/kibana.json

@@ -3,5 +3,5 @@
   "version": "kibana",
   "server": false,
   "ui": true,
-  "requiredPlugins": []
+  "requiredPlugins": ["kibana_legacy"]
 }

src/plugins/management/public/_index.scss

@@ -0,0 +1 @@
+@import './components/index';

src/legacy/ui/public/management/components/_sidebar_nav.scss → src/plugins/management/public/components/_sidebar_nav.scss

@@ -1,4 +1,4 @@
-.mgtSidebarNav {
+.mgtSideBarNav {
   width: 192px;
 }
 

src/legacy/ui/public/management/components/index.ts → src/plugins/management/public/components/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { SidebarNav } from './sidebar_nav';
+export { ManagementSidebarNav } from './management_sidebar_nav';

src/legacy/ui/public/management/components/sidebar_nav.test.ts → src/plugins/management/public/components/management_sidebar_nav.test.ts

@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import { IndexedArray } from '../../indexed_array';
-import { sideNavItems } from '../components/sidebar_nav';
+import { IndexedArray } from '../../../../legacy/ui/public/indexed_array';
+import { mergeLegacyItems } from '../components/management_sidebar_nav';
 
 const toIndexedArray = (initialSet: any[]) =>
   new IndexedArray({
@@ -30,30 +30,33 @@ const toIndexedArray = (initialSet: any[]) =>
 const activeProps = { visible: true, disabled: false };
 const disabledProps = { visible: true, disabled: true };
 const notVisibleProps = { visible: false, disabled: false };
-
 const visibleItem = { display: 'item', id: 'item', ...activeProps };
 
 const notVisibleSection = {
   display: 'Not visible',
   id: 'not-visible',
+  order: 10,
   visibleItems: toIndexedArray([visibleItem]),
   ...notVisibleProps,
 };
 const disabledSection = {
   display: 'Disabled',
   id: 'disabled',
+  order: 10,
   visibleItems: toIndexedArray([visibleItem]),
   ...disabledProps,
 };
 const noItemsSection = {
   display: 'No items',
   id: 'no-items',
+  order: 10,
   visibleItems: toIndexedArray([]),
   ...activeProps,
 };
 const noActiveItemsSection = {
   display: 'No active items',
   id: 'no-active-items',
+  order: 10,
   visibleItems: toIndexedArray([
     { display: 'disabled', id: 'disabled', ...disabledProps },
     { display: 'notVisible', id: 'notVisible', ...notVisibleProps },
@@ -63,6 +66,7 @@ const noActiveItemsSection = {
 const activeSection = {
   display: 'activeSection',
   id: 'activeSection',
+  order: 10,
   visibleItems: toIndexedArray([visibleItem]),
   ...activeProps,
 };
@@ -76,7 +80,9 @@ const managementSections = [
 ];
 
 describe('Management', () => {
-  it('filters and filters and maps section objects into SidebarNav items', () => {
-    expect(sideNavItems(managementSections, 'active-item-id')).toMatchSnapshot();
+  it('maps legacy sections and apps into SidebarNav items', () => {
+    expect(mergeLegacyItems([], managementSections, 'active-item-id')).toMatchSnapshot();
   });
 });
+
+// todo - itetrate through various inputs and test outputs