From dc91615b43caeca3e18e5c4592821dcefd459df8 Mon Sep 17 00:00:00 2001
From: JanetEne <janeteneogenyi@gmail.com>
Date: Sat, 9 Sep 2023 04:06:16 +0100
Subject: [PATCH 1/3] add helper text and tooltip for secret path

---
 .../components/v2/FormControl/FormControl.tsx | 13 +++--
 .../src/components/v2/Tooltip/Tooltip.tsx     |  4 +-
 .../components/WebhooksTab/AddWebhookForm.tsx | 49 +++++++++++++++++--
 3 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 2493cdb54..086cf2e76 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -8,12 +8,17 @@ export type FormLabelProps = {
   id?: string;
   isRequired?: boolean;
   label?: ReactNode;
+  icon?: ReactNode;
 };
 
-export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400" htmlFor={id}>
+export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
+  <Label.Root
+    className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
+    htmlFor={id}
+  >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
+    {icon && <span className="ml-2 cursor-pointer text-white">{icon}</span>}
   </Label.Root>
 );
 
@@ -47,6 +52,7 @@ export type FormControlProps = {
   errorText?: ReactNode;
   children: JSX.Element;
   className?: string;
+  icon?: ReactNode;
 };
 
 export const FormControl = ({
@@ -57,12 +63,13 @@ export const FormControl = ({
   errorText,
   id,
   isError,
+  icon,
   className
 }: FormControlProps): JSX.Element => {
   return (
     <div className={twMerge("mb-4", className)}>
       {typeof label === "string" ? (
-        <FormLabel label={label} isRequired={isRequired} id={id} />
+        <FormLabel label={label} isRequired={isRequired} id={id} icon={icon} />
       ) : (
         label
       )}
diff --git a/frontend/src/components/v2/Tooltip/Tooltip.tsx b/frontend/src/components/v2/Tooltip/Tooltip.tsx
index f6f697f38..9d1285aa0 100644
--- a/frontend/src/components/v2/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/v2/Tooltip/Tooltip.tsx
@@ -10,6 +10,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   asChild?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
+  position?: "top" | "bottom" | "left" | "right";
 };
 
 export const Tooltip = ({
@@ -20,6 +21,7 @@ export const Tooltip = ({
   defaultOpen,
   className,
   asChild = true,
+  position = "top",
   ...props
 }: TooltipProps) => (
   <TooltipPrimitive.Root
@@ -30,7 +32,7 @@ export const Tooltip = ({
   >
     <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
     <TooltipPrimitive.Content
-      side="top"
+      side={position}
       align="center"
       sideOffset={5}
       {...props}
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
index a5f494318..d7f9c0e78 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
@@ -1,5 +1,7 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { faInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
@@ -11,7 +13,8 @@ import {
   ModalClose,
   ModalContent,
   Select,
-  SelectItem
+  SelectItem,
+  Tooltip
 } from "@app/components/v2";
 
 const formSchema = yup.object({
@@ -45,6 +48,7 @@ export const AddWebhookForm = ({
   } = useForm<TFormSchema>({
     resolver: yupResolver(formSchema)
   });
+  const [showTip, setShowTip] = useState<boolean>(false);
 
   useEffect(() => {
     if (!isOpen) {
@@ -85,11 +89,50 @@ export const AddWebhookForm = ({
             />
             <FormControl
               label="Secret Path"
+              icon={
+                <Tooltip
+                  isOpen={showTip}
+                  onOpenChange={() => setShowTip(false)}
+                  content={
+                    <div>
+                      <h4 className="mb-2">Here are some examples of glob patterns:</h4>
+                      <div className="ol-listStyleType">
+                        <li>
+                          <code className="text-primary">/</code> - Matches all files and
+                          directories in the current directory
+                        </li>
+                        <li>
+                          <code className="text-primary">**/*</code> - Matches all files and
+                          directories in the current directory and its subdirectories
+                        </li>
+                        <li>
+                          <code className="text-primary">{"/{dir1,dir2}"}</code> - Matches all files
+                          and directories in dir1 and dir2
+                        </li>
+                      </div>
+                    </div>
+                  }
+                  position="right"
+                  className="text-xs"
+                >
+                  <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[1px] border-white">
+                    <FontAwesomeIcon
+                      icon={faInfo}
+                      onClick={() => setShowTip(true)}
+                      className="h-2 w-2"
+                    />
+                  </div>
+                </Tooltip>
+              }
               isRequired
               isError={Boolean(errors?.secretPath)}
               errorText={errors?.secretPath?.message}
+              helperText="Glob patterns are used to match multiple files or directories"
             >
-              <Input placeholder="/, /**/*" {...register("secretPath")} />
+              <Input
+                placeholder="glob pattern / or /**/* or /{dir1,dir2}"
+                {...register("secretPath")}
+              />
             </FormControl>
             <FormControl
               label="Secret Key"

From 45117ba1f4fe1877b76188834608cb9e0913ccc4 Mon Sep 17 00:00:00 2001
From: JanetEne <janeteneogenyi@gmail.com>
Date: Sat, 9 Sep 2023 22:35:55 +0100
Subject: [PATCH 2/3] show tooltip on hover of icon and not onclick

---
 .../components/WebhooksTab/AddWebhookForm.tsx       | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
index d7f9c0e78..10157eae7 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
@@ -92,7 +92,7 @@ export const AddWebhookForm = ({
               icon={
                 <Tooltip
                   isOpen={showTip}
-                  onOpenChange={() => setShowTip(false)}
+                  onOpenChange={setShowTip}
                   content={
                     <div>
                       <h4 className="mb-2">Here are some examples of glob patterns:</h4>
@@ -115,12 +115,11 @@ export const AddWebhookForm = ({
                   position="right"
                   className="text-xs"
                 >
-                  <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[1px] border-white">
-                    <FontAwesomeIcon
-                      icon={faInfo}
-                      onClick={() => setShowTip(true)}
-                      className="h-2 w-2"
-                    />
+                  <div
+                    className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[1px] border-white"
+                    onMouseEnter={() => setShowTip(true)}
+                  >
+                    <FontAwesomeIcon icon={faInfo} className="h-2 w-2" />
                   </div>
                 </Tooltip>
               }

From ad710f4860ff3f29da9a56b6566a7b152169ec94 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 9 Sep 2023 18:10:02 -0700
Subject: [PATCH 3/3] fixed the style of the webhook tooltip

---
 frontend/src/components/v2/FormControl/FormControl.tsx          | 2 +-
 .../components/WebhooksTab/AddWebhookForm.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 086cf2e76..91dfd4139 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -18,7 +18,7 @@ export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
   >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
-    {icon && <span className="ml-2 cursor-pointer text-white">{icon}</span>}
+    {icon && <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{icon}</span>}
   </Label.Root>
 );
 
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
index 10157eae7..b1d73356a 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx
@@ -116,7 +116,7 @@ export const AddWebhookForm = ({
                   className="text-xs"
                 >
                   <div
-                    className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[1px] border-white"
+                    className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[1px] border-mineshaft-300"
                     onMouseEnter={() => setShowTip(true)}
                   >
                     <FontAwesomeIcon icon={faInfo} className="h-2 w-2" />