move template edit url to header
Signed-off-by: kosukeKK <koskacts@gmail.com>
This commit is contained in:
kosukeKK
@@ -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('<Workflow />', () => {
|
||||
title: 'React JSON Schema Form Test',
|
||||
});
|
||||
|
||||
const { getByRole, getByText } = await renderInTestApp(
|
||||
const { getByRole, getAllByRole, getByText } = await renderInTestApp(
|
||||
<ApiProvider apis={apis}>
|
||||
<Workflow
|
||||
title="Different title than template"
|
||||
@@ -133,7 +133,7 @@ describe('<Workflow />', () => {
|
||||
).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('<Workflow />', () => {
|
||||
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(
|
||||
<ApiProvider apis={apis}>
|
||||
<Workflow
|
||||
title="test"
|
||||
description="test description"
|
||||
onCreate={onCreate}
|
||||
onError={onError}
|
||||
namespace="default"
|
||||
templateName="docs-template"
|
||||
initialState={{
|
||||
name: 'prefilled-name',
|
||||
age: '53',
|
||||
}}
|
||||
extensions={[]}
|
||||
/>
|
||||
</ApiProvider>,
|
||||
);
|
||||
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(
|
||||
<ApiProvider apis={apis}>
|
||||
<Workflow
|
||||
title="test"
|
||||
description="test description"
|
||||
onCreate={onCreate}
|
||||
onError={onError}
|
||||
namespace="default"
|
||||
templateName="docs-template"
|
||||
initialState={{
|
||||
name: 'prefilled-name',
|
||||
age: '53',
|
||||
}}
|
||||
extensions={[]}
|
||||
/>
|
||||
</ApiProvider>,
|
||||
);
|
||||
const editLink = screen.getByTitle('Edit Template');
|
||||
expect(editLink).toBeVisible();
|
||||
expect(editLink).toHaveAttribute('href', '/');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 (
|
||||
<Content>
|
||||
{loading && <Progress />}
|
||||
{sortedManifest && (
|
||||
<InfoCard
|
||||
title={title ?? sortedManifest.title}
|
||||
action={
|
||||
<IconButton
|
||||
component={Link}
|
||||
aria-label="Edit"
|
||||
title="Edit Template"
|
||||
to={sortedManifest.editUrl ?? '#'}
|
||||
disabled={!sortedManifest.editUrl}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
}
|
||||
subheader={
|
||||
<MarkdownContent
|
||||
className={styles.markdown}
|
||||
|
||||
@@ -117,4 +117,68 @@ describe('TemplateWizardPage', () => {
|
||||
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(
|
||||
<ApiProvider apis={apis}>
|
||||
<SecretsContextProvider>
|
||||
<TemplateWizardPage customFieldExtensions={[]} />,
|
||||
</SecretsContextProvider>
|
||||
</ApiProvider>,
|
||||
{
|
||||
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(
|
||||
<ApiProvider apis={apis}>
|
||||
<SecretsContextProvider>
|
||||
<TemplateWizardPage customFieldExtensions={[]} />,
|
||||
</SecretsContextProvider>
|
||||
</ApiProvider>,
|
||||
{
|
||||
mountedRoutes: {
|
||||
'/create': rootRouteRef,
|
||||
},
|
||||
},
|
||||
);
|
||||
expect(queryByTestId('menu-button')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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<string, JsonValue>) => {
|
||||
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}
|
||||
/>
|
||||
>
|
||||
<ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
|
||||
</Header>
|
||||
<Workflow
|
||||
namespace={namespace}
|
||||
templateName={templateName}
|
||||
|
||||
Reference in New Issue
Block a user