Use new routing conventions for groups routes (#913)

src/groups/routes.ts

@@ -0,0 +1,7 @@
+import type { RouteDef } from "../route-config";
+import { GroupsRoute } from "./routes/Groups";
+import { GroupsSearchRoute } from "./routes/GroupsSearch";
+
+const routes: RouteDef[] = [GroupsSearchRoute, GroupsRoute];
+
+export default routes;

src/groups/routes/Groups.tsx

@@ -0,0 +1,19 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { GroupsSection } from "../GroupsSection";
+
+export type GroupsParams = { realm: string };
+
+export const GroupsRoute: RouteDef = {
+  path: "/:realm/groups",
+  component: GroupsSection,
+  access: "query-groups",
+  matchOptions: {
+    exact: false,
+  },
+};
+
+export const toGroups = (params: GroupsParams): LocationDescriptorObject => ({
+  pathname: generatePath(GroupsRoute.path, params),
+});

src/groups/routes/GroupsSearch.tsx

@@ -0,0 +1,19 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { SearchGroups } from "../SearchGroups";
+
+export type GroupsSearchParams = { realm: string };
+
+export const GroupsSearchRoute: RouteDef = {
+  path: "/:realm/groups/search",
+  component: SearchGroups,
+  breadcrumb: (t) => t("groups:searchGroups"),
+  access: "query-groups",
+};
+
+export const toGroupsSearch = (
+  params: GroupsSearchParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(GroupsSearchRoute.path, params),
+});

src/route-config.ts

@@ -7,8 +7,7 @@ import clientScopesRoutes from "./client-scopes/routes";
 import clientRoutes from "./clients/routes";
 import dashboardRoutes from "./dashboard/routes";
 import eventRoutes from "./events/routes";
-import { GroupsSection } from "./groups/GroupsSection";
+import groupsRoutes from "./groups/routes";
-import { SearchGroups } from "./groups/SearchGroups";
 import identityProviders from "./identity-providers/routes";
 import { PageNotFoundSection } from "./PageNotFoundSection";
 import realmRoleRoutes from "./realm-roles/routes";
@@ -26,6 +25,12 @@ export type RouteDef = {
   matchOptions?: MatchOptions;
 };
 
+const NotFoundRoute: RouteDef = {
+  path: "*",
+  component: PageNotFoundSection,
+  access: "anyone",
+};
+
 export const routes: RouteDef[] = [
   ...authenticationRoutes,
   ...clientRoutes,
@@ -39,23 +44,6 @@ export const routes: RouteDef[] = [
   ...userFederationRoutes,
   ...userRoutes,
   ...dashboardRoutes,
-  {
+  ...groupsRoutes,
-    path: "/:realm/groups/search",
+  NotFoundRoute,
-    component: SearchGroups,
-    breadcrumb: (t) => t("groups:searchGroups"),
-    access: "query-groups",
-  },
-  {
-    path: "/:realm/groups",
-    component: GroupsSection,
-    access: "query-groups",
-    matchOptions: {
-      exact: false,
-    },
-  },
-  {
-    path: "*",
-    component: PageNotFoundSection,
-    access: "anyone",
-  },
 ];