Workspace overview page

src/core/public/chrome/chrome_service.test.ts

@@ -41,6 +41,7 @@ import { notificationServiceMock } from '../notifications/notifications_service.
 import { uiSettingsServiceMock } from '../ui_settings/ui_settings_service.mock';
 import { ChromeService } from './chrome_service';
 import { getAppInfo } from '../application/utils';
+import { workspacesServiceMock } from '../mocks';
 
 class FakeApp implements App {
   public title: string;
@@ -70,6 +71,7 @@ function defaultStartDeps(availableApps?: App[]) {
     injectedMetadata: injectedMetadataServiceMock.createStartContract(),
     notifications: notificationServiceMock.createStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
+    workspaces: workspacesServiceMock.createStartContract(),
   };
 
   if (availableApps) {

src/core/public/chrome/chrome_service.tsx

@@ -48,7 +48,7 @@ import { ChromeNavLinks, NavLinksService, ChromeNavLink } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
 import { Header } from './ui';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
-import { Branding } from '../';
+import { Branding, WorkspacesStart } from '../';
 import { getLogos } from '../../common';
 import type { Logos } from '../../common/types';
 
@@ -96,6 +96,7 @@ export interface StartDeps {
   injectedMetadata: InjectedMetadataStart;
   notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
+  workspaces: WorkspacesStart;
 }
 
 type CollapsibleNavHeaderRender = () => JSX.Element | null;
@@ -166,6 +167,7 @@ export class ChromeService {
     injectedMetadata,
     notifications,
     uiSettings,
+    workspaces,
   }: StartDeps): Promise<InternalChromeStart> {
     this.initVisibility(application);
 

src/core/public/chrome/ui/header/header_breadcrumbs.tsx

@@ -30,7 +30,7 @@
 
 import { EuiHeaderBreadcrumbs } from '@elastic/eui';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
@@ -42,7 +42,18 @@ interface Props {
 
 export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
   const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards');
-  const breadcrumbs = useObservable(breadcrumbs$, []);
+  // const breadcrumbs = useObservable(breadcrumbs$, []);
+  const [breadcrumbs, setBreadcrumbs] = useState<ChromeBreadcrumb[]>([]);
+
+  useEffect(() => {
+    const subscription = breadcrumbs$.subscribe((newBreadcrumbs: ChromeBreadcrumb[]) => {
+      setBreadcrumbs(newBreadcrumbs);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  });
+
   let crumbs = breadcrumbs;
 
   if (breadcrumbs.length === 0 && appTitle) {

src/core/public/core_system.ts

@@ -235,6 +235,7 @@ export class CoreSystem {
         injectedMetadata,
         notifications,
         uiSettings,
+        workspaces,
       });
 
       this.coreApp.start({ application, http, notifications, uiSettings });

src/core/utils/default_app_categories.ts

@@ -73,4 +73,40 @@ export const DEFAULT_APP_CATEGORIES: Record<string, AppCategory> = Object.freeze
     order: 5000,
     euiIconType: 'managementApp',
   },
+  // below categories are for workspace
+  getStarted: {
+    id: 'getStarted',
+    label: i18n.translate('core.ui.managementNavList.label', {
+      defaultMessage: 'Get started',
+    }),
+    order: 10000,
+  },
+  dashboardAndReport: {
+    id: 'dashboardReport',
+    label: i18n.translate('core.ui.managementNavList.label', {
+      defaultMessage: 'Dashboard and report',
+    }),
+    order: 11000,
+  },
+  investigate: {
+    id: 'investigate',
+    label: i18n.translate('core.ui.managementNavList.label', {
+      defaultMessage: 'Investigate',
+    }),
+    order: 12000,
+  },
+  detect: {
+    id: 'detect',
+    label: i18n.translate('core.ui.managementNavList.label', {
+      defaultMessage: 'Detect',
+    }),
+    order: 13000,
+  },
+  searchSolution: {
+    id: 'searchSolution',
+    label: i18n.translate('core.ui.managementNavList.label', {
+      defaultMessage: 'Build search solution',
+    }),
+    order: 14000,
+  },
 });

src/plugins/workspace/common/constants.ts

@@ -8,7 +8,11 @@ export const WORKSPACE_LIST_APP_ID = 'workspace_list';
 export const WORKSPACE_UPDATE_APP_ID = 'workspace_update';
 export const WORKSPACE_OVERVIEW_APP_ID = 'workspace_overview';
 // These features will be checked and disabled in checkbox on default.
-export const DEFAULT_SELECTED_FEATURES_IDS = [WORKSPACE_UPDATE_APP_ID, WORKSPACE_OVERVIEW_APP_ID];
+export const DEFAULT_SELECTED_FEATURES_IDS = [
+  WORKSPACE_UPDATE_APP_ID,
+  WORKSPACE_OVERVIEW_APP_ID,
+  'management',
+];
 export const WORKSPACE_FATAL_ERROR_APP_ID = 'workspace_fatal_error';
 export const WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID = 'workspace';
 export const WORKSPACE_CONFLICT_CONTROL_SAVED_OBJECTS_CLIENT_WRAPPER_ID =

src/plugins/workspace/public/application.tsx

@@ -16,6 +16,7 @@ import { Services } from './types';
 import { WorkspaceOverviewApp } from './components/workspace_overview_app';
 import { WorkspaceCreatorProps } from './components/workspace_creator/workspace_creator';
 import { WorkspaceListProps } from './components/workspace_list';
+import { WorkspaceOverviewProps } from './components/workspace_overview/workspace_overview';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -83,10 +84,14 @@ export const renderListApp = (
   };
 };
 
-export const renderOverviewApp = ({ element }: AppMountParameters, services: Services) => {
+export const renderOverviewApp = (
+  { element }: AppMountParameters,
+  services: Services,
+  props: WorkspaceOverviewProps
+) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceOverviewApp />
+      <WorkspaceOverviewApp {...props} />
     </OpenSearchDashboardsContextProvider>,
     element
   );