feat: support render environment groups (#4327)

* feat: support env groups in render sync

* fix: update doc

* Update backend/src/services/app-connection/render/render-connection-service.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* fix: pr changes

* fix: lint and type check

* fix: changes

* fix: remove secrets

* fix: MAX iterations in render sync

* fix: render sync review fields

* fix: pr changes

* fix: lint

* fix: changes

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/RenderSyncFields.tsx

@@ -5,7 +5,9 @@ import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/Se
 import { FilterableSelect, FormControl, Select, SelectItem } from "@app/components/v2";
 import { RENDER_SYNC_SCOPES } from "@app/helpers/secretSyncs";
 import {
+  TRenderEnvironmentGroup,
   TRenderService,
+  useRenderConnectionListEnvironmentGroups,
   useRenderConnectionListServices
 } from "@app/hooks/api/appConnections/render";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
@@ -19,6 +21,7 @@ export const RenderSyncFields = () => {
   >();
 
   const connectionId = useWatch({ name: "connection.id", control });
+  const selectedScope = useWatch({ name: "destinationConfig.scope", control });
 
   const { data: services = [], isPending: isServicesPending } = useRenderConnectionListServices(
     connectionId,
@@ -27,11 +30,17 @@ export const RenderSyncFields = () => {
     }
   );
 
+  const { data: groups = [], isPending: isGroupsPending } =
+    useRenderConnectionListEnvironmentGroups(connectionId, {
+      enabled: Boolean(connectionId) && selectedScope === RenderSyncScope.EnvironmentGroup
+    });
+
   return (
     <>
       <SecretSyncConnectionField
         onChange={() => {
           setValue("destinationConfig.serviceId", "");
+          setValue("destinationConfig.environmentGroupId", "");
           setValue("destinationConfig.type", RenderSyncType.Env);
           setValue("destinationConfig.scope", RenderSyncScope.Service);
         }}
@@ -83,30 +92,67 @@ export const RenderSyncFields = () => {
           </FormControl>
         )}
       />
-      <Controller
-        name="destinationConfig.serviceId"
-        control={control}
-        render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl errorText={error?.message} isError={Boolean(error?.message)} label="Service">
-            <FilterableSelect
-              isLoading={isServicesPending && Boolean(connectionId)}
-              isDisabled={!connectionId}
-              value={services ? (services.find((service) => service.id === value) ?? []) : []}
-              onChange={(option) => {
-                onChange((option as SingleValue<TRenderService>)?.id ?? null);
-                setValue(
-                  "destinationConfig.serviceName",
-                  (option as SingleValue<TRenderService>)?.name ?? ""
-                );
-              }}
-              options={services}
-              placeholder="Select a service..."
-              getOptionLabel={(option) => option.name}
-              getOptionValue={(option) => option.id.toString()}
-            />
-          </FormControl>
-        )}
-      />
+      {selectedScope === RenderSyncScope.Service && (
+        <Controller
+          name="destinationConfig.serviceId"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Service"
+            >
+              <FilterableSelect
+                isLoading={isServicesPending && Boolean(connectionId)}
+                isDisabled={!connectionId}
+                value={services ? (services.find((service) => service.id === value) ?? []) : []}
+                onChange={(option) => {
+                  onChange((option as SingleValue<TRenderService>)?.id ?? null);
+                  setValue(
+                    "destinationConfig.serviceName",
+                    (option as SingleValue<TRenderService>)?.name ?? ""
+                  );
+                }}
+                options={services}
+                placeholder="Select a service..."
+                getOptionLabel={(option) => option.name}
+                getOptionValue={(option) => option.id.toString()}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+
+      {selectedScope === RenderSyncScope.EnvironmentGroup && (
+        <Controller
+          name="destinationConfig.environmentGroupId"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Environment Group"
+            >
+              <FilterableSelect
+                isLoading={isGroupsPending && Boolean(connectionId)}
+                isDisabled={!connectionId}
+                value={groups ? (groups.find((g) => g.id === value) ?? []) : []}
+                onChange={(option) => {
+                  onChange((option as SingleValue<TRenderEnvironmentGroup>)?.id ?? null);
+                  setValue(
+                    "destinationConfig.environmentGroupName",
+                    (option as SingleValue<TRenderEnvironmentGroup>)?.name ?? ""
+                  );
+                }}
+                options={groups}
+                placeholder="Select an environment group..."
+                getOptionLabel={(option) => option.name}
+                getOptionValue={(option) => option.id.toString()}
+              />
+            </FormControl>
+          )}
+        />
+      )}
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx

