Merge remote-tracking branch 'origin/feature/breadcrumb/fix_localize'

client/src/components/Dashboard/Dashboard.js

@@ -11,13 +11,13 @@ export default function Dashboard() {
   return (
     <div className='dashboard'>
       <Switch>
-        <Route path='/dashboard/preferences'>
+        <Route path='/preferences'>
           <Sidebar />
           <PreferencesSidebar />
           <PreferencesContent />
         </Route>
 
-        <Route path='/dashboard'>
+        <Route path='/'>
           <Sidebar />
           <DashboardContent />
         </Route>

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -3,38 +3,33 @@ import {
   CollapsibleList,
   MenuItem,
   Classes,
-  Boundary
+  Boundary,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+import routes from 'routes/dashboard';
+import { useHistory } from 'react-router-dom';
 
-export default function DashboardBreadcrumbs() {
-  function renderBreadcrumb(props) {
-    if (props.href != null) {
-      return <a className={Classes.BREADCRUMB}>{props.text}</a>;
-    } else {
-      return (
-        <span
-          className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}
-        >
-          {props.text}
-        </span>
-      );
-    }
-  }
-  return (
+function DashboardBreadcrumbs( {breadcrumbs }){
+  const history = useHistory();
+
+  return(
     <CollapsibleList
-      className={Classes.BREADCRUMBS}
-      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
-      visibleItemRenderer={renderBreadcrumb}
-      collapseFrom={Boundary.START}
-      visibleItemCount={0}
-    >
-      <MenuItem icon='folder-close' text='All files' href='#' />
-      <MenuItem icon='folder-close' text='Users' href='#' />
-      <MenuItem icon='folder-close' text='Jane Person' href='#' />
-      <MenuItem icon='folder-close' text='My documents' href='#' />
-      <MenuItem icon='folder-close' text='Classy dayjob' href='#' />
-      <MenuItem icon='document' text='How to crush it' />
+     className={Classes.BREADCRUMBS}
+     dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
+     collapseFrom={Boundary.START}
+     visibleItemCount={0}>
+     {
+      breadcrumbs.map(({ breadcrumb,match })=>{
+        return (<MenuItem
+          key={match.url}
+          icon={'folder-close'}
+          text={breadcrumb}
+          onClick={() => history.push(match.url) } />)
+        })
+     }
     </CollapsibleList>
-  );
+  )
 }
+
+export default withBreadcrumbs(routes)(DashboardBreadcrumbs)

client/src/components/Dashboard/DashboardContentRoute.js

@@ -5,7 +5,7 @@ import routes from 'routes/dashboard'
 export default function DashboardContentRoute() {
 
   return (
-    <Route pathname="/dashboard">
+    <Route pathname="/">
       <Switch>
         { routes.map((route, index) => (
           <Route

client/src/components/Dashboard/DashboardTopbar.js

@@ -24,7 +24,7 @@ function DashboardTopbar({
   const history = useHistory();
 
   const handlerClickEditView = () => {
-    history.push(`/dashboard/custom_views/${editViewId}/edit`);
+    history.push(`/custom_views/${editViewId}/edit`);
   };
 
   const maybleRenderPageSubtitle = pageSubtitle && <h3>{pageSubtitle}</h3>;
@@ -48,7 +48,7 @@ function DashboardTopbar({
               role='img'
               focusable='false'
             >
-              <title>Menu</title>
+              <title><T id={'menu'}/></title>
               <path
                 stroke='currentColor'
                 stroke-linecap='round'

client/src/components/Dashboard/TopbarUser.js

@@ -9,6 +9,7 @@ import {
   Popover
 } from '@blueprintjs/core';
 import t from 'store/types';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function DashboardTopbarUser({ logout }) {
   const history = useHistory();
@@ -20,12 +21,12 @@ function DashboardTopbarUser({ logout }) {
 
   const userAvatarDropMenu = useMemo(() => (
     <Menu>
-      <MenuItem icon="graph" text="Graph" />
-      <MenuItem icon="map" text="Map" />
-      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
-      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuItem icon="graph" text={<T id={'menu'}/>} />
+      <MenuItem icon="map" text={<T id={'graph'}/>} />
+      <MenuItem icon="th" text={<T id={'table'}/>} shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text={<T id={'nucleus'}/>} disabled={true} />
       <MenuDivider />
-      <MenuItem icon="cog" text="Logout" onClick={onClickLogout} />
+      <MenuItem icon="cog" text={<T id={'logout'}/>} onClick={onClickLogout} />
     </Menu>
   ), [onClickLogout]);