Use route functions for navigation in groups (#1474)

* Use route functions for navigation in groups

* pass testid to link

src/groups/GroupTable.tsx

@@ -23,6 +23,7 @@ import { getLastId } from "./groupIdUtils";
 import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
 import { useSubGroups } from "./SubGroupsContext";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { toGroups } from "./routes/Groups";
 
 export const GroupTable = () => {
   const { t } = useTranslation("groups");
@@ -60,7 +61,7 @@ export const GroupTable = () => {
     }
 
     if (!groupsData) {
-      history.push(`/${realm}/groups`);
+      history.push(toGroups({ realm }));
     }
 
     return groupsData || [];

src/groups/GroupsSection.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   DropdownItem,
@@ -23,6 +23,8 @@ import { getId, getLastId } from "./groupIdUtils";
 import { Members } from "./Members";
 import { GroupAttributes } from "./GroupAttributes";
 import { GroupsModal } from "./GroupsModal";
+import { toGroups } from "./routes/Groups";
+import { toGroupsSearch } from "./routes/GroupsSearch";
 
 import "./GroupsSection.css";
 
@@ -80,12 +82,13 @@ export default function GroupsSection() {
 
   const SearchDropdown = (
     <DropdownItem
-      data-testid="searchGroup"
       key="searchGroup"
-      onClick={() => history.push(`/${realm}/groups/search`)}
+      component={
-    >
+        <Link data-testid="searchGroup" to={toGroupsSearch({ realm })}>
           {t("searchGroup")}
-    </DropdownItem>
+        </Link>
+      }
+    />
   );
 
   return (
@@ -120,12 +123,7 @@ export default function GroupsSection() {
                   key="deleteGroup"
                   onClick={() => {
                     deleteGroup({ id });
-                    history.push(
+                    history.push(toGroups({ realm }));
-                      location.pathname.substr(
-                        0,
-                        location.pathname.lastIndexOf("/")
-                      )
-                    );
                   }}
                 >
                   {t("deleteGroup")}

src/groups/MembersModal.tsx

@@ -15,6 +15,7 @@ import { useAlerts } from "../components/alert/Alerts";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { emptyFormatter } from "../util";
+import { toAddUser } from "../user/routes/AddUser";
 import _ from "lodash";
 
 type MemberModalProps = {
@@ -30,7 +31,7 @@ export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
 
   const history = useHistory();
   const { realm } = useRealm();
-  const goToCreate = () => history.push(`/${realm}/users/add-user`);
+  const goToCreate = () => history.push(toAddUser({ realm }));
 
   const loader = async (first?: number, max?: number, search?: string) => {
     const members = await adminClient.groups.listMembers({ id: groupId });