Merge pull request #1738 from Infisical/sheen/auto-complete-for-path-select

Feature: added auto-complete for secret path inputs

frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx

@@ -0,0 +1,178 @@
+import { InputHTMLAttributes, useEffect, useState } from "react";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Popover from "@radix-ui/react-popover";
+import { twMerge } from "tailwind-merge";
+
+import { useWorkspace } from "@app/context";
+import { useDebounce } from "@app/hooks";
+import { useGetFoldersByEnv } from "@app/hooks/api";
+
+import { Input } from "../Input";
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
+  value?: string | null;
+  isImport?: boolean;
+  isVisible?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  environment?: string;
+  containerClassName?: string;
+  onChange?: (arg: string) => void;
+};
+
+export const SecretPathInput = ({
+  containerClassName,
+  onChange,
+  environment,
+  value: propValue,
+  ...props
+}: Props) => {
+  const [inputValue, setInputValue] = useState(propValue ?? "");
+  const [secretPath, setSecretPath] = useState("/");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const debouncedInputValue = useDebounce(inputValue, 200);
+
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
+  const { folderNames: folders } = useGetFoldersByEnv({
+    path: secretPath,
+    environments: [environment || currentWorkspace?.environments?.[0].slug!],
+    projectId: workspaceId
+  });
+
+  useEffect(() => {
+    setInputValue(propValue ?? "/");
+  }, [propValue]);
+
+  useEffect(() => {
+    if (environment) {
+      setInputValue("/");
+      setSecretPath("/");
+      onChange?.("/");
+    }
+  }, [environment]);
+
+  useEffect(() => {
+    // update secret path if input is valid
+    if (
+      (debouncedInputValue.length > 0 &&
+        debouncedInputValue[debouncedInputValue.length - 1] === "/") ||
+      debouncedInputValue.length === 0
+    ) {
+      setSecretPath(debouncedInputValue);
+    }
+
+    // filter suggestions based on matching
+    const searchFragment = debouncedInputValue.split("/").pop() || "";
+    const filteredSuggestions = folders
+      .filter((suggestionEntry) =>
+        suggestionEntry.toUpperCase().startsWith(searchFragment.toUpperCase())
+      )
+      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+
+    setSuggestions(filteredSuggestions);
+  }, [debouncedInputValue]);
+
+  const handleSuggestionSelect = (selectedIndex: number) => {
+    if (!suggestions[selectedIndex]) {
+      return;
+    }
+
+    const validPaths = inputValue.split("/");
+    validPaths.pop();
+
+    const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}`;
+    onChange?.(newValue);
+    setInputValue(newValue);
+    setSecretPath(newValue);
+    setHighlightedIndex(-1);
+    setSuggestions([]);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const mod = (n: number, m: number) => ((n % m) + m) % m;
+    if (e.key === "ArrowDown") {
+      setHighlightedIndex((prevIndex) => mod(prevIndex + 1, suggestions.length));
+    } else if (e.key === "ArrowUp") {
+      setHighlightedIndex((prevIndex) => mod(prevIndex - 1, suggestions.length));
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      handleSuggestionSelect(highlightedIndex);
+    }
+    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const handleInputChange = (e: any) => {
+    // propagate event to react-hook-form onChange
+    if (onChange) {
+      onChange(e.target.value);
+    }
+
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <Popover.Root
+      open={suggestions.length > 0 && inputValue.length > 1}
+      onOpenChange={() => {
+        setHighlightedIndex(-1);
+      }}
+    >
+      <Popover.Trigger asChild>
+        <Input
+          {...props}
+          type="text"
+          autoComplete="off"
+          onKeyDown={handleKeyDown}
+          value={inputValue}
+          onChange={handleInputChange}
+          className={containerClassName}
+        />
+      </Popover.Trigger>
+      <Popover.Content
+        align="start"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={twMerge(
+          "relative top-2 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+        )}
+        style={{
+          width: "var(--radix-popover-trigger-width)",
+          maxHeight: "var(--radix-select-content-available-height)"
+        }}
+      >
+        <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md text-white">
+          {suggestions.map((suggestion, i) => (
+            <div
+              tabIndex={0}
+              role="button"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                setHighlightedIndex(i);
+                handleSuggestionSelect(i);
+              }}
+              style={{ pointerEvents: "auto" }}
+              className="flex items-center justify-between border-mineshaft-600 text-left"
+              key={`secret-reference-secret-${i + 1}`}
+            >
+              <div
+                className={`${
+                  highlightedIndex === i ? "bg-gray-600" : ""
+                } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+              >
+                <div className="flex gap-2">
+                  <div className="flex items-center text-yellow-700">
+                    <FontAwesomeIcon icon={faFolder} />
+                  </div>
+                  <div className="text-md w-10/12 truncate text-left">{suggestion}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

frontend/src/components/v2/SecretPathInput/index.tsx

@@ -0,0 +1 @@
+export { SecretPathInput } from "./SecretPathInput";

frontend/src/pages/integrations/cloudflare-pages/create.tsx

@@ -4,16 +4,10 @@ import axios from "axios";
 import queryString from "query-string";
 
 import { createNotification } from "@app/components/notifications";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
 
-import {
-  Button,
-  Card,
-  CardTitle,
-  FormControl,
-  Input,
-  Select,
-  SelectItem} from "../../../components/v2";
+import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
@@ -27,7 +21,6 @@ const cloudflareEnvironments = [
 export default function CloudflarePagesIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
   const [secretPath, setSecretPath] = useState("/");
@@ -130,9 +123,10 @@ export default function CloudflarePagesIntegrationPage() {
           </Select>
         </FormControl>
         <FormControl label="Infisical Secret Path" className="mt-2 px-6">
-          <Input
+          <SecretPathInput
             value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
+            onChange={(value) => setSecretPath(value)}
+            environment={selectedSourceEnvironment}
             placeholder="Provide a path, default is /"
           />
         </FormControl>

frontend/src/pages/integrations/cloudflare-workers/create.tsx

@@ -4,17 +4,10 @@ import axios from "axios";
 import queryString from "query-string";
 
 import { createNotification } from "@app/components/notifications";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
 
-import {
-  Button,
-  Card,
-  CardTitle,
-  FormControl,
-  Input,
-  Select,
-  SelectItem
-} from "../../../components/v2";
+import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
@@ -23,7 +16,6 @@ import {
 export default function CloudflareWorkersIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
@@ -122,9 +114,10 @@ export default function CloudflareWorkersIntegrationPage() {
           </Select>
         </FormControl>
         <FormControl label="Infisical Secret Path" className="mt-2 px-6">
-          <Input
+          <SecretPathInput
             value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
+            onChange={(value) => setSecretPath(value)}
+            environment={selectedSourceEnvironment}
             placeholder="Provide a path, default is /"
           />
         </FormControl>

frontend/src/pages/integrations/gcp-secret-manager/create.tsx

@@ -11,6 +11,7 @@ import { motion } from "framer-motion";
 import queryString from "query-string";
 import * as yup from "yup";
 
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { usePopUp } from "@app/hooks";
 import { useCreateIntegration } from "@app/hooks/api";
 
@@ -258,7 +259,11 @@ export default function GCPSecretManagerCreateIntegrationPage() {
                     isError={Boolean(error)}
                     errorText={error?.message}
                   >
-                    <Input {...field} placeholder="/" />
+                    <SecretPathInput
+                      {...field}
+                      environment={selectedSourceEnvironment}
+                      placeholder="/"
+                    />
                   </FormControl>
                 )}
               />

frontend/src/pages/integrations/gitlab/create.tsx

@@ -11,6 +11,7 @@ import { motion } from "framer-motion";
 import queryString from "query-string";
 import * as yup from "yup";
 
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { usePopUp } from "@app/hooks";
 import { useCreateIntegration } from "@app/hooks/api";
 
@@ -268,7 +269,11 @@ export default function GitLabCreateIntegrationPage() {
                     isError={Boolean(error)}
                     errorText={error?.message}
                   >
-                    <Input {...field} placeholder="/" />
+                    <SecretPathInput
+                      {...field}
+                      placeholder="/"
+                      environment={selectedSourceEnvironment}
+                    />
                   </FormControl>
                 )}
               />

frontend/src/pages/integrations/hasura-cloud/create.tsx

@@ -9,15 +9,8 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import queryString from "query-string";
 import * as yup from "yup";
 
-import {
-  Button,
-  Card,
-  CardTitle,
-  FormControl,
-  Input,
-  Select,
-  SelectItem
-} from "@app/components/v2";
+import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration } from "@app/hooks/api";
 import {
   useGetIntegrationAuthApps,
@@ -38,6 +31,7 @@ export default function HasuraCloudCreateIntegrationPage() {
   const {
     control,
     handleSubmit,
+    watch,
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: yupResolver(schema)
@@ -51,6 +45,8 @@ export default function HasuraCloudCreateIntegrationPage() {
     (integrationAuthId as string) ?? ""
   );
 
+  const selectedSourceEnvironment = watch("sourceEnvironment");
+
   const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } =
     useGetIntegrationAuthApps({
       integrationAuthId: (integrationAuthId as string) ?? ""
@@ -147,7 +143,7 @@ export default function HasuraCloudCreateIntegrationPage() {
             name="secretPath"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Secrets Path" errorText={error?.message} isError={Boolean(error)}>
-                <Input {...field} />
+                <SecretPathInput {...field} environment={selectedSourceEnvironment} />
               </FormControl>
             )}
           />

frontend/src/pages/integrations/heroku/create.tsx

@@ -17,19 +17,12 @@ import queryString from "query-string";
 // import { App, Pipeline } from "@app/hooks/api/integrationAuth/types";
 import * as yup from "yup";
 
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 // import { RadioGroup } from "@app/components/v2/RadioGroup";
 import { useCreateIntegration } from "@app/hooks/api";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
 
-import {
-  Button,
-  Card,
-  CardTitle,
-  FormControl,
-  Input,
-  Select,
-  SelectItem
-} from "../../../components/v2";
+import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
@@ -280,7 +273,11 @@ export default function HerokuCreateIntegrationPage() {
             name="secretPath"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Secrets Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} placeholder="/" />
+                <SecretPathInput
+                  {...field}
+                  placeholder="/"
+                  environment={selectedSourceEnvironment}
+                />
               </FormControl>
             )}
           />

frontend/src/pages/integrations/render/create.tsx

@@ -15,6 +15,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import queryString from "query-string";
 import * as yup from "yup";
 
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration } from "@app/hooks/api";
 
 import {
@@ -22,7 +23,6 @@ import {
   Card,
   CardTitle,
   FormControl,
-  Input,
   Select,
   SelectItem,
   Switch
@@ -185,7 +185,11 @@ export default function RenderCreateIntegrationPage() {
             name="secretPath"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Secrets Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} placeholder="/" />
+                <SecretPathInput
+                  {...field}
+                  placeholder="/"
+                  environment={selectedSourceEnvironment}
+                />
               </FormControl>
             )}
           />

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/SpecificPrivilegeSection.tsx

@@ -34,6 +34,7 @@ import {
   Tag,
   Tooltip
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -115,6 +116,7 @@ const SpecificPrivilegeSecretForm = ({
   });
 
   const temporaryAccessField = privilegeForm.watch("temporaryAccess");
+  const selectedEnvironmentSlug = privilegeForm.watch("environmentSlug");
   const isTemporary = temporaryAccessField?.isTemporary;
   const isExpired =
     temporaryAccessField.isTemporary &&
@@ -220,7 +222,12 @@ const SpecificPrivilegeSecretForm = ({
             name="secretPath"
             render={({ field }) => (
               <FormControl label="Secret Path">
-                <Input {...field} isDisabled={isMemberEditDisabled} className="w-48" />
+                <SecretPathInput
+                  {...field}
+                  isDisabled={isMemberEditDisabled}
+                  environment={selectedEnvironmentSlug}
+                  containerClassName="w-48"
+                />
               </FormControl>
             )}
           />

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection.tsx

@@ -34,6 +34,7 @@ import {
   Tag,
   Tooltip
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -107,6 +108,7 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
   });
 
   const temporaryAccessField = privilegeForm.watch("temporaryAccess");
+  const selectedEnvironmentSlug = privilegeForm.watch("environmentSlug");
   const isTemporary = temporaryAccessField?.isTemporary;
   const isExpired =
     temporaryAccessField.isTemporary &&
@@ -208,7 +210,12 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
             name="secretPath"
             render={({ field }) => (
               <FormControl label="Secret Path">
-                <Input {...field} isDisabled={isMemberEditDisabled} className="w-48" />
+                <SecretPathInput
+                  {...field}
+                  isDisabled={isMemberEditDisabled}
+                  containerClassName="w-48"
+                  environment={selectedEnvironmentSlug}
+                />
               </FormControl>
             )}
           />

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx

@@ -20,6 +20,7 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useWorkspace } from "@app/context";
 import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
 import { TSecretApprovalPolicy } from "@app/hooks/api/types";
@@ -59,13 +60,14 @@ export const SecretPolicyForm = ({
     control,
     handleSubmit,
     reset,
+    watch,
     formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema),
     values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
   });
   const { currentWorkspace } = useWorkspace();
-  
+  const selectedEnvironment = watch("environment");
 
   const environments = currentWorkspace?.environments || [];
   useEffect(() => {
@@ -174,7 +176,11 @@ export const SecretPolicyForm = ({
             name="secretPath"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
+                <SecretPathInput
+                  {...field}
+                  value={field.value || ""}
+                  environment={selectedEnvironment}
+                />
               </FormControl>
             )}
           />

frontend/src/views/SecretMainPage/components/ActionBar/CreateSecretImportForm.tsx

@@ -4,15 +4,8 @@ import { AxiosError } from "axios";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useWorkspace } from "@app/context";
 import { useCreateSecretImport } from "@app/hooks/api";
 
@@ -50,12 +43,12 @@ export const CreateSecretImportForm = ({
     handleSubmit,
     control,
     reset,
+    watch,
     formState: { isSubmitting }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
   const { currentWorkspace } = useWorkspace();
   const environments = currentWorkspace?.environments || [];
-
-  
+  const selectedEnvironment = watch("environment");
 
   const { mutateAsync: createSecretImport } = useCreateSecretImport();
 
@@ -130,7 +123,7 @@ export const CreateSecretImportForm = ({
             defaultValue="/"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} />
+                <SecretPathInput {...field} environment={selectedEnvironment} />
               </FormControl>
             )}
           />

frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx

@@ -28,6 +28,7 @@ import {
   Skeleton,
   Tooltip
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useDebounce } from "@app/hooks";
 import { useGetProjectSecrets } from "@app/hooks/api";
@@ -76,7 +77,6 @@ export const CopySecretsFromBoard = ({
     handleSubmit,
     control,
     watch,
-    register,
     reset,
     setValue,
     formState: { isDirty }
@@ -192,9 +192,19 @@ export const CopySecretsFromBoard = ({
                 </FormControl>
               )}
             />
-            <FormControl label="Secret Path" className="flex-grow" isRequired>
-              <Input {...register("secretPath")} placeholder="Provide a path, default is /" />
-            </FormControl>
+            <Controller
+              control={control}
+              name="secretPath"
+              render={({ field }) => (
+                <FormControl label="Secret Path" className="flex-grow" isRequired>
+                  <SecretPathInput
+                    {...field}
+                    placeholder="Provide a path, default is /"
+                    environment={selectedEnvSlug}
+                  />
+                </FormControl>
+              )}
+            />
           </div>
           <div className="border-t border-mineshaft-600 pt-4">
             <div className="mb-4 flex items-center justify-between">

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx

@@ -3,6 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { Button, FormControl, Input, Select, SelectItem, Spinner } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useWorkspace } from "@app/context";
 import { useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
 
@@ -78,7 +79,7 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
         defaultValue="/"
         render={({ field }) => (
           <FormControl className="capitalize" label="Secret path">
-            <Input {...field} />
+            <SecretPathInput {...field} environment={environment} />
           </FormControl>
         )}
       />