fixed breadcrumb for search and seach box distance (#998)

Co-authored-by: Jon Koops <jonkoops@gmail.com>

src/components/bread-crumb/GroupBreadCrumbs.tsx

@@ -29,9 +29,11 @@ export const GroupBreadCrumbs = () => {
           <BreadcrumbItem key="home">
             <Link to={`/${realm}/groups`}>{t("groups")}</Link>
           </BreadcrumbItem>
-          {subGroups.map((group, i) => (
+          {subGroups.map((group, i) => {
-            <BreadcrumbItem key={i} isActive={subGroups.length - 1 === i}>
+            const isLastGroup = i === subGroups.length - 1;
-              {subGroups.length - 1 !== i && (
+            return (
+              <BreadcrumbItem key={group.id} isActive={isLastGroup}>
+                {!isLastGroup && (
                   <Link
                     to={location.pathname.substr(
                       0,
@@ -42,9 +44,13 @@ export const GroupBreadCrumbs = () => {
                     {group.name}
                   </Link>
                 )}
-              {subGroups.length - 1 === i && <>{t("groups:groupDetails")}</>}
+                {isLastGroup &&
+                  (group.id === "search"
+                    ? group.name
+                    : t("groups:groupDetails"))}
               </BreadcrumbItem>
-          ))}
+            );
+          })}
         </Breadcrumb>
       )}
     </>

src/groups/SearchGroups.tsx

@@ -6,13 +6,13 @@ import {
   ButtonVariant,
   Chip,
   ChipGroup,
-  Form,
   InputGroup,
   PageSection,
   PageSectionVariants,
-  Text,
+  Stack,
-  TextContent,
+  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 = () => {
+    if (searchTerm !== "") {
       setSearchTerms([...searchTerms, searchTerm]);
       setSearchTerm("");
       refresh();
+    }
   };
 
-  const GroupNameCell = (group: SearchGroup) => {
+  const GroupNameCell = (group: SearchGroup) => (
-    setSubGroups([{ name: t("searchGroups"), id: "search" }, group]);
-    return (
     <>
-        <Link key={group.id} to={`/${realm}/groups/search/${group.link}`}>
+      <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,17 +115,15 @@ export const SearchGroups = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light}>
+      <ViewHeader titleKey="groups:searchGroups" />
-        <TextContent className="pf-u-mr-sm">
+      <PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
-          <Text component="h1">{t("searchForGroups")}</Text>
+        <KeycloakDataTable
-        </TextContent>
+          key={key}
-        <Form
+          isSearching
-          className="pf-u-mt-sm keycloak__form"
+          toolbarItem={
-          onSubmit={(e) => {
+            <ToolbarItem>
-            e.preventDefault();
+              <Stack>
-            addTerm();
+                <StackItem className="pf-u-mb-sm">
-          }}
-        >
                   <InputGroup>
                     <TextInput
                       name="search"
@@ -126,6 +133,11 @@ export const SearchGroups = () => {
                       placeholder={t("searchGroups")}
                       value={searchTerm}
                       onChange={(value) => setSearchTerm(value)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          addTerm();
+                        }
+                      }}
                     />
                     <Button
                       data-testid="search-button"
@@ -136,6 +148,8 @@ export const SearchGroups = () => {
                       <SearchIcon />
                     </Button>
                   </InputGroup>
+                </StackItem>
+                <StackItem>
                   <ChipGroup>
                     {searchTerms.map((term) => (
                       <Chip key={term} onClick={() => deleteTerm(term)}>
@@ -143,9 +157,10 @@ export const SearchGroups = () => {
                       </Chip>
                     ))}
                   </ChipGroup>
-        </Form>
+                </StackItem>
-        <KeycloakDataTable
+              </Stack>
-          key={key}
+            </ToolbarItem>
+          }
           ariaLabelKey="groups:groups"
           isPaginated
           loader={loader}