Add workspace overview page (opensearch-project#19)

* feat: add workspace overview page

Signed-off-by: Lin Wang <wonglam@amazon.com>

* refactor: move paths to common constants

Signed-off-by: Lin Wang <wonglam@amazon.com>

* feat: add workspace overview item by custom nav in start phase

Signed-off-by: Lin Wang <wonglam@amazon.com>

* refactor: change to currentWorkspace$ in workspace client

Signed-off-by: Lin Wang <wonglam@amazon.com>

---------

Signed-off-by: Lin Wang <wonglam@amazon.com>

Author: wanglam

src/plugins/workspace/common/constants.ts

@@ -6,3 +6,8 @@
 export const WORKSPACE_APP_ID = 'workspace';
 export const WORKSPACE_APP_NAME = 'Workspace';
 export const WORKSPACE_ID_IN_SESSION_STORAGE = '_workspace_id_';
+
+export const PATHS = {
+  create: '/create',
+  overview: '/overview',
+};

src/plugins/workspace/public/components/routes.ts

@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { WorkspaceCreator } from './workspace_creator';
+import { PATHS } from '../../common/constants';
 
-export const paths = {
-  create: '/create',
-};
+import { WorkspaceCreator } from './workspace_creator';
+import { WorkspaceOverview } from './workspace_overview';
 
 export interface RouteConfig {
   path: string;
@@ -18,8 +17,13 @@ export interface RouteConfig {
 
 export const ROUTES: RouteConfig[] = [
   {
-    path: paths.create,
+    path: PATHS.create,
     Component: WorkspaceCreator,
     label: 'Create',
   },
+  {
+    path: PATHS.overview,
+    Component: WorkspaceOverview,
+    label: 'Overview',
+  },
 ];

src/plugins/workspace/public/components/workspace_overview.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageHeader, EuiButton, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+
+import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+
+export const WorkspaceOverview = () => {
+  const {
+    services: { workspaces },
+  } = useOpenSearchDashboards();
+
+  const currentWorkspace = useObservable(
+    workspaces ? workspaces.client.currentWorkspace$ : of(null)
+  );
+
+  return (
+    <>
+      <EuiPageHeader
+        pageTitle="Overview"
+        rightSideItems={[
+          <EuiButton color="danger">Delete</EuiButton>,
+          <EuiButton>Update</EuiButton>,
+        ]}
+      />
+      <EuiPanel>
+        <EuiTitle size="m">
+          <h3>Workspace</h3>
+        </EuiTitle>
+        <EuiSpacer />
+        {JSON.stringify(currentWorkspace)}
+      </EuiPanel>
+    </>
+  );
+};

src/plugins/workspace/public/plugin.ts

@@ -11,7 +11,7 @@ import {
   AppMountParameters,
   AppNavLinkStatus,
 } from '../../../core/public';
-import { WORKSPACE_APP_ID, WORKSPACE_ID_IN_SESSION_STORAGE } from '../common/constants';
+import { WORKSPACE_APP_ID, WORKSPACE_ID_IN_SESSION_STORAGE, PATHS } from '../common/constants';
 import { WORKSPACE_ID_QUERYSTRING_NAME } from '../../../core/public';
 import { mountDropdownList } from './mount';
 
@@ -102,6 +102,12 @@ export class WorkspacesPlugin implements Plugin<{}, {}> {
 
   public start(core: CoreStart) {
     mountDropdownList(core);
+
+    core.chrome.setCustomNavLink({
+      title: i18n.translate('workspace.nav.title', { defaultMessage: 'Workspace Overview' }),
+      baseUrl: core.http.basePath.get(),
+      href: core.application.getUrlForApp(WORKSPACE_APP_ID, { path: PATHS.overview }),
+    });
     return {};
   }
 }