feat: pydantic gw

src/components/organisms/configuration/connections/integrations/index.ts

@@ -71,3 +71,7 @@ export {
 	NotionIntegrationAddForm,
 	NotionIntegrationEditForm,
 } from "@components/organisms/configuration/connections/integrations/notion";
+export {
+	PydanticGatewayIntegrationAddForm,
+	PydanticGatewayIntegrationEditForm,
+} from "@components/organisms/configuration/connections/integrations/pydanticgw";

src/components/organisms/configuration/connections/integrations/pydanticgw/add.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from "react";
+
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import { IntegrationAddFormProps } from "@interfaces/components";
+import { ConnectionAuthType } from "@src/enums";
+import { Integrations } from "@src/enums/components";
+import { useConnectionForm } from "@src/hooks";
+import { pydanticgwIntegrationSchema } from "@validations";
+
+import { Button, ErrorMessage, Input, Spinner } from "@components/atoms";
+import { Accordion } from "@components/molecules";
+
+import { ExternalLinkIcon, FloppyDiskIcon } from "@assets/image/icons";
+
+export const PydanticGatewayIntegrationAddForm = ({
+	connectionId,
+	triggerParentFormSubmit,
+	onSuccess,
+	isOrgConnection,
+}: IntegrationAddFormProps) => {
+	const { t } = useTranslation("integrations");
+
+	const { createConnection, errors, handleSubmit, isLoading, register } = useConnectionForm(
+		pydanticgwIntegrationSchema,
+		"create",
+		undefined,
+		onSuccess,
+		isOrgConnection
+	);
+
+	useEffect(() => {
+		if (connectionId) {
+			createConnection(connectionId, ConnectionAuthType.ApiKey, Integrations.pydanticgw);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [connectionId]);
+
+	return (
+		<form className="flex flex-col gap-6" onSubmit={handleSubmit(triggerParentFormSubmit)}>
+			<div className="relative">
+				<Input
+					{...register("api_key")}
+					aria-label={t("pydanticgw.placeholders.apiKey")}
+					disabled={isLoading}
+					isError={!!errors.api_key}
+					isRequired
+					isSensitive
+					label={t("pydanticgw.placeholders.apiKey")}
+				/>
+
+				<ErrorMessage>{errors.api_key?.message as string}</ErrorMessage>
+			</div>
+
+			<Accordion title={t("information")}>
+				<Link
+					className="group inline-flex items-center gap-2.5 text-green-800"
+					target="_blank"
+					to="https://docs.pydantic.dev/"
+				>
+					{t("pydanticgw.information.documentation")}
+
+					<ExternalLinkIcon className="size-3.5 fill-green-800 duration-200" />
+				</Link>
+			</Accordion>
+
+			<Button
+				aria-label={t("buttons.saveConnection")}
+				className="ml-auto w-fit border-white px-3 font-medium text-white hover:bg-black"
+				disabled={isLoading}
+				type="submit"
+				variant="outline"
+			>
+				{isLoading ? <Spinner /> : <FloppyDiskIcon className="size-5 fill-white transition" />}
+
+				{t("buttons.saveConnection")}
+			</Button>
+		</form>
+	);
+};

src/components/organisms/configuration/connections/integrations/pydanticgw/edit.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+
+import { useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import { useConnectionForm } from "@src/hooks";
+import { pydanticgwIntegrationSchema } from "@validations";
+
+import { Button, ErrorMessage, SecretInput, Spinner } from "@components/atoms";
+import { Accordion } from "@components/molecules";
+
+import { ExternalLinkIcon, FloppyDiskIcon } from "@assets/image/icons";
+
+export const PydanticGatewayIntegrationEditForm = () => {
+	const { t } = useTranslation("integrations");
+	const [lockState, setLockState] = useState(true);
+	const { control, errors, handleSubmit, isLoading, onSubmitEdit, register, setValue } = useConnectionForm(
+		pydanticgwIntegrationSchema,
+		"edit"
+	);
+
+	const apiKey = useWatch({ control, name: "api_key" });
+
+	return (
+		<form className="flex flex-col gap-6" onSubmit={handleSubmit(onSubmitEdit)}>
+			<div className="relative">
+				<SecretInput
+					type="password"
+					{...register("api_key")}
+					aria-label={t("pydanticgw.placeholders.apiKey")}
+					disabled={isLoading}
+					handleInputChange={(newValue) => setValue("api_key", newValue)}
+					handleLockAction={setLockState}
+					isError={!!errors.api_key}
+					isLocked={lockState}
+					isRequired
+					label={t("pydanticgw.placeholders.apiKey")}
+					value={apiKey}
+				/>
+
+				<ErrorMessage>{errors.api_key?.message as string}</ErrorMessage>
+			</div>
+
+			<Accordion title={t("information")}>
+				<Link
+					className="group inline-flex items-center gap-2.5 text-green-800"
+					target="_blank"
+					to="https://docs.pydantic.dev/"
+				>
+					{t("pydanticgw.information.documentation")}
+
+					<ExternalLinkIcon className="size-3.5 fill-green-800 duration-200" />
+				</Link>
+			</Accordion>
+
+			<Button
+				aria-label={t("buttons.saveConnection")}
+				className="ml-auto w-fit border-white px-3 font-medium text-white hover:bg-black"
+				disabled={isLoading}
+				type="submit"
+				variant="outline"
+			>
+				{isLoading ? <Spinner /> : <FloppyDiskIcon className="size-5 fill-white transition" />}
+
+				{t("buttons.saveConnection")}
+			</Button>
+		</form>
+	);
+};

src/components/organisms/configuration/connections/integrations/pydanticgw/index.ts

@@ -0,0 +1,2 @@
+export { PydanticGatewayIntegrationAddForm } from "./add";
+export { PydanticGatewayIntegrationEditForm } from "./edit";

src/constants/connections/addComponentsMapping.constants.ts

@@ -25,6 +25,7 @@ import {
 	RedditIntegrationAddForm,
 	PipedriveIntegrationAddForm,
 	NotionIntegrationAddForm,
+	PydanticGatewayIntegrationAddForm,
 } from "@components/organisms/configuration/connections/integrations";
 import { MicrosoftTeamsIntegrationAddForm } from "@components/organisms/configuration/connections/integrations/microsoft/teams";
 
@@ -57,4 +58,5 @@ export const integrationAddFormComponents: Partial<Record<keyof typeof Integrati
 	reddit: RedditIntegrationAddForm,
 	pipedrive: PipedriveIntegrationAddForm,
 	notion: NotionIntegrationAddForm,
+	pydanticgw: PydanticGatewayIntegrationAddForm,
 };

src/constants/connections/editComponentsMapping.constants.ts

@@ -25,6 +25,7 @@ import {
 	RedditIntegrationEditForm,
 	PipedriveIntegrationEditForm,
 	NotionIntegrationEditForm,
+	PydanticGatewayIntegrationEditForm,
 } from "@components/organisms/configuration/connections/integrations";
 import { MicrosoftTeamsIntegrationEditForm } from "@components/organisms/configuration/connections/integrations/microsoft/teams";
 
@@ -57,4 +58,5 @@ export const integrationToEditComponent: Partial<Record<keyof typeof Integration
 	[Integrations.reddit]: RedditIntegrationEditForm,
 	[Integrations.pipedrive]: PipedriveIntegrationEditForm,
 	[Integrations.notion]: NotionIntegrationEditForm,
+	[Integrations.pydanticgw]: PydanticGatewayIntegrationEditForm,
 };

src/constants/connections/integrationVariablesMapping.constants.ts

@@ -66,6 +66,9 @@ export const integrationVariablesMapping = {
 	[Integrations.anthropic]: {
 		api_key: "api_key",
 	},
+	[Integrations.pydanticgw]: {
+		api_key: "api_key",
+	},
 	[Integrations.salesforce]: {
 		client_id: "client_id",
 		client_secret: "client_secret",

src/enums/components/connection.enum.ts

@@ -69,6 +69,7 @@ export enum Integrations {
 	reddit = "reddit",
 	pipedrive = "pipedrive",
 	notion = "notion",
+	pydanticgw = "pydanticgw",
 }
 
 export const defaultGoogleConnectionName = "google";
@@ -254,6 +255,11 @@ export const IntegrationsMap: Record<Integrations, IntegrationSelectOption> = {
 		label: "Notion",
 		value: Integrations.notion,
 	},
+	pydanticgw: {
+		icon: HttpIcon,
+		label: "Pydantic Gateway",
+		value: Integrations.pydanticgw,
+	},
 };
 
 const shouldHideIntegration: Partial<Record<Integrations, boolean>> = {

src/locales/en/integrations/translation.json

@@ -201,6 +201,14 @@
 			"devPlatform": "Anthropic developer platform"
 		}
 	},
+	"pydanticgw": {
+		"placeholders": {
+			"apiKey": "API Key"
+		},
+		"information": {
+			"documentation": "Pydantic Gateway documentation"
+		}
+	},
 	"gemini": {
 		"placeholders": {
 			"key": "Secret API Key"

src/validations/connection.schema.ts

@@ -151,6 +151,11 @@ export const anthropicIntegrationSchema = z.object({
 	auth_type: z.literal(ConnectionAuthType.ApiKey).default(ConnectionAuthType.ApiKey),
 });
 
+export const pydanticgwIntegrationSchema = z.object({
+	api_key: z.string().min(1, "API Key is required"),
+	auth_type: z.literal(ConnectionAuthType.ApiKey).default(ConnectionAuthType.ApiKey),
+});
+
 export const linearPrivateAuthIntegrationSchema = z.object({
 	client_id: z.string().min(1, "Client ID is required"),
 	client_secret: z.string().min(1, "Client secret is required"),

src/validations/index.ts

@@ -19,6 +19,7 @@ export {
 	googleFormsIntegrationSchema,
 	asanaIntegrationSchema,
 	anthropicIntegrationSchema,
+	pydanticgwIntegrationSchema,
 	auth0IntegrationSchema,
 	githubPrivateAuthIntegrationSchema,
 	linearPrivateAuthIntegrationSchema,