fix issue by introducing toolbar for fedrated user (#1417)

* fix issue by introducing toolbar for fedrated user

fixes: #1416

* code review

src/user/UsersSection.tsx

@@ -4,23 +4,29 @@ import {
   ButtonVariant,
   Dropdown,
   DropdownItem,
+  EmptyState,
+  InputGroup,
   KebabToggle,
   Label,
   PageSection,
   Text,
   TextContent,
+  TextInput,
+  Toolbar,
+  ToolbarContent,
   ToolbarItem,
   Tooltip,
 } from "@patternfly/react-core";
 import {
   ExclamationCircleIcon,
   InfoCircleIcon,
+  SearchIcon,
   WarningTriangleIcon,
 } from "@patternfly/react-icons";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useRouteMatch } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
@@ -32,6 +38,7 @@ import { emptyFormatter } from "../util";
 import { toUser } from "./routes/User";
 import "./user-section.css";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import { toAddUser } from "./routes/AddUser";
 
 type BruteUser = UserRepresentation & {
   brute?: Record<string, object>;
@@ -43,8 +50,8 @@ export const UsersSection = () => {
   const { addAlert, addError } = useAlerts();
   const { realm: realmName } = useRealm();
   const history = useHistory();
-  const { url } = useRouteMatch();
   const [listUsers, setListUsers] = useState(false);
+  const [searchUser, setSearchUser] = useState<string>();
   const [realm, setRealm] = useState<RealmRepresentation>();
   const [kebabOpen, setKebabOpen] = useState(false);
   const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
@@ -87,7 +94,7 @@ export const UsersSection = () => {
       max: max!,
     };
 
-    const searchParam = search || "";
+    const searchParam = search || searchUser || "";
     if (searchParam) {
       params.search = searchParam;
     }
@@ -186,7 +193,60 @@ export const UsersSection = () => {
     );
   };
 
-  const goToCreate = () => history.push(`${url}/add-user`);
+  const goToCreate = () => history.push(toAddUser({ realm: realmName }));
+
+  const toolbar = (
+    <>
+      <ToolbarItem>
+        <Button data-testid="add-user" onClick={goToCreate}>
+          {t("addUser")}
+        </Button>
+      </ToolbarItem>
+      {!realm?.bruteForceProtected ? (
+        <ToolbarItem>
+          <Button
+            variant={ButtonVariant.plain}
+            onClick={toggleDeleteDialog}
+            isDisabled={selectedRows.length === 0}
+          >
+            {t("deleteUser")}
+          </Button>
+        </ToolbarItem>
+      ) : (
+        <ToolbarItem>
+          <Dropdown
+            toggle={<KebabToggle onToggle={(open) => setKebabOpen(open)} />}
+            isOpen={kebabOpen}
+            isPlain
+            dropdownItems={[
+              <DropdownItem
+                key="deleteUser"
+                component="button"
+                isDisabled={selectedRows.length === 0}
+                onClick={() => {
+                  toggleDeleteDialog();
+                  setKebabOpen(false);
+                }}
+              >
+                {t("deleteUser")}
+              </DropdownItem>,
+
+              <DropdownItem
+                key="unlock"
+                component="button"
+                onClick={() => {
+                  toggleUnlockUsersDialog();
+                  setKebabOpen(false);
+                }}
+              >
+                {t("unlockAllUsers")}
+              </DropdownItem>,
+            ]}
+          />
+        </ToolbarItem>
+      )}
+    </>
+  );
 
   return (
     <>
@@ -208,9 +268,43 @@ export const UsersSection = () => {
           onSelect={(rows) => setSelectedRows([...rows])}
           emptyState={
             !listUsers ? (
-              <TextContent className="kc-search-users-text">
+              <>
-                <Text>{t("searchForUserDescription")}</Text>
+                <Toolbar>
-              </TextContent>
+                  <ToolbarContent>
+                    <ToolbarItem>
+                      <InputGroup>
+                        <TextInput
+                          name="search-input"
+                          type="search"
+                          aria-label={t("search")}
+                          placeholder={t("users:searchForUser")}
+                          onChange={(value) => {
+                            setSearchUser(value);
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              refresh();
+                            }
+                          }}
+                        />
+                        <Button
+                          variant={ButtonVariant.control}
+                          aria-label={t("common:search")}
+                          onClick={refresh}
+                        >
+                          <SearchIcon />
+                        </Button>
+                      </InputGroup>
+                    </ToolbarItem>
+                    {toolbar}
+                  </ToolbarContent>
+                </Toolbar>
+                <EmptyState data-testid="empty-state" variant="large">
+                  <TextContent className="kc-search-users-text">
+                    <Text>{t("searchForUserDescription")}</Text>
+                  </TextContent>
+                </EmptyState>
+              </>
             ) : (
               <ListEmptyState
                 message={t("noUsersFound")}
@@ -220,61 +314,7 @@ export const UsersSection = () => {
               />
             )
           }
-          toolbarItem={
+          toolbarItem={toolbar}
-            <>
-              <ToolbarItem>
-                <Button data-testid="add-user" onClick={goToCreate}>
-                  {t("addUser")}
-                </Button>
-              </ToolbarItem>
-              {!realm?.bruteForceProtected && (
-                <ToolbarItem>
-                  <Button
-                    variant={ButtonVariant.plain}
-                    onClick={toggleDeleteDialog}
-                    isDisabled={selectedRows.length === 0}
-                  >
-                    {t("deleteUser")}
-                  </Button>
-                </ToolbarItem>
-              )}
-              {realm?.bruteForceProtected && (
-                <ToolbarItem>
-                  <Dropdown
-                    toggle={
-                      <KebabToggle onToggle={() => setKebabOpen(!kebabOpen)} />
-                    }
-                    isOpen={kebabOpen}
-                    isPlain
-                    dropdownItems={[
-                      <DropdownItem
-                        key="deleteUser"
-                        component="button"
-                        isDisabled={selectedRows.length === 0}
-                        onClick={() => {
-                          toggleDeleteDialog();
-                          setKebabOpen(false);
-                        }}
-                      >
-                        {t("deleteUser")}
-                      </DropdownItem>,
-
-                      <DropdownItem
-                        key="unlock"
-                        component="button"
-                        onClick={() => {
-                          toggleUnlockUsersDialog();
-                          setKebabOpen(false);
-                        }}
-                      >
-                        {t("unlockAllUsers")}
-                      </DropdownItem>,
-                    ]}
-                  />
-                </ToolbarItem>
-              )}
-            </>
-          }
           actions={[
             {
               title: t("common:delete"),