From b5e2fb802c465bdc16f3b2c702bfc6d2b8d7ecb0 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 16 Aug 2021 14:35:39 +0200
Subject: [PATCH] fixed breadcrumb for search and seach box distance (#998)

Co-authored-by: Jon Koops <jonkoops@gmail.com>
---
 .../bread-crumb/GroupBreadCrumbs.tsx          |  38 +++---
 src/groups/SearchGroups.tsx                   | 125 ++++++++++--------
 2 files changed, 92 insertions(+), 71 deletions(-)

diff --git a/src/components/bread-crumb/GroupBreadCrumbs.tsx b/src/components/bread-crumb/GroupBreadCrumbs.tsx
index e26bf1b7be..37d191e7d7 100644
--- a/src/components/bread-crumb/GroupBreadCrumbs.tsx
+++ b/src/components/bread-crumb/GroupBreadCrumbs.tsx
@@ -29,22 +29,28 @@ export const GroupBreadCrumbs = () => {
           <BreadcrumbItem key="home">
             <Link to={`/${realm}/groups`}>{t("groups")}</Link>
           </BreadcrumbItem>
-          {subGroups.map((group, i) => (
-            <BreadcrumbItem key={i} isActive={subGroups.length - 1 === i}>
-              {subGroups.length - 1 !== i && (
-                <Link
-                  to={location.pathname.substr(
-                    0,
-                    location.pathname.indexOf(group.id!) + group.id!.length
-                  )}
-                  onClick={() => remove(group)}
-                >
-                  {group.name}
-                </Link>
-              )}
-              {subGroups.length - 1 === i && <>{t("groups:groupDetails")}</>}
-            </BreadcrumbItem>
-          ))}
+          {subGroups.map((group, i) => {
+            const isLastGroup = i === subGroups.length - 1;
+            return (
+              <BreadcrumbItem key={group.id} isActive={isLastGroup}>
+                {!isLastGroup && (
+                  <Link
+                    to={location.pathname.substr(
+                      0,
+                      location.pathname.indexOf(group.id!) + group.id!.length
+                    )}
+                    onClick={() => remove(group)}
+                  >
+                    {group.name}
+                  </Link>
+                )}
+                {isLastGroup &&
+                  (group.id === "search"
+                    ? group.name
+                    : t("groups:groupDetails"))}
+              </BreadcrumbItem>
+            );
+          })}
         </Breadcrumb>
       )}
     </>
diff --git a/src/groups/SearchGroups.tsx b/src/groups/SearchGroups.tsx
index 0778aed2d9..1216ba7ccd 100644
--- a/src/groups/SearchGroups.tsx
+++ b/src/groups/SearchGroups.tsx
@@ -6,13 +6,13 @@ import {
   ButtonVariant,
   Chip,
   ChipGroup,
-  Form,
   InputGroup,
   PageSection,
   PageSectionVariants,
-  Text,
-  TextContent,
+  Stack,
+  StackItem,
   TextInput,
+  ToolbarItem,
 } from "@patternfly/react-core";
 import { SearchIcon } from "@patternfly/react-icons";
 
@@ -23,6 +23,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { GroupPath } from "../components/group/GroupPath";
 import { useSubGroups } from "./SubGroupsContext";
+import { ViewHeader } from "../components/view-header/ViewHeader";
 
 type SearchGroup = GroupRepresentation & {
   link?: string;
@@ -40,7 +41,10 @@ export const SearchGroups = () => {
   const refresh = () => setKey(new Date().getTime());
 
   const { setSubGroups } = useSubGroups();
-  useEffect(() => setSubGroups([{ name: t("searchGroups") }]), []);
+  useEffect(
+    () => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
+    []
+  );
 
   const deleteTerm = (id: string) => {
     const index = searchTerms.indexOf(id);
@@ -50,21 +54,26 @@ export const SearchGroups = () => {
   };
 
   const addTerm = () => {
-    setSearchTerms([...searchTerms, searchTerm]);
-    setSearchTerm("");
-    refresh();
+    if (searchTerm !== "") {
+      setSearchTerms([...searchTerms, searchTerm]);
+      setSearchTerm("");
+      refresh();
+    }
   };
 
-  const GroupNameCell = (group: SearchGroup) => {
-    setSubGroups([{ name: t("searchGroups"), id: "search" }, group]);
-    return (
-      <>
-        <Link key={group.id} to={`/${realm}/groups/search/${group.link}`}>
-          {group.name}
-        </Link>
-      </>
-    );
-  };
+  const GroupNameCell = (group: SearchGroup) => (
+    <>
+      <Link
+        key={group.id}
+        to={`/${realm}/groups/search/${group.link}`}
+        onClick={() =>
+          setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
+        }
+      >
+        {group.name}
+      </Link>
+    </>
+  );
 
   const flatten = (
     groups: GroupRepresentation[],
@@ -106,46 +115,52 @@ export const SearchGroups = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent className="pf-u-mr-sm">
-          <Text component="h1">{t("searchForGroups")}</Text>
-        </TextContent>
-        <Form
-          className="pf-u-mt-sm keycloak__form"
-          onSubmit={(e) => {
-            e.preventDefault();
-            addTerm();
-          }}
-        >
-          <InputGroup>
-            <TextInput
-              name="search"
-              data-testid="group-search"
-              type="search"
-              aria-label={t("search")}
-              placeholder={t("searchGroups")}
-              value={searchTerm}
-              onChange={(value) => setSearchTerm(value)}
-            />
-            <Button
-              data-testid="search-button"
-              variant={ButtonVariant.control}
-              aria-label={t("search")}
-              onClick={addTerm}
-            >
-              <SearchIcon />
-            </Button>
-          </InputGroup>
-          <ChipGroup>
-            {searchTerms.map((term) => (
-              <Chip key={term} onClick={() => deleteTerm(term)}>
-                {term}
-              </Chip>
-            ))}
-          </ChipGroup>
-        </Form>
+      <ViewHeader titleKey="groups:searchGroups" />
+      <PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
         <KeycloakDataTable
           key={key}
+          isSearching
+          toolbarItem={
+            <ToolbarItem>
+              <Stack>
+                <StackItem className="pf-u-mb-sm">
+                  <InputGroup>
+                    <TextInput
+                      name="search"
+                      data-testid="group-search"
+                      type="search"
+                      aria-label={t("search")}
+                      placeholder={t("searchGroups")}
+                      value={searchTerm}
+                      onChange={(value) => setSearchTerm(value)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          addTerm();
+                        }
+                      }}
+                    />
+                    <Button
+                      data-testid="search-button"
+                      variant={ButtonVariant.control}
+                      aria-label={t("search")}
+                      onClick={addTerm}
+                    >
+                      <SearchIcon />
+                    </Button>
+                  </InputGroup>
+                </StackItem>
+                <StackItem>
+                  <ChipGroup>
+                    {searchTerms.map((term) => (
+                      <Chip key={term} onClick={() => deleteTerm(term)}>
+                        {term}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                </StackItem>
+              </Stack>
+            </ToolbarItem>
+          }
           ariaLabelKey="groups:groups"
           isPaginated
           loader={loader}