feature: migrated path inputs to new component

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)}
+            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)}
+            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>
             )}
           />