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

Add helper text and tooltip for secret path

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"