feat: user can open a session detail panel in notifications

lablup · Nov 18, 2024 · d941dd5 · d941dd5
1 parent 5d3cca4
commit d941dd5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -19,6 +19,7 @@ import {
   IndexRouteObject,
   RouterProvider,
   createBrowserRouter,
+  useLocation,
 } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
@@ -147,7 +148,10 @@ const router = createBrowserRouter([
         children: [
           {
             path: '',
-            element: <WebUINavigate to="/job" replace />,
+            Component: () => {
+              const location = useLocation();
+              return <WebUINavigate to={'/job' + location.search} replace />;
+            },
           },
           {
             path: '/session/start',

diff --git a/react/src/components/WebUINavigate.tsx b/react/src/components/WebUINavigate.tsx
@@ -3,20 +3,20 @@ import _ from 'lodash';
 import React, { useEffect } from 'react';
 import { Navigate, NavigateProps } from 'react-router-dom';
 
-interface WebUINavigateProps extends NavigateProps {
-  options?: {
-    params?: any;
-  };
-}
-const WebUINavigate: React.FC<WebUINavigateProps> = ({ options, ...props }) => {
+interface WebUINavigateProps extends NavigateProps {}
+const WebUINavigate: React.FC<WebUINavigateProps> = ({ ...props }) => {
   useSuspendedBackendaiClient();
   const pathName = _.isString(props.to) ? props.to : props.to.pathname || '';
+  const [path, query] = pathName.split('?');
+  const params = {
+    params: Object.fromEntries(new URLSearchParams(query)),
+  };
   useEffect(() => {
     document.dispatchEvent(
       new CustomEvent('move-to-from-react', {
         detail: {
-          path: pathName,
-          params: options?.params,
+          path: path,
+          params,
         },
       }),
     );

diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
@@ -606,6 +606,11 @@ const SessionLauncherPage = () => {
               sessionName: string;
               servicePorts: Array<{ name: string }>;
             }>) => {
+              // After the session is created, add a "See Details" button to navigate to the session page.
+              upsertNotification({
+                key: 'session-launcher:' + sessionName,
+                to: `/session?sessionDetail=${firstSession.sessionId}`,
+              });
               pushSessionHistory({
                 id: firstSession.sessionId,
                 params: usedSearchParams,