Move and rename ContextMenu to -react/ScaffolderPageContextMenu

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

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useRouteRef } from '@backstage/core-plugin-api';
+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';
@@ -29,11 +29,6 @@ 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';
-import {
-  actionsRouteRef,
-  editRouteRef,
-  scaffolderListTaskRouteRef,
-} from '../../routes';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   button: {
@@ -42,25 +37,21 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 }));
 
 export type ScaffolderPageContextMenuProps = {
-  editor?: boolean;
-  actions?: boolean;
-  tasks?: boolean;
+  editor?: RouteFunc<AnyParams>;
+  actions?: RouteFunc<AnyParams>;
+  tasks?: RouteFunc<AnyParams>;
 };
 
-export function ContextMenu(props: ScaffolderPageContextMenuProps) {
+export function ScaffolderPageContextMenu(
+  props: ScaffolderPageContextMenuProps,
+) {
+  const { editor, actions, tasks } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
-  const editLink = useRouteRef(editRouteRef);
-  const actionsLink = useRouteRef(actionsRouteRef);
-  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
 
   const navigate = useNavigate();
 
-  const showEditor = props.editor !== false;
-  const showActions = props.actions !== false;
-  const showTasks = props.tasks !== false;
-
-  if (!showEditor && !showActions) {
+  if (!editor && !actions) {
     return null;
   }
 
@@ -93,24 +84,24 @@ export function ContextMenu(props: ScaffolderPageContextMenuProps) {
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       >
         <MenuList>
-          {showEditor && (
-            <MenuItem onClick={() => navigate(editLink())}>
+          {editor && (
+            <MenuItem onClick={() => navigate(editor())}>
               <ListItemIcon>
                 <Edit fontSize="small" />
               </ListItemIcon>
               <ListItemText primary="Template Editor" />
             </MenuItem>
           )}
-          {showActions && (
-            <MenuItem onClick={() => navigate(actionsLink())}>
+          {actions && (
+            <MenuItem onClick={() => navigate(actions())}>
               <ListItemIcon>
                 <Description fontSize="small" />
               </ListItemIcon>
               <ListItemText primary="Installed Actions" />
             </MenuItem>
           )}
-          {showTasks && (
-            <MenuItem onClick={() => navigate(tasksLink())}>
+          {tasks && (
+            <MenuItem onClick={() => navigate(tasks())}>
               <ListItemIcon>
                 <List fontSize="small" />
               </ListItemIcon>

plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 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.
+ */
+export {
+  ScaffolderPageContextMenu,
+  type ScaffolderPageContextMenuProps,
+} from './ScaffolderPageContextMenu';

plugins/scaffolder-react/src/next/components/index.ts

@@ -23,3 +23,4 @@ export * from './Form';
 export * from './TaskSteps';
 export * from './TaskLogStream';
 export * from './TemplateCategoryPicker';
+export * from './ScaffolderPageContextMenu';

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

@@ -32,13 +32,20 @@ import {
   CatalogFilterLayout,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { TemplateCategoryPicker } from '@backstage/plugin-scaffolder-react/alpha';
+import {
+  ScaffolderPageContextMenu,
+  TemplateCategoryPicker,
+} from '@backstage/plugin-scaffolder-react/alpha';
 
 import { RegisterExistingButton } from './RegisterExistingButton';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
-import { registerComponentRouteRef } from '../../routes';
-import { ContextMenu } from './ContextMenu';
+import {
+  actionsRouteRef,
+  editRouteRef,
+  registerComponentRouteRef,
+  scaffolderListTaskRouteRef,
+} from '../../routes';
 
 export type TemplateListPageProps = {
   TemplateCardComponent?: React.ComponentType<{
@@ -75,11 +82,20 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
     groups: givenGroups = [],
     templateFilter,
   } = props;
+  const editorLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
 
   const groups = givenGroups.length
     ? createGroupsWithOther(givenGroups)
     : [defaultGroup];
 
+  const scaffolderPageContextMenuProps = {
+    editor: props?.contextMenu?.editor !== false ? editorLink : undefined,
+    actions: props?.contextMenu?.actions !== false ? actionsLink : undefined,
+    tasks: props?.contextMenu?.tasks !== false ? tasksLink : undefined,
+  };
+
   return (
     <EntityListProvider>
       <Page themeId="website">
@@ -88,7 +104,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
           title="Create a new component"
           subtitle="Create new software components using standard templates in your organization"
         >
-          <ContextMenu {...props.contextMenu} />
+          <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
         </Header>
         <Content>
           <ContentHeader title="Available Templates">