Update navigation handlers for process and process logs panels

Feature #13776

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/index.tsx b/src/index.tsx
index 4ce80d31e9d0f0360e6dd7051b113f9dbfe4d40c..a921b471383dbc399521b9298ee7f80bd3cb8a00 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,13 +28,13 @@ import { collectionFilesItemActionSet } from './views-components/context-menu/ac
 import { collectionActionSet } from './views-components/context-menu/action-sets/collection-action-set';
 import { collectionResourceActionSet } from './views-components/context-menu/action-sets/collection-resource-action-set';
 import { processActionSet } from './views-components/context-menu/action-sets/process-action-set';
-import { addRouteChangeHandlers } from './routes/routes';
 import { loadWorkbench } from './store/workbench/workbench-actions';
 import { Routes } from '~/routes/routes';
 import { trashActionSet } from "~/views-components/context-menu/action-sets/trash-action-set";
 import { ServiceRepository } from '~/services/services';
 import { initWebSocket } from '~/websocket/websocket';
 import { Config } from '~/common/config';
+import { addRouteChangeHandlers } from './routes/route-change-handlers';
 
 const getBuildNumber = () => "BN-" + (process.env.REACT_APP_BUILD_NUMBER || "dev");
 const getGitCommit = () => "GIT-" + (process.env.REACT_APP_GIT_COMMIT || "latest").substr(0, 7);

diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts
new file mode 100644 (file)
index 0000000..b29e5d1
--- /dev/null
+++ b/src/routes/route-change-handlers.ts
@@ -0,0 +1,37 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { History, Location } from 'history';
+import { RootStore } from '~/store/store';
+import {  matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute } from './routes';
+import { loadProject, loadCollection, loadFavorites, loadTrash, loadProcess, loadProcessLog } from '~/store/workbench/workbench-actions';
+
+export const addRouteChangeHandlers = (history: History, store: RootStore) => {
+    const handler = handleLocationChange(store);
+    handler(history.location);
+    history.listen(handler);
+};
+
+const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
+    const projectMatch = matchProjectRoute(pathname);
+    const collectionMatch = matchCollectionRoute(pathname);
+    const favoriteMatch = matchFavoritesRoute(pathname);
+    const trashMatch = matchTrashRoute(pathname);
+    const processMatch = matchProcessRoute(pathname);
+    const processLogMatch = matchProcessLogRoute(pathname);
+    
+    if (projectMatch) {
+        store.dispatch(loadProject(projectMatch.params.id));
+    } else if (collectionMatch) {
+        store.dispatch(loadCollection(collectionMatch.params.id));
+    } else if (favoriteMatch) {
+        store.dispatch(loadFavorites());
+    } else if (trashMatch) {
+        store.dispatch(loadTrash());
+    } else if (processMatch) {
+        store.dispatch(loadProcess(processMatch.params.id));
+    } else if (processLogMatch) {
+        store.dispatch(loadProcessLog(processLogMatch.params.id));
+    }
+};

diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 05a8ab099ce1db395fb42f67561f330f3adae289..f108e0b8be423592cb50578a8667e468c3251e55 100644 (file)
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -2,14 +2,10 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { History, Location } from 'history';
-import { RootStore } from '~/store/store';
 import { matchPath } from 'react-router';
 import { ResourceKind, RESOURCE_UUID_PATTERN, extractUuidKind } from '~/models/resource';
 import { getProjectUrl } from '~/models/project';
 import { getCollectionUrl } from '~/models/collection';
