From 019c67a02280e39e25f07c92745c36bf849846ea Mon Sep 17 00:00:00 2001
From: Askar <ask.register@gmail.com>
Date: Thu, 19 Nov 2020 13:39:22 +0100
Subject: [PATCH] fix(search): return EmptyState/Progress bar/Alert depending
 on result of api call (#3350)

* fix(search): return EmptyState/Progress bar/Alert depending on result of api request

* Update plugins/search/src/components/SearchResult/SearchResult.tsx

Co-authored-by: Emma Indal <emma.indahl@gmail.com>

Co-authored-by: Emma Indal <emma.indahl@gmail.com>
---
 .../components/SearchResult/SearchResult.tsx  | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/plugins/search/src/components/SearchResult/SearchResult.tsx b/plugins/search/src/components/SearchResult/SearchResult.tsx
index a4985c20fb..e4163c0de7 100644
--- a/plugins/search/src/components/SearchResult/SearchResult.tsx
+++ b/plugins/search/src/components/SearchResult/SearchResult.tsx
@@ -17,7 +17,14 @@ import React, { useState, useEffect } from 'react';
 import { useAsync } from 'react-use';
 
 import { makeStyles, Typography, Grid, Divider } from '@material-ui/core';
-import { Table, TableColumn, useApi } from '@backstage/core';
+import { Alert } from '@material-ui/lab';
+import {
+  EmptyState,
+  Progress,
+  Table,
+  TableColumn,
+  useApi,
+} from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 
 import { FiltersButton, Filters, FiltersState } from '../Filters';
@@ -159,8 +166,19 @@ export const SearchResult = ({ searchQuery }: SearchResultProps) => {
       setFilteredResults(withFilters);
     }
   }, [filters, searchQuery, results]);
-
-  if (loading || error || !results) return null;
+  if (loading) {
+    return <Progress />;
+  }
+  if (error) {
+    return (
+      <Alert severity="error">
+        Error encountered while fetching search results. {error.toString()}
+      </Alert>
+    );
+  }
+  if (!results || results.length === 0) {
+    return <EmptyState missing="data" title="Sorry, no results were found" />;
+  }
 
   const resetFilters = () => {
     setFilters({