From 74770c81ec78276c23ce14ea78e57029d90703d4 Mon Sep 17 00:00:00 2001
From: Jamie Klassen <jamie.klassen@broadcom.com>
Date: Tue, 23 Jan 2024 10:33:19 -0500
Subject: [PATCH] ErrorPanel surfaces cluster title

Signed-off-by: Jamie Klassen <jamie.klassen@broadcom.com>
---
 .changeset/fresh-paws-raise.md                              | 6 ++++++
 .../src/components/ErrorPanel/ErrorPanel.test.tsx           | 4 ++--
 .../src/components/ErrorPanel/ErrorPanel.tsx                | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fresh-paws-raise.md

diff --git a/.changeset/fresh-paws-raise.md b/.changeset/fresh-paws-raise.md
new file mode 100644
index 0000000000..61712db1e8
--- /dev/null
+++ b/.changeset/fresh-paws-raise.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-kubernetes-react': patch
+---
+
+The `ErrorPanel` component will display the `title` field (when specified) for
+clusters with errors.
diff --git a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx
index 5c7b10697c..3917cf4513 100644
--- a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx
+++ b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx
@@ -26,7 +26,7 @@ describe('ErrorPanel', () => {
         entityName="THIS_ENTITY"
         clustersWithErrors={[
           {
-            cluster: { name: 'THIS_CLUSTER' },
+            cluster: { name: 'THIS_CLUSTER', title: 'This Fine Cluster' },
             resources: [],
             podMetrics: [],
             errors: [
@@ -50,7 +50,7 @@ describe('ErrorPanel', () => {
 
     // message
     expect(screen.getByText('Errors:')).toBeInTheDocument();
-    expect(screen.getByText('Cluster: THIS_CLUSTER')).toBeInTheDocument();
+    expect(screen.getByText('Cluster: This Fine Cluster')).toBeInTheDocument();
     expect(
       screen.getByText(
         "Error fetching Kubernetes resource: 'some/resource', error: SYSTEM_ERROR, status code: 500",
diff --git a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx
index b02f4c18dc..7109849b8e 100644
--- a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx
+++ b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx
@@ -25,7 +25,9 @@ const clustersWithErrorsToErrorMessage = (
   return clustersWithErrors.map((c, i) => {
     return (
       <div key={i}>
-        <Typography variant="body2">{`Cluster: ${c.cluster.name}`}</Typography>
+        <Typography variant="body2">{`Cluster: ${
+          c.cluster.title || c.cluster.name
+        }`}</Typography>
         {c.errors.map((e, j) => {
           return (
             <Typography variant="body2" key={j}>