From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Thu, 21 Jun 2018 12:22:46 +0000 (+0200)
Subject: left-side-panel-with-tests
X-Git-Tag: 1.2.0~68^2~4
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/152a17b28656fe498d3b3bbf21d5994e9ccd34ab

left-side-panel-with-tests

Feature ##13598

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

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 81ebd86b..ecfb5f09 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -87,16 +87,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         transform: 'rotate(-90deg)',
     },
     leftSidePanelContainer: {
-        position: 'absolute',
-        top: '100px',
         overflowY: 'auto',
         minWidth: '240px',
         whiteSpace: 'nowrap',
+        marginTop: '38px',
+        display: 'flex',
+        flexGrow: 1,
     },
     list: {
         paddingBottom: '5px',
         paddingTop: '5px',
-        paddingLeft: '14px'
+        paddingLeft: '14px',
+        minWidth: '240px',
     },
     icon: {
         minWidth: '20px',
diff --git a/src/store/project/project-action.ts b/src/store/project/project-action.ts
index b2c6b037..a58edd3c 100644
--- a/src/store/project/project-action.ts
+++ b/src/store/project/project-action.ts
@@ -12,6 +12,7 @@ const actions = unionize({
     PROJECTS_SUCCESS: ofType<{ projects: Project[], parentItemId?: string }>(),
     TOGGLE_PROJECT_TREE_ITEM_OPEN: ofType<string>(),
     TOGGLE_PROJECT_TREE_ITEM_ACTIVE: ofType<string>(),
+    RESET_PROJECT_TREE_ACTIVITY: ofType<string>(),
 }, {
     tag: 'type',
     value: 'payload'
diff --git a/src/store/project/project-reducer.test.ts b/src/store/project/project-reducer.test.ts
index adfce969..e5cd57e2 100644
--- a/src/store/project/project-reducer.test.ts
+++ b/src/store/project/project-reducer.test.ts
@@ -33,22 +33,139 @@ describe('project-reducer', () => {
         };
 
         const projects = [project, project];
-        const state = projectsReducer(initialState, actions.PROJECTS_SUCCESS({projects, parentItemId: undefined}));
+        const state = projectsReducer(initialState, actions.PROJECTS_SUCCESS({ projects, parentItemId: undefined }));
         expect(state).toEqual([{
+            active: false,
+            open: false,
+            id: "test123",
+            items: [],
+            data: project,
+            status: 0
+        }, {
+            active: false,
+            open: false,
+            id: "test123",
+            items: [],
+            data: project,
+            status: 0
+        }
+        ]);
+    });
+
+    it('should remove activity on projects list', () => {
+        const initialState = [
+            {
+                data: {
+                    name: 'test',
+                    href: 'href',
+                    createdAt: '2018-01-01',
+                    modifiedAt: '2018-01-01',
+                    ownerUuid: 'owner-test123',
+                    uuid: 'test123',
+                },
+                id: "1",
+                open: true,
+                active: true,
+                status: 1
+            }
+        ];
+        const project = [
+            {
+                data: {
+                    name: 'test',
+                    href: 'href',
+                    createdAt: '2018-01-01',
+                    modifiedAt: '2018-01-01',
+                    ownerUuid: 'owner-test123',
+                    uuid: 'test123',
+                },
+                id: "1",
+                open: true,
                 active: false,
-                open: false,
-                id: "test123",
-                items: [],
-                data: project,
-                status: 0
-            }, {
+                status: 1
+            }
+        ];
+
+        const state = projectsReducer(initialState, actions.RESET_PROJECT_TREE_ACTIVITY(initialState[0].id));
+        expect(state).toEqual(project);
+    });
+
+    it('should toggle project tree item activity', () => {
+        const initialState = [
+            {
+                data: {
+                    name: 'test',
+                    href: 'href',
+                    createdAt: '2018-01-01',
+                    modifiedAt: '2018-01-01',
+                    ownerUuid: 'owner-test123',
+                    uuid: 'test123',
+                },
+                id: "1",
+                open: true,
+                active: false,
+                status: 1
+            }
+        ];
+        const project = [
+            {
+                data: {
+                    name: 'test',
+                    href: 'href',
+                    createdAt: '2018-01-01',
+                    modifiedAt: '2018-01-01',
+                    ownerUuid: 'owner-test123',
+                    uuid: 'test123',
+                },
+                id: "1",
+                open: true,
+                active: true,
+                status: 1
+            }
+        ];
+
+        const state = projectsReducer(initialState, actions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(initialState[0].id));
+        expect(state).toEqual(project);
+    });
+
+
+    it('should close project tree item ', () => {
+        const initialState = [
+            {
+                data: {
+                    name: 'test',
+                    href: 'href',
+                    createdAt: '2018-01-01',
+                    modifiedAt: '2018-01-01',
+                    ownerUuid: 'owner-test123',
+                    uuid: 'test123',
+                },
+                id: "1",
+                open: true,
                 active: false,
+                status: 1,
+                toggled: false,
+            }
+        ];
+        const project = [
+            {
+                data: {
+                    name: 'test',
+                    href: 'href',
+                    createdAt: '2018-01-01',
+                    modifiedAt: '2018-01-01',
+                    ownerUuid: 'owner-test123',
+                    uuid: 'test123',
+                },
+                id: "1",
                 open: false,
-                id: "test123",
-                items: [],
-                data: project,
-                status: 0
+                active: false,
+                status: 1,
+                toggled: true
             }
-        ]);
+        ];
+
+        const state = projectsReducer(initialState, actions.TOGGLE_PROJECT_TREE_ITEM_OPEN(initialState[0].id));
+        expect(state).toEqual(project);
     });
 });
