tests(catalog): Fix tests & Icon from system icons

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

.changeset/chatty-seals-tap.md

@@ -1,6 +1,5 @@
 ---
 '@backstage/plugin-catalog': patch
-'example-app': patch
 ---
 
 Add link from Template entity to the scaffolder launch page for the template in the AboutCard.

plugins/catalog/api-report.md

@@ -105,6 +105,13 @@ export const catalogPlugin: BackstagePlugin<
       },
       true
     >;
+    selectedTemplateRoute: ExternalRouteRef<
+      {
+        namespace: string;
+        templateName: string;
+      },
+      true
+    >;
   },
   CatalogInputPluginOptions
 >;

plugins/catalog/src/components/AboutCard/AboutCard.test.tsx

@@ -30,7 +30,7 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/react';
 import React from 'react';
-import { viewTechDocRouteRef } from '../../routes';
+import { selectedTemplateRouteRef, viewTechDocRouteRef } from '../../routes';
 import { AboutCard } from './AboutCard';
 
 describe('<AboutCard />', () => {
@@ -505,4 +505,165 @@ describe('<AboutCard />', () => {
     expect(screen.getByText('View TechDocs')).toBeVisible();
     expect(screen.getByText('View TechDocs').closest('a')).toBeNull();
   });
+
+  it('renders launch template link', async () => {
+    const entity = {
+      apiVersion: 'scaffolder.backstage.io/v1beta3',
+      kind: 'Template',
+      metadata: {
+        name: 'create-react-app-template',
+        namespace: 'default',
+      },
+    };
+
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [
+            scmIntegrationsApiRef,
+            ScmIntegrationsApi.fromConfig(
+              new ConfigReader({
+                integrations: {
+                  github: [
+                    {
+                      host: 'github.com',
+                      token: '...',
+                    },
+                  ],
+                },
+              }),
+            ),
+          ],
+          [catalogApiRef, catalogApi],
+        ]}
+      >
+        <EntityProvider entity={entity}>
+          <AboutCard />
+        </EntityProvider>
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+          '/create/templates/:namespace/:templateName':
+            selectedTemplateRouteRef,
+        },
+      },
+    );
+
+    expect(screen.getByText('Launch Template')).toBeVisible();
+    expect(screen.getByText('Launch Template').closest('a')).toHaveAttribute(
+      'href',
+      '/create/templates/default/create-react-app-template',
+    );
+  });
+
+  it.each([
+    {
+      testName: 'entity is not a template',
+      entity: {
+        apiVersion: 'scaffolder.backstage.io/v1beta3',
+        kind: 'Component',
+        metadata: {
+          name: 'create-react-app-template',
+          namespace: 'default',
+        },
+      },
+    },
+    {
+      testName: 'apiVersion is not scaffolder.backstage.io/v1beta3',
+      entity: {
+        apiVersion: 'v1',
+        kind: 'Template',
+        metadata: {
+          name: 'create-react-app-template',
+          namespace: 'default',
+        },
+      },
+    },
+  ])(
+    'should not render launch template link when $testName',
+    async ({ entity }) => {
+      await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [
+              scmIntegrationsApiRef,
+              ScmIntegrationsApi.fromConfig(
+                new ConfigReader({
+                  integrations: {
+                    github: [
+                      {
+                        host: 'github.com',
+                        token: '...',
+                      },
+                    ],
+                  },
+                }),
+              ),
+            ],
+            [catalogApiRef, catalogApi],
+          ]}
+        >
+          <EntityProvider entity={entity}>
+            <AboutCard />
+          </EntityProvider>
+        </TestApiProvider>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+            '/create/templates/:namespace/:templateName':
+              selectedTemplateRouteRef,
+          },
+        },
+      );
+
+      expect(screen.queryByText('Launch Template')).toBeNull();
+    },
+  );
+
+  it('renders disabled launch template link when route is not bound', async () => {
+    const entity = {
+      apiVersion: 'scaffolder.backstage.io/v1beta3',
+      kind: 'Template',
+      metadata: {
+        name: 'create-react-app-template',
+        namespace: 'default',
+      },
+    };
+
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [
+            scmIntegrationsApiRef,
+            ScmIntegrationsApi.fromConfig(
+              new ConfigReader({
+                integrations: {
+                  github: [
+                    {
+                      host: 'github.com',
+                      token: '...',
+                    },
+                  ],
+                },
+              }),
+            ),
+          ],
+          [catalogApiRef, catalogApi],
+        ]}
+      >
+        <EntityProvider entity={entity}>
+          <AboutCard />
+        </EntityProvider>
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(screen.getByText('Launch Template')).toBeVisible();
+    expect(screen.getByText('Launch Template').closest('a')).toBeNull();
+  });
 });

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -30,6 +30,7 @@ import {
   alertApiRef,
   errorApiRef,
   useApi,
+  useApp,
   useRouteRef,
 } from '@backstage/core-plugin-api';
 import {
@@ -90,8 +91,8 @@ export interface AboutCardProps {
 /**
  * Exported publicly via the EntityAboutCard
  */
-export function AboutCard(props: AboutCardProps) {
-  const { variant } = props;
+export function AboutCard({ variant }: AboutCardProps) {
+  const app = useApp();
   const classes = useStyles();
   const { entity } = useEntity();
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
@@ -132,9 +133,12 @@ export function AboutCard(props: AboutCardProps) {
   const subHeaderLinks = [viewInSource, viewInTechDocs];
 
   if (isTemplateEntityV1beta3(entity)) {
+    const Icon = app.getSystemIcon('scaffolder') ?? AddIcon;
+
     const launchTemplate: IconLinkVerticalProps = {
       label: 'Launch Template',
-      icon: <AddIcon />,
+      icon: <Icon />,
+      disabled: !templateRoute,
       href:
         templateRoute &&
         templateRoute({

plugins/scaffolder-backend-module-gitlab/api-report.md

@@ -26,8 +26,8 @@ export const createGitlabProjectAccessTokenAction: (options: {
   integrations: ScmIntegrationRegistry;
 }) => TemplateAction<
   {
-    projectId: string | number;
     repoUrl: string;
+    projectId: string | number;
     token?: string | undefined;
     name?: string | undefined;
     accessLevel?: number | undefined;
@@ -44,8 +44,8 @@ export const createGitlabProjectDeployTokenAction: (options: {
 }) => TemplateAction<
   {
     name: string;
-    projectId: string | number;
     repoUrl: string;
+    projectId: string | number;
     token?: string | undefined;
     username?: string | undefined;
     scopes?: string[] | undefined;
@@ -63,8 +63,8 @@ export const createGitlabProjectVariableAction: (options: {
   {
     key: string;
     value: string;
-    projectId: string | number;
     repoUrl: string;
+    projectId: string | number;
     variableType: string;
     token?: string | undefined;
     variableProtected?: boolean | undefined;