@@ -4,6 +4,7 @@ import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { Badge } from "@app/components/v2";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { RenderSyncScope } from "@app/hooks/api/secretSyncs/types/render-sync";
 
 export const RenderSyncOptionsReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Render }>();
@@ -27,13 +28,20 @@ export const RenderSyncOptionsReviewFields = () => {
 
 export const RenderSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Render }>();
-  const serviceName = watch("destinationConfig.serviceName");
-  const scope = watch("destinationConfig.scope");
+  const config = watch("destinationConfig");
 
   return (
     <>
-      <GenericFieldLabel label="Scope">{scope}</GenericFieldLabel>
-      <GenericFieldLabel label="Service">{serviceName}</GenericFieldLabel>
+      <GenericFieldLabel label="Scope">{config.scope}</GenericFieldLabel>
+      {config.scope === RenderSyncScope.Service ? (
+        <GenericFieldLabel label="Service">
+          {config.serviceName ?? config.serviceId}
+        </GenericFieldLabel>
+      ) : (
+        <GenericFieldLabel label="Service">
+          {config.environmentGroupName ?? config.environmentGroupId}
+        </GenericFieldLabel>
+      )}
     </>
   );
 };

frontend/src/components/secret-syncs/forms/schemas/render-sync-destination-schema.ts

@@ -17,6 +17,12 @@ export const RenderSyncDestinationSchema = BaseSecretSyncSchema(
         serviceId: z.string().trim().min(1, "Service is required"),
         serviceName: z.string().trim().optional(),
         type: z.nativeEnum(RenderSyncType)
+      }),
+      z.object({
+        scope: z.literal(RenderSyncScope.EnvironmentGroup),
+        environmentGroupId: z.string().trim().min(1, "Environment Group ID is required"),
+        environmentGroupName: z.string().trim().optional(),
+        type: z.nativeEnum(RenderSyncType)
       })
     ])
   })

frontend/src/helpers/secretSyncs.ts

@@ -212,5 +212,9 @@ export const RENDER_SYNC_SCOPES: Record<RenderSyncScope, { name: string; descrip
   [RenderSyncScope.Service]: {
     name: "Service",
     description: "Infisical will sync secrets to the specified Render service."
+  },
+  [RenderSyncScope.EnvironmentGroup]: {
+    name: "EnvironmentGroup",
+    description: "Infisical will sync secrets to the specified Render environment group."
   }
 };

frontend/src/hooks/api/appConnections/render/queries.tsx

@@ -3,12 +3,14 @@ import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { appConnectionKeys } from "../queries";
-import { TRenderService } from "./types";
+import { TRenderEnvironmentGroup, TRenderService } from "./types";
 
 const renderConnectionKeys = {
   all: [...appConnectionKeys.all, "render"] as const,
   listServices: (connectionId: string) =>
-    [...renderConnectionKeys.all, "services", connectionId] as const
+    [...renderConnectionKeys.all, "services", connectionId] as const,
+  listEnvironmentGroups: (connectionId: string) =>
+    [...renderConnectionKeys.all, "environment-groups", connectionId] as const
 };
 
 export const useRenderConnectionListServices = (
@@ -35,3 +37,28 @@ export const useRenderConnectionListServices = (
     ...options
   });
 };