diff --git a/src/store/project/project-reducer.ts b/src/store/project/project-reducer.ts
index fb1adbfa..43117ef0 100644
--- a/src/store/project/project-reducer.ts
+++ b/src/store/project/project-reducer.ts
@@ -88,6 +88,11 @@ const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
             }
             return tree;
         },
+        RESET_PROJECT_TREE_ACTIVITY: () => {
+            const tree = _.cloneDeep(state);
+            resetTreeActivity(tree);
+            return tree;
+        },
         default: () => state
     });
 };
diff --git a/src/store/side-panel/side-panel-action.ts b/src/store/side-panel/side-panel-action.ts
index 08653460..32fa653b 100644
--- a/src/store/side-panel/side-panel-action.ts
+++ b/src/store/side-panel/side-panel-action.ts
@@ -7,6 +7,7 @@ import { default as unionize, ofType, UnionOf } from "unionize";
 const actions = unionize({
     TOGGLE_SIDE_PANEL_ITEM_OPEN: ofType<string>(),
     TOGGLE_SIDE_PANEL_ITEM_ACTIVE: ofType<string>(),
+    RESET_SIDE_PANEL_ACTIVITY: 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
new file mode 100644
index 00000000..942c16eb
--- /dev/null
+++ b/src/store/side-panel/side-panel-reducer.test.ts
@@ -0,0 +1,81 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import sidePanelReducer from "./side-panel-reducer";
+import actions from "./side-panel-action";
+
+describe('side-panel-reducer', () => {
+
+    it('should toggle activity on side-panel', () => {
+        const initialState = [
+            {
+                id: "1",
+                name: "Projects",
+                icon: "fas fa-th fa-fw",
+                open: false,
+                active: false,
+            }
+        ];
+        const project = [
+            {
+                id: "1",
+                name: "Projects",
+                icon: "fas fa-th fa-fw",
+                open: false,
+                active: true,
+            }
+        ];
+
+        const state = sidePanelReducer(initialState, actions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(initialState[0].id));
+        expect(state).toEqual(project);
+    });
+
+    it('should open side-panel item', () => {
+        const initialState = [
+            {
+                id: "1",
+                name: "Projects",
+                icon: "fas fa-th fa-fw",
+                open: false,
+                active: false,
+            }
+        ];
+        const project = [
+            {
+                id: "1",
+                name: "Projects",
+                icon: "fas fa-th fa-fw",
+                open: true,
+                active: false,
+            }
+        ];
+
+        const state = sidePanelReducer(initialState, actions.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: "fas fa-th fa-fw",
+                open: false,
+                active: true,
+            }
+        ];
+        const project = [
+            {
+                id: "1",
+                name: "Projects",
+                icon: "fas fa-th fa-fw",
+                open: false,
+                active: false,
+            }
+        ];
+
+        const state = sidePanelReducer(initialState, actions.RESET_SIDE_PANEL_ACTIVITY(initialState[0].id));
+        expect(state).toEqual(project);
+    });
+});
\ No newline at end of file
diff --git a/src/store/side-panel/side-panel-reducer.ts b/src/store/side-panel/side-panel-reducer.ts
index 96c97530..9f01fa2a 100644
--- a/src/store/side-panel/side-panel-reducer.ts
+++ b/src/store/side-panel/side-panel-reducer.ts
@@ -24,7 +24,11 @@ const sidePanelReducer = (state: SidePanelState = sidePanelData, action: SidePan
                     it.active = true;
                 }
             });
