From: Michal Klobukowski Date: Mon, 18 Jun 2018 11:03:22 +0000 (+0200) Subject: Merge branch 'master' X-Git-Tag: 1.2.0~74^2~1 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/4bbaf2a0cede89ea50d63d210c6631adc1970620?hp=0dbd184178c1016a19828fa80df9f91dec907993 Merge branch 'master' Feature #13628 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- diff --git a/__mocks__/popper.js.js b/__mocks__/popper.js.js new file mode 100644 index 00000000..07c78568 --- /dev/null +++ b/__mocks__/popper.js.js @@ -0,0 +1,30 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +export default class Popper { + static placements = [ + 'auto', + 'auto-end', + 'auto-start', + 'bottom', + 'bottom-end', + 'bottom-start', + 'left', + 'left-end', + 'left-start', + 'right', + 'right-end', + 'right-start', + 'top', + 'top-end', + 'top-start' + ]; + + constructor() { + return { + destroy: jest.fn(), + scheduleUpdate: jest.fn() + }; + } +} \ No newline at end of file diff --git a/src/components/breadcrumbs/breadcrumbs.test.tsx b/src/components/breadcrumbs/breadcrumbs.test.tsx index 77beb494..b525554a 100644 --- a/src/components/breadcrumbs/breadcrumbs.test.tsx +++ b/src/components/breadcrumbs/breadcrumbs.test.tsx @@ -22,29 +22,29 @@ describe("", () => { it("renders one item", () => { const items = [ - {label: 'breadcrumb 1'} + { label: 'breadcrumb 1' } ]; - const breadcrumbs = mount(); + const breadcrumbs = mount(); expect(breadcrumbs.find(Button)).toHaveLength(1); expect(breadcrumbs.find(ChevronRightIcon)).toHaveLength(0); }); - + it("renders multiple items", () => { const items = [ - {label: 'breadcrumb 1'}, - {label: 'breadcrumb 2'} + { label: 'breadcrumb 1' }, + { label: 'breadcrumb 2' } ]; - const breadcrumbs = mount(); + const breadcrumbs = mount(); expect(breadcrumbs.find(Button)).toHaveLength(2); expect(breadcrumbs.find(ChevronRightIcon)).toHaveLength(1); }); - + it("calls onClick with clicked item", () => { const items = [ - {label: 'breadcrumb 1'}, - {label: 'breadcrumb 2'} + { label: 'breadcrumb 1' }, + { label: 'breadcrumb 2' } ]; - const breadcrumbs = mount(); + const breadcrumbs = mount(); breadcrumbs.find(Button).at(1).simulate('click'); expect(onClick).toBeCalledWith(items[1]); }); diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 25f30a1b..41f71981 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core'; +import { Button, Grid, StyleRulesCallback, WithStyles, Typography, Tooltip } from '@material-ui/core'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import { withStyles } from '@material-ui/core'; @@ -17,19 +17,27 @@ interface BreadcrumbsProps { } const Breadcrumbs: React.SFC> = ({ classes, onClick, items }) => { - return + return { items.map((item, index) => { const isLastItem = index === items.length - 1; return ( - + + + { !isLastItem && } @@ -40,7 +48,7 @@ const Breadcrumbs: React.SFC> = ({ class ; }; -type CssRules = "item" | "currentItem"; +type CssRules = "item" | "currentItem" | "label"; const styles: StyleRulesCallback = theme => { const { unit } = theme.spacing; @@ -50,6 +58,9 @@ const styles: StyleRulesCallback = theme => { }, currentItem: { opacity: 1 + }, + label: { + textTransform: "none" } }; }; diff --git a/src/store/project/project-reducer.test.ts b/src/store/project/project-reducer.test.ts index cfb73fa8..311ec9d1 100644 --- a/src/store/project/project-reducer.test.ts +++ b/src/store/project/project-reducer.test.ts @@ -2,8 +2,9 @@ // // SPDX-License-Identifier: AGPL-3.0 -import projectsReducer from "./project-reducer"; +import projectsReducer, { findTreeBranch } from "./project-reducer"; import actions from "./project-action"; +import { TreeItem, TreeItemStatus } from "../../components/tree/tree"; describe('project-reducer', () => { it('should add new project to the list', () => { @@ -35,7 +36,7 @@ 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, @@ -54,3 +55,53 @@ describe('project-reducer', () => { ]); }); }); + +describe("findTreeBranch", () => { + + const createTreeItem = (id: string, items?: Array>): TreeItem => ({ + id, + items, + active: false, + data: "", + open: false, + status: TreeItemStatus.Initial + }); + + it("should return an array that matches path to the given item", () => { + const tree: Array> = [ + createTreeItem("1", [ + createTreeItem("1.1", [ + createTreeItem("1.1.1"), + createTreeItem("1.1.2") + ]) + ]), + createTreeItem("2", [ + createTreeItem("2.1", [ + createTreeItem("2.1.1"), + createTreeItem("2.1.2") + ]) + ]) + ]; + const branch = findTreeBranch(tree, "2.1.1"); + expect(branch.map(item => item.id)).toEqual(["2", "2.1", "2.1.1"]); + }); + + it("should return empty array if item is not found", () => { + const tree: Array> = [ + createTreeItem("1", [ + createTreeItem("1.1", [ + createTreeItem("1.1.1"), + createTreeItem("1.1.2") + ]) + ]), + createTreeItem("2", [ + createTreeItem("2.1", [ + createTreeItem("2.1.1"), + createTreeItem("2.1.2") + ]) + ]) + ]; + expect(findTreeBranch(tree, "3")).toHaveLength(0); + }); + +}); diff --git a/src/store/project/project-reducer.ts b/src/store/project/project-reducer.ts index 7563ea90..8770391a 100644 --- a/src/store/project/project-reducer.ts +++ b/src/store/project/project-reducer.ts @@ -22,6 +22,20 @@ export function findTreeItem(tree: Array>, itemId: string): TreeI return item; } +export function findTreeBranch(tree: Array>, itemId: string): Array> { + for(const item of tree){ + if(item.id === itemId){ + return [item]; + } else { + const branch = findTreeBranch(item.items || [], itemId); + if(branch.length > 0){ + return [item, ...branch]; + } + } + } + return []; +} + function resetTreeActivity(tree: Array>) { for (const t of tree) { t.active = false; diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 90df260b..0aecc0d2 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -19,6 +19,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 { findTreeBranch } from '../../store/project/project-reducer'; import DataExplorer from '../data-explorer/data-explorer'; const drawerWidth = 240; @@ -66,7 +67,8 @@ interface WorkbenchActionProps { type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; interface NavBreadcrumb extends Breadcrumb { - path: string; + itemId: string; + status: TreeItemStatus; } interface NavMenuItem extends MainAppBarMenuItem { @@ -88,15 +90,7 @@ class Workbench extends React.Component { state = { anchorEl: null, searchText: "", - breadcrumbs: [ - { - label: "Projects", - path: "/projects" - }, { - label: "Project 1", - path: "/projects/project-1" - } - ], + breadcrumbs: [], menuItems: { accountMenu: [ { @@ -125,7 +119,9 @@ class Workbench extends React.Component { mainAppBarActions: MainAppBarActionProps = { - onBreadcrumbClick: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)), + onBreadcrumbClick: ({ itemId, status }: NavBreadcrumb) => { + this.toggleProjectTreeItem(itemId, status); + }, onSearch: searchText => { this.setState({ searchText }); this.props.dispatch(push(`/search?q=${searchText}`)); @@ -142,6 +138,14 @@ class Workbench extends React.Component { } openProjectItem = (itemId: string) => { + const branch = findTreeBranch(this.props.projects, itemId); + this.setState({ + breadcrumbs: branch.map(item => ({ + label: item.data.name, + itemId: item.data.uuid, + status: item.status + })) + }); this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId)); this.props.dispatch(push(`/project/${itemId}`)); }