Extract main-content-bar component

Feature #14149

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
new file mode 100644 (file)
index 0000000..7506974
--- /dev/null
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -0,0 +1,28 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Toolbar, IconButton, Tooltip, Grid } from "@material-ui/core";
+import { DetailsIcon } from "~/components/icon/icon";
+import { Breadcrumbs } from "~/views-components/breadcrumbs/breadcrumbs";
+import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
+import { connect } from 'react-redux';
+
+interface MainContentBarProps {
+    onDetailsPanelToggle: () => void;
+}
+
+export const MainContentBar = connect(undefined, {
+    onDetailsPanelToggle: detailsPanelActions.TOGGLE_DETAILS_PANEL
+})((props: MainContentBarProps) =>
+    <Toolbar>
+        <Grid justify="space-between">
+            <Breadcrumbs />
+            <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
+                <Tooltip title="Additional Info">
+                    <DetailsIcon />
+                </Tooltip>
+            </IconButton>
+        </Grid>
+    </Toolbar>);

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 3c281087c2addf20ad8f3f6e7e31500673a28782..7c76a0b15d2bf487014930a7815f25a73ef52da5 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -40,6 +40,7 @@ import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/fil
 import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
 
 import { TrashPanel } from "~/views/trash-panel/trash-panel";
+import { MainContentBar } from '../../views-components/main-content-bar/main-content-bar';
 
 const APP_BAR_HEIGHT = 100;
 
@@ -163,6 +164,7 @@ export const Workbench = withStyles(styles)(
                         </div>
                         {user && <SidePanel />}
                         <main className={classes.contentWrapper}>
+                            {this.props.user && <MainContentBar />}
                             <div className={classes.content}>
                                 <Switch>
                                     <Route path={Routes.PROJECTS} component={ProjectPanel} />
@@ -209,6 +211,10 @@ export const Workbench = withStyles(styles)(
                 },
             };
 
+            toggleDetailsPanel = () => {
+                this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            }
+
             toggleCurrentTokenModal = () => {
                 this.setState({ isCurrentTokenDialogOpen: !this.state.isCurrentTokenDialogOpen });
             }