navigate to create workspace/workspaces list page without refreshing (o…

…pensearch-project#220) Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Hailong-am · Oct 12, 2023 · a74a6ee · a74a6ee
1 parent e36a7b6
commit a74a6ee
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
@@ -102,6 +102,7 @@ interface StartDeps {
 type CollapsibleNavHeaderRender = (context: {
   basePath: HttpStart['basePath'];
   getUrlForApp: InternalApplicationStart['getUrlForApp'];
+  navigateToUrl: InternalApplicationStart['navigateToUrl'];
   workspaces: WorkspacesStart;
 }) => JSX.Element | null;
 
@@ -202,6 +203,7 @@ export class ChromeService {
             basePath: http.basePath,
             workspaces,
             getUrlForApp: application.getUrlForApp,
+            navigateToUrl: application.navigateToUrl,
           })
         : null;
 

diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -15,6 +15,7 @@ import {
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
+import type { EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
 
 import {
   ApplicationStart,
@@ -32,6 +33,7 @@ import { formatUrlWithWorkspaceId } from '../../utils';
 
 interface Props {
   getUrlForApp: ApplicationStart['getUrlForApp'];
+  navigateToUrl: ApplicationStart['navigateToUrl'];
   basePath: HttpSetup['basePath'];
   workspaces: WorkspacesStart;
 }
@@ -50,7 +52,7 @@ function getFilteredWorkspaceList(
   ].slice(0, 5);
 }
 
-export const WorkspaceMenu = ({ basePath, getUrlForApp, workspaces }: Props) => {
+export const WorkspaceMenu = ({ basePath, getUrlForApp, workspaces, navigateToUrl }: Props) => {
   const [isPopoverOpen, setPopover] = useState(false);
   const currentWorkspace = useObservable(workspaces.currentWorkspace$, null);
   const workspaceList = useObservable(workspaces.workspaceList$, []);
@@ -103,8 +105,8 @@ export const WorkspaceMenu = ({ basePath, getUrlForApp, workspaces }: Props) =>
   };
 
   const getWorkspaceListItems = () => {
-    const workspaceListItems = filteredWorkspaceList.map((workspace, index) =>
-      workspaceToItem(workspace, index)
+    const workspaceListItems: EuiContextMenuPanelItemDescriptor[] = filteredWorkspaceList.map(
+      (workspace, index) => workspaceToItem(workspace, index)
     );
     const length = workspaceListItems.length;
     workspaceListItems.push({
@@ -113,27 +115,37 @@ export const WorkspaceMenu = ({ basePath, getUrlForApp, workspaces }: Props) =>
         defaultMessage: 'Create workspace',
       }),
       key: length.toString(),
-      href: formatUrlWithWorkspaceId(
-        getUrlForApp(WORKSPACE_CREATE_APP_ID, {
-          absolute: false,
-        }),
-        currentWorkspace?.id ?? '',
-        basePath
-      ),
+      onClick: () => {
+        navigateToUrl(
+          formatUrlWithWorkspaceId(
+            getUrlForApp(WORKSPACE_CREATE_APP_ID, {
+              absolute: false,
+            }),
+            currentWorkspace?.id ?? '',
+            basePath
+          )
+        );
+        setPopover(false);
+      },
     });
     workspaceListItems.push({
       icon: <EuiIcon type="folderClosed" />,
       name: i18n.translate('core.ui.primaryNav.workspaceContextMenu.allWorkspace', {
         defaultMessage: 'All workspaces',
       }),
       key: (length + 1).toString(),
-      href: formatUrlWithWorkspaceId(
-        getUrlForApp(WORKSPACE_LIST_APP_ID, {
-          absolute: false,
-        }),
-        currentWorkspace?.id ?? '',
-        basePath
-      ),
+      onClick: () => {
+        navigateToUrl(
+          formatUrlWithWorkspaceId(
+            getUrlForApp(WORKSPACE_LIST_APP_ID, {
+              absolute: false,
+            }),
+            currentWorkspace?.id ?? '',
+            basePath
+          )
+        );
+        setPopover(false);
+      },
     });
     return workspaceListItems;
   };

diff --git a/src/plugins/workspace/public/render_workspace_menu.tsx b/src/plugins/workspace/public/render_workspace_menu.tsx
@@ -11,10 +11,19 @@ export function renderWorkspaceMenu({
   basePath,
   getUrlForApp,
   workspaces,
+  navigateToUrl,
 }: {
   getUrlForApp: ApplicationStart['getUrlForApp'];
   basePath: HttpSetup['basePath'];
   workspaces: WorkspacesStart;
+  navigateToUrl: ApplicationStart['navigateToUrl'];
 }) {
-  return <WorkspaceMenu basePath={basePath} getUrlForApp={getUrlForApp} workspaces={workspaces} />;
+  return (
+    <WorkspaceMenu
+      basePath={basePath}
+      getUrlForApp={getUrlForApp}
+      workspaces={workspaces}
+      navigateToUrl={navigateToUrl}
+    />
+  );
 }