added search empty state (#435)

src/common-messages.json

@@ -14,6 +14,8 @@
     "delete": "Delete",
     "remove": "Remove",
     "search": "Search",
+    "noSearchResults": "No search results",
+    "noSearchResultsInstructions": "Click on the search bar above to search",
     "next": "Next",
     "back": "Back",
     "finish": "Finish",

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -17,6 +17,7 @@ import _ from "lodash";
 import { PaginatingTableToolbar } from "./PaginatingTableToolbar";
 import { TableToolbar } from "./TableToolbar";
 import { asyncStateFetch } from "../../context/auth/AdminClient";
+import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 
 type Row<T> = {
   data: T;
@@ -212,11 +213,10 @@ export function KeycloakDataTable<T>({
     });
 
   const searchOnChange = (value: string) => {
-    if (isPaginated) {
-      setSearch(value);
-    } else {
-      filter(value);
+    if (value === "") {
+      refresh();
     }
+    setSearch(value);
   };
 
   const Loading = () => (
@@ -242,7 +242,7 @@ export function KeycloakDataTable<T>({
 
   return (
     <>
-      {rows && (rows.length > 0 || !emptyState) && isPaginated && (
+      {rows && isPaginated && (
         <PaginatingTableToolbar
           count={rows.length}
           first={first}
@@ -262,7 +262,7 @@ export function KeycloakDataTable<T>({
           searchTypeComponent={searchTypeComponent}
           toolbarItem={toolbarItem}
         >
-          {!loading && (
+          {!loading && rows.length > 0 && (
             <DataTable
               canSelectAll={canSelectAll}
               onSelect={onSelect ? _onSelect : undefined}
@@ -273,6 +273,14 @@ export function KeycloakDataTable<T>({
               ariaLabelKey={ariaLabelKey}
             />
           )}
+          {!loading && rows.length === 0 && search !== "" && (
+            <ListEmptyState
+              hasIcon={true}
+              isSearchVariant={true}
+              message={t("noSearchResults")}
+              instructions={t("noSearchResultsInstructions")}
+            />
+          )}
           {loading && <Loading />}
         </PaginatingTableToolbar>
       )}
@@ -282,12 +290,12 @@ export function KeycloakDataTable<T>({
             searchPlaceholderKey ? `${ariaLabelKey}input` : undefined
           }
           inputGroupOnChange={searchOnChange}
-          inputGroupOnClick={() => {}}
+          inputGroupOnClick={() => filter(search)}
           inputGroupPlaceholder={t(searchPlaceholderKey || "")}
           toolbarItem={toolbarItem}
           searchTypeComponent={searchTypeComponent}
         >
-          {!loading && (
+          {!loading && (filteredData || rows).length > 0 && (
             <DataTable
               canSelectAll={canSelectAll}
               onSelect={onSelect ? _onSelect : undefined}
@@ -298,10 +306,18 @@ export function KeycloakDataTable<T>({
               ariaLabelKey={ariaLabelKey}
             />
           )}
+          {!loading && filteredData && filteredData.length === 0 && (
+            <ListEmptyState
+              hasIcon={true}
+              isSearchVariant={true}
+              message={t("noSearchResults")}
+              instructions={t("noSearchResultsInstructions")}
+            />
+          )}
           {loading && <Loading />}
         </TableToolbar>
       )}
-      <>{!loading && rows?.length === 0 && emptyState}</>
+      <>{!loading && rows?.length === 0 && search === "" && emptyState}</>
     </>
   );
 }

src/components/table-toolbar/PaginatingTableToolbar.tsx

@@ -65,10 +65,14 @@ export const PaginatingTableToolbar = ({
       toolbarItem={
         <>
           {toolbarItem}
+          {count !== 0 && (
             <ToolbarItem variant="pagination">{pagination()}</ToolbarItem>
+          )}
         </>
       }
-      toolbarItemFooter={<ToolbarItem>{pagination("bottom")}</ToolbarItem>}
+      toolbarItemFooter={
+        count !== 0 && <ToolbarItem>{pagination("bottom")}</ToolbarItem>
+      }
       inputGroupName={inputGroupName}
       inputGroupPlaceholder={inputGroupPlaceholder}
       inputGroupOnChange={inputGroupOnChange}