Merge pull request #959 from JanetEne/helper-text-for-secret-path

Add helper text and tooltip for secret path

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 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{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
       )}

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}

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,49 @@ export const AddWebhookForm = ({
             />
             <FormControl
               label="Secret Path"
+              icon={
+                <Tooltip
+                  isOpen={showTip}
+                  onOpenChange={setShowTip}
+                  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-mineshaft-300"
+                    onMouseEnter={() => setShowTip(true)}
+                  >
+                    <FontAwesomeIcon icon={faInfo} 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"