From 8fe42cd3086423c6c2d0c5860ddb3ba695184bb3 Mon Sep 17 00:00:00 2001
From: Jay Kumar <jaykumar20march@gmail.com>
Date: Mon, 25 Nov 2024 06:39:59 +0000
Subject: [PATCH] fix: fix link and better hints

---
 .../rules/CorrelationSidebar/CorrelationForm.tsx |  4 ++--
 .../CorrelationSidebar/CorrelationGroups.tsx     |  4 +---
 .../CorrelationSidebarBody.tsx                   | 16 ++++++++++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationForm.tsx b/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationForm.tsx
index 9e46cff4d..888ffb5d8 100644
--- a/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationForm.tsx
+++ b/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationForm.tsx
@@ -59,7 +59,7 @@ export const CorrelationForm = ({
             <Button
               className="cursor-default ml-2"
               type="button"
-              tooltip="When the first alert arrives, Keep will start to calculate the timespan, any new alert within the timeframe will correlate into the same incident. Time cannot exceed 14 days"
+              tooltip="When the first alert arrives, Keep calculates the timespan. Any new alert within this timeframe will correlate into the same incident. The timeframe cannot exceed 14 days."
               icon={QuestionMarkCircleIcon}
               size="xs"
               variant="light"
@@ -98,7 +98,7 @@ export const CorrelationForm = ({
               <Button
                 className="cursor-default ml-2"
                 type="button"
-                tooltip="Keep will use these attributes to split between incidents. For example, with attribute host, Keep will correlate alert with hostX and alert with host hostY to different incidents. You cannot calculate attributes to group by without alerts"
+                tooltip="Attributes are used to distinguish between incidents. For example, grouping by 'host' will correlate alerts with hostX and hostY into separate incidents. Attributes cannot be calculated without alerts."
                 icon={QuestionMarkCircleIcon}
                 size="xs"
                 variant="light"
diff --git a/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationGroups.tsx b/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationGroups.tsx
index cfc82cdd7..4c480f304 100644
--- a/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationGroups.tsx
+++ b/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationGroups.tsx
@@ -18,9 +18,7 @@ export const CorrelationGroups = () => {
         <Button
           className="cursor-default"
           type="button"
-          tooltip="Any Rule consists of one or more Correlations. Each alert group is evaluated separately and the results are combined using AND combinator.
-                  For example, if you want to group alerts that has a severity of 'critical' and another alert with a source of 'Kibana', you would create a rule with two alert groups.
-                  The first alert group would have a rule with severity = 'critical' and the second alert group would have a rule with source = 'kibana'."
+          tooltip="A Rule contains one or more Correlations, each evaluating a separate alert group. Results are combined using an AND operator. For instance, to group alerts by severity 'critical' and source 'Kibana', create two alert groups: one with severity = 'critical' and another with source = 'Kibana'."
           icon={QuestionMarkCircleIcon}
           size="xs"
           variant="light"
diff --git a/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationSidebarBody.tsx b/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
index 29d5d8fa2..70cf8a9c5 100644
--- a/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
+++ b/keep-ui/app/(keep)/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
@@ -7,6 +7,8 @@ import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { CorrelationForm } from "./CorrelationForm";
 import { CorrelationGroups } from "./CorrelationGroups";
 import { CorrelationSubmission } from "./CorrelationSubmission";
+import { Link } from "@/components/ui";
+import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useRules } from "utils/hooks/useRules";
 import { CorrelationForm as CorrelationFormType } from ".";
@@ -112,10 +114,16 @@ export const CorrelationSidebarBody = ({
           color="teal"
         >
           A versatile tool for grouping and consolidating alerts. Read more in
-          our{" "}
-          <a href="https://docs.keephq.dev/overview/ruleengine" target="_blank">
-            docs.
-          </a>
+          our{"  "}
+          <Link
+            icon={ArrowUpRightIcon}
+            iconPosition="right"
+            className="!text-orange-500 hover:!text-orange-700 ml-0.5"
+            target="_blank"
+            href="https://docs.keephq.dev/overview/ruleengine"
+          >
+            docs
+          </Link>
           <Button
             className="absolute top-0 right-0"
             onClick={() => setIsCalloutShown(false)}