chore: move the buttons to the contextmenu instead

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/next/OngoingTask/ContextMenu.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BackstageTheme } from '@backstage/theme';
+import {
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  makeStyles,
+  MenuItem,
+  MenuList,
+  Popover,
+} from '@material-ui/core';
+import Retry from '@material-ui/icons/Repeat';
+import Toc from '@material-ui/icons/Toc';
+import MoreVert from '@material-ui/icons/MoreVert';
+import React, { useState } from 'react';
+
+type ContextMenuProps = {
+  logsVisible?: boolean;
+  onToggleLogs?: (state: boolean) => void;
+  onStartOver?: () => void;
+};
+
+const useStyles = makeStyles((theme: BackstageTheme) => ({
+  button: {
+    color: theme.palette.common.white,
+  },
+}));
+
+export const ContextMenu = (props: ContextMenuProps) => {
+  const { logsVisible, onToggleLogs, onStartOver } = props;
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
+
+  return (
+    <>
+      <IconButton
+        aria-label="more"
+        aria-controls="long-menu"
+        aria-haspopup="true"
+        onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {
+          setAnchorEl(event.currentTarget);
+        }}
+        data-testid="menu-button"
+        color="inherit"
+        className={classes.button}
+      >
+        <MoreVert />
+      </IconButton>
+      <Popover
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(undefined)}
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        <MenuList>
+          <MenuItem onClick={() => onToggleLogs?.(!logsVisible)}>
+            <ListItemIcon>
+              <Toc fontSize="small" />
+            </ListItemIcon>
+            <ListItemText primary={logsVisible ? 'Hide Logs' : 'Show Logs'} />
+          </MenuItem>
+          <MenuItem onClick={onStartOver}>
+            <ListItemIcon>
+              <Retry fontSize="small" />
+            </ListItemIcon>
+            <ListItemText primary="Start Over" />
+          </MenuItem>
+        </MenuList>
+      </Popover>
+    </>
+  );
+};

plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx

@@ -25,6 +25,7 @@ import { nextSelectedTemplateRouteRef } from '../routes';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import qs from 'qs';
 import { DefaultOutputs } from './Outputs';
+import { ContextMenu } from './ContextMenu';
 
 export const OngoingTask = () => {
   // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.
@@ -41,11 +42,11 @@ export const OngoingTask = () => {
     [taskStream],
   );
 
-  const [logsVisible, setLogsVisible] = useState(false);
+  const [logsVisible, setLogVisibleState] = useState(false);
 
   useEffect(() => {
     if (taskStream.error) {
-      setLogsVisible(true);
+      setLogVisibleState(true);
     }
   }, [taskStream.error]);
 
@@ -96,7 +97,13 @@ export const OngoingTask = () => {
           </div>
         }
         subtitle={`Task ${taskId}`}
-      />
+      >
+        <ContextMenu
+          onToggleLogs={setLogVisibleState}
+          onStartOver={startOver}
+          logsVisible={logsVisible}
+        />
+      </Header>
       <Content>
         <Box paddingBottom={2}>
           <Paper style={{ position: 'relative', overflow: 'hidden' }}>
@@ -110,27 +117,7 @@ export const OngoingTask = () => {
           </Paper>
         </Box>
         <DefaultOutputs output={taskStream.output} />
-        <Box paddingBottom={2}>
-          <Paper>
-            <Box
-              padding={2}
-              justifyContent="flex-end"
-              display="flex"
-              gridGap={16}
-            >
-              <Button variant="contained" color="primary" onClick={startOver}>
-                Start over
-              </Button>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => setLogsVisible(!logsVisible)}
-              >
-                {logsVisible ? 'Hide logs' : 'Show logs'}
-              </Button>
-            </Box>
-          </Paper>
-        </Box>
+
         {logsVisible ? (
           <Box paddingBottom={2} height="100%">
             <Paper style={{ height: '100%' }}>