From eb40cabf030735ec875a9a6c5ec9e0d2149d210c Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Fri, 1 Oct 2021 12:52:45 +0200
Subject: [PATCH] Use type-safe alternative for links (#1280)

---
 src/PageHeader.tsx                                  |  6 +++---
 src/authentication/AuthenticationSection.tsx        |  6 +++---
 src/client-scopes/ClientScopesSection.tsx           |  7 +++++--
 src/client-scopes/details/MappingDetails.tsx        |  9 ++++++---
 src/clients/ClientsSection.tsx                      | 13 ++++++++-----
 src/clients/import/ImportForm.tsx                   |  8 ++++++--
 .../initial-access/CreateInitialAccessToken.tsx     |  9 ++++++---
 .../initial-access/InitialAccessTokenList.tsx       | 13 +++++++------
 src/identity-providers/add/DetailSettings.tsx       |  1 -
 src/realm-settings/NewClientProfileForm.tsx         |  9 ++++++---
 src/realm-settings/ProfilesTab.tsx                  |  6 +++---
 11 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/src/PageHeader.tsx b/src/PageHeader.tsx
index d193c0d9ea..3e0983082a 100644
--- a/src/PageHeader.tsx
+++ b/src/PageHeader.tsx
@@ -56,9 +56,9 @@ export const Header = () => {
     return (
       <DropdownItem
         key="server info"
-        component={Link}
-        // @ts-ignore
-        to={toDashboard({ realm })}
+        component={(props: any) => (
+          <Link {...props} to={toDashboard({ realm })} />
+        )}
       >
         {t("realmInfo")}
       </DropdownItem>
diff --git a/src/authentication/AuthenticationSection.tsx b/src/authentication/AuthenticationSection.tsx
index 6fd9f24d7d..913277c232 100644
--- a/src/authentication/AuthenticationSection.tsx
+++ b/src/authentication/AuthenticationSection.tsx
@@ -223,9 +223,9 @@ export const AuthenticationSection = () => {
               toolbarItem={
                 <ToolbarItem>
                   <Button
-                    component={Link}
-                    // @ts-ignore
-                    to={toCreateFlow({ realm })}
+                    component={(props) => (
+                      <Link {...props} to={toCreateFlow({ realm })} />
+                    )}
                   >
                     {t("createFlow")}
                   </Button>
diff --git a/src/client-scopes/ClientScopesSection.tsx b/src/client-scopes/ClientScopesSection.tsx
index 19ee99cc14..1eb1404bc6 100644
--- a/src/client-scopes/ClientScopesSection.tsx
+++ b/src/client-scopes/ClientScopesSection.tsx
@@ -204,8 +204,11 @@ export const ClientScopesSection = () => {
               />
 
               <ToolbarItem>
-                {/* @ts-ignore */}
-                <Button component={Link} to={toNewClientScope({ realm })}>
+                <Button
+                  component={(props) => (
+                    <Link {...props} to={toNewClientScope({ realm })} />
+                  )}
+                >
                   {t("createClientScope")}
                 </Button>
               </ToolbarItem>
diff --git a/src/client-scopes/details/MappingDetails.tsx b/src/client-scopes/details/MappingDetails.tsx
index 526de2e37d..0b52ad5d5c 100644
--- a/src/client-scopes/details/MappingDetails.tsx
+++ b/src/client-scopes/details/MappingDetails.tsx
@@ -242,9 +242,12 @@ export const MappingDetails = () => {
             </Button>
             <Button
               variant="link"
-              component={Link}
-              // @ts-ignore
-              to={toClientScope({ realm, id, type, tab: "mappers" })}
+              component={(props) => (
+                <Link
+                  {...props}
+                  to={toClientScope({ realm, id, type, tab: "mappers" })}
+                />
+              )}
             >
               {t("common:cancel")}
             </Button>
diff --git a/src/clients/ClientsSection.tsx b/src/clients/ClientsSection.tsx
index f2a35b799a..fcaf4d9fdb 100644
--- a/src/clients/ClientsSection.tsx
+++ b/src/clients/ClientsSection.tsx
@@ -117,16 +117,19 @@ export const ClientsSection = () => {
               toolbarItem={
                 <>
                   <ToolbarItem>
-                    {/* @ts-ignore */}
-                    <Button component={Link} to={toAddClient({ realm })}>
+                    <Button
+                      component={(props) => (
+                        <Link {...props} to={toAddClient({ realm })} />
+                      )}
+                    >
                       {t("createClient")}
                     </Button>
                   </ToolbarItem>
                   <ToolbarItem>
                     <Button
-                      component={Link}
-                      // @ts-ignore
-                      to={toImportClient({ realm })}
+                      component={(props) => (
+                        <Link {...props} to={toImportClient({ realm })} />
+                      )}
                       variant="link"
                     >
                       {t("importClient")}
diff --git a/src/clients/import/ImportForm.tsx b/src/clients/import/ImportForm.tsx
index c76aa1df3f..53fbf5164d 100644
--- a/src/clients/import/ImportForm.tsx
+++ b/src/clients/import/ImportForm.tsx
@@ -97,8 +97,12 @@ export const ImportForm = () => {
               <Button variant="primary" type="submit">
                 {t("common:save")}
               </Button>
-              {/* @ts-ignore */}
-              <Button variant="link" component={Link} to={toClients({ realm })}>
+              <Button
+                variant="link"
+                component={(props) => (
+                  <Link {...props} to={toClients({ realm })} />
+                )}
+              >
                 {t("common:cancel")}
               </Button>
             </ActionGroup>
diff --git a/src/clients/initial-access/CreateInitialAccessToken.tsx b/src/clients/initial-access/CreateInitialAccessToken.tsx
index 7b2f836f21..996f4cda29 100644
--- a/src/clients/initial-access/CreateInitialAccessToken.tsx
+++ b/src/clients/initial-access/CreateInitialAccessToken.tsx
@@ -130,9 +130,12 @@ export const CreateInitialAccessToken = () => {
             <Button
               data-testid="cancel"
               variant="link"
-              component={Link}
-              // @ts-ignore
-              to={toClients({ realm, tab: "initialAccessToken" })}
+              component={(props) => (
+                <Link
+                  {...props}
+                  to={toClients({ realm, tab: "initialAccessToken" })}
+                />
+              )}
             >
               {t("common:cancel")}
             </Button>
diff --git a/src/clients/initial-access/InitialAccessTokenList.tsx b/src/clients/initial-access/InitialAccessTokenList.tsx
index 2ac72d4d71..f54853dac1 100644
--- a/src/clients/initial-access/InitialAccessTokenList.tsx
+++ b/src/clients/initial-access/InitialAccessTokenList.tsx
@@ -55,12 +55,13 @@ export const InitialAccessTokenList = () => {
         searchPlaceholderKey="clients:searchInitialAccessToken"
         loader={loader}
         toolbarItem={
-          <>
-            {/* @ts-ignore */}
-            <Button component={Link} to={toCreateInitialAccessToken({ realm })}>
-              {t("common:create")}
-            </Button>
-          </>
+          <Button
+            component={(props) => (
+              <Link {...props} to={toCreateInitialAccessToken({ realm })} />
+            )}
+          >
+            {t("common:create")}
+          </Button>
         }
         actions={[
           {
diff --git a/src/identity-providers/add/DetailSettings.tsx b/src/identity-providers/add/DetailSettings.tsx
index a685494319..a7b7185c39 100644
--- a/src/identity-providers/add/DetailSettings.tsx
+++ b/src/identity-providers/add/DetailSettings.tsx
@@ -321,7 +321,6 @@ export const DetailSettings = () => {
                 toolbarItem={
                   <ToolbarItem>
                     <Link
-                      // @ts-ignore
                       to={toIdentityProviderAddMapper({
                         realm,
                         alias: alias!,
diff --git a/src/realm-settings/NewClientProfileForm.tsx b/src/realm-settings/NewClientProfileForm.tsx
index 5d2b7e63aa..1ca6cc4fc1 100644
--- a/src/realm-settings/NewClientProfileForm.tsx
+++ b/src/realm-settings/NewClientProfileForm.tsx
@@ -125,9 +125,12 @@ export const NewClientProfileForm = () => {
             </Button>
             <Button
               id="cancelCreateProfile"
-              component={Link}
-              // @ts-ignore
-              to={`/${realm}/realm-settings/clientPolicies`}
+              component={(props) => (
+                <Link
+                  {...props}
+                  to={`/${realm}/realm-settings/clientPolicies`}
+                />
+              )}
               data-testid="cancelCreateProfile"
             >
               {t("common:cancel")}
diff --git a/src/realm-settings/ProfilesTab.tsx b/src/realm-settings/ProfilesTab.tsx
index 374fd73f01..244f633d82 100644
--- a/src/realm-settings/ProfilesTab.tsx
+++ b/src/realm-settings/ProfilesTab.tsx
@@ -157,9 +157,9 @@ export const ProfilesTab = () => {
             <ToolbarItem>
               <Button
                 id="createProfile"
-                component={Link}
-                // @ts-ignore
-                to={toNewClientProfile({ realm })}
+                component={(props) => (
+                  <Link {...props} to={toNewClientProfile({ realm })} />
+                )}
                 data-testid="createProfile"
               >
                 {t("createClientProfile")}