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

added ScaffolderWizardContextMenu and revert backend api

Browse Source 
Signed-off-by: kosukeKK <koskacts@gmail.com>
This commit is contained in:
kosukeKK
2024-03-05 14:50:42 +09:00
parent a3b4d9056b
commit acebeb8bd2
11 changed files with 179 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/funny-cameras-speak.md
-5
View File
@@ -1,5 +0,0 @@
---
'@backstage/plugin-scaffolder-backend': minor
---
Added 'editUrl' to the '/v2/templates/:namespace/:kind/:name/parameter-schema' API response. This 'editUrl' references 'backstage.io/edit-url' in the template metadata annotations
.changeset/honest-poems-visit.md
+1 -1
View File
@@ -2,4 +2,4 @@
'@backstage/plugin-scaffolder-react': minor
---
Added an editUrl parameter to TemplateParameterSchema
Added a header menu for ScaffolderWizard
plugins/scaffolder-backend/src/service/router.test.ts
-54
View File
@@ -107,7 +107,6 @@ describe('createRouter', () => {
title: 'Create React App Template',
annotations: {
'backstage.io/managed-by-location': 'url:https://dev.azure.com',
'backstage.io/edit-url': 'url:EDIT_URL',
},
},
spec: {
@@ -879,7 +878,6 @@ data: {"id":1,"taskId":"a-random-id","type":"completion","createdAt":"","body":{
expect(response.body).toEqual({
title: 'Create React App Template',
description: 'Create a new CRA website project',
editUrl: 'url:EDIT_URL',
steps: [
{
title: 'Please enter the following information',
@@ -934,7 +932,6 @@ data: {"id":1,"taskId":"a-random-id","type":"completion","createdAt":"","body":{
expect(response.body).toEqual({
title: 'Create React App Template',
description: 'Create a new CRA website project',
editUrl: 'url:EDIT_URL',
steps: [],
});
});
@@ -966,7 +963,6 @@ data: {"id":1,"taskId":"a-random-id","type":"completion","createdAt":"","body":{
expect(response.body).toEqual({
title: 'Create React App Template',
description: 'Create a new CRA website project',
editUrl: 'url:EDIT_URL',
steps: [
{
title: 'Please enter the following information',
@@ -987,56 +983,6 @@ data: {"id":1,"taskId":"a-random-id","type":"completion","createdAt":"","body":{
],
});
});
it('should not return editUrl', async () => {
jest
.spyOn(catalogClient, 'getEntityByRef')
.mockImplementationOnce(async () => {
const template = getMockTemplate();
delete template.metadata.annotations?.['backstage.io/edit-url'];
return template;
});
const response = await request(app)
.get(
'/v2/templates/default/Template/create-react-app-template/parameter-schema',
)
.send();
expect(response.status).toEqual(200);
expect(response.body).toEqual({
title: 'Create React App Template',
description: 'Create a new CRA website project',
steps: [
{
title: 'Please enter the following information',
schema: {
required: ['requiredParameter1'],
type: 'object',
properties: {
requiredParameter1: {
description: 'Required parameter 1',
type: 'string',
},
},
},
},
{
title: 'Please enter the following information',
schema: {
type: 'object',
required: ['requiredParameter2'],
'backstage:permissions': {
tags: ['parameters-tag'],
},
properties: {
requiredParameter2: {
type: 'string',
description: 'Required parameter 2',
},
},
},
},
],
});
});
});
describe('POST /v2/tasks', () => {
plugins/scaffolder-backend/src/service/router.ts
-1
View File
@@ -408,7 +408,6 @@ export async function createRouter(
res.json({
title: template.metadata.title ?? template.metadata.name,
...(presentation ? { presentation } : {}),
editUrl: template.metadata.annotations?.['backstage.io/edit-url'],
description: template.metadata.description,
'ui:options': template.metadata['ui:options'],
steps: parameters.map(schema => ({
plugins/scaffolder-react/api-report.md
-1
View File
@@ -484,7 +484,6 @@ export type TemplateGroupFilter = {
export type TemplateParameterSchema = {
title: string;
description?: string;
editUrl?: string;
presentation?: TemplatePresentationV1beta3;
steps: Array<{
title: string;
plugins/scaffolder-react/src/next/components/ScaffolderWizardContextMenu/ScaffolderWizardContextMenu.tsx
+100
View File
@@ -0,0 +1,100 @@
/*
* 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 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 Edit from '@material-ui/icons/Edit';
import MoreVert from '@material-ui/icons/MoreVert';
import React, { useState } from 'react';
const useStyles = makeStyles(theme => ({
button: {
color: theme.page.fontColor,
},
}));
/**
* @alpha
*/
export type ScaffolderWizardContextMenuProps = {
onEditorClicked?: () => void;
};
/**
* @alpha
*/
export function ScaffolderWizardContextMenu(
props: ScaffolderWizardContextMenuProps,
) {
const { onEditorClicked } = props;
const classes = useStyles();
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
if (!onEditorClicked) {
return null;
}
const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const onClose = () => {
setAnchorEl(undefined);
};
return (
<>
<IconButton
id="long-menu"
aria-label="more"
aria-controls="long-menu"
aria-expanded={!!anchorEl}
aria-haspopup="true"
role="button"
onClick={onOpen}
data-testid="menu-button"
color="inherit"
className={classes.button}
>
<MoreVert />
</IconButton>
<Popover
aria-labelledby="long-menu"
open={Boolean(anchorEl)}
onClose={onClose}
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuList>
{onEditorClicked && (
<MenuItem onClick={onEditorClicked}>
<ListItemIcon>
<Edit fontSize="small" />
</ListItemIcon>
<ListItemText primary="Edit Configuration" />
</MenuItem>
)}
</MenuList>
</Popover>
</>
);
}
plugins/scaffolder-react/src/next/components/ScaffolderWizardContextMenu/index.ts
+19
View File
@@ -0,0 +1,19 @@
/*
* Copyright 2022 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.
*/
export {
ScaffolderWizardContextMenu,
type ScaffolderWizardContextMenuProps,
} from './ScaffolderWizardContextMenu';
plugins/scaffolder-react/src/next/components/index.ts
+1
View File
@@ -25,4 +25,5 @@ export * from './TaskSteps';
export * from './TaskLogStream';
export * from './TemplateCategoryPicker';
export * from './ScaffolderPageContextMenu';
export * from './ScaffolderWizardContextMenu';
export * from './ScaffolderField';
plugins/scaffolder-react/src/types.ts
-1
View File
@@ -27,7 +27,6 @@ import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common
export type TemplateParameterSchema = {
title: string;
description?: string;
editUrl?: string;
presentation?: TemplatePresentationV1beta3;
steps: Array<{
title: string;
plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx
+46 -28
View File
@@ -29,6 +29,7 @@ import {
} from '@backstage/plugin-scaffolder-react';
import { TemplateWizardPage } from './TemplateWizardPage';
import { rootRouteRef } from '../../routes';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
jest.mock('react-router-dom', () => {
return {
@@ -50,12 +51,32 @@ const scaffolderApiMock: jest.Mocked<ScaffolderApi> = {
listTasks: jest.fn(),
};
const catalogApiMock: jest.Mocked<CatalogApi> = {
getEntityByRef: jest.fn(),
} as any;
const analyticsMock = new MockAnalyticsApi();
const apis = TestApiRegistry.from(
[scaffolderApiRef, scaffolderApiMock],
[analyticsApiRef, analyticsMock],
[catalogApiRef, catalogApiMock],
);
const entityRefResponse = {
apiVersion: 'v1',
kind: 'service',
metadata: {
name: 'test',
annotations: {
'backstage.io/edit-url': 'http://localhost:3000',
},
},
spec: {
profile: {
displayName: 'BackUser',
},
},
};
describe('TemplateWizardPage', () => {
it('captures expected analytics events', async () => {
scaffolderApiMock.scaffold.mockResolvedValue({ taskId: 'xyz' });
@@ -74,6 +95,7 @@ describe('TemplateWizardPage', () => {
],
title: 'React JSON Schema Form Test',
});
catalogApiMock.getEntityByRef.mockResolvedValue(entityRefResponse);
const { findByRole, getByRole } = await renderInTestApp(
<ApiProvider apis={apis}>
@@ -119,21 +141,20 @@ describe('TemplateWizardPage', () => {
});
describe('scaffolder page context menu', () => {
it('should render if editUrl is set to url', async () => {
scaffolderApiMock.getTemplateParameterSchema.mockResolvedValue({
steps: [
{
title: 'Step 1',
schema: {
properties: {
name: {
type: 'string',
},
},
},
catalogApiMock.getEntityByRef.mockResolvedValue({
apiVersion: 'v1',
kind: 'service',
metadata: {
name: 'test',
annotations: {
'backstage.io/edit-url': 'http://localhost:3000',
},
],
title: 'React JSON Schema Form Test',
editUrl: 'http://example.com/load-testing',
},
spec: {
profile: {
displayName: 'BackUser',
},
},
});
const { queryByTestId } = await renderInTestApp(
<ApiProvider apis={apis}>
@@ -150,21 +171,18 @@ describe('TemplateWizardPage', () => {
expect(queryByTestId('menu-button')).toBeInTheDocument();
});
it('should not render if editUrl is undefined', async () => {
scaffolderApiMock.getTemplateParameterSchema.mockResolvedValue({
steps: [
{
title: 'Step 1',
schema: {
properties: {
name: {
type: 'string',
},
},
},
catalogApiMock.getEntityByRef.mockResolvedValue({
apiVersion: 'v1',
kind: 'service',
metadata: {
name: 'test',
// annotations are not set
},
spec: {
profile: {
displayName: 'BackUser',
},
],
title: 'React JSON Schema Form Test',
editUrl: undefined,
},
});
const { queryByTestId } = await renderInTestApp(
<ApiProvider apis={apis}>
plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
+12 -9
View File
@@ -30,7 +30,9 @@ import {
FieldExtensionOptions,
ReviewStepProps,
} from '@backstage/plugin-scaffolder-react';
import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
import { ScaffolderWizardContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
import { Workflow } from '@backstage/plugin-scaffolder-react/alpha';
import { JsonValue } from '@backstage/types';
import { Header, Page } from '@backstage/core-components';
@@ -63,6 +65,7 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
const taskRoute = useRouteRef(scaffolderTaskRouteRef);
const { secrets } = useTemplateSecrets();
const scaffolderApi = useApi(scaffolderApiRef);
const catalogApi = useApi(catalogApiRef);
const navigate = useNavigate();
const { templateName, namespace } = useRouteRefParams(
selectedTemplateRouteRef,
@@ -75,19 +78,19 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
});
const [editUrl, setEditURL] = React.useState('');
scaffolderApi.getTemplateParameterSchema(templateRef).then(data => {
if (data.editUrl !== undefined) setEditURL(data.editUrl);
catalogApi.getEntityByRef(templateRef).then(data => {
const templateEditUrl =
data?.metadata.annotations?.['backstage.io/edit-url'];
if (templateEditUrl !== undefined) setEditURL(templateEditUrl);
});
const scaffolderPageContextMenuProps = {
const scaffolderWizardContextMenuProps = {
onEditorClicked:
editUrl !== ''
? () => {
window.location.href = editUrl;
window.open(editUrl, '_blank');
}
: undefined,
onActionsClicked: undefined,
onTasksClicked: undefined,
onCreateClicked: undefined,
};
const onCreate = async (values: Record<string, JsonValue>) => {
@@ -111,7 +114,7 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
subtitle="Create new software components using standard templates in your organization"
{...props.headerOptions}
>
<ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
<ScaffolderWizardContextMenu {...scaffolderWizardContextMenuProps} />
</Header>
<Workflow
namespace={namespace}