[Workspace] Add workspace overview page

changelogs/fragments/6584.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Add workspace overview page ([#6584](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6584))

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/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/public/application.tsx

@@ -14,6 +14,8 @@ import { WorkspaceListApp } from './components/workspace_list_app';
 import { WorkspaceUpdaterProps } from './components/workspace_updater';
 import { Services } from './types';
 import { WorkspaceCreatorProps } from './components/workspace_creator/workspace_creator';
+import { WorkspaceOverviewApp } from './components/workspace_overview_app';
+import { WorkspaceOverviewProps } from './components/workspace_overview/workspace_overview';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -75,3 +77,20 @@ export const renderListApp = ({ element }: AppMountParameters, services: Service
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+
+export const renderOverviewApp = (
+  { element }: AppMountParameters,
+  services: Services,
+  props: WorkspaceOverviewProps
+) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceOverviewApp {...props} />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};