+
+export const useRenderConnectionListEnvironmentGroups = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TRenderEnvironmentGroup[],
+      unknown,
+      TRenderEnvironmentGroup[],
+      ReturnType<typeof renderConnectionKeys.listEnvironmentGroups>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: renderConnectionKeys.listEnvironmentGroups(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TRenderEnvironmentGroup[]>(
+        `/api/v1/app-connections/render/${connectionId}/environment-groups`
+      );
+
+      return data;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/render/types.ts

@@ -2,3 +2,8 @@ export type TRenderService = {
   id: string;
   name: string;
 };
+
+export type TRenderEnvironmentGroup = {
+  id: string;
+  name: string;
+};

frontend/src/hooks/api/secretSyncs/types/render-sync.ts

@@ -4,12 +4,19 @@ import { RootSyncOptions, TRootSecretSync } from "@app/hooks/api/secretSyncs/typ
 
 export type TRenderSync = TRootSecretSync & {
   destination: SecretSync.Render;
-  destinationConfig: {
-    scope: RenderSyncScope.Service;
-    type: RenderSyncType;
-    serviceId: string;
-    serviceName?: string;
-  };
+  destinationConfig:
+    | {
+        type: RenderSyncType;
+        scope: RenderSyncScope.Service;
+        serviceId: string;
+        serviceName?: string | undefined;
+      }
+    | {
+        type: RenderSyncType;
+        scope: RenderSyncScope.EnvironmentGroup;
+        environmentGroupId: string;
+        environmentGroupName?: string | undefined;
+      };
 
   connection: {
     app: AppConnection.Render;
@@ -23,7 +30,8 @@ export type TRenderSync = TRootSecretSync & {
 };
 
 export enum RenderSyncScope {
-  Service = "service"
+  Service = "service",
+  EnvironmentGroup = "environment-group"
 }
 
 export enum RenderSyncType {

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/RenderSyncDestinationCol.tsx

@@ -1,5 +1,8 @@
-import { useRenderConnectionListServices } from "@app/hooks/api/appConnections/render";
-import { TRenderSync } from "@app/hooks/api/secretSyncs/types/render-sync";
+import {
+  useRenderConnectionListEnvironmentGroups,
+  useRenderConnectionListServices
+} from "@app/hooks/api/appConnections/render";
+import { RenderSyncScope, TRenderSync } from "@app/hooks/api/secretSyncs/types/render-sync";
 
 import { getSecretSyncDestinationColValues } from "../helpers";
 import { SecretSyncTableCell } from "../SecretSyncTableCell";
@@ -9,21 +12,59 @@ type Props = {
 };
 
 export const RenderSyncDestinationCol = ({ secretSync }: Props) => {
+  const isServiceScope = secretSync.destinationConfig.scope === RenderSyncScope.Service;
+
   const { data: services = [], isPending } = useRenderConnectionListServices(
-    secretSync.connectionId
+    secretSync.connectionId,
+    {
+      enabled: isServiceScope
+    }
   );
 
-  const { primaryText, secondaryText } = getSecretSyncDestinationColValues({
-    ...secretSync,
-    destinationConfig: {
-      ...secretSync.destinationConfig,
-      serviceName: services.find((s) => s.id === secretSync.destinationConfig.serviceId)?.name
+  const { data: groups = [], isPending: isGroupsPending } =
+    useRenderConnectionListEnvironmentGroups(secretSync.connectionId, { enabled: !isServiceScope });
+
+  switch (secretSync.destinationConfig.scope) {
+    case RenderSyncScope.Service: {
+      const id = secretSync.destinationConfig.serviceId;
+      const { primaryText, secondaryText } = getSecretSyncDestinationColValues({
+        ...secretSync,
+        destinationConfig: {
+          ...secretSync.destinationConfig,
+          serviceName: services.find((s) => s.id === id)?.name
+        }
+      });
+
+      if (isPending) {
+        return (
+          <SecretSyncTableCell primaryText="Loading service info..." secondaryText="Service" />
+        );
+      }
+
+      return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
     }
-  });
+    case RenderSyncScope.EnvironmentGroup: {
+      const id = secretSync.destinationConfig.environmentGroupId;
+      const { primaryText, secondaryText } = getSecretSyncDestinationColValues({
+        ...secretSync,
+        destinationConfig: {
+          ...secretSync.destinationConfig,
+          environmentGroupName: groups.find((s) => s.id === id)?.name
+        }
+      });
 
-  if (isPending) {
-    return <SecretSyncTableCell primaryText="Loading service info..." secondaryText="Service" />;
+      if (isGroupsPending) {
+        return (
+          <SecretSyncTableCell
+            primaryText="Loading environment group info..."
+            secondaryText="Environment Group"
+          />
+        );
+      }
+
+      return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+    }
+    default:
+      throw new Error("Unknown render sync destination scope");
   }
-
-  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
 };

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -8,6 +8,7 @@ import {
 } from "@app/hooks/api/secretSyncs/types/github-sync";
 import { GitLabSyncScope } from "@app/hooks/api/secretSyncs/types/gitlab-sync";
 import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+import { RenderSyncScope } from "@app/hooks/api/secretSyncs/types/render-sync";
 
 // This functional ensures parity across what is displayed in the destination column
 // and the values used when search filtering
@@ -125,8 +126,15 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
       secondaryText = destinationConfig.app;
       break;
     case SecretSync.Render:
-      primaryText = destinationConfig.serviceName ?? destinationConfig.serviceId;
-      secondaryText = "Service";
+      if (destinationConfig.scope === RenderSyncScope.Service) {
+        primaryText = destinationConfig.serviceName ?? destinationConfig.serviceId;
+        secondaryText = "Service";
+      } else {
+        primaryText =
+          destinationConfig.environmentGroupName ?? destinationConfig.environmentGroupId;
+        secondaryText = "Environment Group";
+      }
+
       break;
     case SecretSync.Flyio:
       primaryText = destinationConfig.appId;

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/RenderSyncDestinationSection.tsx

@@ -1,23 +1,50 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { useRenderConnectionListServices } from "@app/hooks/api/appConnections/render";
-import { TRenderSync } from "@app/hooks/api/secretSyncs/types/render-sync";
+import {
+  useRenderConnectionListEnvironmentGroups,
+  useRenderConnectionListServices
+} from "@app/hooks/api/appConnections/render";
+import { RenderSyncScope, TRenderSync } from "@app/hooks/api/secretSyncs/types/render-sync";
 
 type Props = {
   secretSync: TRenderSync;
 };
 
 export const RenderSyncDestinationSection = ({ secretSync }: Props) => {
+  const isServiceScope = secretSync.destinationConfig.scope === RenderSyncScope.Service;
+
   const { data: services = [], isPending } = useRenderConnectionListServices(
-    secretSync.connectionId
+    secretSync.connectionId,
+    {
+      enabled: isServiceScope
+    }
   );
-  const {
-    destinationConfig: { serviceId }
-  } = secretSync;
 
-  if (isPending) {
-    return <GenericFieldLabel label="Service">Loading...</GenericFieldLabel>;
+  const { data: groups = [], isPending: isGroupsPending } =
+    useRenderConnectionListEnvironmentGroups(secretSync.connectionId, { enabled: !isServiceScope });
+
+  switch (secretSync.destinationConfig.scope) {
+    case RenderSyncScope.Service: {
+      const id = secretSync.destinationConfig.serviceId;
+
+      if (isPending) {
+        return <GenericFieldLabel label="Service">Loading...</GenericFieldLabel>;
+      }
+
+      const serviceName = services.find((service) => service.id === id)?.name;
+      return <GenericFieldLabel label="Service">{serviceName ?? id}</GenericFieldLabel>;
+    }
+
+    case RenderSyncScope.EnvironmentGroup: {
+      const id = secretSync.destinationConfig.environmentGroupId;
+
+      if (isGroupsPending) {
+        return <GenericFieldLabel label="Environment Group">Loading...</GenericFieldLabel>;
+      }
+
+      const envName = groups.find((g) => g.id === id)?.name;
+      return <GenericFieldLabel label="Environment Group">{envName ?? id}</GenericFieldLabel>;
+    }
+    default:
+      throw new Error("Unknown render sync destination scope");
   }
-
-  const serviceName = services.find((service) => service.id === serviceId)?.name;
-  return <GenericFieldLabel label="Service">{serviceName ?? serviceId}</GenericFieldLabel>;
 };