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 { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer';
  12 import { RootState } from '~/store/store';
  13 import { User } from '~/models/user';
  14 import { WorkbenchPanel } from '~/views/workbench/workbench';
  15 import { LoginPanel } from '~/views/login-panel/login-panel';
  16 import { MainAppBar } from '~/views-components/main-app-bar/main-app-bar';
  17
  18 type CssRules = 'root';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     root: {
  22         overflow: 'hidden',
  23         width: '100vw',
  24         height: '100vh'
  25     }
  26 });
  27
  28 interface MainPanelDataProps {
  29     user?: User;
  30     working: boolean;
  31 }
  32
  33 interface MainPanelGeneralProps {
  34     buildInfo: string;
  35 }
  36
  37 interface MainPanelState {
  38     searchText: string;
  39 }
  40
  41 type MainPanelProps = MainPanelDataProps & MainPanelGeneralProps & DispatchProp<any> & WithStyles<CssRules>;
  42
  43 export const MainPanel = withStyles(styles)(
  44     connect<MainPanelDataProps>(
  45         (state: RootState) => ({
  46             user: state.auth.user,
  47             working: isSystemWorking(state.progressIndicator)
  48         })
  49     )(
  50         class extends React.Component<MainPanelProps, MainPanelState> {
  51             state = {
  52                 searchText: "",
  53             };
  54
  55             render() {
  56                 const { classes, user, buildInfo, working } = this.props;
  57                 const { searchText } = this.state;
  58                 return <>
  59                     <MainAppBar
  60                         searchText={searchText}
  61                         user={user}
  62                         onSearch={this.onSearch}
  63                         buildInfo={buildInfo}>
  64                         {working ? <LinearProgress color="secondary" /> : null}
  65                     </MainAppBar>
  66                     <Grid container direction="column" className={classes.root}>
  67                         {user ? <WorkbenchPanel /> : <LoginPanel />}
  68                     </Grid>
  69                 </>;
  70             }
  71
  72             onSearch = (searchText: string) => {
  73                 this.setState({ searchText });
  74                 this.props.dispatch(push(`/search?q=${searchText}`));
  75             }
  76         }
  77     )
  78 );