-import { loadProject, loadFavorites, loadCollection, loadTrash, loadProcessLog } from '~/store/workbench/workbench-actions';
-import { loadProcess } from '~/store/processes/processes-actions';
 
 export const Routes = {
     ROOT: '/',
@@ -38,12 +34,6 @@ export const getProcessUrl = (uuid: string) => `/processes/${uuid}`;
 
 export const getProcessLogUrl = (uuid: string) => `/process-logs/${uuid}`;
 
-export const addRouteChangeHandlers = (history: History, store: RootStore) => {
-    const handler = handleLocationChange(store);
-    handler(history.location);
-    history.listen(handler);
-};
-
 export interface ResourceRouteParams {
     id: string;
 }
@@ -68,26 +58,3 @@ export const matchProcessRoute = (route: string) =>
 
 export const matchProcessLogRoute = (route: string) =>
     matchPath<ResourceRouteParams>(route, { path: Routes.PROCESS_LOGS });
-
-const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
-    const projectMatch = matchProjectRoute(pathname);
-    const collectionMatch = matchCollectionRoute(pathname);
-    const favoriteMatch = matchFavoritesRoute(pathname);
-    const trashMatch = matchTrashRoute(pathname);
-    const processMatch = matchProcessRoute(pathname);
-    const processLogMatch = matchProcessLogRoute(pathname);
-    
-    if (projectMatch) {
-        store.dispatch(loadProject(projectMatch.params.id));
-    } else if (collectionMatch) {
-        store.dispatch(loadCollection(collectionMatch.params.id));
-    } else if (favoriteMatch) {
-        store.dispatch(loadFavorites());
-    } else if (trashMatch) {
-        store.dispatch(loadTrash());
-    } else if (processMatch) {
-        store.dispatch(loadProcess(processMatch.params.id));
-    } else if (processLogMatch) {
-        store.dispatch(loadProcessLog(processLogMatch.params.id));
-    }
-};

diff --git a/src/store/breadcrumbs/breadcrumbs-actions.ts b/src/store/breadcrumbs/breadcrumbs-actions.ts
index 254a8d3e16e93aa75d62657d4eecbde75dd587de..cc7bb1dd2d2d6f9237e448dfe0c1fbca4692a6f3 100644 (file)
--- a/src/store/breadcrumbs/breadcrumbs-actions.ts
+++ b/src/store/breadcrumbs/breadcrumbs-actions.ts
@@ -9,6 +9,7 @@ import { getResource } from '~/store/resources/resources';
 import { TreePicker } from '../tree-picker/tree-picker';
 import { getSidePanelTreeBranch } from '../side-panel-tree/side-panel-tree-actions';
 import { propertiesActions } from '../properties/properties-actions';
+import { getProcess } from '~/store/processes/process';
 
 export const BREADCRUMBS = 'breadcrumbs';
 
@@ -44,3 +45,11 @@ export const setCollectionBreadcrumbs = (collectionUuid: string) =>
             dispatch<any>(setProjectBreadcrumbs(collection.ownerUuid));
         }
     };
+export const setProcessBreadcrumbs = (processUuid: string) =>
+    (dispatch: Dispatch, getState: () => RootState) => {
+        const { resources } = getState();
+        const process = getProcess(processUuid)(resources);
+        if (process) {
+            dispatch<any>(setProjectBreadcrumbs(process.containerRequest.ownerUuid));
+        }
+    };

diff --git a/src/store/context-menu/context-menu-actions.ts b/src/store/context-menu/context-menu-actions.ts
index 2b0e6f8f8bd2aad4192397459c79927862264166..bb404b88963b9fbd358db6cdba1aa82a6e7bbf20 100644 (file)
--- a/src/store/context-menu/context-menu-actions.ts
+++ b/src/store/context-menu/context-menu-actions.ts
@@ -11,7 +11,8 @@ import { getResource } from '../resources/resources';
 import { ProjectResource } from '~/models/project';
 import { UserResource } from '~/models/user';
 import { isSidePanelTreeCategory } from '~/store/side-panel-tree/side-panel-tree-actions';
