From 4074aff376baed737979a1176ba489a573512f69 Mon Sep 17 00:00:00 2001
From: Chanwit Kaewkasi <chanwit@gmail.com>
Date: Fri, 12 Jun 2020 14:19:29 +0700
Subject: [PATCH] gitops-plugin: add meaningful error message for the cluster
 listing page

---
 .../components/ClusterList/ClusterList.tsx    | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
index 0bdad1c8ab..8e5aa15aa9 100644
--- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
+++ b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
@@ -28,16 +28,21 @@ import {
 } from '@backstage/core';
 
 import ClusterTable from '../ClusterTable/ClusterTable';
-import { Button, Typography } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import { useAsync, useLocalStorage } from 'react-use';
 import { gitOpsApiRef, ListClusterStatusesResponse } from '../../api';
+import { Alert } from '@material-ui/lab';
 
 const ClusterList: FC<{}> = () => {
   const [loginInfo] = useLocalStorage<{
     token: string;
     username: string;
     name: string;
-  }>('githubLoginDetails');
+  }>('githubLoginDetails', {
+    token: '',
+    username: '',
+    name: 'Guest',
+  });
 
   const api = useApi(gitOpsApiRef);
 
@@ -59,9 +64,19 @@ const ClusterList: FC<{}> = () => {
   } else if (error) {
     content = (
       <Content>
-        <Typography variant="h4" color="error">
-          Failed to load cluster, {String(error)}
-        </Typography>
+        <div>
+          <Alert severity="error">
+            Error encountered while fetching list of GitOps-managed cluster.{' '}
+            {error.toString()}
+          </Alert>
+          <Alert severity="info">
+            Please make sure that you start GitOps-API backend on localhost port
+            3008 before using this plugin.
+          </Alert>
+          <Alert severity="info">
+            If you're Guest, please login via GitHub first.
+          </Alert>
+        </div>
       </Content>
     );
   } else {