Added context menu to scaffolder pages

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

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>
   );