feat: notion connection

Author: RonenMars

src/components/organisms/connections/integrations/notion/authMethods/apiKey.tsx

@@ -1,17 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { FieldErrors, UseFormRegister, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { Button, ErrorMessage, Input, Spinner } from "@components/atoms";
+import { Button, ErrorMessage, Input, SecretInput, Spinner } from "@components/atoms";
 
 import { FloppyDiskIcon } from "@assets/image/icons";
 
 export const NotionApiKeyForm = ({
 	control,
 	errors,
 	isLoading,
+	mode,
 	register,
+	setValue,
 }: {
 	control: any;
 	errors: FieldErrors<any>;
@@ -21,22 +23,45 @@ export const NotionApiKeyForm = ({
 	setValue: any;
 }) => {
 	const { t } = useTranslation("integrations");
+	const [lockState, setLockState] = useState<{ apiKey: boolean }>({
+		apiKey: true,
+	});
 
-	const internalIntegrationSecret = useWatch({ control, name: "internal_integration_secret" });
+	const apiKey = useWatch({ control, name: "api_key" });
+	const isEditMode = mode === "edit";
 
 	return (
 		<>
 			<div className="relative">
-				<Input
-					{...register("internal_integration_secret")}
-					aria-label={t("notion.placeholders.internalIntegrationSecret")}
-					disabled={isLoading}
-					isError={!!errors.internal_integration_secret}
-					isRequired
-					label={t("notion.placeholders.internalIntegrationSecret")}
-					value={internalIntegrationSecret}
-				/>
-				<ErrorMessage>{errors.internal_integration_secret?.message as string}</ErrorMessage>
+				{isEditMode ? (
+					<SecretInput
+						type="password"
+						{...register("api_key")}
+						aria-label={t("notion.placeholders.apiKey")}
+						disabled={isLoading}
+						handleInputChange={(newValue) => setValue("api_key", newValue)}
+						handleLockAction={(newLockState) =>
+							setLockState((prevState) => ({ ...prevState, apiKey: newLockState }))
+						}
+						isError={!!errors.api_key}
+						isLocked={lockState.apiKey}
+						isRequired
+						label={t("notion.placeholders.apiKey")}
+						value={apiKey}
+					/>
+				) : (
+					<Input
+						{...register("api_key")}
+						aria-label={t("notion.placeholders.apiKey")}
+						disabled={isLoading}
+						isError={!!errors.api_key}
+						isRequired
+						label={t("notion.placeholders.apiKey")}
+						value={apiKey}
+					/>
+				)}
+
+				<ErrorMessage>{errors.api_key?.message as string}</ErrorMessage>
 			</div>
 
 			<Button

src/constants/connections/integrationVariablesMapping.constants.ts

@@ -120,6 +120,6 @@ export const integrationVariablesMapping = {
 		password: "password",
 	},
 	[Integrations.notion]: {
-		internal_integration_secret: "internal_integration_secret",
+		apiKey: "api_key",
 	},
 };

src/locales/en/integrations/translation.json

@@ -286,7 +286,7 @@
 	},
 	"notion": {
 		"placeholders": {
-			"internalIntegrationSecret": "Internal Integration Secret"
+			"apiKey": "Internal Integration Secret"
 		}
 	}
 }

src/validations/connection.schema.ts

@@ -225,7 +225,7 @@ export const pipedriveIntegrationSchema = z.object({
 	company_domain: z.string().min(1, "Company domain is required").url({ message: "Invalid url" }),
 });
 export const notionApiKeyIntegrationSchema = z.object({
-	internal_integration_secret: z.string().min(1, "Internal Integration Secret is required"),
+	api_key: z.string().min(1, "Internal Integration Secret is required"),
 });
 
 export const oauthSchema = z.object({});