-import { extractUuidKind, ResourceKind, TrashableResource } from '~/models/resource';
+import { extractUuidKind, ResourceKind } from '~/models/resource';
+import { matchProcessRoute } from '~/routes/routes';
 
 export const contextMenuActions = unionize({
     OPEN_CONTEXT_MENU: ofType<{ position: ContextMenuPosition, resource: ContextMenuResource }>(),
@@ -87,13 +88,10 @@ export const openProcessContextMenu = (event: React.MouseEvent<HTMLElement>) =>
     (dispatch: Dispatch, getState: () => RootState) => {
         const { location } = getState().router;
         const pathname = location ? location.pathname : '';
-        // ToDo: We get error from matchProcessRoute
-        // const match = matchProcessRoute(pathname); 
-        // console.log('match: ', match);
-        // const uuid = match ? match.params.id : '';
-        const uuid = pathname.split('/').slice(-1)[0];
+        const match = matchProcessRoute(pathname); 
+        const uuid = match ? match.params.id : '';
         const resource = {
-            uuid: '',
+            uuid,
             ownerUuid: '',
             kind: ResourceKind.PROCESS,
             name: '',

diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts
index 80f50fe153744382832c81aa34d63f8976ea2869..effac1d14f4c77048278aac70bbc7c7cd50c1612 100644 (file)
--- a/src/store/workbench/workbench-actions.ts
+++ b/src/store/workbench/workbench-actions.ts
@@ -15,7 +15,7 @@ import { favoritePanelActions } from '~/store/favorite-panel/favorite-panel-acti
 import { projectPanelColumns } from '~/views/project-panel/project-panel';
 import { favoritePanelColumns } from '~/views/favorite-panel/favorite-panel';
 import { matchRootRoute } from '~/routes/routes';
-import { setCollectionBreadcrumbs, setProjectBreadcrumbs, setSidePanelBreadcrumbs } from '../breadcrumbs/breadcrumbs-actions';
+import { setCollectionBreadcrumbs, setProjectBreadcrumbs, setSidePanelBreadcrumbs, setProcessBreadcrumbs } from '../breadcrumbs/breadcrumbs-actions';
 import { navigateToProject } from '../navigation/navigation-action';
 import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog';
 import { ServiceRepository } from '~/services/services';
@@ -29,7 +29,6 @@ import * as collectionCopyActions from '~/store/collections/collection-copy-acti
 import * as collectionUpdateActions from '~/store/collections/collection-update-actions';
 import * as collectionMoveActions from '~/store/collections/collection-move-actions';
 import * as processesActions from '../processes/processes-actions';
-import { getProcess } from '../processes/process';
 import { trashPanelColumns } from "~/views/trash-panel/trash-panel";
 import { loadTrashPanel, trashPanelActions } from "~/store/trash-panel/trash-panel-action";
 import { initProcessLogsPanel } from '../process-logs-panel/process-logs-panel-actions';
@@ -186,17 +185,17 @@ export const moveCollection = (data: MoveToFormDialogData) =>
 
 export const loadProcess = (uuid: string) =>
     async (dispatch: Dispatch, getState: () => RootState) => {
-        await dispatch<any>(processesActions.loadProcess(uuid));
-        const process = getProcess(uuid)(getState().resources);
-        if (process) {
-            await dispatch<any>(activateSidePanelTreeItem(process.containerRequest.ownerUuid));
-            dispatch<any>(setCollectionBreadcrumbs(process.containerRequest.ownerUuid));
-            dispatch(loadDetailsPanel(uuid));
-        }
+        const process = await dispatch<any>(processesActions.loadProcess(uuid));
+        await dispatch<any>(activateSidePanelTreeItem(process.containerRequest.ownerUuid));
+        dispatch<any>(setProcessBreadcrumbs(uuid));
+        dispatch(loadDetailsPanel(uuid));
     };
 
 export const loadProcessLog = (uuid: string) =>
     async (dispatch: Dispatch) => {
+        const process = await dispatch<any>(processesActions.loadProcess(uuid));
+        await dispatch<any>(activateSidePanelTreeItem(process.containerRequest.ownerUuid));
+        dispatch<any>(setProcessBreadcrumbs(uuid));
         dispatch<any>(initProcessLogsPanel(uuid));
     };