diff --git a/.changeset/thin-spoons-prove.md b/.changeset/thin-spoons-prove.md new file mode 100644 index 0000000000..a9bf3052f5 --- /dev/null +++ b/.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 diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index 6eeb80d927..c51f7ba518 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -5,7 +5,6 @@ ```ts /// -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; - actions?: RouteFunc; - tasks?: RouteFunc; + onEditorClicked?: () => void; + onActionsClicked?: () => void; + onTasksClicked?: () => void; }; // @alpha diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index 0e5bc3b6a9..fc3c0249a0 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/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; - actions?: RouteFunc; - tasks?: RouteFunc; + 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(); - const navigate = useNavigate(); - - if (!editor && !actions) { + if (!onEditorClicked && !onActionsClicked) { return null; } @@ -90,24 +86,24 @@ export function ScaffolderPageContextMenu( transformOrigin={{ vertical: 'top', horizontal: 'right' }} > - {editor && ( - navigate(editor())}> + {onEditorClicked && ( + )} - {actions && ( - navigate(actions())}> + {onActionsClicked && ( + )} - {tasks && ( - navigate(tasks())}> + {onTasksClicked && ( + diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index dc5d75d034..424293665b 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/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 (