19231: Add smaller page sizes (10 and 20 items) to load faster
[arvados-workbench2.git] / src / views / main-panel / main-panel-root.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { StyleRulesCallback, WithStyles, withStyles, Grid, LinearProgress } from '@material-ui/core';
7 import { User } from "models/user";
8 import { ArvadosTheme } from 'common/custom-theme';
9 import { WorkbenchPanel } from 'views/workbench/workbench';
10 import { LoginPanel } from 'views/login-panel/login-panel';
11 import { InactivePanel } from 'views/inactive-panel/inactive-panel';
12 import { WorkbenchLoadingScreen } from 'views/workbench/workbench-loading-screen';
13 import { MainAppBar } from 'views-components/main-app-bar/main-app-bar';
14
15 type CssRules = 'root';
16
17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
18     root: {
19         overflow: 'hidden',
20         width: '100vw',
21         height: '100vh'
22     }
23 });
24
25 export interface MainPanelRootDataProps {
26     user?: User;
27     working: boolean;
28     loading: boolean;
29     buildInfo: string;
30     uuidPrefix: string;
31     isNotLinking: boolean;
32     isLinkingPath: boolean;
33     siteBanner: string;
34     sessionIdleTimeout: number;
35 }
36
37 type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
38
39 export const MainPanelRoot = withStyles(styles)(
40     ({ classes, loading, working, user, buildInfo, uuidPrefix,
41         isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout }: MainPanelRootProps) =>
42         loading
43             ? <WorkbenchLoadingScreen />
44             : <>
45                 {isNotLinking && <MainAppBar
46                     user={user}
47                     buildInfo={buildInfo}
48                     uuidPrefix={uuidPrefix}
49                     siteBanner={siteBanner}>
50                     {working
51                         ? <LinearProgress color="secondary" data-cy="linear-progress" />
52                         : null}
53                 </MainAppBar>}
54                 <Grid container direction="column" className={classes.root}>
55                     {user
56                         ? (user.isActive || (!user.isActive && isLinkingPath)
57                             ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} />
58                             : <InactivePanel />)
59                         : <LoginPanel />}
60                 </Grid>
61             </>
62 );