From bece0905722440bbb43a9d05021181985b00f493 Mon Sep 17 00:00:00 2001
From: Dominik Henneke <dominik.henneke@sda-se.com>
Date: Mon, 1 Mar 2021 17:10:42 +0100
Subject: [PATCH 1/2] Improve rendering of multiple support item links in the
 SupportButton

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>
---
 .changeset/rude-ways-camp.md                         |  5 +++++
 .../src/components/SupportButton/SupportButton.tsx   | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rude-ways-camp.md

diff --git a/.changeset/rude-ways-camp.md b/.changeset/rude-ways-camp.md
new file mode 100644
index 0000000000..37413141bd
--- /dev/null
+++ b/.changeset/rude-ways-camp.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Improve rendering of multiple support item links in the `SupportButton`
diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
index 7c532c0f8f..09bd27de2f 100644
--- a/packages/core/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -66,12 +66,12 @@ const SupportListItem = ({ item }: { item: SupportItem }) => {
       <ListItemText
         primary={item.title}
         secondary={
-          <>
-            {item.links &&
-              item.links.map(link => (
-                <SupportLink link={link} key={link.url} />
-              ))}
-          </>
+          item.links &&
+          item.links
+            .map<React.ReactNode>(link => (
+              <SupportLink link={link} key={link.url} />
+            ))
+            .reduce((prev, curr, idx) => [prev, <br key={idx} />, curr])
         }
       />
     </ListItem>

From e40fafd92fbb9ee5243ae5ef0b505d377e5b310d Mon Sep 17 00:00:00 2001
From: Dominik Henneke <dominik.henneke@sda-se.com>
Date: Wed, 3 Mar 2021 16:25:59 +0100
Subject: [PATCH 2/2] Reduce the depth of the node tree

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>
---
 .../components/SupportButton/SupportButton.tsx   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
index 09bd27de2f..eea2b000ca 100644
--- a/packages/core/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -65,14 +65,14 @@ const SupportListItem = ({ item }: { item: SupportItem }) => {
       </ListItemIcon>
       <ListItemText
         primary={item.title}
-        secondary={
-          item.links &&
-          item.links
-            .map<React.ReactNode>(link => (
-              <SupportLink link={link} key={link.url} />
-            ))
-            .reduce((prev, curr, idx) => [prev, <br key={idx} />, curr])
-        }
+        secondary={item.links?.reduce<React.ReactNodeArray>(
+          (prev, link, idx) => [
+            ...prev,
+            idx > 0 && <br key={idx} />,
+            <SupportLink link={link} key={link.url} />,
+          ],
+          [],
+        )}
       />
     </ListItem>
   );