added ScaffolderWizardContextMenu and revert backend api

Signed-off-by: kosukeKK <koskacts@gmail.com>

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx

@@ -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

@@ -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}