services/workbench2/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, { useEffect } 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 import { Routes } from 'routes/routes';
  15
  16 type CssRules = 'root';
  17
  18 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  19     root: {
  20         overflow: 'hidden',
  21         width: '100vw',
  22         height: '100vh'
  23     }
  24 });
  25
  26 export interface MainPanelRootDataProps {
  27     user?: User;
  28     working: boolean;
  29     loading: boolean;
  30     buildInfo: string;
  31     uuidPrefix: string;
  32     isNotLinking: boolean;
  33     isLinkingPath: boolean;
  34     siteBanner: string;
  35     sessionIdleTimeout: number;
  36     sidePanelIsCollapsed: boolean;
  37     isTransitioning: boolean;
  38     currentSideWidth: number;
  39     currentRoute: string;
  40 }
  41
  42 interface MainPanelRootDispatchProps {
  43     toggleSidePanel: () => void,
  44     setCurrentRouteUuid: (uuid: string | null) => void;
  45 }
  46
  47 type MainPanelRootProps = MainPanelRootDataProps & MainPanelRootDispatchProps & WithStyles<CssRules>;
  48
  49 export const MainPanelRoot = withStyles(styles)(
  50     ({ classes, loading, working, user, buildInfo, uuidPrefix,
  51         isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout,
  52         sidePanelIsCollapsed, isTransitioning, currentSideWidth, currentRoute, setCurrentRouteUuid}: MainPanelRootProps) =>{
  53
  54             useEffect(() => {
  55                 const splitRoute = currentRoute.split('/');
  56                 const uuid = splitRoute[splitRoute.length - 1];
  57                 if(Object.values(Routes).includes(`/${uuid}`) === false) {
  58                     setCurrentRouteUuid(uuid);
  59                 } else {
  60                     setCurrentRouteUuid(null);
  61                 }
  62                 // eslint-disable-next-line react-hooks/exhaustive-deps
  63             }, [currentRoute]);
  64
  65         return loading
  66             ? <WorkbenchLoadingScreen />
  67             : <>
  68             {isNotLinking && <MainAppBar
  69                 user={user}
  70                 buildInfo={buildInfo}
  71                 uuidPrefix={uuidPrefix}
  72                 siteBanner={siteBanner}
  73                 sidePanelIsCollapsed={sidePanelIsCollapsed}
  74                 >
  75                 {working
  76                     ? <LinearProgress color="secondary" data-cy="linear-progress" />
  77                     : null}
  78             </MainAppBar>}
  79             <Grid container direction="column" className={classes.root}>
  80                 {user
  81                     ? (user.isActive || (!user.isActive && isLinkingPath)
  82                     ? <WorkbenchPanel
  83                         isNotLinking={isNotLinking}
  84                         isUserActive={user.isActive}
  85                         sessionIdleTimeout={sessionIdleTimeout}
  86                         sidePanelIsCollapsed={sidePanelIsCollapsed}
  87                         isTransitioning={isTransitioning}
  88                         currentSideWidth={currentSideWidth}/>
  89                     : <InactivePanel />)
  90                     : <LoginPanel />}
  91             </Grid>
  92         </>
  93     }
  94 );