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',
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'
};
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);
});
});
}
return tree;
},
+ RESET_PROJECT_TREE_ACTIVITY: () => {
+ const tree = _.cloneDeep(state);
+ resetTreeActivity(tree);
+ return tree;
+ },
default: () => state
});
};
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'
--- /dev/null
+// 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
it.active = true;
}
});
- resetProjectsCollapse(sidePanel);
+ return sidePanel;
+ },
+ RESET_SIDE_PANEL_ACTIVITY: () => {
+ const sidePanel = _.cloneDeep(state);
+ resetSidePanelActivity(sidePanel);
return sidePanel;
},
default: () => state
}
}
-function resetProjectsCollapse(sidePanel: SidePanelItem[]) {
- if (!sidePanel[0].active) {
- sidePanel[0].open = false;
- }
-}
-
export default sidePanelReducer;
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;
drawerPaper: {
position: 'relative',
width: drawerWidth,
+ display: 'flex',
+ flexDirection: 'column',
},
content: {
flexGrow: 1,
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) => {
toggleSidePanelActive = (itemId: string) => {
this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
+ this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
}
render() {
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} />