@@ -149,12 +149,13 @@ export const Router = (props: RouterProps) => {
|
||||
</SecretsContextProvider>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route path={scaffolderTaskRouteRef.path} element={<TaskPageElement />} />
|
||||
<Route path={actionsRouteRef.path} element={<ActionsPage />} />
|
||||
<Route
|
||||
path={scaffolderListTaskRouteRef.path}
|
||||
element={<ListTasksPage />}
|
||||
/>
|
||||
<Route path={scaffolderTaskRouteRef.path} element={<TaskPageElement />} />
|
||||
<Route path={actionsRouteRef.path} element={<ActionsPage />} />
|
||||
<Route
|
||||
path={editRouteRef.path}
|
||||
element={
|
||||
|
||||
@@ -31,11 +31,15 @@ import { TemplateGroupFilter } from '../TemplateListPage/TemplateGroups';
|
||||
import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';
|
||||
|
||||
import {
|
||||
nextActionsRouteRef,
|
||||
nextScaffolderListTaskRouteRef,
|
||||
nextScaffolderTaskRouteRef,
|
||||
nextSelectedTemplateRouteRef,
|
||||
} from '../routes';
|
||||
import { ErrorPage } from '@backstage/core-components';
|
||||
import { OngoingTask } from '../OngoingTask';
|
||||
import { ActionsPage } from '../../components/ActionsPage';
|
||||
import { ListTasksPage } from '../../components/ListTasksPage';
|
||||
|
||||
/**
|
||||
* The Props for the Scaffolder Router
|
||||
@@ -120,6 +124,11 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
|
||||
<OngoingTask TemplateOutputsComponent={TemplateOutputsComponent} />
|
||||
}
|
||||
/>
|
||||
<Route path={nextActionsRouteRef.path} element={<ActionsPage />} />
|
||||
<Route
|
||||
path={nextScaffolderListTaskRouteRef.path}
|
||||
element={<ListTasksPage />}
|
||||
/>
|
||||
<Route
|
||||
path="*"
|
||||
element={<ErrorPage status="404" statusMessage="Page not found" />}
|
||||
|
||||
@@ -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<HTMLButtonElement>();
|
||||
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<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
setAnchorEl(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
aria-label="more"
|
||||
aria-controls="long-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={onOpen}
|
||||
data-testid="menu-button"
|
||||
color="inherit"
|
||||
className={classes.button}
|
||||
>
|
||||
<MoreVert />
|
||||
</IconButton>
|
||||
<Popover
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={onClose}
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
>
|
||||
<MenuList>
|
||||
{showEditor && (
|
||||
<MenuItem onClick={() => navigate(editLink())}>
|
||||
<ListItemIcon>
|
||||
<Edit fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Template Editor" />
|
||||
</MenuItem>
|
||||
)}
|
||||
{showActions && (
|
||||
<MenuItem onClick={() => navigate(actionsLink())}>
|
||||
<ListItemIcon>
|
||||
<Description fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Installed Actions" />
|
||||
</MenuItem>
|
||||
)}
|
||||
{showTasks && (
|
||||
<MenuItem onClick={() => navigate(tasksLink())}>
|
||||
<ListItemIcon>
|
||||
<List fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Task List" />
|
||||
</MenuItem>
|
||||
)}
|
||||
</MenuList>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
>
|
||||
<ScaffolderPageContextMenu {...props.contextMenu} />
|
||||
<ContextMenu {...props.contextMenu} />
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="Available Templates">
|
||||
|
||||
@@ -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',
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user