MVP preliminary idea for initial sync behavior

2026-10-15 07:35:09 +00:00 · 2024-03-07 15:25:53 -08:00
parent b1d049c677 6d0bea6d5f
commit 43d40d7475
368 changed files with 13516 additions and 3496 deletions
@@ -1,10 +1,12 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import axios from "axios";
 import queryString from "query-string";

+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";

-import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
+import { Button, Card, CardTitle, FormControl, Input, Select, SelectItem } from "../../../components/v2";
 import {
  useGetIntegrationAuthApps,
  useGetIntegrationAuthById
@@ -13,6 +15,7 @@ import {
 export default function CloudflareWorkersIntegrationPage() {
  const router = useRouter();
  const { mutateAsync } = useCreateIntegration();
+  const { createNotification } = useNotificationContext();

  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
@@ -22,6 +25,8 @@ export default function CloudflareWorkersIntegrationPage() {
  });

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+
  const [targetApp, setTargetApp] = useState("");
  const [targetAppId, setTargetAppId] = useState("");

@@ -56,7 +61,7 @@ export default function CloudflareWorkersIntegrationPage() {
        app: targetApp,
        appId: targetAppId,
        sourceEnvironment: selectedSourceEnvironment,
-        secretPath: "/"
+        secretPath
      });

      setIsLoading(false);
@@ -64,6 +69,18 @@ export default function CloudflareWorkersIntegrationPage() {
      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
    } catch (err) {
      console.error(err);
+
+      let errorMessage: string = "Something went wrong!";
+      if (axios.isAxiosError(err)) {
+        const { message } = err?.response?.data as { message: string };
+        errorMessage = message;
+      }
+
+      createNotification({
+        text: errorMessage,
+        type: "error"
+      });
+      setIsLoading(false);
    }
  };

@@ -96,6 +113,13 @@ export default function CloudflareWorkersIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Infisical Secret Path" className="mt-2 px-6">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Cloudflare Workers Project" className="mt-4 px-6">
          <Select
            value={targetApp}
@@ -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">