refs #master Merge branch 'origin/master' into 14186-progress-indicator-store

[arvados-workbench2.git] / src / views / workbench / workbench.tsx

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 1d7d47d09ee89f8085312cf2b0a1b804f823e07c..ad1a266881993b8f5e38eb568ac0f8f2c175ef3d 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -41,10 +41,11 @@ 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';
-import { Grid } from '@material-ui/core';
+import { Grid, LinearProgress } from '@material-ui/core';
 import { SharedWithMePanel } from '../shared-with-me-panel/shared-with-me-panel';
-import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog';
 import SplitterLayout from 'react-splitter-layout';
+import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog';
+import { isSystemWorking } from "~/store/progress-indicator/progress-indicator-reducer";
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content' | 'appBar';
 
@@ -52,7 +53,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         overflow: 'hidden',
         width: '100vw',
-        height: '100vh'
+        height: '100vh',
+        paddingTop: theme.spacing.unit * 8
     },
     container: {
         position: 'relative'
@@ -83,6 +85,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 interface WorkbenchDataProps {
     user?: User;
     currentToken?: string;
+    working: boolean;
 }
 
 interface WorkbenchGeneralProps {
@@ -101,6 +104,7 @@ export const Workbench = withStyles(styles)(
         (state: RootState) => ({
             user: state.auth.user,
             currentToken: state.auth.apiToken,
+            working: isSystemWorking(state.progressIndicator)
         })
     )(
         class extends React.Component<WorkbenchProps, WorkbenchState> {
@@ -110,14 +114,14 @@ export const Workbench = withStyles(styles)(
             render() {
                 const { classes } = this.props;
                 return <>
+                    <MainAppBar
+                        searchText={this.state.searchText}
+                        user={this.props.user}
+                        onSearch={this.onSearch}
+                        buildInfo={this.props.buildInfo}>
+                        {this.props.working ? <LinearProgress color="secondary" /> : null}
+                    </MainAppBar>
                     <Grid container direction="column" className={classes.root}>
-                        <Grid className={classes.appBar}>
-                            <MainAppBar
-                                searchText={this.state.searchText}
-                                user={this.props.user}
-                                onSearch={this.onSearch}
-                                buildInfo={this.props.buildInfo} />
-                        </Grid>
                         {this.props.user &&
                             <Grid container item xs alignItems="stretch" wrap="nowrap">
                                 <Grid container item className={classes.container}>