Fix setting active side panel item on page reload

Feature #13986

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 206cb6322b84a1d181d451f76d8886328837a969..84e5c5476f5f8266c3464f82c880b9f052a5af42 100644 (file)
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { ReactElement } from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { List, ListItem, ListItemIcon, Collapse } from "@material-ui/core";
@@ -11,6 +10,7 @@ import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
 import * as classnames from "classnames";
 import { ListItemTextIcon } from '../list-item-text-icon/list-item-text-icon';
 import { Dispatch } from "redux";
+import { RouteComponentProps, withRouter } from "react-router";
 
 type CssRules = 'active' | 'row' | 'root' | 'list' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
 
@@ -54,8 +54,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 export interface SidePanelItem {
     id: string;
     name: string;
+    url: string;
     icon: IconType;
-    active?: boolean;
     open?: boolean;
     margin?: boolean;
     openAble?: boolean;
@@ -69,30 +69,34 @@ interface SidePanelDataProps {
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: SidePanelItem) => void;
 }
 
-type SidePanelProps = SidePanelDataProps & WithStyles<CssRules>;
+type SidePanelProps = RouteComponentProps<{}> & SidePanelDataProps & WithStyles<CssRules>;
 
-export const SidePanel = withStyles(styles)(
+export const SidePanel = withStyles(styles)(withRouter(
     class extends React.Component<SidePanelProps> {
-        render(): ReactElement<any> {
+        render() {
             const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
             const { root, row, list, toggableIconContainer } = classes;
+
+            const path = this.props.location.pathname.split('/');
+            const activeUrl = path.length > 1 ? "/" + path[1] : "/";
             return (
                 <div className={root}>
                     <List>
-                        {sidePanelItems.map(it => (
-                            <span key={it.name}>
+                        {sidePanelItems.map(it => {
+                            const active = it.url === activeUrl;
+                            return <span key={it.name}>
                                 <ListItem button className={list} onClick={() => toggleActive(it.id)}
                                           onContextMenu={this.handleRowContextMenu(it)}>
                                     <span className={row}>
                                         {it.openAble ? (
                                             <i onClick={() => toggleOpen(it.id)} className={toggableIconContainer}>
                                                 <ListItemIcon
-                                                    className={this.getToggableIconClassNames(it.open, it.active)}>
+                                                    className={this.getToggableIconClassNames(it.open, active)}>
                                                     < SidePanelRightArrowIcon/>
                                                 </ListItemIcon>
                                             </i>
                                         ) : null}
-                                        <ListItemTextIcon icon={it.icon} name={it.name} isActive={it.active}
+                                        <ListItemTextIcon icon={it.icon} name={it.name} isActive={active}
                                                           hasMargin={it.margin}/>
                                     </span>
                                 </ListItem>
@@ -101,8 +105,8 @@ export const SidePanel = withStyles(styles)(
                                         {children}
                                     </Collapse>
                                 ) : null}
-                            </span>
-                        ))}
+                            </span>;
+                        })}
                     </List>
                 </div>
             );
@@ -121,4 +125,4 @@ export const SidePanel = withStyles(styles)(
             (event: React.MouseEvent<HTMLElement>) =>
                 item.openAble ? this.props.onContextMenu(event, item) : null
     }
-);
+));

diff --git a/src/store/auth/auth-action.ts b/src/store/auth/auth-action.ts
index 33a5df90450e2cde772c73c8d80c7b06854c4f12..00af5ce5b0bb7614f4fbc97316a61dd712759ba3 100644 (file)
--- a/src/store/auth/auth-action.ts
+++ b/src/store/auth/auth-action.ts
@@ -17,9 +17,9 @@ export const authActions = unionize({
     USER_DETAILS_REQUEST: {},
     USER_DETAILS_SUCCESS: ofType<User>()
 }, {
-        tag: 'type',
-        value: 'payload'
-    });
+    tag: 'type',
+    value: 'payload'
+});
 
 function setAuthorizationHeader(services: ServiceRepository, token: string) {
     services.apiClient.defaults.headers.common = {

diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index 981b852fc606037be5fb2c40e3fb65fca659e361..593ff5d33389e5de877e8c2893621d5c3a1b0351 100644 (file)
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -8,7 +8,7 @@ import { push } from "react-router-redux";
 import { TreeItemStatus } from "~/components/tree/tree";
 import { findTreeItem } from "../project/project-reducer";
 import { RootState } from "../store";
-import { Resource, ResourceKind } from "~/models/resource";
+import { ResourceKind } from "~/models/resource";
 import { projectPanelActions } from "../project-panel/project-panel-action";
 import { getCollectionUrl } from "~/models/collection";
 import { getProjectUrl, ProjectResource } from "~/models/project";
@@ -35,8 +35,6 @@ export enum ItemMode {
 
 export const setProjectItem = (itemId: string, itemMode: ItemMode) =>
     (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        console.log("SetProjectItem!!", itemId);
-        debugger;
         const { projects, router } = getState();
         const treeItem = findTreeItem(projects.items, itemId);
 
@@ -78,7 +76,6 @@ export const restoreBranch = (itemId: string) =>
         const uuids = ancestors.map(ancestor => ancestor.uuid);
         await loadBranch(uuids, dispatch);
         dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(SidePanelIdentifiers.PROJECTS));
-        dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
         uuids.forEach(uuid => {
             dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(uuid));
         });

diff --git a/src/store/side-panel/side-panel-action.ts b/src/store/side-panel/side-panel-action.ts
index 0dd6aad19e3ca0ee2e2311cb333a72a83a889176..4aa5809c28afd80987b7258d1810d7284ba37fa7 100644 (file)
--- a/src/store/side-panel/side-panel-action.ts
+++ b/src/store/side-panel/side-panel-action.ts
@@ -5,9 +5,7 @@
 import { default as unionize, ofType, UnionOf } from "unionize";
 
 export const sidePanelActions = unionize({
-    TOGGLE_SIDE_PANEL_ITEM_OPEN: ofType<string>(),
-    TOGGLE_SIDE_PANEL_ITEM_ACTIVE: ofType<string>(),
-    RESET_SIDE_PANEL_ACTIVITY: ofType<{}>(),
+    TOGGLE_SIDE_PANEL_ITEM_OPEN: ofType<string>()
 }, {
     tag: 'type',
     value: 'payload'

diff --git a/src/store/side-panel/side-panel-reducer.test.ts b/src/store/side-panel/side-panel-reducer.test.ts
index 4872a72cf750486565eeaee5f8a36b94f4dc9233..7210e1810a35d2f208bfebad5520b2c34fc35633 100644 (file)
--- a/src/store/side-panel/side-panel-reducer.test.ts
+++ b/src/store/side-panel/side-panel-reducer.test.ts
@@ -7,39 +7,14 @@ import { sidePanelActions } from "./side-panel-action";
 import { ProjectsIcon } from "~/components/icon/icon";
 
 describe('side-panel-reducer', () => {
-
-    it('should toggle activity on side-panel', () => {
-        const initialState = [
-            {
-                id: "1",
-                name: "Projects",
-                icon: ProjectsIcon,
-                open: false,
-                active: false,
-            }
-        ];
-        const project = [
-            {
-                id: "1",
-                name: "Projects",
-                icon: ProjectsIcon,
-                open: false,
-                active: true,
-            }
-        ];
-
-        const state = sidePanelReducer(initialState, sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(initialState[0].id));
-        expect(state).toEqual(project);
-    });
-
     it('should open side-panel item', () => {
         const initialState = [
             {
                 id: "1",
                 name: "Projects",
+                url: "/projects",
                 icon: ProjectsIcon,
-                open: false,
-                active: false,
+                open: false
             }
         ];
         const project = [
@@ -47,36 +22,11 @@ describe('side-panel-reducer', () => {
                 id: "1",
                 name: "Projects",
                 icon: ProjectsIcon,
-                open: true,
-                active: false,
+                open: true
             }
         ];
 
         const state = sidePanelReducer(initialState, sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(initialState[0].id));
         expect(state).toEqual(project);
     });
-
-    it('should remove activity on side-panel item', () => {
-        const initialState = [
-            {
-                id: "1",
-                name: "Projects",
-                icon: ProjectsIcon,
-                open: false,
-                active: true,
-            }
-        ];
-        const project = [
-            {
-                id: "1",
-                name: "Projects",
-                icon: ProjectsIcon,
-                open: false,
-                active: false,
-            }
-        ];
-
-        const state = sidePanelReducer(initialState, sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(initialState[0].id));
-        expect(state).toEqual(project);
-    });
 });

diff --git a/src/store/side-panel/side-panel-reducer.ts b/src/store/side-panel/side-panel-reducer.ts
index 5a45d29590f761c48c6f4515105b66d180777b5b..66c228967284c60a1a50abc41a0a09b2cee1e3f4 100644 (file)
--- a/src/store/side-panel/side-panel-reducer.ts
+++ b/src/store/side-panel/side-panel-reducer.ts
@@ -20,10 +20,6 @@ export const sidePanelReducer = (state: SidePanelState = sidePanelData, action:
     return sidePanelActions.match(action, {
         TOGGLE_SIDE_PANEL_ITEM_OPEN: itemId =>
             state.map(it => ({...it, open: itemId === it.id && it.open === false})),
-        TOGGLE_SIDE_PANEL_ITEM_ACTIVE: itemId =>
-            state.map(it => ({...it, active: it.id === itemId})),
-        RESET_SIDE_PANEL_ACTIVITY: () =>
-            state.map(it => ({...it, active: false })),
         default: () => state
     });
 };
@@ -41,14 +37,15 @@ export const sidePanelData = [
     {
         id: SidePanelIdentifiers.PROJECTS,
         name: "Projects",
+        url: "/projects",
         icon: ProjectsIcon,
         open: false,
         active: false,
         margin: true,
         openAble: true,
         activeAction: (dispatch: Dispatch, uuid: string) => {
-            dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(uuid));
             dispatch(push(getProjectUrl(uuid)));
+            dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(uuid));
             dispatch(projectPanelActions.SET_COLUMNS({ columns: projectPanelColumns }));
             dispatch(projectPanelActions.RESET_PAGINATION());
             dispatch(projectPanelActions.REQUEST_ITEMS());
@@ -57,24 +54,37 @@ export const sidePanelData = [
     {
         id: SidePanelIdentifiers.SHARED_WITH_ME,
         name: "Shared with me",
+        url: "/shared",
         icon: ShareMeIcon,
         active: false,
+        activeAction: (dispatch: Dispatch) => {
+            dispatch(push("/shared"));
+        }
     },
     {
         id: SidePanelIdentifiers.WORKFLOWS,
         name: "Workflows",
+        url: "/workflows",
         icon: WorkflowIcon,
         active: false,
+        activeAction: (dispatch: Dispatch) => {
+            dispatch(push("/workflows"));
+        }
     },
     {
         id: SidePanelIdentifiers.RECENT_OPEN,
         name: "Recent open",
+        url: "/recent",
         icon: RecentIcon,
         active: false,
+        activeAction: (dispatch: Dispatch) => {
+            dispatch(push("/recent"));
+        }
     },
     {
         id: SidePanelIdentifiers.FAVORITES,
         name: "Favorites",
+        url: "/favorites",
         icon: FavoriteIcon,
         active: false,
         activeAction: (dispatch: Dispatch) => {
@@ -87,7 +97,11 @@ export const sidePanelData = [
     {
         id: SidePanelIdentifiers.TRASH,
         name: "Trash",
+        url: "/trash",
         icon: TrashIcon,
         active: false,
+        activeAction: (dispatch: Dispatch) => {
+            dispatch(push("/trash"));
+        }
     }
 ];

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index a38afb7ac30e32b8f06f265a1635693aead54ca9..4e00349f2497510ae5669ac4e19da1c04aa783cf 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -222,7 +222,6 @@ export const Workbench = withStyles(styles)(
                                         toggleActive={itemId => {
                                             this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE));
                                             this.props.dispatch(loadDetails(itemId, ResourceKind.PROJECT));
-                                            this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
                                         }} />
                                 </SidePanel>
                             </Drawer>}
@@ -330,7 +329,6 @@ export const Workbench = withStyles(styles)(
                         default:
                             this.props.dispatch(loadDetails(item.uuid, ResourceKind.PROJECT));
                             this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE));
-                            this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
                     }
 
                 }}
@@ -363,7 +361,6 @@ export const Workbench = withStyles(styles)(
             }
 
             toggleSidePanelActive = (itemId: string) => {
-                this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
                 this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
 
                 const panelItem = this.props.sidePanelItems.find(it => it.id === itemId);