From 6422f7b45af151631c28bc60bc5511eb99533ac3 Mon Sep 17 00:00:00 2001 From: kosukeKK Date: Sat, 2 Mar 2024 01:16:21 +0900 Subject: [PATCH] move template edit url to header Signed-off-by: kosukeKK --- .../components/Workflow/Workflow.test.tsx | 74 +------------------ .../src/next/components/Workflow/Workflow.tsx | 15 +--- .../TemplateWizardPage.test.tsx | 64 ++++++++++++++++ .../TemplateWizardPage/TemplateWizardPage.tsx | 21 +++++- 4 files changed, 88 insertions(+), 86 deletions(-) diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx index e431e66ca2..81c5a697e0 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx @@ -20,7 +20,7 @@ import { renderInTestApp, TestApiRegistry, } from '@backstage/test-utils'; -import { act, fireEvent, screen } from '@testing-library/react'; +import { act, fireEvent } from '@testing-library/react'; import React from 'react'; import { Workflow } from './Workflow'; import { analyticsApiRef } from '@backstage/core-plugin-api'; @@ -75,7 +75,7 @@ describe('', () => { title: 'React JSON Schema Form Test', }); - const { getByRole, getByText } = await renderInTestApp( + const { getByRole, getAllByRole, getByText } = await renderInTestApp( ', () => { ).toBeDefined(); await act(async () => { - fireEvent.click(getByText('Make') as HTMLButtonElement); + fireEvent.click(getAllByRole('button')[1] as HTMLButtonElement); }); expect(onCreate).toHaveBeenCalledWith({ @@ -141,72 +141,4 @@ describe('', () => { age: '53', }); }); - it('renders "edit template" button', async () => { - const onCreate = jest.fn(); - const onError = jest.fn(); - const expectedUrl = '/EDIT_URL'; - scaffolderApiMock.getTemplateParameterSchema.mockResolvedValue({ - editUrl: expectedUrl, - steps: [ - { - title: 'Step 1', - schema: {}, - }, - ], - title: 'React JSON Schema Form Test', - }); - await renderInTestApp( - - - , - ); - const editLink = screen.getByTitle('Edit Template').closest('a'); - expect(editLink).toHaveAttribute('href', expectedUrl); - }); - it('renders disable "edit template" button', async () => { - const onCreate = jest.fn(); - const onError = jest.fn(); - scaffolderApiMock.getTemplateParameterSchema.mockResolvedValue({ - steps: [ - { - title: 'Step 1', - schema: {}, - }, - ], - editUrl: undefined, - title: 'React JSON Schema Form Test', - }); - await renderInTestApp( - - - , - ); - const editLink = screen.getByTitle('Edit Template'); - expect(editLink).toBeVisible(); - expect(editLink).toHaveAttribute('href', '/'); - }); }); diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx index 660f115064..c6030930c5 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx @@ -20,7 +20,6 @@ import { InfoCard, MarkdownContent, Progress, - Link, } from '@backstage/core-components'; import { stringifyEntityRef } from '@backstage/catalog-model'; import { makeStyles } from '@material-ui/core'; @@ -30,8 +29,6 @@ import { Stepper, type StepperProps } from '../Stepper/Stepper'; import { SecretsContextProvider } from '../../../secrets/SecretsContext'; import { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; -import IconButton from '@material-ui/core/IconButton'; -import EditIcon from '@material-ui/icons/Edit'; const useStyles = makeStyles({ markdown: { @@ -96,23 +93,13 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => { if (error) { return props.onError(error); } + return ( {loading && } {sortedManifest && ( - - - } subheader={ { context: { entityRef: 'template:default/test' }, }); }); + 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', + }, + }, + }, + }, + ], + title: 'React JSON Schema Form Test', + editUrl: 'http://example.com/load-testing', + }); + const { queryByTestId } = await renderInTestApp( + + + , + + , + { + mountedRoutes: { + '/create': rootRouteRef, + }, + }, + ); + 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', + }, + }, + }, + }, + ], + title: 'React JSON Schema Form Test', + editUrl: undefined, + }); + const { queryByTestId } = await renderInTestApp( + + + , + + , + { + mountedRoutes: { + '/create': rootRouteRef, + }, + }, + ); + expect(queryByTestId('menu-button')).not.toBeInTheDocument(); + }); + }); }); diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx index 611330e76b..5b02454385 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx +++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx @@ -30,6 +30,7 @@ import { FieldExtensionOptions, ReviewStepProps, } from '@backstage/plugin-scaffolder-react'; +import { ScaffolderPageContextMenu } 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'; @@ -73,6 +74,22 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => { name: templateName, }); + const [editUrl, setEditURL] = React.useState(''); + scaffolderApi.getTemplateParameterSchema(templateRef).then(data => { + if (data.editUrl !== undefined) setEditURL(data.editUrl); + }); + const scaffolderPageContextMenuProps = { + onEditorClicked: + editUrl !== '' + ? () => { + window.location.href = editUrl; + } + : undefined, + onActionsClicked: undefined, + onTasksClicked: undefined, + onCreateClicked: undefined, + }; + const onCreate = async (values: Record) => { const { taskId } = await scaffolderApi.scaffold({ templateRef, @@ -93,7 +110,9 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => { title="Create a new component" subtitle="Create new software components using standard templates in your organization" {...props.headerOptions} - /> + > + +