feat(UI-1887): notion connection

src/assets/image/icons/connections/index.ts

@@ -46,3 +46,5 @@ export { default as AnthropicIcon } from "@assets/image/icons/connections/Anthro
 export { default as RedditIcon } from "@assets/image/icons/connections/Reddit.svg?react";
 // Pipedrive icon https://drive.google.com/drive/folders/1Tc48Ffe7BwE7tKv239aA_ENXnG9cG3v0 + https://www.pipedrive.com/en/newsroom/press-kit
 export { default as PipedriveIcon } from "@assets/image/icons/connections/Pipedrive.svg?react";
+// Notion icon based on MIT licensed sources generated by Cursor
+export { default as NotionIcon } from "@assets/image/icons/connections/Notion.svg?react";

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

@@ -72,3 +72,7 @@ export {
 	PipedriveIntegrationAddForm,
 	PipedriveIntegrationEditForm,
 } from "@components/organisms/connections/integrations/pipedrive";
+export {
+	NotionIntegrationAddForm,
+	NotionIntegrationEditForm,
+} from "@components/organisms/connections/integrations/notion";

src/components/organisms/connections/integrations/notion/add.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+
+import { useTranslation } from "react-i18next";
+import { SingleValue } from "react-select";
+
+import { formsPerIntegrationsMapping } from "@src/constants";
+import { notionIntegrationAuthMethods } from "@src/constants/lists/connections";
+import { ConnectionAuthType } from "@src/enums";
+import { Integrations } from "@src/enums/components";
+import { useConnectionForm } from "@src/hooks";
+import { SelectOption } from "@src/interfaces/components";
+import { notionApiKeyIntegrationSchema, oauthSchema } from "@validations";
+
+import { Select } from "@components/molecules";
+
+export const NotionIntegrationAddForm = ({
+	connectionId,
+	triggerParentFormSubmit,
+}: {
+	connectionId?: string;
+	triggerParentFormSubmit: () => void;
+}) => {
+	const { t } = useTranslation("integrations");
+	const {
+		control,
+		copyToClipboard,
+		errors,
+		handleOAuth,
+		handleSubmit,
+		isLoading,
+		register,
+		setValidationSchema,
+		setValue,
+		createConnection,
+	} = useConnectionForm(oauthSchema, "create");
+
+	const [connectionType, setConnectionType] = useState<SingleValue<SelectOption>>();
+
+	const configureConnection = async (connectionId: string) => {
+		switch (connectionType?.value) {
+			case ConnectionAuthType.OauthDefault:
+				await handleOAuth(connectionId, Integrations.notion);
+				break;
+			case ConnectionAuthType.ApiKey:
+				await createConnection(connectionId, ConnectionAuthType.ApiKey, Integrations.notion);
+				break;
+			default:
+				break;
+		}
+	};
+
+	useEffect(() => {
+		if (!connectionType?.value) {
+			return;
+		}
+		if (connectionType.value === ConnectionAuthType.OauthDefault) {
+			setValidationSchema(oauthSchema);
+
+			return;
+		}
+		if (connectionType.value === ConnectionAuthType.ApiKey) {
+			setValidationSchema(notionApiKeyIntegrationSchema);
+
+			return;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [connectionType]);
+
+	useEffect(() => {
+		if (connectionId) {
+			configureConnection(connectionId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [connectionId]);
+
+	const ConnectionTypeComponent =
+		formsPerIntegrationsMapping[Integrations.notion]?.[connectionType?.value as ConnectionAuthType];
+
+	return (
+		<>
+			<Select
+				aria-label={t("placeholders.selectConnectionType")}
+				disabled={isLoading}
+				label={t("placeholders.connectionType")}
+				onChange={(option) => setConnectionType(option)}
+				options={notionIntegrationAuthMethods}
+				placeholder={t("placeholders.selectConnectionType")}
+				value={connectionType}
+			/>
+			<form className="mt-6 flex flex-col gap-6" onSubmit={handleSubmit(triggerParentFormSubmit)}>
+				{ConnectionTypeComponent ? (
+					<ConnectionTypeComponent
+						control={control}
+						copyToClipboard={copyToClipboard}
+						errors={errors}
+						isLoading={isLoading}
+						mode="create"
+						register={register}
+						setValue={setValue}
+					/>
+				) : null}
+			</form>
+		</>
+	);
+};

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

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+import { FieldErrors, UseFormRegister, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+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>;
+	isLoading: boolean;
+	mode: "create" | "edit";
+	register: UseFormRegister<{ [x: string]: any }>;
+	setValue: any;
+}) => {
+	const { t } = useTranslation("integrations");
+	const [lockState, setLockState] = useState<{ apiKey: boolean }>({
+		apiKey: true,
+	});
+
+	const apiKey = useWatch({ control, name: "api_key" });
+	const isEditMode = mode === "edit";
+
+	return (
+		<>
+			<div className="relative">
+				{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
+				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>
+		</>
+	);
+};

src/components/organisms/connections/integrations/notion/authMethods/index.ts

@@ -0,0 +1,2 @@
+export { NotionOauthForm } from "@components/organisms/connections/integrations/notion/authMethods/oauth";
+export { NotionApiKeyForm } from "@components/organisms/connections/integrations/notion/authMethods/apiKey";

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

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { Button, Spinner } from "@components/atoms";
+
+import { ExternalLinkIcon } from "@assets/image/icons";
+
+export const NotionOauthForm = ({ isLoading }: { isLoading: boolean }) => {
+	const { t } = useTranslation("integrations");
+
+	return (
+		<Button
+			aria-label={t("buttons.startOAuthFlow")}
+			className="ml-auto w-fit border-white px-3 font-medium text-white hover:bg-black"
+			disabled={isLoading}
+			type="submit"
+			variant="outline"
+		>
+			{isLoading ? <Spinner /> : <ExternalLinkIcon className="size-4 fill-white transition" />}
+			{t("buttons.startOAuthFlow")}
+		</Button>
+	);
+};

src/components/organisms/connections/integrations/notion/edit.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { notionIntegrationAuthMethods } from "@src/constants/lists/connections";
+import { ConnectionAuthType } from "@src/enums";
+import { Integrations } from "@src/enums/components";
+import { notionApiKeyIntegrationSchema, oauthSchema } from "@validations";
+
+import { IntegrationEditForm } from "@components/organisms/connections/integrations";
+
+export const NotionIntegrationEditForm = () => {
+	return (
+		<IntegrationEditForm
+			integrationType={Integrations.notion}
+			schemas={{
+				[ConnectionAuthType.ApiKey]: notionApiKeyIntegrationSchema,
+				[ConnectionAuthType.OauthDefault]: oauthSchema,
+			}}
+			selectOptions={notionIntegrationAuthMethods}
+		/>
+	);
+};

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

@@ -0,0 +1,2 @@
+export { NotionIntegrationAddForm } from "@components/organisms/connections/integrations/notion/add";
+export { NotionIntegrationEditForm } from "@components/organisms/connections/integrations/notion/edit";

src/constants/connections/addComponentsMapping.constants.ts

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

src/constants/connections/editComponentsMapping.constants.ts

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

src/constants/connections/formsPerIntegrationsMapping.constants.ts

@@ -39,6 +39,7 @@ import {
 	MicrosoftTeamsOauthPrivateForm,
 	MicrosoftTeamsDaemonForm,
 } from "@components/organisms/connections/integrations/microsoft/teams";
+import { NotionOauthForm, NotionApiKeyForm } from "@components/organisms/connections/integrations/notion/authMethods";
 import {
 	SalesforceOauthPrivateForm,
 	SalesforceOauthForm,
@@ -135,4 +136,8 @@ export const formsPerIntegrationsMapping: Partial<
 		[ConnectionAuthType.Oauth]: OauthGoogleYoutubeForm,
 		[ConnectionAuthType.JsonKey]: JsonKeyGoogleYoutubeForm,
 	},
+	[Integrations.notion]: {
+		[ConnectionAuthType.OauthDefault]: NotionOauthForm,
+		[ConnectionAuthType.ApiKey]: NotionApiKeyForm,
+	},
 };

src/constants/connections/integrationVariablesMapping.constants.ts

@@ -119,4 +119,7 @@ export const integrationVariablesMapping = {
 		username: "username",
 		password: "password",
 	},
+	[Integrations.notion]: {
+		apiKey: "api_key",
+	},
 };

src/constants/featureFlags.constants.ts

@@ -6,6 +6,7 @@ export const featureFlags = {
 	salesforceHideDefaultOAuth: import.meta.env.VITE_SALESFORCE_HIDE_DEFAULT_OAUTH,
 	zoomHideDefaultOAuth: import.meta.env.VITE_ZOOM_HIDE_DEFAULT_OAUTH,
 	microsoftHideDefaultOAuth: import.meta.env.VITE_MICROSOFT_HIDE_INTEGRATION,
+	notionHideDefaultOAuth: import.meta.env.VITE_NOTION_HIDE_DEFAULT_OAUTH,
 	telegramHideIntegration: import.meta.env.VITE_HIDE_TELEGRAM_CONN,
 	pipedriveHideIntegration: import.meta.env.VITE_PIPEDRIVE_HIDE_INTEGRATION,
 	sendDotEmptyTriggerFilter: import.meta.env.VITE_SEND_DOT_EMPTY_TRIGGER_FILTER,

src/constants/lists/connections/index.ts

@@ -30,4 +30,5 @@ export {
 	selectIntegrationLinearActor,
 	microsoftTeamsIntegrationAuthMethods,
 	salesforceIntegrationAuthMethods,
+	notionIntegrationAuthMethods,
 } from "@constants/lists/connections/options.constants";

src/constants/lists/connections/options.constants.ts

@@ -254,3 +254,12 @@ export const selectIntegrationConfluence: SelectOption[] = [
 	{ label: "OAuth 2.0 App", value: ConnectionAuthType.Oauth },
 	{ label: "User API Token / PAT", value: ConnectionAuthType.ApiToken },
 ];
+
+const notionDisplayOAuth = featureFlags.notionHideDefaultOAuth
+	? []
+	: [{ label: "OAuth v2 - Default app", value: ConnectionAuthType.OauthDefault }];
+
+export const notionIntegrationAuthMethods: SelectOption[] = [
+	...notionDisplayOAuth,
+	{ label: "API Key", value: ConnectionAuthType.ApiKey },
+];

src/enums/components/connection.enum.ts

@@ -36,6 +36,7 @@ import {
 	AnthropicIcon,
 	RedditIcon,
 	PipedriveIcon,
+	NotionIcon,
 } from "@assets/image/icons/connections";
 
 export enum ConnectionStatus {
@@ -75,6 +76,7 @@ export enum Integrations {
 	kubernetes = "kubernetes",
 	reddit = "reddit",
 	pipedrive = "pipedrive",
+	notion = "notion",
 }
 
 export const defaultGoogleConnectionName = "google";
@@ -259,6 +261,11 @@ export const IntegrationsMap: Record<Integrations, IntegrationSelectOption> = {
 		label: "Pipedrive",
 		value: Integrations.pipedrive,
 	},
+	notion: {
+		icon: NotionIcon,
+		label: "Notion",
+		value: Integrations.notion,
+	},
 };
 
 const shouldHideIntegration: Partial<Record<Integrations, boolean>> = {

src/locales/en/integrations/translation.json

@@ -283,5 +283,10 @@
 			"authentication": "Pipedrive API authentication",
 			"apiKey": "How to find your personal API key"
 		}
+	},
+	"notion": {
+		"placeholders": {
+			"apiKey": "Internal Integration Secret"
+		}
 	}
 }

src/validations/connection.schema.ts

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

src/validations/index.ts

@@ -34,6 +34,7 @@ export {
 	kubernetesIntegrationSchema,
 	redditPrivateAuthIntegrationSchema,
 	pipedriveIntegrationSchema,
+	notionApiKeyIntegrationSchema,
 } from "@validations/connection.schema";
 export { codeAssetsSchema } from "@validations/coseAndAssets.schema";
 export { validateManualRun } from "@validations/manualRun.schema";