feat: cloudflare pages integration create page

2026-10-06 20:27:12 +00:00 · 2023-06-13 12:37:07 +02:00
parent dffcee52d7
commit c64cf39b69
1 changed files with 135 additions and 0 deletions
@@ -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;