Update ScaffolderPageContextMenu props to take callbacks

Signed-off-by: Min Kim <minkimcello@gmail.com>

.changeset/thin-spoons-prove.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+---
+
+To offer better customization options, `ScaffolderPageContextMenu` takes callbacks as props instead of booleans

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

@@ -5,7 +5,6 @@
 ```ts
 /// <reference types="react" />
 
-import { AnyParams } from '@backstage/core-plugin-api';
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { ComponentType } from 'react';
 import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react';
@@ -23,7 +22,6 @@ import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RJSFSchema } from '@rjsf/utils';
-import { RouteFunc } from '@backstage/core-plugin-api';
 import { ScaffolderStep } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
 import { SetStateAction } from 'react';
@@ -141,9 +139,9 @@ export function ScaffolderPageContextMenu(
 
 // @alpha (undocumented)
 export type ScaffolderPageContextMenuProps = {
-  editor?: RouteFunc<AnyParams>;
-  actions?: RouteFunc<AnyParams>;
-  tasks?: RouteFunc<AnyParams>;
+  onEditorClicked?: () => void;
+  onActionsClicked?: () => void;
+  onTasksClicked?: () => void;
 };
 
 // @alpha

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { RouteFunc, AnyParams } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
 import IconButton from '@material-ui/core/IconButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -28,7 +27,6 @@ import Edit from '@material-ui/icons/Edit';
 import List from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   button: {
@@ -40,9 +38,9 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
  * @alpha
  */
 export type ScaffolderPageContextMenuProps = {
-  editor?: RouteFunc<AnyParams>;
-  actions?: RouteFunc<AnyParams>;
-  tasks?: RouteFunc<AnyParams>;
+  onEditorClicked?: () => void;
+  onActionsClicked?: () => void;
+  onTasksClicked?: () => void;
 };
 
 /**
@@ -51,13 +49,11 @@ export type ScaffolderPageContextMenuProps = {
 export function ScaffolderPageContextMenu(
   props: ScaffolderPageContextMenuProps,
 ) {
-  const { editor, actions, tasks } = props;
+  const { onEditorClicked, onActionsClicked, onTasksClicked } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
-  const navigate = useNavigate();
-
-  if (!editor && !actions) {
+  if (!onEditorClicked && !onActionsClicked) {
     return null;
   }
 
@@ -90,24 +86,24 @@ export function ScaffolderPageContextMenu(
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       >
         <MenuList>
-          {editor && (
-            <MenuItem onClick={() => navigate(editor())}>
+          {onEditorClicked && (
+            <MenuItem onClick={onEditorClicked}>
               <ListItemIcon>
                 <Edit fontSize="small" />
               </ListItemIcon>
               <ListItemText primary="Template Editor" />
             </MenuItem>
           )}
-          {actions && (
-            <MenuItem onClick={() => navigate(actions())}>
+          {onActionsClicked && (
+            <MenuItem onClick={onActionsClicked}>
               <ListItemIcon>
                 <Description fontSize="small" />
               </ListItemIcon>
               <ListItemText primary="Installed Actions" />
             </MenuItem>
           )}
-          {tasks && (
-            <MenuItem onClick={() => navigate(tasks())}>
+          {onTasksClicked && (
+            <MenuItem onClick={onTasksClicked}>
               <ListItemIcon>
                 <List fontSize="small" />
               </ListItemIcon>

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 import {
   Content,
@@ -38,7 +40,6 @@ import {
 } from '@backstage/plugin-scaffolder-react/alpha';
 
 import { RegisterExistingButton } from './RegisterExistingButton';
-import { useRouteRef } from '@backstage/core-plugin-api';
 import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
 import {
   actionsRouteRef,
@@ -82,6 +83,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
     groups: givenGroups = [],
     templateFilter,
   } = props;
+  const navigate = useNavigate();
   const editorLink = useRouteRef(editRouteRef);
   const actionsLink = useRouteRef(actionsRouteRef);
   const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
@@ -91,9 +93,18 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
     : [defaultGroup];
 
   const scaffolderPageContextMenuProps = {
-    editor: props?.contextMenu?.editor !== false ? editorLink : undefined,
-    actions: props?.contextMenu?.actions !== false ? actionsLink : undefined,
-    tasks: props?.contextMenu?.tasks !== false ? tasksLink : undefined,
+    onEditorClicked:
+      props?.contextMenu?.editor !== false
+        ? () => navigate(editorLink())
+        : undefined,
+    onActionsClicked:
+      props?.contextMenu?.actions !== false
+        ? () => navigate(actionsLink())
+        : undefined,
+    onTasksClicked:
+      props?.contextMenu?.tasks !== false
+        ? () => navigate(tasksLink())
+        : undefined,
   };
 
   return (