From 00bf04d74afad9970678b87c02942003e0712cd2 Mon Sep 17 00:00:00 2001 From: Michal Klobukowski Date: Tue, 4 Sep 2018 12:30:14 +0200 Subject: [PATCH] Update navigation handlers for process and process logs panels Feature #13776 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- src/index.tsx | 2 +- src/routes/route-change-handlers.ts | 37 +++++++++++++++++++ src/routes/routes.ts | 33 ----------------- src/store/breadcrumbs/breadcrumbs-actions.ts | 9 +++++ .../context-menu/context-menu-actions.ts | 12 +++--- src/store/workbench/workbench-actions.ts | 17 ++++----- 6 files changed, 60 insertions(+), 50 deletions(-) create mode 100644 src/routes/route-change-handlers.ts diff --git a/src/index.tsx b/src/index.tsx index 4ce80d31..a921b471 100644 --- 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 index 00000000..b29e5d1e --- /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 05a8ab09..f108e0b8 100644 --- 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(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 254a8d3e..cc7bb1dd 100644 --- 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(setProjectBreadcrumbs(collection.ownerUuid)); } }; +export const setProcessBreadcrumbs = (processUuid: string) => + (dispatch: Dispatch, getState: () => RootState) => { + const { resources } = getState(); + const process = getProcess(processUuid)(resources); + if (process) { + dispatch(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 2b0e6f8f..bb404b88 100644 --- 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) => (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 80f50fe1..effac1d1 100644 --- 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(processesActions.loadProcess(uuid)); - const process = getProcess(uuid)(getState().resources); - if (process) { - await dispatch(activateSidePanelTreeItem(process.containerRequest.ownerUuid)); - dispatch(setCollectionBreadcrumbs(process.containerRequest.ownerUuid)); - dispatch(loadDetailsPanel(uuid)); - } + const process = await dispatch(processesActions.loadProcess(uuid)); + await dispatch(activateSidePanelTreeItem(process.containerRequest.ownerUuid)); + dispatch(setProcessBreadcrumbs(uuid)); + dispatch(loadDetailsPanel(uuid)); }; export const loadProcessLog = (uuid: string) => async (dispatch: Dispatch) => { + const process = await dispatch(processesActions.loadProcess(uuid)); + await dispatch(activateSidePanelTreeItem(process.containerRequest.ownerUuid)); + dispatch(setProcessBreadcrumbs(uuid)); dispatch(initProcessLogsPanel(uuid)); }; -- 2.30.2