feat(infisical-pg): changed frontend api types _id to normal id

2026-10-16 01:05:40 +00:00 · 2024-01-27 12:38:22 +05:30
parent f3b37de3f3
commit aaba4a0895
161 changed files with 5358 additions and 4510 deletions
@@ -1,92 +1,102 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import {
-    useSaveIntegrationAccessToken
-} from "@app/hooks/api";
+import { useSaveIntegrationAccessToken } from "@app/hooks/api";

-import { Button,Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";

-export default function CloudflarePagesIntegrationPage() {
-    const router = useRouter();
-    const { mutateAsync } = useSaveIntegrationAccessToken();
+export default function RenderCreateIntegrationPage() {
+  const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();

-    const [accessKey, setAccessKey] = useState("");
-    const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
-    const [accountId, setAccountId] = useState("");
-    const [accountIdErrorText, setAccountIdErrorText] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);

-    const handleButtonClick = async () => {
-        try {
-            setAccessKeyErrorText("");
-            setAccountIdErrorText("");
-            if (accessKey.length === 0 || accountId.length === 0) {
-                if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
-                if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
-                return;
-            }
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Key cannot be blank");
+        return;
+      }

-            setIsLoading(true);
+      setIsLoading(true);

-            const integrationAuth = await mutateAsync({
-                workspaceId: localStorage.getItem("projectData.id"),
-                integration: "cloudflare-pages",
-                accessId: accountId,
-                accessToken: accessKey
-            });
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "render",
+        accessToken: apiKey
+      });

-            setAccessKey("");
-            setAccountId("");
-            setIsLoading(false);
+      setIsLoading(false);

-            router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth.id}`);
-        } catch (err) {
-            console.error(err);
-        }
+      router.push(`/integrations/render/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
    }
+  };

-    return (
-        <div className="flex h-full w-full items-center justify-center">
-            <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
-                <CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Cloudflare Pages Integration</CardTitle>
-                <FormControl
-                    label="Cloudflare Pages API token"
-                    errorText={accessKeyErrorText}
-                    isError={accessKeyErrorText !== "" ?? false}
-                    className="mx-6"
-                >
-                    <Input
-                        placeholder=""
-                        value={accessKey}
-                        onChange={(e) => setAccessKey(e.target.value)}
-                    />
-                </FormControl>
-                <FormControl
-                    label="Cloudflare Pages Account ID"
-                    errorText={accountIdErrorText}
-                    isError={accountIdErrorText !== "" ?? false}
-                    className="mx-6"
-                >
-                    <Input
-                        placeholder=""
-                        value={accountId}
-                        onChange={(e) => setAccountId(e.target.value)}
-                    />
-                </FormControl>
-                <Button
-                    onClick={handleButtonClick}
-                    color="mineshaft"
-                    variant="outline_bg"
-                    className="mb-6 mt-2 ml-auto mr-6 w-min"
-                    isFullWidth={false}
-                    isLoading={isLoading}
-                >
-                    Connect to Cloudflare Pages
-                </Button>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize Render Integration</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Render.png"
+                height={30}
+                width={30}
+                alt="Render logo"
+              />
+            </div>
+            <span className="ml-2.5">Render Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/render" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="ml-1.5 mb-[0.07rem] text-xxs"
+                  />
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl
+          label="Render API Key"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
+        >
+          <Input placeholder="rnd_xxx" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
+          isLoading={isLoading}
+        >
+          Connect to Render
+        </Button>
+      </Card>
+    </div>
+  );
 }

-CloudflarePagesIntegrationPage.requireAuth = true;
+RenderCreateIntegrationPage.requireAuth = true;
@@ -1,159 +1,165 @@
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";

-import {
-    useCreateIntegration
-, useGetWorkspaceById } from "@app/hooks/api";
+import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";

 import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
-import { useGetIntegrationAuthApps, useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "../../../hooks/api/integrationAuth";

 const cloudflareEnvironments = [
-    { name: "Production", slug: "production" },
-    { name: "Preview", slug: "preview" }
+  { name: "Production", slug: "production" },
+  { name: "Preview", slug: "preview" }
 ];

 export default function CloudflarePagesIntegrationPage() {
-    const router = useRouter();
-    const { mutateAsync } = useCreateIntegration();
+  const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();

-    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 { 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 [targetEnvironment, setTargetEnvironment] = useState("");
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [targetApp, setTargetApp] = useState("");
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetEnvironment, setTargetEnvironment] = useState("");

-    const [isLoading, setIsLoading] = useState(false);
+  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));
-                setTargetEnvironment(cloudflareEnvironments[0].slug);
-            } else {
-                setTargetApp("none");
-                setTargetEnvironment(cloudflareEnvironments[0].slug);
-            }
-        }
-    }, [integrationAuthApps]);
-
-    const handleButtonClick = async () => {
-        try {
-            if (!integrationAuth?.id) return;
-
-            setIsLoading(true);
-
-            await mutateAsync({
-                integrationAuthId: integrationAuth?.id,
-                isActive: true,
-                app: targetApp,
-                appId: targetAppId,
-                sourceEnvironment: selectedSourceEnvironment,
-                targetEnvironment,
-                secretPath: "/",
-            });
-
-            setIsLoading(false);
-
-            router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
-        } catch(err) {
-            console.error(err);
-        }
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
    }
+  }, [workspace]);

-    return integrationAuth &&
-        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">
-                <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={`source-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 apps found
-                        </SelectItem>
-                        )}
-                    </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"
-                    variant="outline_bg"
-                    className="mt-2 mb-6 ml-auto mr-6"
-                    isFullWidth={false}
-                    isLoading={isLoading}
+  useEffect(() => {
+    if (integrationAuthApps) {
+      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]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?.id) return;
+
+      setIsLoading(true);
+
+      await mutateAsync({
+        integrationAuthId: integrationAuth?.id,
+        isActive: true,
+        app: targetApp,
+        appId: targetAppId,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment,
+        secretPath: "/"
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    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 border border-mineshaft-600 p-0">
+        <CardTitle
+          className="px-6 text-left"
+          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={`source-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}`}
                >
-                    Create Integration
-                </Button>
-            </Card>
-        </div>
-    ) : (
-        <div />
-    );
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No apps found
+              </SelectItem>
+            )}
+          </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"
+          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;
+CloudflarePagesIntegrationPage.requireAuth = true;