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/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>;
 };