MVP preliminary idea for initial sync behavior

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

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,11 +7,12 @@ import { useRouter } from "next/router";
 import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
-
 import { RadioGroup } from "@app/components/v2/RadioGroup";
 import { useCreateIntegration } from "@app/hooks/api";
 import { useGetIntegrationAuthHerokuPipelines } from "@app/hooks/api/integrationAuth/queries";
 import { App, Pipeline } from "@app/hooks/api/integrationAuth/types";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
 
 import {
   Button,
@@ -26,9 +28,34 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useCreateWsEnvironment, useGetWorkspaceById } from "../../../hooks/api/workspace";
+import { IntegrationSyncBehavior, syncBehaviors } from "@app/hooks/api/integrations/types";
+
+const schema = yup.object({
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetApp: yup.string().required("Heroku app is required"),
+  syncBehavior: yup
+    .string()
+    .oneOf(syncBehaviors.map((b) => b.value), "Invalid sync behavior")
+    .required("Initial sync behavior is required")
+});
+
+type FormData = yup.InferType<typeof schema>;
 
 export default function HerokuCreateIntegrationPage() {
   const router = useRouter();
+  
+  const { control, handleSubmit, setValue, watch } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      secretPath: "/",
+      syncBehavior: IntegrationSyncBehavior.PREFER_SOURCE
+    }
+  });
+
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
+
+
   const { mutateAsync } = useCreateIntegration();
   const { mutateAsync: mutateAsyncEnv } = useCreateWsEnvironment();
 
@@ -43,20 +70,17 @@ export default function HerokuCreateIntegrationPage() {
   const { data: integrationAuthPipelineCouplings } = useGetIntegrationAuthHerokuPipelines({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
-
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  
   const [uniquePipelines, setUniquePipelines] = useState<Pipeline[]>();
   const [selectedPipeline, setSelectedPipeline] = useState("");
   const [selectedPipelineApps, setSelectedPipelineApps] = useState<App[]>();
-  const [targetApp, setTargetApp] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
   const [integrationType, setIntegrationType] = useState("App");
-
+  
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
     }
   }, [workspace]);
 
@@ -71,6 +95,8 @@ export default function HerokuCreateIntegrationPage() {
               }))
               .map((obj) => JSON.stringify(obj))
           )).map((str) => JSON.parse(str)) as { pipelineId: string; name: string }[]
