src/views/main-panel/main-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { connect, DispatchProp } from 'react-redux';
   7 import { push } from 'react-router-redux';
   8 import { LinearProgress, Grid } from '@material-ui/core';
   9 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { RootState } from '~/store/store';
  12 import { User } from '~/models/user';
  13 import { WorkbenchPanel } from '~/views/workbench/workbench';
  14 import { LoginPanel } from '~/views/login-panel/login-panel';
  15 import { MainAppBar } from '~/views-components/main-app-bar/main-app-bar';
  16 import { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer';
  17 import { isWorkbenchLoading } from '../../store/workbench/workbench-actions';
  18 import { WorkbenchLoadingScreen } from '~/views/workbench/workbench-loading-screen';
  19
  20 type CssRules = 'root';
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     root: {
  24         overflow: 'hidden',
  25         width: '100vw',
  26         height: '100vh'
  27     }
  28 });
  29
  30 interface MainPanelDataProps {
  31     user?: User;
  32     working: boolean;
  33     loading: boolean;
  34 }
  35
  36 interface MainPanelGeneralProps {
  37     buildInfo: string;
  38 }
  39
  40 interface MainPanelState {
  41     searchText: string;
  42 }
  43
  44 type MainPanelProps = MainPanelDataProps & MainPanelGeneralProps & DispatchProp<any> & WithStyles<CssRules>;
  45
  46 export const MainPanel = withStyles(styles)(
  47     connect<MainPanelDataProps>(
  48         (state: RootState) => ({
  49             user: state.auth.user,
  50             working: isSystemWorking(state.progressIndicator),
  51             loading: isWorkbenchLoading(state)
  52         })
  53     )(
  54         class extends React.Component<MainPanelProps, MainPanelState> {
  55             state = {
  56                 searchText: "",
  57             };
  58
  59             render() {
  60                 const { classes, user, buildInfo, working, loading } = this.props;
  61                 const { searchText } = this.state;
  62                 return loading
  63                     ? <WorkbenchLoadingScreen />
  64                     : <>
  65                         <MainAppBar
  66                             searchText={searchText}
  67                             user={user}
  68                             onSearch={this.onSearch}
  69                             buildInfo={buildInfo}>
  70                             {working ? <LinearProgress color="secondary" /> : null}
  71                         </MainAppBar>
  72                         <Grid container direction="column" className={classes.root}>
  73                             {user ? <WorkbenchPanel /> : <LoginPanel />}
  74                         </Grid>
  75                     </>;
  76             }
  77
  78             onSearch = (searchText: string) => {
  79                 this.setState({ searchText });
  80                 this.props.dispatch(push(`/search?q=${searchText}`));
  81             }
  82         }
  83     )
  84 );