-            resetProjectsCollapse(sidePanel); 
+            return sidePanel;
+        },
+        RESET_SIDE_PANEL_ACTIVITY: () => {
+            const sidePanel = _.cloneDeep(state);
+            resetSidePanelActivity(sidePanel);
             return sidePanel;
         },
         default: () => state
@@ -77,10 +81,4 @@ function resetSidePanelActivity(sidePanel: SidePanelItem[]) {
     }
 }
 
-function resetProjectsCollapse(sidePanel: SidePanelItem[]) {
-    if (!sidePanel[0].active) {
-        sidePanel[0].open = false;
-    }
-}
-
 export default sidePanelReducer;
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index dcc26ed9..ff9a863e 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -21,7 +21,7 @@ import ProjectTree from '../../components/project-tree/project-tree';
 import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
 import { Project } from "../../models/project";
 import { projectService } from '../../services/services';
-import SidePanel, {SidePanelItem} from '../../components/side-panel/side-panel';
+import SidePanel, { SidePanelItem } from '../../components/side-panel/side-panel';
 
 const drawerWidth = 240;
 
@@ -46,6 +46,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     drawerPaper: {
         position: 'relative',
         width: drawerWidth,
+        display: 'flex',
+        flexDirection: 'column',
     },
     content: {
         flexGrow: 1,
@@ -150,6 +152,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
 
     toggleProjectTreeItemActive = (itemId: string) => {
         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
+        this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId));
     }
 
     toggleSidePanelOpen = (itemId: string) => {
@@ -158,6 +161,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
 
     toggleSidePanelActive = (itemId: string) => {
         this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
+        this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
     }
 
     render() {
@@ -180,15 +184,15 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                             paper: classes.drawerPaper,
                         }}>
                         <div className={classes.toolbar} />
-                        <SidePanel
-                            toggleSidePanelOpen={this.toggleSidePanelOpen}
-                            toggleSidePanelActive={this.toggleSidePanelActive}
-                            sidePanelItems={sidePanelItems}>
-                            <ProjectTree
-                                projects={projects}
-                                toggleProjectTreeItemOpen={this.toggleProjectTreeItemOpen}
-                                toggleProjectTreeItemActive={this.toggleProjectTreeItemActive} />
-                        </SidePanel>
+                            <SidePanel
+                                toggleSidePanelOpen={this.toggleSidePanelOpen}
+                                toggleSidePanelActive={this.toggleSidePanelActive}
+                                sidePanelItems={sidePanelItems}>
+                                <ProjectTree
+                                    projects={projects}
+                                    toggleProjectTreeItemOpen={this.toggleProjectTreeItemOpen}
+                                    toggleProjectTreeItemActive={this.toggleProjectTreeItemActive} />
+                            </SidePanel>
                     </Drawer>}
                 <main className={classes.content}>
                     <div className={classes.toolbar} />