message: feat(techdocs): add settings menu list
diff: * limitations under the License.
  */
  -import React from 'react';
  +import React, { MouseEvent, useState, useCallback } from 'react';
  -import { Box, makeStyles, Toolbar, ToolbarProps } from '@material-ui/core';
  +import {
  + Box,
  + makeStyles,
  + Toolbar,
  + ToolbarProps,
  + Menu,
  + Tooltip,
  + IconButton,
  +} from '@material-ui/core';
  +import SettingsIcon from '@material-ui/icons/Settings';
  import {
  TechDocsAddonLocations as locations,
  @@ -44,22 +53,35 @@ export const TechDocsReaderPageSubheader = ({
  toolbarProps?: ToolbarProps;
  }) => {
  const classes = useStyles();
  + const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  +
  + const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
  + setAnchorEl(event.currentTarget);
  + }, []);
  +
  + const handleClose = useCallback(() => {
  + setAnchorEl(null);
  + }, []);
  +
  const {
  entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
  } = useTechDocsReaderPage();
  +
  const addons = useTechDocsAddons();
  +
  const subheaderAddons = addons.renderComponentsByLocation(
  locations.Subheader,
  );
  - if (!subheaderAddons) return null;
  + const settingsAddons = addons.renderComponentsByLocation(locations.Settings);
  +
  + if (!subheaderAddons && !settingsAddons) return null;
  // No entity metadata = 404. Don't render subheader on 404.
  if (entityMetadataLoading === false && !entityMetadata) return null;
  return (
  <Toolbar classes={classes} {...toolbarProps}>
  - {subheaderAddons && (
  <Box
  display="flex"
  justifyContent="flex-end"
  @@ -67,8 +89,31 @@ export const TechDocsReaderPageSubheader = ({
  flexWrap="wrap"
  >
  {subheaderAddons}
  + {settingsAddons ? (
  + <>
  + <Tooltip title="Settings">
  + <IconButton
  + aria-controls="tech-docs-reader-page-settings"
  + aria-haspopup="true"
  + onClick={handleClick}
  + >
  + <SettingsIcon />
  + </IconButton>
  + </Tooltip>
  + <Menu
  + id="tech-docs-reader-page-settings"
  + getContentAnchorEl={null}
  + anchorEl={anchorEl}
  + anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  + open={Boolean(anchorEl)}
  + onClose={handleClose}
  + keepMounted
  + >
  + {settingsAddons}
  + </Menu>
  + </>
  + ) : null}
  </Box>
  - )}
  </Toolbar>
  );
  };
  