Merge pull request #975 from JanetEne/update-use-secret-path-across-app

update and use secret path examples where applicable across app

frontend/src/components/basic/popups/GlobPatternExamples.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { faInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Tooltip } from "@app/components/v2/Tooltip";
+
+const GlobPatternExamples = () => {
+  const [showTip, setShowTip] = useState<boolean>(false);
+
+  return (
+    <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>
+  );
+};
+
+export default GlobPatternExamples;

frontend/src/components/v2/Table/Table.tsx

@@ -79,7 +79,7 @@ export const Tr = ({
 }: TrProps): JSX.Element => (
   <tr
     className={twMerge(
-      "cursor-default border-b last:border-b-0 border-solid border-mineshaft-600",
+      "cursor-default border-b border-solid border-mineshaft-600 last:border-b-0",
       isHoverable && "hover:bg-mineshaft-600",
       isSelectable && "cursor-pointer",
       className

frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx

@@ -15,6 +15,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { twMerge } from "tailwind-merge";
 import * as yup from "yup";
 
+import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
 // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality
@@ -222,7 +223,7 @@ export const SecretDropzone = ({
       onDragOver={handleDrag}
       onDrop={handleDrop}
       className={twMerge(
-        "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 py-4 text-sm px-2 text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
+        "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 py-4 px-2 text-sm text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
         isDragActive && "opacity-100",
         !isSmaller && "w-full max-w-3xl flex-col space-y-4 py-20",
         isLoading && "bg-bunker-800"
@@ -234,7 +235,7 @@ export const SecretDropzone = ({
         </div>
       ) : (
         <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <div className="flex items-center justify-cente flex-col space-y-2">
+          <div className="justify-cente flex flex-col items-center space-y-2">
             <div>
               <FontAwesomeIcon icon={faUpload} size={isSmaller ? "2x" : "5x"} />
             </div>
@@ -324,7 +325,12 @@ export const SecretDropzone = ({
                           </FormControl>
                         )}
                       />
-                      <FormControl label="Secret Path" className="flex-grow" isRequired>
+                      <FormControl
+                        label="Secret Path"
+                        className="flex-grow"
+                        isRequired
+                        icon={<GlobPatternExamples />}
+                      >
                         <Input
                           {...register("secretPath")}
                           placeholder="Provide a path, default is /"
@@ -334,7 +340,7 @@ export const SecretDropzone = ({
                     <div className="border-t border-mineshaft-600 pt-4">
                       <div className="mb-4 flex items-center justify-between">
                         <div>Secrets</div>
-                        <div className="w-1/2 flex items-center space-x-2">
+                        <div className="flex w-1/2 items-center space-x-2">
                           <Input
                             placeholder="Search for secret"
                             value={searchFilter}
@@ -367,7 +373,7 @@ export const SecretDropzone = ({
                       {!isSecretsLoading && !secrets?.secrets?.length && (
                         <EmptyState title="No secrets found" icon={faKey} />
                       )}
-                      <div className="grid grid-cols-2 gap-4 max-h-64 overflow-auto thin-scrollbar ">
+                      <div className="thin-scrollbar grid max-h-64 grid-cols-2 gap-4 overflow-auto ">
                         {isSecretsLoading &&
                           Array.apply(0, Array(2)).map((_x, i) => (
                             <Skeleton

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
+import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples";
 import {
   Checkbox,
   FormControl,
@@ -98,7 +99,7 @@ export const MultiEnvProjectPermission = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         (selectedPermissionCategory !== Permission.NoAccess || isCustom) &&
           "border-l-2 border-primary-600"
       )}
@@ -107,8 +108,8 @@ export const MultiEnvProjectPermission = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -130,12 +131,19 @@ export const MultiEnvProjectPermission = ({
         animate={{ height: isCustom ? "auto" : 0 }}
         className="overflow-hidden"
       >
-        <TableContainer className="border-mineshaft-500 mt-6">
+        <TableContainer className="mt-6 border-mineshaft-500">
           <Table>
             <THead>
               <Tr>
                 <Th />
-                <Th className="min-w-[8rem]">Secret Path</Th>
+                <Th className="min-w-[8rem]">
+                  <div className="flex items-center gap-2">
+                    Secret Path
+                    <span className="text-xs normal-case">
+                      <GlobPatternExamples />
+                    </span>
+                  </div>
+                </Th>
                 <Th className="text-center">View</Th>
                 <Th className="text-center">Create</Th>
                 <Th className="text-center">Modify</Th>

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -169,7 +169,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   return (
     <div>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
-        <div className="flex justify-between mb-2 items-center">
+        <div className="mb-2 flex items-center justify-between">
           <h1 className="text-xl font-semibold text-mineshaft-100">
             {isNewRole ? "New" : "Edit"} Role
           </h1>
@@ -211,7 +211,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
           >
             <Input {...register("description")} isReadOnly={isNonEditable} />
           </FormControl>
-          <div className="flex justify-between items-center pt-6 border-t border-t-mineshaft-800">
+          <div className="flex items-center justify-between border-t border-t-mineshaft-800 pt-6">
             <div>
               <h2 className="text-xl font-medium">Add Permission</h2>
             </div>
@@ -255,7 +255,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
             />
           </div>
         </div>
-        <div className="flex items-center space-x-4 mt-12">
+        <div className="mt-12 flex items-center space-x-4">
           <Button
             type="submit"
             isDisabled={isSubmitting || isNonEditable || !isDirty}

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from "react";
+import { useEffect } 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";
 
+import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples";
 import {
   Button,
   FormControl,
@@ -13,8 +12,7 @@ import {
   ModalClose,
   ModalContent,
   Select,
-  SelectItem,
-  Tooltip
+  SelectItem
 } from "@app/components/v2";
 
 const formSchema = yup.object({
@@ -48,7 +46,6 @@ export const AddWebhookForm = ({
   } = useForm<TFormSchema>({
     resolver: yupResolver(formSchema)
   });
-  const [showTip, setShowTip] = useState<boolean>(false);
 
   useEffect(() => {
     if (!isOpen) {
@@ -89,40 +86,7 @@ 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>
-              }
+              icon={<GlobPatternExamples />}
               isRequired
               isError={Boolean(errors?.secretPath)}
               errorText={errors?.secretPath?.message}