From 152a62b72a1723763071d2ba0dde6b2918a844f2 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 1 Jun 2022 11:12:16 +0200
Subject: [PATCH] Improved search sub links / breadcrumbs (#2721)

---
 src/components/bread-crumb/GroupBreadCrumbs.tsx |  2 +-
 src/groups/GroupsSection.tsx                    |  5 ++++-
 src/groups/SearchGroups.tsx                     | 17 ++---------------
 3 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/bread-crumb/GroupBreadCrumbs.tsx b/src/components/bread-crumb/GroupBreadCrumbs.tsx
index 217f83a6c5..918a385410 100644
--- a/src/components/bread-crumb/GroupBreadCrumbs.tsx
+++ b/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
                 )}
diff --git a/src/groups/GroupsSection.tsx b/src/groups/GroupsSection.tsx
index b2eed35d31..88f7ae6b09 100644
--- a/src/groups/GroupsSection.tsx
+++ b/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 {
diff --git a/src/groups/SearchGroups.tsx b/src/groups/SearchGroups.tsx
index b6e38c1b13..debb03dfab 100644
--- a/src/groups/SearchGroups.tsx
+++ b/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>
     );