feat(techdocs): add settings menu list

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx

@@ -14,9 +14,18 @@
  * 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,31 +53,67 @@ 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"
-          width="100%"
-          flexWrap="wrap"
-        >
-          {subheaderAddons}
-        </Box>
-      )}
+      <Box
+        display="flex"
+        justifyContent="flex-end"
+        width="100%"
+        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>
   );
 };