go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/common/layouts/app_bar/app_menu/app_menu.tsx (about)

     1  // Copyright 2023 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import DescriptionIcon from '@mui/icons-material/Description';
    16  import MoreVertIcon from '@mui/icons-material/MoreVert';
    17  import SettingsIcon from '@mui/icons-material/Settings';
    18  import IconButton from '@mui/material/IconButton';
    19  import ListItemIcon from '@mui/material/ListItemIcon';
    20  import ListItemText from '@mui/material/ListItemText';
    21  import Menu from '@mui/material/Menu';
    22  import MenuItem from '@mui/material/MenuItem';
    23  import { useState, MouseEvent } from 'react';
    24  import { Link } from 'react-router-dom';
    25  
    26  import { useSetShowPageConfig } from '@/common/components/page_config_state_provider';
    27  import { ReleaseNotesTooltip } from '@/core/components/release_notes';
    28  
    29  export function AppMenu() {
    30    const setShowPageConfig = useSetShowPageConfig();
    31  
    32    const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
    33    const handleOpenMenu = (event: MouseEvent<HTMLElement>) => {
    34      setMenuAnchorEl(event.currentTarget);
    35    };
    36    const handleCloseMenu = () => {
    37      setMenuAnchorEl(null);
    38    };
    39  
    40    return (
    41      <>
    42        <ReleaseNotesTooltip>
    43          <IconButton
    44            onClick={handleOpenMenu}
    45            color="inherit"
    46            role="button"
    47            aria-label="Open menu"
    48            title="Open menu"
    49          >
    50            <MoreVertIcon />
    51          </IconButton>
    52        </ReleaseNotesTooltip>
    53        <Menu
    54          sx={{ mt: 4 }}
    55          anchorEl={menuAnchorEl}
    56          anchorOrigin={{
    57            vertical: 'top',
    58            horizontal: 'right',
    59          }}
    60          keepMounted
    61          transformOrigin={{
    62            vertical: 'top',
    63            horizontal: 'right',
    64          }}
    65          open={Boolean(menuAnchorEl)}
    66          onClose={handleCloseMenu}
    67        >
    68          <MenuItem
    69            component={Link}
    70            to="/ui/doc/release-notes"
    71            title="View LUCI UI Release Notes"
    72            onClick={handleCloseMenu}
    73          >
    74            <ListItemIcon>
    75              <DescriptionIcon />
    76            </ListItemIcon>
    77            <ListItemText>{"What's new"}</ListItemText>
    78          </MenuItem>
    79          <MenuItem
    80            onClick={() => setShowPageConfig!(true)}
    81            disabled={setShowPageConfig === null}
    82            title="Change settings specific to the page."
    83          >
    84            <ListItemIcon>
    85              <SettingsIcon />
    86            </ListItemIcon>
    87            <ListItemText>Page Settings</ListItemText>
    88          </MenuItem>
    89        </Menu>
    90      </>
    91    );
    92  }