🤯 Added ES index delete option in the UI

src/client/components/Library/Library.tsx

@@ -25,6 +25,7 @@ interface IComicBookLibraryProps {
 export const Library = (data: IComicBookLibraryProps): ReactElement => {
   const { searchResults } = data.data;
 
+  console.log(searchResults);
   // programatically navigate to comic detail
   const navigate = useNavigate();
   const navigateToComicDetail = (row) => {
@@ -183,7 +184,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
       ),
     );
   }, []);
-
   return (
     <section className="container">
       <div className="section">

src/client/components/Library/LibraryContainer.tsx

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
 import React, { ReactElement, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
@@ -25,11 +25,38 @@ const LibraryContainer = () => {
   const searchResults = useSelector(
     (state: RootState) => state.fileOps.librarySearchResults,
   );
+  const searchError = useSelector(
+    (state: RootState) => state.fileOps.librarySearchError,
+  );
+
+  console.log(searchError);
 
   return !isEmpty(searchResults) ? (
     <Library data={{ searchResults }} />
   ) : (
-    "No data found."
+    <div className="container">
+      <section className="section is-small">
+        <div className="columns">
+          <div className="column is-two-thirds">
+            <article className="message is-link">
+              <div className="message-body">
+                No comics were found in the library, Elasticsearch reports no
+                indices. Try importing a few comics into the library and come
+                back.
+              </div>
+            </article>
+            <pre>
+              {!isUndefined(searchError.data) &&
+                JSON.stringify(
+                  searchError.data.meta.body.error.root_cause,
+                  null,
+                  4,
+                )}
+            </pre>
+          </div>
+        </div>
+      </section>
+    </div>
   );
 };