Added context menu to scaffolder pages

Signed-off-by: Andre Wanlin <awanlin@spotify.com>

.changeset/quick-penguins-refuse.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Added `ScaffolderPageContextMenu` to `ActionsPage`, `ListTaskPage`, and `TemplateEditorPage` so that you can more easily navigate between these pages#

plugins/scaffolder-react/api-report-alpha.md

@@ -129,6 +129,7 @@ export type ScaffolderPageContextMenuProps = {
   onEditorClicked?: () => void;
   onActionsClicked?: () => void;
   onTasksClicked?: () => void;
+  onCreateClicked?: () => void;
 };
 
 // @alpha

plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx

@@ -20,6 +20,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Popover from '@material-ui/core/Popover';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import { makeStyles } from '@material-ui/core/styles';
 import Description from '@material-ui/icons/Description';
 import Edit from '@material-ui/icons/Edit';
@@ -40,6 +41,7 @@ export type ScaffolderPageContextMenuProps = {
   onEditorClicked?: () => void;
   onActionsClicked?: () => void;
   onTasksClicked?: () => void;
+  onCreateClicked?: () => void;
 };
 
 /**
@@ -48,7 +50,8 @@ export type ScaffolderPageContextMenuProps = {
 export function ScaffolderPageContextMenu(
   props: ScaffolderPageContextMenuProps,
 ) {
-  const { onEditorClicked, onActionsClicked, onTasksClicked } = props;
+  const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } =
+    props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
@@ -89,6 +92,20 @@ export function ScaffolderPageContextMenu(
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       >
         <MenuList>
+          {onCreateClicked && (
+            <MenuItem onClick={onCreateClicked}>
+              <ListItemIcon>
+                <CreateComponentIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText primary="Create" />
+            </MenuItem>
+          )}
+          {/* <MenuItem onClick={onCreateClicked}>
+            <ListItemIcon>
+              <CreateComponentIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText primary="Create" />
+          </MenuItem> */}
           {onEditorClicked && (
             <MenuItem onClick={onEditorClicked}>
               <ListItemIcon>

plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx

@@ -41,7 +41,7 @@ import classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   CodeSnippet,
   Content,
@@ -52,6 +52,13 @@ import {
   Progress,
 } from '@backstage/core-components';
 import Chip from '@material-ui/core/Chip';
+import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
+import { useNavigate } from 'react-router-dom';
+import {
+  editRouteRef,
+  rootRouteRef,
+  scaffolderListTaskRouteRef,
+} from '../../routes';
 
 const useStyles = makeStyles(theme => ({
   code: {
@@ -109,6 +116,17 @@ const ExamplesTable = (props: { examples: ActionExample[] }) => {
 
 export const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
+  const navigate = useNavigate();
+  const editorLink = useRouteRef(editRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: () => navigate(editorLink()),
+    onActionsClicked: undefined,
+    onTasksClicked: () => navigate(tasksLink()),
+    onCreateClicked: () => navigate(createLink()),
+  };
   const classes = useStyles();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
@@ -326,7 +344,9 @@ export const ActionsPage = () => {
         pageTitleOverride="Create a New Component"
         title="Installed actions"
         subtitle="This is the collection of all installed actions"
-      />
+      >
+        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
+      </Header>
       <Content>{items}</Content>
     </Page>
   );

plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx

@@ -38,7 +38,9 @@ import {
   TaskStatusColumn,
   TemplateTitleColumn,
 } from './columns';
-import { rootRouteRef } from '../../routes';
+import { actionsRouteRef, editRouteRef, rootRouteRef } from '../../routes';
+import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
+import { useNavigate } from 'react-router-dom';
 
 export interface MyTaskPageProps {
   initiallySelectedFilter?: 'owned' | 'all';
@@ -134,13 +136,26 @@ const ListTaskPageContent = (props: MyTaskPageProps) => {
 };
 
 export const ListTasksPage = (props: MyTaskPageProps) => {
+  const navigate = useNavigate();
+  const editorLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: () => navigate(editorLink()),
+    onActionsClicked: () => navigate(actionsLink()),
+    onTasksClicked: () => undefined,
+    onCreateClicked: () => navigate(createLink()),
+  };
   return (
     <Page themeId="home">
       <Header
         pageTitleOverride="Templates Tasks"
         title="List template tasks"
         subtitle="All tasks that have been started"
-      />
+      >
+        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
+      </Header>
       <Content>
         <ListTaskPageContent {...props} />
       </Content>

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx

@@ -27,6 +27,14 @@ import {
   type LayoutOptions,
 } from '@backstage/plugin-scaffolder-react';
 import { TemplateEditorIntro } from './TemplateEditorIntro';
+import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
+import { useNavigate } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import {
+  actionsRouteRef,
+  rootRouteRef,
+  scaffolderListTaskRouteRef,
+} from '../../routes';
 
 type Selection =
   | {
@@ -48,6 +56,17 @@ interface TemplateEditorPageProps {
 
 export function TemplateEditorPage(props: TemplateEditorPageProps) {
   const [selection, setSelection] = useState<Selection>();
+  const navigate = useNavigate();
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: undefined,
+    onActionsClicked: () => navigate(actionsLink()),
+    onTasksClicked: () => navigate(tasksLink()),
+    onCreateClicked: () => navigate(createLink()),
+  };
 
   let content: JSX.Element | null = null;
   if (selection?.type === 'local') {
@@ -100,7 +119,9 @@ export function TemplateEditorPage(props: TemplateEditorPageProps) {
       <Header
         title="Template Editor"
         subtitle="Edit, preview, and try out templates and template forms"
-      />
+      >
+        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
+      </Header>
       {content}
     </Page>
   );