feat(ui): create CustomLink component and refactor links to use it (#8341)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/components/providers/workflow/forms/test-connection-form.tsx

@@ -3,7 +3,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Icon } from "@iconify/react";
 import { Checkbox } from "@nextui-org/react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -18,6 +17,7 @@ import { getTask } from "@/actions/task/tasks";
 import { CheckIcon, RocketIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
 import { CustomButton } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom/custom-link";
 import { Form } from "@/components/ui/form";
 import { checkTaskStatus } from "@/lib/helper";
 import { ProviderType } from "@/types";
@@ -295,8 +295,9 @@ export const TestConnectionForm = ({
 
         <div className="flex w-full justify-end sm:space-x-6">
           {apiErrorMessage ? (
-            <Link
+            <CustomLink
               href="/providers"
+              target="_self"
               className="mr-3 flex w-fit items-center justify-center space-x-2 rounded-lg border border-solid border-gray-200 px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <Icon
@@ -304,7 +305,7 @@ export const TestConnectionForm = ({
                 className="h-5 w-5 text-gray-600 dark:text-gray-400"
               />
               <span>Back to providers</span>
-            </Link>
+            </CustomLink>
           ) : connectionStatus?.error ? (
             <CustomButton
               onPress={isUpdated ? () => router.back() : onResetCredentials}

ui/components/providers/workflow/forms/via-credentials/m365-credentials-form.tsx

@@ -1,8 +1,8 @@
-import Link from "next/link";
 import { Control } from "react-hook-form";
 
 import { InfoIcon } from "@/components/icons";
 import { CustomInput } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom/custom-link";
 import { M365Credentials } from "@/types";
 
 export const M365CredentialsForm = ({
@@ -57,14 +57,12 @@ export const M365CredentialsForm = ({
         {" "}
         User and password authentication is being deprecated due to
         Microsoft's on-going MFA enforcement across all tenants (see{" "}
-        <Link
+        <CustomLink
           href="https://azure.microsoft.com/en-us/blog/announcing-mandatory-multi-factor-authentication-for-azure-sign-in/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm text-primary hover:underline"
+          size="sm"
         >
           Microsoft docs
-        </Link>
+        </CustomLink>
         ).
       </p>
 
@@ -76,14 +74,12 @@ export const M365CredentialsForm = ({
       </div>
       <p className="text-sm text-default-500">
         Due to that change, you must only{" "}
-        <Link
+        <CustomLink
           href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/microsoft365/getting-started-m365/#step-3-configure-your-m365-account"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm text-primary hover:underline"
+          size="sm"
         >
           use application authentication
-        </Link>{" "}
+        </CustomLink>{" "}
         to maintain all Prowler M365 scan capabilities.
       </p>
       <CustomInput