diff --git a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx similarity index 77% rename from plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx rename to plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index c3c2abc39f..0194137521 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx +++ b/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; + actions?: RouteFunc; + tasks?: RouteFunc; }; -export function ContextMenu(props: ScaffolderPageContextMenuProps) { +export function ScaffolderPageContextMenu( + props: ScaffolderPageContextMenuProps, +) { + const { editor, actions, tasks } = props; const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(); - 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' }} > - {showEditor && ( - navigate(editLink())}> + {editor && ( + navigate(editor())}> )} - {showActions && ( - navigate(actionsLink())}> + {actions && ( + navigate(actions())}> )} - {showTasks && ( - navigate(tasksLink())}> + {tasks && ( + navigate(tasks())}> diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts new file mode 100644 index 0000000000..ae6774a1e6 --- /dev/null +++ b/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'; diff --git a/plugins/scaffolder-react/src/next/components/index.ts b/plugins/scaffolder-react/src/next/components/index.ts index f63faa9e41..a38b0689d5 100644 --- a/plugins/scaffolder-react/src/next/components/index.ts +++ b/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'; diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index 74d6e07c52..dc5d75d034 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/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 ( @@ -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" > - +