Complete render integration auto-redeploy feature

backend/src/server/routes/v1/integration-router.ts

@@ -33,6 +33,7 @@ export const registerIntegrationRouter = async (server: FastifyZodProvider) => {
             secretPrefix: z.string().optional(),
             secretSuffix: z.string().optional(),
             initialSyncBehavior: z.string().optional(),
+            shouldAutoRedeploy: z.boolean().optional(),
             secretGCPLabel: z
               .object({
                 labelName: z.string(),

backend/src/services/integration-auth/integration-sync-secret.ts

@@ -1307,6 +1307,22 @@ const syncSecretsRender = async ({
       }
     }
   );
+
+  if (integration.metadata) {
+    const metadata = z.record(z.any()).parse(integration.metadata);
+    if (metadata.shouldAutoRedeploy === true) {
+      await request.post(
+        `${IntegrationUrls.RENDER_API_URL}/v1/services/${integration.appId}/deploys`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
+          }
+        }
+      );
+    }
+  }
 };
 
 /**

frontend/src/hooks/api/integrations/queries.tsx

@@ -62,6 +62,7 @@ export const useCreateIntegration = () => {
         secretPrefix?: string;
         secretSuffix?: string;
         initialSyncBehavior?: string;
+        shouldAutoRedeploy?: boolean;
       }
     }) => {
       const { data: { integration } } = await apiRequest.post("/api/v1/integration", {

frontend/src/pages/integrations/render/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";
@@ -10,7 +11,9 @@ import {
   faCircleInfo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
 import queryString from "query-string";
+import * as yup from "yup";
 
 import { useCreateIntegration } from "@app/hooks/api";
 
@@ -21,7 +24,8 @@ import {
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Switch
 } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
@@ -29,9 +33,28 @@ import {
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+const schema = yup.object({
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetAppId: yup.string().required("Render service is required"),
+  shouldAutoRedeploy: yup.boolean()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function RenderCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
+  
+  const { control, handleSubmit, setValue, watch } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      secretPath: "/",
+      shouldAutoRedeploy: false
+    }
+  });
+
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -44,28 +67,29 @@ export default function RenderCreateIntegrationPage() {
       integrationAuthId: (integrationAuthId as string) ?? ""
     });
 
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [targetApp, setTargetApp] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
     }
   }, [workspace]);
 
   useEffect(() => {
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetApp(integrationAuthApps[0].name);
+        setValue("targetAppId", integrationAuthApps[0].appId as string);
       } else {
-        setTargetApp("none");
+        setValue("targetAppId", "none");
       }
     }
   }, [integrationAuthApps]);
-
+  
-  const handleButtonClick = async () => {
+  const onFormSubmit = async ({
+    secretPath,
+    targetAppId,
+    shouldAutoRedeploy
+  }: FormData) => {
     try {
       if (!integrationAuth?.id) return;
 
@@ -74,12 +98,15 @@ export default function RenderCreateIntegrationPage() {
       await mutateAsync({
         integrationAuthId: integrationAuth?.id,
         isActive: true,
-        app: targetApp,
+        app: integrationAuthApps?.find(
-        appId: integrationAuthApps?.find(
+          (integrationAuthApp) => integrationAuthApp.appId === targetAppId
-          (integrationAuthApp) => integrationAuthApp.name === targetApp
+        )?.name,
-        )?.appId,
+        appId: targetAppId,
         sourceEnvironment: selectedSourceEnvironment,
-        secretPath
+        secretPath,
+        metadata: {
+          shouldAutoRedeploy
+        }
       });
 
       setIsLoading(false);
@@ -88,14 +115,16 @@ export default function RenderCreateIntegrationPage() {
     } catch (err) {
       console.error(err);
     }
-  };
+  }
 
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
-    integrationAuthApps &&
+    integrationAuthApps ? (
-    targetApp ? (
+    <form 
-    <div className="flex h-full w-full flex-col items-center justify-center">
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="flex h-full w-full flex-col items-center justify-center"
+    >
       <Head>
         <title>Set Up Render Integration</title>
         <link rel="icon" href="/infisical.ico" />
@@ -129,57 +158,107 @@ export default function RenderCreateIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
-        <FormControl label="Project Environment" className="px-6">
+        <div className="px-6">
-          <Select
+          <Controller
-            value={selectedSourceEnvironment}
+            control={control}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            name="selectedSourceEnvironment"
-            className="w-full border border-mineshaft-500"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-          >
+              <FormControl
-            {workspace?.environments.map((sourceEnvironment) => (
+                label="Project Environment"
-              <SelectItem
+                errorText={error?.message}
-                value={sourceEnvironment.slug}
+                isError={Boolean(error)}
-                key={`source-environment-${sourceEnvironment.slug}`}
               >
-                {sourceEnvironment.name}
+                <Select
-              </SelectItem>
+                  defaultValue={field.value}
-            ))}
+                  {...field}
-          </Select>
+                  onValueChange={(e) => onChange(e)}
-        </FormControl>
+                  className="w-full"
-        <FormControl label="Secrets Path" className="px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="Render Service" className="px-6">
-          <Select
-            value={targetApp}
-            onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.name}
-                  key={`target-app-${integrationAuthApp.name}`}
                 >
-                  {integrationAuthApp.name}
+                  {workspace?.environments.map((sourceEnvironment) => (
-                </SelectItem>
+                    <SelectItem
-              ))
+                      value={sourceEnvironment.slug}
-            ) : (
+                      key={`source-environment-${sourceEnvironment.slug}`}
-              <SelectItem value="none" key="target-app-none">
+                    >
-                No services found
+                      {sourceEnvironment.name}
-              </SelectItem>
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
             )}
-          </Select>
+          />
-        </FormControl>
+          <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="targetAppId"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  label="Render Service"
+                  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.appId as string)}
+                          key={`target-app-${String(integrationAuthApp.appId)}`}
+                        >
+                          {integrationAuthApp.name}
+                        </SelectItem>
+                      ))
+                    ) : (
+                      <SelectItem value="none" key="target-app-none">
+                        No services found
+                      </SelectItem>
+                    )}
+                  </Select>
+                </FormControl>
+              );
+            }}
+          />
+          <div className="mt-8 mb-[2.36rem] ml-1">
+            <Controller
+              control={control}
+              name="shouldAutoRedeploy"
+              render={({ field: { onChange, value } }) => (
+                <Switch
+                  id="redeploy-render"
+                  onCheckedChange={(isChecked) => onChange(isChecked)}
+                  isChecked={value}
+                >
+                  Auto-redeploy service upon secret change
+                </Switch>
+              )}
+            />
+          </div>
+        </div>
         <Button
-          onClick={handleButtonClick}
+          colorSchema="primary"
-          color="mineshaft"
           variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6"
+          className="mb-8 ml-auto mr-6 w-min mt-4"
+          size="sm"
+          type="submit"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
@@ -197,7 +276,7 @@ export default function RenderCreateIntegrationPage() {
           cause an unexpected override of current secrets in Render with secrets from Infisical.
         </span>
       </div>
-    </div>
+    </form>
   ) : (
     <div className="flex h-full w-full items-center justify-center">
       <Head>