ErrorPanel surfaces cluster title

Signed-off-by: Jamie Klassen <jamie.klassen@broadcom.com>

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

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",

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