feat: cloudflare pages integration create page

2026-09-22 13:39:35 +00:00 · 2023-06-13 12:37:07 +02:00
parent dffcee52d7
commit c64cf39b69
1 changed files with 135 additions and 0 deletions
--- a/frontend/src/pages/integrations/cloudflare-pages/create.tsx
+++ b/frontend/src/pages/integrations/cloudflare-pages/create.tsx
@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useGetWorkspaceById } from '~/hooks/api';
+import queryString from 'query-string';
+import { useGetIntegrationAuthApps, useGetIntegrationAuthById } from '~/hooks/api/integrationAuth';
+import createIntegration from '~/pages/api/integrations/createIntegration';
+import { Button, Card, CardTitle, FormControl, Select, SelectItem } from '~/components/v2';
+
+export default function CloudflarePagesIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+        integrationAuthId: (integrationAuthId as string) ?? ''
+    });
+
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    const [targetAppId, setTargetAppId] = useState('');
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+
+    useEffect(() => {
+        if (integrationAuthApps) {
+            if (integrationAuthApps.length > 0) {
+                setTargetApp(integrationAuthApps[0].name);
+                setTargetAppId(String(integrationAuthApps[0].appId));
+            } else {
+                setTargetApp('none');
+            }
+        }
+    }, [integrationAuthApps]);
+
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: targetAppId,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                targetEnvironmentId: null,
+                targetService: null,
+                targetServiceId: null,
+                owner: null,
+                path: null,
+                region: null
+            });
+
+            setIsLoading(false);
+
+            router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
+        } catch(err) {
+            console.error(err);
+        }
+    }
+
+    return integrationAuth &&
+        workspace &&
+        selectedSourceEnvironment &&
+        integrationAuthApps &&
+        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">
+                <CardTitle className="text-left px-6" subTitle="Choose which environment in Infisical you want to sync with your Cloudflare Pages project.">Cloudflare Pages Integration</CardTitle>
+                <FormControl label="Infisical Project Environment" className="mt-2 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={`sourcce-environment-${sourceEnvironment.slug}`}
+                            >
+                                {sourceEnvironment.name}
+                            </SelectItem>
+                        })}
+                    </Select>
+                </FormControl>
+                <FormControl label="Cloudflare Pages Project" className="mt-4 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}
+                                </SelectItem>
+                            })
+                        ) : (
+                            <SelectItem value="none" key="target-app-none">
+                                No projects found
+                            </SelectItem>
+                        )}
+                    </Select>
+                </FormControl>
+                <Button
+                    onClick={handleButtonClick}
+                    color="mineshaft"
+                    variant="outline_bg"
+                    className="mt-2 mb-6 ml-auto mr-6"
+                    isFullWidth={false}
+                    isLoading={isLoading}
+                >
+                    Create Integration
+                </Button>
+            </Card>
+        </div>
+    ) : (
+        <div />
+    );
+}
+
+CloudflarePagesIntegrationPage.requireAuth = true;