1
// Licensed to the Software Freedom Conservancy (SFC) under one
2
// or more contributor license agreements.  See the NOTICE file
3
// distributed with this work for additional information
4
// regarding copyright ownership.  The SFC licenses this file
5
// to you under the Apache License, Version 2.0 (the
6
// "License"); you may not use this file except in compliance
7
// with the License.  You may obtain a copy of the License at
8
//
9
//   http://www.apache.org/licenses/LICENSE-2.0
10
//
11
// Unless required by applicable law or agreed to in writing,
12
// software distributed under the License is distributed on an
13
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
// KIND, either express or implied.  See the License for the
15
// specific language governing permissions and limitations
16
// under the License.
17

18
import MuiAppBar from '@mui/material/AppBar'
19
import Box from '@mui/material/Box'
20
import CssBaseline from '@mui/material/CssBaseline'
21
import IconButton from '@mui/material/IconButton'
22
import { styled } from '@mui/material/styles'
23
import Toolbar from '@mui/material/Toolbar'
24
import Typography from '@mui/material/Typography'
25
import { ChevronLeft as ChevronLeftIcon } from '@mui/icons-material'
26
import { Menu as MenuIcon } from '@mui/icons-material'
27
import { Help as HelpIcon } from '@mui/icons-material'
28
import React from 'react'
29
import seleniumGridLogo from '../../assets/selenium-grid-logo.svg'
30

31
const AppBar = styled(MuiAppBar)(({ theme }) => ({
32
  zIndex: theme.zIndex.drawer + 1,
33
  transition: theme.transitions.create(['width', 'margin'], {
34
    easing: theme.transitions.easing.sharp,
35
    duration: theme.transitions.duration.leavingScreen
36
  })
37
}))
38

39
function TopBar (props): JSX.Element {
40
  const { subheader, error, drawerOpen, toggleDrawer } = props
41

42
  return (
43
    <Box display="flex">
44
      <CssBaseline/>
45
      <AppBar position="fixed">
46
        <Toolbar sx={{ paddingRight: '24px' }}>
47
          {!error && (
48
            <IconButton
49
              edge="start"
50
              color="inherit"
51
              aria-label={drawerOpen ? 'close drawer' : 'open drawer'}
52
              onClick={toggleDrawer}
53
              size="large"
54
              sx={{ marginRight: '36px' }}
55
            >
56
              {drawerOpen ? (<ChevronLeftIcon/>) : (<MenuIcon/>)}
57
            </IconButton>
58
          )}
59
          <IconButton
60
            edge="start"
61
            color="inherit"
62
            aria-label="help"
63
            href="#help"
64
            sx={{ marginRight: '36px', display: !error ? 'none' : '' }}
65
            size="large"
66
          >
67
            <HelpIcon/>
68
          </IconButton>
69
          <Box
70
            sx={{
71
              display: 'flex',
72
              width: 'calc(100%)',
73
              alignItems: 'center',
74
              justifyContent: 'center'
75
            }}
76
          >
77
            <Box
78
              component="img"
79
              src={seleniumGridLogo}
80
              alt="Selenium Grid Logo"
81
              sx={{
82
                width: 52,
83
                height: 52,
84
                marginRight: '10px'
85
              }}
86
            />
87
            <Box
88
              alignItems="center"
89
              display="flex"
90
              flexDirection="column"
91
            >
92
              <Typography
93
                component="h1"
94
                variant="h4"
95
                noWrap
96
              >
97
                Selenium Grid
98
              </Typography>
99
              <Typography variant="body2">
100
                {subheader}
101
              </Typography>
102
            </Box>
103
          </Box>
104
        </Toolbar>
105
      </AppBar>
106
    </Box>
107
  )
108
}
109

110
export default TopBar
111

112