Add empty state

elastic · Mar 13, 2020 · 227ed69 · 227ed69
1 parent caabb1f
commit 227ed69
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/..._manager/public/applications/ingest_manager/sections/epm/components/package_list_grid.tsx b/..._manager/public/applications/ingest_manager/sections/epm/components/package_list_grid.tsx
@@ -12,8 +12,10 @@ import {
   EuiTitle,
   // @ts-ignore
   EuiSearchBar,
+  EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { Loading } from '../../../components';
 import { PackageList } from '../../../types';
 import { useLocalSearch, searchIdField } from '../hooks';
@@ -102,11 +104,24 @@ type GridColumnProps = {
 function GridColumn({ list }: GridColumnProps) {
   return (
     <EuiFlexGrid gutterSize="l" columns={3}>
-      {list.map(item => (
-        <EuiFlexItem key={`${item.name}-${item.version}`}>
-          <PackageCard {...item} />
+      {list.length ? (
+        list.map(item => (
+          <EuiFlexItem key={`${item.name}-${item.version}`}>
+            <PackageCard {...item} />
+          </EuiFlexItem>
+        ))
+      ) : (
+        <EuiFlexItem>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.ingestManager.epmList.noPackagesFoundPlaceholder"
+                defaultMessage="No packages found"
+              />
+            </p>
+          </EuiText>
         </EuiFlexItem>
-      ))}
+      )}
     </EuiFlexGrid>
   );
 }
diff --git a/...ins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/home/index.tsx b/...ins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/home/index.tsx
@@ -61,7 +61,7 @@ function InstalledPackages() {
   const { data: allPackages, isLoading: isLoadingPackages } = useGetPackages();
   const [selectedCategory, setSelectedCategory] = useState('');
   const packages =
-    allPackages && allPackages.response
+    allPackages && allPackages.response && selectedCategory === ''
       ? allPackages.response.filter(pkg => pkg.status === 'installed')
       : [];
 
@@ -82,7 +82,7 @@ function InstalledPackages() {
       title: i18n.translate('xpack.ingestManager.epmList.updatesAvailableFilterLinkText', {
         defaultMessage: 'Updates available',
       }),
-      count: 0,
+      count: 0, // TODO: Update with real count when available
     },
   ];