restoring-correct-tree-state-and-panel-item-highlighting-on-page-refresh-with-given-url

Feature #13905

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index 1ab212f936aec8ee5f593b6741c736ccaf3e1089..9f49f25692efbed1479add06149775a43699f47a 100644 (file)
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -6,14 +6,16 @@ import { Dispatch } from "redux";
 import { projectActions, getProjectList } from "../project/project-action";
 import { push } from "react-router-redux";
 import { TreeItemStatus } from "../../components/tree/tree";
-import { findTreeItem, getTreePath } from "../project/project-reducer";
+import { findTreeItem } from "../project/project-reducer";
 import { RootState } from "../store";
 import { Resource, ResourceKind } from "../../models/resource";
 import { projectPanelActions } from "../project-panel/project-panel-action";
 import { getCollectionUrl } from "../../models/collection";
 import { getProjectUrl, ProjectResource } from "../../models/project";
-import { ServiceRepository } from "../../services/services";
 import { ProjectService } from "../../services/project-service/project-service";
+import { ServiceRepository } from "../../services/services";
+import { sidePanelActions } from "../side-panel/side-panel-action";
+import { SidePanelIdentifiers } from "../side-panel/side-panel-reducer";
 
 export const getResourceUrl = <T extends Resource>(resource: T): string => {
     switch (resource.kind) {
@@ -30,27 +32,19 @@ export enum ItemMode {
 }
 
 export const setProjectItem = (itemId: string, itemMode: ItemMode) =>
-    (dispatch: Dispatch, getState: () => RootState) => {
+    async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
         const { projects, router } = getState();
         const treeItem = findTreeItem(projects.items, itemId);
 
         if (treeItem) {
-            console.log('treeItem', treeItem);
-
-            const treePath = getTreePath(projects.items, treeItem.data.uuid);
 
-            console.log('treePath', treePath);
             const resourceUrl = getResourceUrl(treeItem.data);
 
-            console.log('resourceUrl', resourceUrl);
-            const ancestors = loadProjectAncestors(treeItem.data.uuid);
-            console.log('ancestors', ancestors);
-
             if (itemMode === ItemMode.ACTIVE || itemMode === ItemMode.BOTH) {
                 if (router.location && !router.location.pathname.includes(resourceUrl)) {
                     dispatch(push(resourceUrl));
                 }
-                dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(treePath[treePath.length - 1].id));
+                dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(treeItem.data.uuid));
             }
 
             const promise = treeItem.status === TreeItemStatus.LOADED
@@ -69,14 +63,33 @@ export const setProjectItem = (itemId: string, itemMode: ItemMode) =>
         }
     };
 
-    const USER_UUID_REGEX = /.*tpzed.*/;
+export const restoreBranch = (itemId: string) =>
+    async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+        const ancestors = await loadProjectAncestors(itemId, services.projectService);
+        const uuids = ancestors.map(ancestor => ancestor.uuid);
+        await loadBranch(uuids, dispatch);
+        dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(SidePanelIdentifiers.PROJECTS));
+        uuids.forEach(uuid => {
+            dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(uuid));
+        });
+    };
 
-    export const loadProjectAncestors = async (uuid: string, services?: any): Promise<Array<ProjectResource>> => {
-        if (USER_UUID_REGEX.test(uuid)) {
-            return [];
-        } else {
-            const currentProject = await services.projectService.get(uuid);
-            const ancestors = await loadProjectAncestors(currentProject.ownerUuid);
-            return [...ancestors, currentProject];
-        }
-    };
\ No newline at end of file
+const USER_UUID_REGEX = /.*tpzed.*/;
+
+export const loadProjectAncestors = async (uuid: string, projectService: ProjectService): Promise<Array<ProjectResource>> => {
+    if (USER_UUID_REGEX.test(uuid)) {
+        return [];
+    } else {
+        const currentProject = await projectService.get(uuid);
+        const ancestors = await loadProjectAncestors(currentProject.ownerUuid, projectService);
+        return [...ancestors, currentProject];
+    }
+};
+
+const loadBranch = async (uuids: string[], dispatch: Dispatch): Promise<any> => {
+    const [uuid, ...rest] = uuids;
+    if (uuid) {
+        await dispatch<any>(getProjectList(uuid));
+        return loadBranch(rest, dispatch);
+    }
+};

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index bd8c28e82c8c434a1f259c107d882e4a2af189c1..cd8d1edc95c809ddafd161cab3c93b588200ec51 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -18,7 +18,7 @@ import { TreeItem } from "../../components/tree/tree";
 import { getTreePath } from '../../store/project/project-reducer';
 import { sidePanelActions } from '../../store/side-panel/side-panel-action';
 import { SidePanel, SidePanelItem } from '../../components/side-panel/side-panel';
-import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action";
+import { ItemMode, setProjectItem, restoreBranch } from "../../store/navigation/navigation-action";
 import { projectActions } from "../../store/project/project-action";
 import { collectionCreateActions } from '../../store/collections/creator/collection-creator-action';
 import { ProjectPanel } from "../project-panel/project-panel";
@@ -171,9 +171,16 @@ export const Workbench = withStyles(styles)(
             };
 
             componentDidMount() {
-                if (this.props.router.pathname.includes("/projects")) {
-                    this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(SidePanelIdentifiers.PROJECTS));
-                    this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
+                const PROJECT_URL_REGEX = /\/projects\/(.*)/;
+                const getProjectIdFromUrl = (url: string) => {
+                    const match = PROJECT_URL_REGEX.exec(url);
+                    return match ? match[1] : match;
+                };
+
+                const id = getProjectIdFromUrl(this.props.router.pathname);
+                if (id) {
+                    this.props.dispatch<any>(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
+                    this.props.dispatch<any>(restoreBranch(id));
                 }
             }
 
@@ -184,7 +191,6 @@ export const Workbench = withStyles(styles)(
                     itemId: item.data.uuid,
                     status: item.status
                 }));
-                console.log("breadcrumbs", breadcrumbs);
 
                 const { classes, user } = this.props;
                 return (
@@ -283,7 +289,7 @@ export const Workbench = withStyles(styles)(
                         case ResourceKind.COLLECTION:
                             this.props.dispatch(loadCollection(item.uuid, item.kind as ResourceKind));
                             this.props.dispatch(push(getCollectionUrl(item.uuid)));
-                        default: 
+                        default:
                             this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE));
                             this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind));
                     }