From 459c67708a8f880ec98ebb9eecc10299acb91d68 Mon Sep 17 00:00:00 2001 From: Pawel Kowalczyk Date: Wed, 5 Sep 2018 14:52:43 +0200 Subject: [PATCH] top-left-title-does-not-function-as-a-link Feature #14123 Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk --- src/routes/route-change-handlers.ts | 6 +- src/store/navigation/navigation-action.ts | 12 ++- .../main-app-bar/main-app-bar.test.tsx | 33 ++++--- .../main-app-bar/main-app-bar.tsx | 91 +++++++++++-------- 4 files changed, 90 insertions(+), 52 deletions(-) diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts index b29e5d1e..00fb4bc0 100644 --- a/src/routes/route-change-handlers.ts +++ b/src/routes/route-change-handlers.ts @@ -4,8 +4,9 @@ import { History, Location } from 'history'; import { RootStore } from '~/store/store'; -import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute } from './routes'; +import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute, matchRootRoute } from './routes'; import { loadProject, loadCollection, loadFavorites, loadTrash, loadProcess, loadProcessLog } from '~/store/workbench/workbench-actions'; +import { navigateToRootProject } from '~/store/navigation/navigation-action'; export const addRouteChangeHandlers = (history: History, store: RootStore) => { const handler = handleLocationChange(store); @@ -14,6 +15,7 @@ export const addRouteChangeHandlers = (history: History, store: RootStore) => { }; const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { + const rootMatch = matchRootRoute(pathname); const projectMatch = matchProjectRoute(pathname); const collectionMatch = matchCollectionRoute(pathname); const favoriteMatch = matchFavoritesRoute(pathname); @@ -33,5 +35,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { store.dispatch(loadProcess(processMatch.params.id)); } else if (processLogMatch) { store.dispatch(loadProcessLog(processLogMatch.params.id)); + } else if (rootMatch) { + store.dispatch(navigateToRootProject); } }; diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts index ddb9d29f..33181b37 100644 --- a/src/store/navigation/navigation-action.ts +++ b/src/store/navigation/navigation-action.ts @@ -7,9 +7,10 @@ import { push } from "react-router-redux"; import { ResourceKind, extractUuidKind } from '~/models/resource'; import { getCollectionUrl } from "~/models/collection"; import { getProjectUrl } from "~/models/project"; - import { SidePanelTreeCategory } from '../side-panel-tree/side-panel-tree-actions'; import { Routes, getProcessUrl, getProcessLogUrl } from '~/routes/routes'; +import { RootState } from '~/store/store'; +import { ServiceRepository } from '~/services/services'; export const navigateTo = (uuid: string) => async (dispatch: Dispatch) => { @@ -36,4 +37,11 @@ export const navigateToCollection = compose(push, getCollectionUrl); export const navigateToProcess = compose(push, getProcessUrl); -export const navigateToProcessLogs = compose(push, getProcessLogUrl); \ No newline at end of file +export const navigateToProcessLogs = compose(push, getProcessLogUrl); + +export const navigateToRootProject = (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + const rootProjectUuid = services.authService.getUuid(); + if(rootProjectUuid){ + dispatch(navigateToProject(rootProjectUuid)); + } +}; \ No newline at end of file diff --git a/src/views-components/main-app-bar/main-app-bar.test.tsx b/src/views-components/main-app-bar/main-app-bar.test.tsx index 030fb353..69b4dd64 100644 --- a/src/views-components/main-app-bar/main-app-bar.test.tsx +++ b/src/views-components/main-app-bar/main-app-bar.test.tsx @@ -11,6 +11,7 @@ import { Breadcrumbs } from "~/components/breadcrumbs/breadcrumbs"; import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu"; import { Button, MenuItem, IconButton } from "@material-ui/core"; import { User } from "~/models/user"; +import { MemoryRouter } from 'react-router-dom'; configure({ adapter: new Adapter() }); @@ -26,9 +27,11 @@ describe("", () => { it("renders all components and the menu for authenticated user if user prop has value", () => { const mainAppBar = mount( - + + + ); expect(mainAppBar.find(SearchBar)).toHaveLength(1); expect(mainAppBar.find(Breadcrumbs)).toHaveLength(1); @@ -38,9 +41,11 @@ describe("", () => { it("renders only the menu for anonymous user if user prop is undefined", () => { const menuItems = { accountMenu: [], helpMenu: [], anonymousMenu: [{ label: 'Sign in' }] }; const mainAppBar = mount( - + + + ); expect(mainAppBar.find(SearchBar)).toHaveLength(0); expect(mainAppBar.find(Breadcrumbs)).toHaveLength(0); @@ -51,9 +56,11 @@ describe("", () => { it("communicates with ", () => { const onSearch = jest.fn(); const mainAppBar = mount( - + + + ); const searchBar = mainAppBar.find(SearchBar); expect(searchBar.prop("value")).toBe("search text"); @@ -66,9 +73,11 @@ describe("", () => { const onMenuItemClick = jest.fn(); const menuItems = { accountMenu: [{ label: "log out" }], helpMenu: [], anonymousMenu: [] }; const mainAppBar = mount( - + + + ); mainAppBar.find(DropdownMenu).at(0).find(IconButton).simulate("click"); diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx index de6be7e7..44be9f7a 100644 --- a/src/views-components/main-app-bar/main-app-bar.tsx +++ b/src/views-components/main-app-bar/main-app-bar.tsx @@ -4,10 +4,23 @@ import * as React from "react"; import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Button, MenuItem } from "@material-ui/core"; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { Link } from "react-router-dom"; import { User, getUserFullname } from "~/models/user"; import { SearchBar } from "~/components/search-bar/search-bar"; import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu"; import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "~/components/icon/icon"; +import { Routes } from '~/routes/routes'; + +type CssRules = 'link'; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + link: { + textDecoration: 'none', + color: 'inherit' + } +}); export interface MainAppBarMenuItem { label: string; @@ -34,45 +47,49 @@ export interface MainAppBarActionProps { onDetailsPanelToggle: () => void; } -export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps; +export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles; -export const MainAppBar: React.SFC = (props) => { - return - - - - - Arvados 2 - - - {props.buildInfo} - - - - { - props.user && - } +export const MainAppBar = withStyles(styles)( + (props: MainAppBarProps) => { + return + + + + + + Arvados 2 + + + + {props.buildInfo} + + + + { + props.user && + } + + + { + props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props) + } + - - { - props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props) - } - - - - - {props.user && } - {props.user && - - - } - - ; -}; + + + {props.user && } + {props.user && + + + } + + ; + } +); const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => { return ( -- 2.30.2