paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 39 Packages Projects Releases Wiki Activity

Move and rename ContextMenu to -react/ScaffolderPageContextMenu

Browse Source 
Signed-off-by: Min Kim <minkimcello@gmail.com>
This commit is contained in:
Min Kim
2023-03-20 11:38:50 -04:00
parent 7d51e8cb0a
commit 7b315f5917
4 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
-124
View File
@@ -1,124 +0,0 @@
/*
* 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 { BackstageTheme } from '@backstage/theme';
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 {
actionsRouteRef,
editRouteRef,
scaffolderListTaskRouteRef,
} from '../../routes';
const useStyles = makeStyles((theme: BackstageTheme) => ({
button: {
color: theme.page.fontColor,
},
}));
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(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) {
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>
</>
);
}
plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
+20 -4
View File
@@ -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 (
<EntityListProvider>
<Page themeId="website">
@@ -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"
>
<ContextMenu {...props.contextMenu} />
<ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
</Header>
<Content>
<ContentHeader title="Available Templates">