+          
+          [... (new Set())]
         setUniquePipelines(uniquePipelinesConst);
         if (uniquePipelinesConst) {
           if (uniquePipelinesConst!.length > 0) {
@@ -93,58 +119,86 @@ export default function HerokuCreateIntegrationPage() {
   useEffect(() => {
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetApp(integrationAuthApps[0].name);
+        setValue("targetApp", integrationAuthApps[0].name);
       } else {
-        setTargetApp("none");
+        setValue("targetApp", "none");
       }
     }
   }, [integrationAuthApps]);
 
-  const handleButtonClick = async () => {
-    try {
-      setIsLoading(true);
+  // const handleButtonClick = async () => {
+  //   try {
+  //     setIsLoading(true);
 
+  //     if (!integrationAuth?.id) return;
+
+  //     if (integrationType === "App") {
+  //       await mutateAsync({
+  //         integrationAuthId: integrationAuth?.id,
+  //         isActive: true,
+  //         app: targetApp,
+  //         sourceEnvironment: selectedSourceEnvironment,
+  //         secretPath
+  //       });
+  //     } else if (integrationType === "Pipeline") {
+  //       selectedPipelineApps?.map(async (app, index) => {
+  //         setTimeout(async () => {
+  //           await mutateAsyncEnv({
+  //             workspaceId: String(localStorage.getItem("projectData.id")),
+  //             name: app.name,
+  //             slug: app.name.toLowerCase().replaceAll(" ", "-")
+  //           });
+  //           await mutateAsync({
+  //             integrationAuthId: integrationAuth?.id,
+  //             isActive: true,
+  //             app: app.name,
+  //             sourceEnvironment: app.name.toLowerCase().replaceAll(" ", "-"),
+  //             secretPath
+  //           })
+  //         }, 1000*index)
+  //       })
+  //     }
+
+  //     setIsLoading(false);
+  //     router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+  //   } catch (err) {
+  //     console.error(err);
+  //   }
+  // };
+
+  const onFormSubmit = async ({
+    selectedSourceEnvironment: sce,
+    secretPath,
+    targetApp,
+    syncBehavior,
+  }: FormData) => {
+    try {
       if (!integrationAuth?.id) return;
 
-      if (integrationType === "App") {
-        await mutateAsync({
-          integrationAuthId: integrationAuth?.id,
-          isActive: true,
-          app: targetApp,
-          sourceEnvironment: selectedSourceEnvironment,
-          secretPath
-        });
-      } else if (integrationType === "Pipeline") {
-        selectedPipelineApps?.map(async (app, index) => {
-          setTimeout(async () => {
-            await mutateAsyncEnv({
-              workspaceId: String(localStorage.getItem("projectData.id")),
-              name: app.name,
-              slug: app.name.toLowerCase().replaceAll(" ", "-")
-            });
-            await mutateAsync({
-              integrationAuthId: integrationAuth?.id,
-              isActive: true,
-              app: app.name,
-              sourceEnvironment: app.name.toLowerCase().replaceAll(" ", "-"),
-              secretPath
-            })
-          }, 1000*index)
-        })
-      }
+      setIsLoading(true);
+
+      await mutateAsync({
+        integrationAuthId: integrationAuth?.id,
+        isActive: true,
+        app: targetApp,
+        sourceEnvironment: selectedSourceEnvironment,
+        secretPath,
+        metadata: {
+          syncBehavior
+        }
+      });
 
       setIsLoading(false);
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
     }
-  };
+  }
 
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetApp ? (
+    integrationAuthApps ? (
     <div className="flex flex-col h-full w-full items-center justify-center">
       <Head>
         <title>Set Up Heroku Integration</title>
@@ -179,94 +233,120 @@ export default function HerokuCreateIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
-        <RadioGroup 
-          value={integrationType} 
-          onValueChange={(val) => setIntegrationType(val)}
-        />
-        {integrationType === "Pipeline" && <>
-        <FormControl label="Heroku Pipeline" className="px-6">
-          <Select
-            value={selectedPipeline}
-            onValueChange={(val) => setSelectedPipeline(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {uniquePipelines?.map((pipeline) => (
-              <SelectItem
-                value={pipeline.name}
-                key={`source-environment-${pipeline.name}`}
+        <form onSubmit={handleSubmit(onFormSubmit)} className="px-6">
+          <Controller
+            control={control}
+            name="selectedSourceEnvironment"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Project Environment"
+                errorText={error?.message}
+                isError={Boolean(error)}
               >
-                {pipeline.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <div className="px-6 text-sm mb-4 inline-block text-bunker-300">
-          After creating the integration, the following Heroku apps will be automatically synced to Infisical: 
-          <div className="flex flex-col">
-            {selectedPipelineApps?.map(app => <p key={app.name} className="text-bunker-200 pl-0.5 inline-flex"><span className="text-primary pr-1">-&gt;</span> {app.name}</p>)}
-          </div>
-          From then on, every new app in the selected pipeline will be synced to Infisical, too. 
-        </div>
-        </>}
-        {integrationType === "App" && <>
-        <FormControl label="Project Environment" className="px-6">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`source-environment-${sourceEnvironment.slug}`}
-              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path" className="px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {workspace?.environments.map((sourceEnvironment) => (
+                    <SelectItem
+                      value={sourceEnvironment.slug}
+                      key={`source-environment-${sourceEnvironment.slug}`}
+                    >
+                      {sourceEnvironment.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
           />
-        </FormControl>
-        <FormControl label="Heroku App" className="px-6">
-          <Select
-            value={targetApp}
-            onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+          <Controller
+            control={control}
+            defaultValue=""
+            name="secretPath"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Secrets Path"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="/" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="targetApp"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  label="Heroku App"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    {...field}
+                    onValueChange={(e) => {
+                      if (e === "") return;
+                      onChange(e);
+                    }}
+                    className="w-full"
+                  >
+                    {integrationAuthApps.length > 0 ? (
+                      integrationAuthApps.map((integrationAuthApp) => (
+                        <SelectItem
+                          value={String(integrationAuthApp.name as string)}
+                          key={`target-app-${String(integrationAuthApp.appId)}`}
+                        >
+                          {integrationAuthApp.name}
+                        </SelectItem>
+                      ))
+                    ) : (
+                      <SelectItem value="none" key="target-app-none">
+                        No apps found
+                      </SelectItem>
+                    )}
+                  </Select>
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name="syncBehavior"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Initial Sync Behavior"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select {...field} onValueChange={(e) => onChange(e)} className="w-full">
+                  {syncBehaviors.map((b) => {
+                    return (
+                      <SelectItem value={b.value} key={`sync-behavior-${b.value}`}>
+                        {b.label}
+                      </SelectItem>
+                    );
+                  })}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mb-6 mt-2 ml-auto"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
             isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.name}
-                  key={`target-app-${integrationAuthApp.name}`}
-                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No apps found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl></>}
-        <Button
-          onClick={handleButtonClick}
-          color="mineshaft"
-          variant="outline_bg"
-          className="mt-2 mb-6 ml-auto mr-6"
-          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
-        >
-          Create Integration
-        </Button>
+            Create Integration
+          </Button>
+        </form>
       </Card>
-      {integrationType === "App" && <>
+      {/* {integrationType === "App" && <>
       <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
       <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
         <div className="flex flex-row items-center">
@@ -277,7 +357,7 @@ export default function HerokuCreateIntegrationPage() {
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in Heroku with secrets from Infisical.
         </span>
-      </div></>}
+      </div></>} */}
     </div>
   ) : (
     <div className="flex h-full w-full items-center justify-center">