diff --git a/.changeset/quick-penguins-refuse.md b/.changeset/quick-penguins-refuse.md new file mode 100644 index 0000000000..c76686ae75 --- /dev/null +++ b/.changeset/quick-penguins-refuse.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-scaffolder': patch +--- + +Added `ScaffolderPageContextMenu` to `ActionsPage`, `ListTaskPage`, and `TemplateEditorPage` so that you can more easily navigate between these pages# diff --git a/plugins/scaffolder-react/api-report-alpha.md b/plugins/scaffolder-react/api-report-alpha.md index 6976951670..a521fecc70 100644 --- a/plugins/scaffolder-react/api-report-alpha.md +++ b/plugins/scaffolder-react/api-report-alpha.md @@ -129,6 +129,7 @@ export type ScaffolderPageContextMenuProps = { onEditorClicked?: () => void; onActionsClicked?: () => void; onTasksClicked?: () => void; + onCreateClicked?: () => 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 8326b361e1..2d132473a8 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -20,6 +20,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import MenuItem from '@material-ui/core/MenuItem'; import MenuList from '@material-ui/core/MenuList'; import Popover from '@material-ui/core/Popover'; +import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; import { makeStyles } from '@material-ui/core/styles'; import Description from '@material-ui/icons/Description'; import Edit from '@material-ui/icons/Edit'; @@ -40,6 +41,7 @@ export type ScaffolderPageContextMenuProps = { onEditorClicked?: () => void; onActionsClicked?: () => void; onTasksClicked?: () => void; + onCreateClicked?: () => void; }; /** @@ -48,7 +50,8 @@ export type ScaffolderPageContextMenuProps = { export function ScaffolderPageContextMenu( props: ScaffolderPageContextMenuProps, ) { - const { onEditorClicked, onActionsClicked, onTasksClicked } = props; + const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } = + props; const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(); @@ -89,6 +92,20 @@ export function ScaffolderPageContextMenu( transformOrigin={{ vertical: 'top', horizontal: 'right' }} > + {onCreateClicked && ( + + + + + + + )} + {/* + + + + + */} {onEditorClicked && ( diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 5e7f9810c5..9957d22456 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/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" - /> + > + + {items} ); diff --git a/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx b/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx index aac0ed5c79..6a764eaa1f 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx +++ b/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 (
+ > + +
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx index aab693e590..d8145c4646 100644 --- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx +++ b/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(); + 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) {
+ > + +
{content}
);