Improved search sub links / breadcrumbs (#2721)

src/components/bread-crumb/GroupBreadCrumbs.tsx

@@ -33,7 +33,7 @@ export const GroupBreadCrumbs = () => {
           <BreadcrumbItem key={group.id} isActive={isLastGroup}>
             {!isLastGroup && (
               <Link
-                to={location.pathname.substr(
+                to={location.pathname.substring(
                   0,
                   location.pathname.indexOf(group.id!) + group.id!.length
                 )}

src/groups/GroupsSection.tsx

@@ -77,7 +77,10 @@ export default function GroupsSection() {
       if (isNavigationStateInValid) {
         const groups: GroupRepresentation[] = [];
         for (const i of ids!) {
-          const group = await adminClient.groups.findOne({ id: i });
+          const group =
+            i !== "search"
+              ? await adminClient.groups.findOne({ id: i })
+              : { name: t("searchGroups"), id: "search" };
           if (group) {
             groups.push(group);
           } else {

src/groups/SearchGroups.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -22,7 +22,6 @@ import { useAdminClient } from "../context/auth/AdminClient";
 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";
 import { useAccess } from "../context/access/Access";
 
@@ -44,12 +43,6 @@ export default function SearchGroups() {
   const { hasAccess } = useAccess();
   const isManager = hasAccess("manage-users", "query-clients");
 
-  const { setSubGroups } = useSubGroups();
-  useEffect(
-    () => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
-    []
-  );
-
   const deleteTerm = (id: string) => {
     const index = searchTerms.indexOf(id);
     searchTerms.splice(index, 1);
@@ -69,13 +62,7 @@ export default function SearchGroups() {
     if (!isManager) return <span>{group.name}</span>;
 
     return (
-      <Link
-        key={group.id}
-        to={`/${realm}/groups/${group.link}`}
-        onClick={() =>
-          setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
-        }
-      >
+      <Link key={group.id} to={`/${realm}/groups/search/${group.link}`}>
         {group.name}
       </Link>
     );