From 29851861600c5998c3ce51365dbad78a0809c40d Mon Sep 17 00:00:00 2001
From: Alec Jacobs <cajacobs5401@gmail.com>
Date: Tue, 30 Jan 2024 16:17:29 -0800
Subject: [PATCH] fix(scaffolder-react): prevent erroneous render when empty
 links are provided

Signed-off-by: Alec Jacobs <cajacobs5401@gmail.com>
---
 .changeset/weak-news-jam.md                   |  5 ++
 .../TemplateCard/TemplateCard.test.tsx        | 82 +++++++++++++++++++
 .../components/TemplateCard/TemplateCard.tsx  |  3 +-
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/weak-news-jam.md

diff --git a/.changeset/weak-news-jam.md b/.changeset/weak-news-jam.md
new file mode 100644
index 0000000000..a1f44082da
--- /dev/null
+++ b/.changeset/weak-news-jam.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Fix bug that erroneously caused a separator or a 0 to render in the TemplateCard for Templates with empty links
diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx
index 5c373411fa..2e2a147ad1 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx
@@ -149,6 +149,88 @@ describe('TemplateCard', () => {
     }
   });
 
+  it('should not render links section when empty links are defined', async () => {
+    const mockTemplate: TemplateEntityV1beta3 = {
+      apiVersion: 'scaffolder.backstage.io/v1beta3',
+      kind: 'Template',
+      metadata: { name: 'bob', tags: [], links: [] },
+      spec: {
+        steps: [],
+        type: 'service',
+      },
+      relations: [
+        {
+          targetRef: 'group:default/my-test-user',
+          type: RELATION_OWNED_BY,
+        },
+      ],
+    };
+
+    const { queryByRole, queryByText } = await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [
+            starredEntitiesApiRef,
+            new DefaultStarredEntitiesApi({
+              storageApi: MockStorageApi.create(),
+            }),
+          ],
+        ]}
+      >
+        <TemplateCard template={mockTemplate} />
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:kind/:namespace/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(queryByRole('separator')).not.toBeInTheDocument();
+    expect(queryByText('0')).not.toBeInTheDocument();
+  });
+
+  it('should not render links section when empty additional links are defined', async () => {
+    const mockTemplate: TemplateEntityV1beta3 = {
+      apiVersion: 'scaffolder.backstage.io/v1beta3',
+      kind: 'Template',
+      metadata: { name: 'bob', tags: [], links: [] },
+      spec: {
+        steps: [],
+        type: 'service',
+      },
+      relations: [
+        {
+          targetRef: 'group:default/my-test-user',
+          type: RELATION_OWNED_BY,
+        },
+      ],
+    };
+
+    const { queryByRole, queryByText } = await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [
+            starredEntitiesApiRef,
+            new DefaultStarredEntitiesApi({
+              storageApi: MockStorageApi.create(),
+            }),
+          ],
+        ]}
+      >
+        <TemplateCard template={mockTemplate} additionalLinks={[]} />
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:kind/:namespace/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(queryByRole('separator')).not.toBeInTheDocument();
+    expect(queryByText('0')).not.toBeInTheDocument();
+  });
+
   it('should render a link to the owner', async () => {
     const mockTemplate: TemplateEntityV1beta3 = {
       apiVersion: 'scaffolder.backstage.io/v1beta3',
diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx
index 7850137945..6bcff0b0ce 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx
@@ -136,7 +136,8 @@ export const TemplateCard = (props: TemplateCardProps) => {
               </Grid>
             </>
           )}
-          {(props.additionalLinks || template.metadata.links?.length) && (
+          {(!!props.additionalLinks?.length ||
+            !!template.metadata.links?.length) && (
             <>
               <Grid item xs={12}>
                 <Divider />