diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx
index ccc2bd283b..06c28682c5 100644
--- a/plugins/scaffolder/src/components/Router.tsx
+++ b/plugins/scaffolder/src/components/Router.tsx
@@ -149,12 +149,13 @@ export const Router = (props: RouterProps) => {
}
/>
+
+ } />
+ } />
}
/>
- } />
- } />
) => {
}
/>
+ } />
+ }
+ />
}
diff --git a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
new file mode 100644
index 0000000000..3bca46af2a
--- /dev/null
+++ b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
@@ -0,0 +1,123 @@
+/*
+ * Copyright 2020 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.
+ */
+
+import { useRouteRef } from '@backstage/core-plugin-api';
+import IconButton from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+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 { makeStyles } from '@material-ui/core/styles';
+import Description from '@material-ui/icons/Description';
+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';
+import {
+ nextActionsRouteRef,
+ nextEditRouteRef,
+ nextScaffolderListTaskRouteRef,
+} from '../routes';
+
+const useStyles = makeStyles({
+ button: {
+ color: 'white',
+ },
+});
+
+export type ScaffolderPageContextMenuProps = {
+ editor?: boolean;
+ actions?: boolean;
+ tasks?: boolean;
+};
+
+export function ContextMenu(props: ScaffolderPageContextMenuProps) {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = useState();
+ const editLink = useRouteRef(nextEditRouteRef);
+ const actionsLink = useRouteRef(nextActionsRouteRef);
+ const tasksLink = useRouteRef(nextScaffolderListTaskRouteRef);
+
+ const navigate = useNavigate();
+
+ const showEditor = props.editor !== false;
+ const showActions = props.actions !== false;
+ const showTasks = props.tasks !== false;
+
+ if (!showEditor && !showActions) {
+ return null;
+ }
+
+ const onOpen = (event: React.SyntheticEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const onClose = () => {
+ setAnchorEl(undefined);
+ };
+
+ return (
+ <>
+
+
+
+
+
+ {showEditor && (
+
+ )}
+ {showActions && (
+
+ )}
+ {showTasks && (
+
+ )}
+
+
+ >
+ );
+}
diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
index 3097bd98be..b701ceb3c4 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
+++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
@@ -37,7 +37,7 @@ import { RegisterExistingButton } from './RegisterExistingButton';
import { useRouteRef } from '@backstage/core-plugin-api';
import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
import { registerComponentRouteRef } from '../../routes';
-import { ScaffolderPageContextMenu } from '../../components/ScaffolderPage/ScaffolderPageContextMenu';
+import { ContextMenu } from './ContextMenu';
export type TemplateListPageProps = {
TemplateCardComponent?: React.ComponentType<{
@@ -68,7 +68,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
title="Create a new component"
subtitle="Create new software components using standard templates in your organization"
>
-
+
diff --git a/plugins/scaffolder/src/next/routes.ts b/plugins/scaffolder/src/next/routes.ts
index 620122ee60..12fad4210a 100644
--- a/plugins/scaffolder/src/next/routes.ts
+++ b/plugins/scaffolder/src/next/routes.ts
@@ -34,3 +34,24 @@ export const nextScaffolderTaskRouteRef = createSubRouteRef({
parent: nextRouteRef,
path: '/tasks/:taskId',
});
+
+/** @alpha */
+export const nextScaffolderListTaskRouteRef = createSubRouteRef({
+ id: 'scaffolder/next/list-tasks',
+ parent: nextRouteRef,
+ path: '/tasks',
+});
+
+/** @alpha */
+export const nextActionsRouteRef = createSubRouteRef({
+ id: 'scaffolder/next/actions',
+ parent: nextRouteRef,
+ path: '/actions',
+});
+
+/** @alpha */
+export const nextEditRouteRef = createSubRouteRef({
+ id: 'scaffolder/next/edit',
+ parent: nextRouteRef,
+ path: '/edit',
+});