From b4077bd663c91d021d7d242b59ddbfe6a7543ff1 Mon Sep 17 00:00:00 2001 From: J1za Date: Wed, 5 Feb 2025 13:49:30 +0200 Subject: [PATCH] feat(UI-1288): zoom and height.app oauth integrations --- .../image/icons/connections/EmptyCircle.svg | 4 ++ src/assets/image/icons/connections/Zoom.svg | 6 +++ src/assets/image/icons/connections/index.ts | 5 ++- .../connections/integrations/height/add.tsx | 41 +++++++++++++++++++ .../connections/integrations/height/edit.tsx | 32 +++++++++++++++ .../connections/integrations/height/index.ts | 2 + .../connections/integrations/index.ts | 5 +++ .../connections/integrations/zoom/add.tsx | 41 +++++++++++++++++++ .../connections/integrations/zoom/edit.tsx | 32 +++++++++++++++ .../connections/integrations/zoom/index.ts | 2 + .../addComponentsMapping.constants.ts | 4 ++ .../editComponentsMapping.constants.ts | 4 ++ .../lists/connections/options.constants.ts | 2 +- src/enums/components/connection.enum.ts | 14 +++++++ src/hooks/useConnectionForm.ts | 7 +++- 15 files changed, 198 insertions(+), 3 deletions(-) create mode 100644 src/assets/image/icons/connections/EmptyCircle.svg create mode 100644 src/assets/image/icons/connections/Zoom.svg create mode 100644 src/components/organisms/connections/integrations/height/add.tsx create mode 100644 src/components/organisms/connections/integrations/height/edit.tsx create mode 100644 src/components/organisms/connections/integrations/height/index.ts create mode 100644 src/components/organisms/connections/integrations/zoom/add.tsx create mode 100644 src/components/organisms/connections/integrations/zoom/edit.tsx create mode 100644 src/components/organisms/connections/integrations/zoom/index.ts diff --git a/src/assets/image/icons/connections/EmptyCircle.svg b/src/assets/image/icons/connections/EmptyCircle.svg new file mode 100644 index 000000000..848e981c8 --- /dev/null +++ b/src/assets/image/icons/connections/EmptyCircle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/image/icons/connections/Zoom.svg b/src/assets/image/icons/connections/Zoom.svg new file mode 100644 index 000000000..e9a4fc1e9 --- /dev/null +++ b/src/assets/image/icons/connections/Zoom.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/image/icons/connections/index.ts b/src/assets/image/icons/connections/index.ts index 751cd7ab8..460d85cc5 100644 --- a/src/assets/image/icons/connections/index.ts +++ b/src/assets/image/icons/connections/index.ts @@ -23,5 +23,8 @@ export { default as RedisIcon } from "@assets/image/icons/connections/Redis.svg? export { default as SchedulerIcon } from "@assets/image/icons/connections/Scheduler.svg?react"; export { default as SlackIcon } from "@assets/image/icons/connections/Slack.svg?react"; export { default as SqliteIcon } from "@assets/image/icons/connections/Sqlite.svg?react"; - export { default as TwilioIcon } from "@assets/image/icons/connections/Twilio.svg?react"; +// Taken from: https://www.svgrepo.com/svg/452140/zoom +export { default as ZoomIcon } from "@assets/image/icons/connections/Zoom.svg?react"; +// Taken from: https://www.svgrepo.com/svg/501547/empty +export { default as EmptyCircleIcon } from "@assets/image/icons/connections/EmptyCircle.svg?react"; diff --git a/src/components/organisms/connections/integrations/height/add.tsx b/src/components/organisms/connections/integrations/height/add.tsx new file mode 100644 index 000000000..09eb44c5c --- /dev/null +++ b/src/components/organisms/connections/integrations/height/add.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from "react"; + +import { useTranslation } from "react-i18next"; + +import { Integrations } from "@src/enums/components"; +import { useConnectionForm } from "@src/hooks"; +import { oauthSchema } from "@validations"; + +import { Button } from "@components/atoms"; + +export const HeightIntegrationAddForm = ({ + connectionId, + triggerParentFormSubmit, +}: { + connectionId?: string; + triggerParentFormSubmit: () => void; +}) => { + const { t } = useTranslation("integrations"); + + const { handleOAuth } = useConnectionForm(oauthSchema, "create"); + + useEffect(() => { + if (connectionId) { + handleOAuth(connectionId, Integrations.height); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [connectionId]); + + return ( +
+ +
+ ); +}; diff --git a/src/components/organisms/connections/integrations/height/edit.tsx b/src/components/organisms/connections/integrations/height/edit.tsx new file mode 100644 index 000000000..75aa361c5 --- /dev/null +++ b/src/components/organisms/connections/integrations/height/edit.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +import { useTranslation } from "react-i18next"; +import { useParams } from "react-router-dom"; + +import { Integrations } from "@src/enums/components"; +import { useConnectionForm } from "@src/hooks"; +import { oauthSchema } from "@validations"; + +import { Button } from "@components/atoms"; + +export const HeightIntegrationEditForm = () => { + const { t } = useTranslation("integrations"); + const { connectionId } = useParams(); + const { handleOAuth, handleSubmit } = useConnectionForm(oauthSchema, "edit"); + + return ( +
await handleOAuth(connectionId!, Integrations.height))} + > + +
+ ); +}; diff --git a/src/components/organisms/connections/integrations/height/index.ts b/src/components/organisms/connections/integrations/height/index.ts new file mode 100644 index 000000000..d9e2e4e92 --- /dev/null +++ b/src/components/organisms/connections/integrations/height/index.ts @@ -0,0 +1,2 @@ +export { HeightIntegrationAddForm } from "@components/organisms/connections/integrations/height/add"; +export { HeightIntegrationEditForm } from "@components/organisms/connections/integrations/height/edit"; diff --git a/src/components/organisms/connections/integrations/index.ts b/src/components/organisms/connections/integrations/index.ts index 8823c8cb3..cfb6a026d 100644 --- a/src/components/organisms/connections/integrations/index.ts +++ b/src/components/organisms/connections/integrations/index.ts @@ -39,3 +39,8 @@ export { SlackIntegrationAddForm } from "@components/organisms/connections/integ export { SlackIntegrationEditForm } from "@components/organisms/connections/integrations/slack"; export { TwilioIntegrationAddForm } from "@components/organisms/connections/integrations/twilio"; export { TwilioIntegrationEditForm } from "@components/organisms/connections/integrations/twilio"; +export { + HeightIntegrationAddForm, + HeightIntegrationEditForm, +} from "@components/organisms/connections/integrations/height"; +export { ZoomIntegrationAddForm, ZoomIntegrationEditForm } from "@components/organisms/connections/integrations/zoom"; diff --git a/src/components/organisms/connections/integrations/zoom/add.tsx b/src/components/organisms/connections/integrations/zoom/add.tsx new file mode 100644 index 000000000..ae6189a1d --- /dev/null +++ b/src/components/organisms/connections/integrations/zoom/add.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from "react"; + +import { useTranslation } from "react-i18next"; + +import { Integrations } from "@src/enums/components"; +import { useConnectionForm } from "@src/hooks"; +import { oauthSchema } from "@validations"; + +import { Button } from "@components/atoms"; + +export const ZoomIntegrationAddForm = ({ + connectionId, + triggerParentFormSubmit, +}: { + connectionId?: string; + triggerParentFormSubmit: () => void; +}) => { + const { t } = useTranslation("integrations"); + + const { handleOAuth } = useConnectionForm(oauthSchema, "create"); + + useEffect(() => { + if (connectionId) { + handleOAuth(connectionId, Integrations.zoom); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [connectionId]); + + return ( +
+ +
+ ); +}; diff --git a/src/components/organisms/connections/integrations/zoom/edit.tsx b/src/components/organisms/connections/integrations/zoom/edit.tsx new file mode 100644 index 000000000..098fa5d9f --- /dev/null +++ b/src/components/organisms/connections/integrations/zoom/edit.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +import { useTranslation } from "react-i18next"; +import { useParams } from "react-router-dom"; + +import { Integrations } from "@src/enums/components"; +import { useConnectionForm } from "@src/hooks"; +import { oauthSchema } from "@validations"; + +import { Button } from "@components/atoms"; + +export const ZoomIntegrationEditForm = () => { + const { t } = useTranslation("integrations"); + const { connectionId } = useParams(); + const { handleOAuth, handleSubmit } = useConnectionForm(oauthSchema, "edit"); + + return ( +
await handleOAuth(connectionId!, Integrations.zoom))} + > + +
+ ); +}; diff --git a/src/components/organisms/connections/integrations/zoom/index.ts b/src/components/organisms/connections/integrations/zoom/index.ts new file mode 100644 index 000000000..edf9563ed --- /dev/null +++ b/src/components/organisms/connections/integrations/zoom/index.ts @@ -0,0 +1,2 @@ +export { ZoomIntegrationAddForm } from "@components/organisms/connections/integrations/zoom/add"; +export { ZoomIntegrationEditForm } from "@components/organisms/connections/integrations/zoom/edit"; diff --git a/src/constants/connections/addComponentsMapping.constants.ts b/src/constants/connections/addComponentsMapping.constants.ts index c8ac1243a..59ac490bf 100644 --- a/src/constants/connections/addComponentsMapping.constants.ts +++ b/src/constants/connections/addComponentsMapping.constants.ts @@ -16,6 +16,8 @@ import { OpenAiIntegrationAddForm, SlackIntegrationAddForm, TwilioIntegrationAddForm, + HeightIntegrationAddForm, + ZoomIntegrationAddForm, } from "@components/organisms/connections/integrations"; export const integrationAddFormComponents: Partial>> = { @@ -36,4 +38,6 @@ export const integrationAddFormComponents: Partial>> = { @@ -36,4 +38,6 @@ export const integrationToEditComponent: Partial = { label: "HubSpot", value: Integrations.hubspot, }, + height: { + icon: EmptyCircleIcon, + label: "Height", + value: Integrations.height, + }, + zoom: { + icon: ZoomIcon, + label: "Zoom", + value: Integrations.zoom, + }, }; export const fitleredIntegrationsMap = (() => { diff --git a/src/hooks/useConnectionForm.ts b/src/hooks/useConnectionForm.ts index c44a823d9..5d4ecf7e6 100644 --- a/src/hooks/useConnectionForm.ts +++ b/src/hooks/useConnectionForm.ts @@ -335,7 +335,12 @@ export const useConnectionForm = (validationSchema: ZodObject, mode }; const handleOAuth = async (oauthConnectionId: string, integrationName: keyof typeof Integrations) => { - const migratedAuthIntegrations = new Set([Integrations.github]); + const migratedAuthIntegrations = new Set([ + Integrations.github, + Integrations.zoom, + Integrations.height, + Integrations.slack, + ]); try { await VariablesService.setByConnectiontId(oauthConnectionId!, {