Merge branch 'master' into 13935-login-page-and-main-panel

refs #13935

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --cc src/views/main-panel/main-panel.tsx
index 22455c3c379988e9db84fff65da7873bf69f60bd,0000000000000000000000000000000000000000..297a6214505a53628c3d6ec20d4f79cb455c27fa
mode 100644,000000..100644
--- 1/src/views/main-panel/main-panel.tsx
--- /dev/null
+++ b/src/views/main-panel/main-panel.tsx
@@@ -1,78 -1,0 +1,84 @@@
- import { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer';
 +// Copyright (C) The Arvados Authors. All rights reserved.
 +//
 +// SPDX-License-Identifier: AGPL-3.0
 +
 +import * as React from 'react';
 +import { connect, DispatchProp } from 'react-redux';
 +import { push } from 'react-router-redux';
 +import { LinearProgress, Grid } from '@material-ui/core';
 +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 +import { ArvadosTheme } from '~/common/custom-theme';
-             working: isSystemWorking(state.progressIndicator)
 +import { RootState } from '~/store/store';
 +import { User } from '~/models/user';
 +import { WorkbenchPanel } from '~/views/workbench/workbench';
 +import { LoginPanel } from '~/views/login-panel/login-panel';
 +import { MainAppBar } from '~/views-components/main-app-bar/main-app-bar';
++import { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer';
++import { isWorkbenchLoading } from '../../store/workbench/workbench-actions';
++import { WorkbenchLoadingScreen } from '~/views/workbench/workbench-loading-screen';
 +
 +type CssRules = 'root';
 +
 +const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 +    root: {
 +        overflow: 'hidden',
 +        width: '100vw',
 +        height: '100vh'
 +    }
 +});
 +
 +interface MainPanelDataProps {
 +    user?: User;
 +    working: boolean;
++    loading: boolean;
 +}
 +
 +interface MainPanelGeneralProps {
 +    buildInfo: string;
 +}
 +
 +interface MainPanelState {
 +    searchText: string;
 +}
 +
 +type MainPanelProps = MainPanelDataProps & MainPanelGeneralProps & DispatchProp<any> & WithStyles<CssRules>;
 +
 +export const MainPanel = withStyles(styles)(
 +    connect<MainPanelDataProps>(
 +        (state: RootState) => ({
 +            user: state.auth.user,
-                 const { classes, user, buildInfo, working } = this.props;
++            working: isSystemWorking(state.progressIndicator),
++            loading: isWorkbenchLoading(state)
 +        })
 +    )(
 +        class extends React.Component<MainPanelProps, MainPanelState> {
 +            state = {
 +                searchText: "",
 +            };
 +
 +            render() {
-                 return <>
-                     <MainAppBar
-                         searchText={searchText}
-                         user={user}
-                         onSearch={this.onSearch}
-                         buildInfo={buildInfo}>
-                         {working ? <LinearProgress color="secondary" /> : null}
-                     </MainAppBar>
-                     <Grid container direction="column" className={classes.root}>
-                         {user ? <WorkbenchPanel /> : <LoginPanel />}
-                     </Grid>
-                 </>;
++                const { classes, user, buildInfo, working, loading } = this.props;
 +                const { searchText } = this.state;
++                return loading
++                    ? <WorkbenchLoadingScreen />
++                    : <>
++                        <MainAppBar
++                            searchText={searchText}
++                            user={user}
++                            onSearch={this.onSearch}
++                            buildInfo={buildInfo}>
++                            {working ? <LinearProgress color="secondary" /> : null}
++                        </MainAppBar>
++                        <Grid container direction="column" className={classes.root}>
++                            {user ? <WorkbenchPanel /> : <LoginPanel />}
++                        </Grid>
++                    </>;
 +            }
 +
 +            onSearch = (searchText: string) => {
 +                this.setState({ searchText });
 +                this.props.dispatch(push(`/search?q=${searchText}`));
 +            }
 +        }
 +    )
 +);