From 25d2e426b6a8be8bf98f1312b9df0e66797fa88a Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Tue, 2 Nov 2021 15:59:22 +0100
Subject: [PATCH] Use route functions for navigation in client scopes (#1472)

---
 src/client-scopes/details/ScopeForm.tsx    |  8 +++++---
 src/client-scopes/form/ClientScopeForm.tsx | 10 +++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/client-scopes/details/ScopeForm.tsx b/src/client-scopes/details/ScopeForm.tsx
index ae65dbd6d6..fd7589f2c9 100644
--- a/src/client-scopes/details/ScopeForm.tsx
+++ b/src/client-scopes/details/ScopeForm.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import {
@@ -28,6 +28,7 @@ import { useLoginProviders } from "../../context/server-info/ServerInfoProvider"
 import { convertToFormValues } from "../../util";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { getProtocolName } from "../../clients/utils";
+import { toClientScopes } from "../routes/ClientScopes";
 
 type ScopeFormProps = {
   clientScope: ClientScopeRepresentation;
@@ -41,7 +42,6 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
     useForm<ClientScopeRepresentation>({
       defaultValues: { attributes: { "display-on-consent-screen": "true" } },
     });
-  const history = useHistory();
   const { realm } = useRealm();
 
   const providers = useLoginProviders();
@@ -316,7 +316,9 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
         </Button>
         <Button
           variant="link"
-          onClick={() => history.push(`/${realm}/client-scopes`)}
+          component={(props) => (
+            <Link {...props} to={toClientScopes({ realm })}></Link>
+          )}
         >
           {t("common:cancel")}
         </Button>
diff --git a/src/client-scopes/form/ClientScopeForm.tsx b/src/client-scopes/form/ClientScopeForm.tsx
index 534f4e2a52..a11b429eb2 100644
--- a/src/client-scopes/form/ClientScopeForm.tsx
+++ b/src/client-scopes/form/ClientScopeForm.tsx
@@ -34,6 +34,7 @@ import {
 } from "../../components/client-scope/ClientScopeTypes";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toMapper } from "../routes/Mapper";
+import { toClientScope } from "../routes/ClientScope";
 
 export default function ClientScopeForm() {
   const { t } = useTranslation("client-scopes");
@@ -130,9 +131,12 @@ export default function ClientScopeForm() {
           clientScopes.type
         );
         history.push(
-          `/${realm}/client-scopes/${scope.id}/${
-            clientScopes.type || "none"
-          }/settings`
+          toClientScope({
+            realm,
+            id: scope.id!,
+            type: clientScopes.type || "none",
+            tab: "settings",
+          })
         );
       }
       addAlert(t((id ? "update" : "create") + "Success"), AlertVariant.success);