added client list search (#133)

* added client list search

* changed to only search onClick

src/clients/ClientsSection.tsx

@@ -1,9 +1,8 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, PageSection } from "@patternfly/react-core";
+import { Button, PageSection, Spinner } from "@patternfly/react-core";
 
-import { DataLoader } from "../components/data-loader/DataLoader";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
 import { ClientList } from "./ClientList";
 import { HttpClientContext } from "../http-service/HttpClientContext";
@@ -18,16 +17,29 @@ export const ClientsSection = () => {
 
   const [max, setMax] = useState(10);
   const [first, setFirst] = useState(0);
+  const [search, setSearch] = useState("");
+  const [clients, setClients] = useState<ClientRepresentation[]>();
   const httpClient = useContext(HttpClientContext)!;
   const keycloak = useContext(KeycloakContext);
   const { realm } = useContext(RealmContext);
 
   const loader = async () => {
-    return await httpClient
-      .doGet(`/admin/realms/${realm}/clients`, { params: { first, max } })
-      .then((r) => r.data as ClientRepresentation[]);
+    const params: { [name: string]: string | number } = { first, max };
+    if (search) {
+      params.clientId = search;
+      params.search = "true";
+    }
+    const result = await httpClient.doGet<ClientRepresentation[]>(
+      `/admin/realms/${realm}/clients`,
+      { params: params }
+    );
+    setClients(result.data);
   };
 
+  useEffect(() => {
+    loader();
+  }, []);
+
   return (
     <>
       <ViewHeader
@@ -35,41 +47,46 @@ export const ClientsSection = () => {
         subKey="clients:clientsExplain"
       />
       <PageSection variant="light">
-        <DataLoader loader={loader}>
-          {(clients) => (
-            <TableToolbar
-              count={clients!.length}
-              first={first}
-              max={max}
-              onNextClick={setFirst}
-              onPreviousClick={setFirst}
-              onPerPageSelect={(first, max) => {
-                setFirst(first);
-                setMax(max);
-              }}
-              inputGroupName="clientsToolbarTextInput"
-              inputGroupPlaceholder={t("Search for client")}
-              toolbarItem={
-                <>
-                  <Button onClick={() => history.push("/add-client")}>
-                    {t("createClient")}
-                  </Button>
-                  <Button
-                    onClick={() => history.push("/import-client")}
-                    variant="link"
-                  >
-                    {t("importClient")}
-                  </Button>
-                </>
-              }
-            >
-              <ClientList
-                clients={clients}
-                baseUrl={keycloak!.authServerUrl()!}
-              />
-            </TableToolbar>
-          )}
-        </DataLoader>
+        {!clients && (
+          <div style={{ textAlign: "center" }}>
+            <Spinner />
+          </div>
+        )}
+        {clients && (
+          <TableToolbar
+            count={clients!.length}
+            first={first}
+            max={max}
+            onNextClick={setFirst}
+            onPreviousClick={setFirst}
+            onPerPageSelect={(first, max) => {
+              setFirst(first);
+              setMax(max);
+            }}
+            inputGroupName="clientsToolbarTextInput"
+            inputGroupOnChange={setSearch}
+            inputGroupOnClick={() => loader()}
+            inputGroupPlaceholder={t("Search for client")}
+            toolbarItem={
+              <>
+                <Button onClick={() => history.push("/add-client")}>
+                  {t("createClient")}
+                </Button>
+                <Button
+                  onClick={() => history.push("/import-client")}
+                  variant="link"
+                >
+                  {t("importClient")}
+                </Button>
+              </>
+            }
+          >
+            <ClientList
+              clients={clients}
+              baseUrl={keycloak!.authServerUrl()!}
+            />
+          </TableToolbar>
+        )}
       </PageSection>
     </>
   );

src/components/table-toolbar/TableToolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import {
   ToggleTemplateProps,
   Toolbar,
@@ -28,6 +28,7 @@ type TableToolbarProps = {
     newInput: string,
     event: React.FormEvent<HTMLInputElement>
   ) => void;
+  inputGroupOnClick?: MouseEventHandler;
 };
 
 export const TableToolbar = ({
@@ -42,6 +43,7 @@ export const TableToolbar = ({
   inputGroupName,
   inputGroupPlaceholder,
   inputGroupOnChange,
+  inputGroupOnClick,
 }: TableToolbarProps) => {
   const { t } = useTranslation("groups");
   const page = first / max;
@@ -82,6 +84,7 @@ export const TableToolbar = ({
                   <Button
                     variant={ButtonVariant.control}
                     aria-label={t("Search")}
+                    onClick={inputGroupOnClick}
                   >
                     <SearchIcon />
                   </Button>