feat: option to choose target environment

backend/src/integrations/sync.ts

@@ -1854,6 +1854,8 @@ const syncSecretsCloudflarePages = async ({
     accessId: string | null;
     accessToken: string;
 }) => {
+    const targetEnvironment = integration.targetEnvironment;
+
     // get secrets from cloudflare pages
     const getSecretsRes = (
         await standardRequest.get(
@@ -1866,7 +1868,7 @@ const syncSecretsCloudflarePages = async ({
             }
         )
     )
-    .data.result['deployment_configs'].production['env_vars'];
+    .data.result['deployment_configs'][targetEnvironment]['env_vars'];
 
     // copy the secrets object, so we can set deleted keys to null
     const secretsObj: any = {...secrets};
@@ -1878,22 +1880,32 @@ const syncSecretsCloudflarePages = async ({
     if (getSecretsRes) { // if there are no env vars set in cloudflare pages, none have to be deleted either
         for await (const key of Object.keys(getSecretsRes)) {
             if (!(key in secrets)) {
-                // case: secret deos not exist in infisical
+                // case: secret does not exist in infisical
                 // -> delete secret from cloudflare pages
                 secretsObj[key] = null;
             }
         }
     }
 
+    const data = targetEnvironment === 'production' 
+    ? {
+        "deployment_configs": {
+            "production" : {
+                "env_vars": secretsObj
+            }
+        }
+    }
+    : {
+        "deployment_configs": {
+            "preview": {
+                "env_vars": secretsObj
+            }
+        }
+    }
+
     const result = await standardRequest.patch(
         `${INTEGRATION_CLOUDFLARE_PAGES_API_URL}/client/v4/accounts/${accessId}/pages/projects/${integration.app}`,
-        {
+        data,
-            "deployment_configs": {
-                "production": {
-                    "env_vars": secretsObj
-                }
-            }
-        },
         {
             headers: {
                 Authorization: `Bearer ${accessToken}`,

frontend/src/pages/integrations/cloudflare-pages/create.tsx

@@ -6,6 +6,11 @@ import { useGetIntegrationAuthApps, useGetIntegrationAuthById } from '~/hooks/ap
 import createIntegration from '~/pages/api/integrations/createIntegration';
 import { Button, Card, CardTitle, FormControl, Select, SelectItem } from '~/components/v2';
 
+const cloudflareEnvironments = [
+    { name: 'Production', slug: 'production' },
+    { name: 'Preview', slug: 'preview' }
+];
+
 export default function CloudflarePagesIntegrationPage() {
     const router = useRouter();
 
@@ -19,6 +24,7 @@ export default function CloudflarePagesIntegrationPage() {
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
     const [targetAppId, setTargetAppId] = useState('');
+    const [targetEnvironment, setTargetEnvironment] = useState('');
 
     const [isLoading, setIsLoading] = useState(false);
 
@@ -33,8 +39,10 @@ export default function CloudflarePagesIntegrationPage() {
             if (integrationAuthApps.length > 0) {
                 setTargetApp(integrationAuthApps[0].name);
                 setTargetAppId(String(integrationAuthApps[0].appId));
+                setTargetEnvironment(cloudflareEnvironments[0].slug);
             } else {
                 setTargetApp('none');
+                setTargetEnvironment(cloudflareEnvironments[0].slug);
             }
         }
     }, [integrationAuthApps]);
@@ -51,7 +59,7 @@ export default function CloudflarePagesIntegrationPage() {
                 app: targetApp,
                 appId: targetAppId,
                 sourceEnvironment: selectedSourceEnvironment,
-                targetEnvironment: null,
+                targetEnvironment,
                 targetEnvironmentId: null,
                 targetService: null,
                 targetServiceId: null,
@@ -73,6 +81,7 @@ export default function CloudflarePagesIntegrationPage() {
         workspace &&
         selectedSourceEnvironment &&
         integrationAuthApps &&
+        targetEnvironment &&
         targetApp ? (
         <div className="flex h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
             <Card className="max-w-lg rounded-md p-0 border border-mineshaft-600">
@@ -116,6 +125,22 @@ export default function CloudflarePagesIntegrationPage() {
                         )}
                     </Select>
                 </FormControl>
+                <FormControl label="Cloudflare Pages Environment" className="mt-4 px-6">
+                    <Select
+                        value={targetEnvironment}
+                        onValueChange={(val) => setTargetEnvironment(val)}
+                        className="w-full border border-mineshaft-500"
+                    >
+                        {cloudflareEnvironments.map((cloudflareEnvironment) => (
+                            <SelectItem
+                                value={cloudflareEnvironment.slug}
+                                key={`target-environment-${cloudflareEnvironment.slug}`}
+                            >
+                                {cloudflareEnvironment.name}
+                            </SelectItem>
+                        ))}
+                    </Select>
+                </FormControl>
                 <Button
                     onClick={handleButtonClick}
                     color="mineshaft"