Skip to content

Commit dcbabb0

Browse files
RonenMarsRonenMars
authored
feat(UI-1894): telegram connection (#1353)
## Description ## Linear Ticket ## What type of PR is this? (check all applicable) - [ ] 💡 (feat) - A new feature (non-breaking change which adds functionality) - [ ] 🔄 (refactor) - Code Refactoring - A code change that neither fixes a bug nor adds a feature - [ ] 🐞 (fix) - Bug Fix (non-breaking change which fixes an issue) - [ ] 🏎 (perf) - Optimization - [ ] 📄 (docs) - Documentation - Documentation only changes - [ ] 📄 (test) - Tests - Adding missing tests or correcting existing tests - [ ] ⚙️ (ci) - Continuous Integrations - Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) - [ ] ☑️ (chore) - Chores - Other changes that don't modify src or test files - [ ] ↩️ (revert) - Reverts - Reverts a previous commit(s). <!-- For a timely review/response, please avoid force-pushing additional commits if your PR already received reviews or comments. Before submitting a Pull Request, please ensure you've done the following: - 👷‍♀️ Create small PRs. In most cases this will be possible. - ✅ Provide tests for your changes. - 📝 Use descriptive commit messages (as described below). - 📗 Update any related documentation and include any relevant screenshots. Commit Message Structure (all lower-case): <type>(optional ticket number): <description> [optional body] -->
1 parent 0b591ed commit dcbabb0

File tree

18 files changed

+224
-0
lines changed

18 files changed

+224
-0
lines changed

‎src/assets/image/icons/connections/Telegram.svg‎

Lines changed: 12 additions & 0 deletions
Loading

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export { default as SchedulerIcon } from "@assets/image/icons/connections/Schedu
2525
export { default as SlackIcon } from "@assets/image/icons/connections/Slack.svg?react";
2626
export { default as SqliteIcon } from "@assets/image/icons/connections/Sqlite.svg?react";
2727
export { default as TwilioIcon } from "@assets/image/icons/connections/Twilio.svg?react";
28+
// Taken from: https://www.svgviewer.dev/s/401523/telegram
29+
export { default as TelegramIcon } from "@assets/image/icons/connections/Telegram.svg?react";
2830
// Taken from: https://www.svgrepo.com/svg/452140/zoom
2931
export { default as ZoomIcon } from "@assets/image/icons/connections/Zoom.svg?react";
3032
// Taken from: https://www.svgrepo.com/svg/501547/empty

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export { SlackIntegrationAddForm } from "@components/organisms/connections/integ
4343
export { SlackIntegrationEditForm } from "@components/organisms/connections/integrations/slack";
4444
export { TwilioIntegrationAddForm } from "@components/organisms/connections/integrations/twilio";
4545
export { TwilioIntegrationEditForm } from "@components/organisms/connections/integrations/twilio";
46+
export { TelegramIntegrationAddForm } from "@components/organisms/connections/integrations/telegram";
47+
export { TelegramIntegrationEditForm } from "@components/organisms/connections/integrations/telegram";
4648
export {
4749
HeightIntegrationAddForm,
4850
HeightIntegrationEditForm,

‎src/components/organisms/connections/integrations/telegram/add.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { useEffect } from "react";
2+
3+
import { useTranslation } from "react-i18next";
4+
5+
import { infoTelegramLinks } from "@constants/lists/connections";
6+
import { ConnectionAuthType } from "@src/enums";
7+
import { Integrations } from "@src/enums/components";
8+
import { useConnectionForm } from "@src/hooks";
9+
import { telegramBotTokenIntegrationSchema } from "@validations";
10+
11+
import { Button, ErrorMessage, Input, Link, Spinner } from "@components/atoms";
12+
import { Accordion } from "@components/molecules";
13+
14+
import { ExternalLinkIcon, FloppyDiskIcon } from "@assets/image/icons";
15+
16+
export const TelegramIntegrationAddForm = ({
17+
connectionId,
18+
triggerParentFormSubmit,
19+
}: {
20+
connectionId?: string;
21+
triggerParentFormSubmit: () => void;
22+
}) => {
23+
const { t } = useTranslation("integrations");
24+
25+
const { createConnection, errors, handleSubmit, isLoading, register } = useConnectionForm(
26+
telegramBotTokenIntegrationSchema,
27+
"create"
28+
);
29+
30+
useEffect(() => {
31+
if (connectionId) {
32+
createConnection(connectionId, ConnectionAuthType.BotToken, Integrations.telegram);
33+
}
34+
// eslint-disable-next-line react-hooks/exhaustive-deps
35+
}, [connectionId]);
36+
37+
return (
38+
<form className="flex flex-col gap-6" onSubmit={handleSubmit(triggerParentFormSubmit)}>
39+
<div className="relative">
40+
<Input
41+
{...register("bot_token")}
42+
aria-label={t("telegram.placeholders.botToken")}
43+
disabled={isLoading}
44+
isError={!!errors.bot_token}
45+
isRequired
46+
label={t("telegram.placeholders.botToken")}
47+
/>
48+
49+
<ErrorMessage>{errors.bot_token?.message as string}</ErrorMessage>
50+
</div>
51+
52+
<Accordion title={t("information")}>
53+
<div className="flex flex-col gap-2">
54+
{infoTelegramLinks.map(({ text, url }: { text: string; url: string }, index: number) => (
55+
<Link
56+
className="group inline-flex items-center gap-2.5 text-green-800"
57+
key={index}
58+
target="_blank"
59+
to={url}
60+
>
61+
{text}
62+
63+
<ExternalLinkIcon className="size-3.5 fill-green-800 duration-200" />
64+
</Link>
65+
))}
66+
</div>
67+
</Accordion>
68+
69+
<Button
70+
aria-label={t("buttons.saveConnection")}
71+
className="ml-auto w-fit border-white px-3 font-medium text-white hover:bg-black"
72+
disabled={isLoading}
73+
type="submit"
74+
variant="outline"
75+
>
76+
{isLoading ? <Spinner /> : <FloppyDiskIcon className="size-5 fill-white transition" />}
77+
78+
{t("buttons.saveConnection")}
79+
</Button>
80+
</form>
81+
);
82+
};

‎src/components/organisms/connections/integrations/telegram/edit.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
import { useWatch } from "react-hook-form";
4+
import { useTranslation } from "react-i18next";
5+
6+
import { infoTelegramLinks } from "@constants/lists/connections";
7+
import { integrationVariablesMapping } from "@src/constants";
8+
import { useConnectionForm } from "@src/hooks";
9+
import { setFormValues } from "@src/utilities";
10+
import { telegramBotTokenIntegrationSchema } from "@validations";
11+
12+
import { Button, ErrorMessage, Link, SecretInput, Spinner } from "@components/atoms";
13+
import { Accordion } from "@components/molecules";
14+
15+
import { ExternalLinkIcon, FloppyDiskIcon } from "@assets/image/icons";
16+
17+
export const TelegramIntegrationEditForm = () => {
18+
const { t } = useTranslation("integrations");
19+
const [lockState, setLockState] = useState(true);
20+
21+
const { connectionVariables, control, errors, handleSubmit, isLoading, onSubmitEdit, register, setValue } =
22+
useConnectionForm(telegramBotTokenIntegrationSchema, "edit");
23+
24+
const botToken = useWatch({ control, name: "bot_token" });
25+
26+
useEffect(() => {
27+
setFormValues(connectionVariables, integrationVariablesMapping.telegram, setValue);
28+
// eslint-disable-next-line react-hooks/exhaustive-deps
29+
}, [connectionVariables]);
30+
31+
return (
32+
<form className="flex flex-col gap-6" onSubmit={handleSubmit(onSubmitEdit)}>
33+
<div className="relative">
34+
<SecretInput
35+
type="password"
36+
{...register("bot_token")}
37+
aria-label={t("telegram.placeholders.botToken")}
38+
disabled={isLoading}
39+
handleInputChange={(newValue) => setValue("bot_token", newValue)}
40+
handleLockAction={setLockState}
41+
isError={!!errors.bot_token}
42+
isLocked={lockState}
43+
isRequired
44+
label={t("telegram.placeholders.botToken")}
45+
value={botToken}
46+
/>
47+
<ErrorMessage>{errors.bot_token?.message as string}</ErrorMessage>
48+
</div>
49+
50+
<Accordion title={t("information")}>
51+
<div className="flex flex-col gap-2">
52+
{infoTelegramLinks.map(({ text, url }: { text: string; url: string }, index: number) => (
53+
<Link
54+
className="group inline-flex items-center gap-2.5 text-green-800"
55+
key={index}
56+
target="_blank"
57+
to={url}
58+
>
59+
{text}
60+
<ExternalLinkIcon className="size-3.5 fill-green-800 duration-200" />
61+
</Link>
62+
))}
63+
</div>
64+
</Accordion>
65+
66+
<Button
67+
aria-label={t("buttons.saveConnection")}
68+
className="ml-auto w-fit border-white px-3 font-medium text-white hover:bg-black"
69+
disabled={isLoading}
70+
type="submit"
71+
variant="outline"
72+
>
73+
{isLoading ? <Spinner /> : <FloppyDiskIcon className="size-5 fill-white transition" />}
74+
{t("buttons.saveConnection")}
75+
</Button>
76+
</form>
77+
);
78+
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { TelegramIntegrationAddForm } from "@components/organisms/connections/integrations/telegram/add";
2+
export { TelegramIntegrationEditForm } from "@components/organisms/connections/integrations/telegram/edit";

‎src/constants/connections/addComponentsMapping.constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
OpenAiIntegrationAddForm,
1919
SlackIntegrationAddForm,
2020
TwilioIntegrationAddForm,
21+
TelegramIntegrationAddForm,
2122
HeightIntegrationAddForm,
2223
ZoomIntegrationAddForm,
2324
SalesforceIntegrationAddForm,
@@ -38,6 +39,7 @@ export const integrationAddFormComponents: Partial<Record<keyof typeof Integrati
3839
aws: AwsIntegrationAddForm,
3940
chatgpt: OpenAiIntegrationAddForm,
4041
twilio: TwilioIntegrationAddForm,
42+
telegram: TelegramIntegrationAddForm,
4143
jira: JiraIntegrationAddForm,
4244
confluence: ConfluenceIntegrationAddForm,
4345
discord: DiscordIntegrationAddForm,

‎src/constants/connections/editComponentsMapping.constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
OpenAiIntegrationEditForm,
1717
SlackIntegrationEditForm,
1818
TwilioIntegrationEditForm,
19+
TelegramIntegrationEditForm,
1920
HeightIntegrationEditForm,
2021
ZoomIntegrationEditForm,
2122
LinearIntegrationEditForm,
@@ -30,6 +31,7 @@ export const integrationToEditComponent: Partial<Record<keyof typeof Integration
3031
[Integrations.discord]: DiscordIntegrationEditForm,
3132
[Integrations.jira]: JiraIntegrationEditForm,
3233
[Integrations.twilio]: TwilioIntegrationEditForm,
34+
[Integrations.telegram]: TelegramIntegrationEditForm,
3335
[Integrations.chatgpt]: OpenAiIntegrationEditForm,
3436
[Integrations.slack]: SlackIntegrationEditForm,
3537
[Integrations.aws]: AwsIntegrationEditForm,

‎src/constants/connections/integrationVariablesMapping.constants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ export const integrationVariablesMapping = {
7373
[Integrations.discord]: {
7474
botToken: "BotToken",
7575
},
76+
[Integrations.telegram]: {
77+
bot_token: "BotToken",
78+
},
7679
[Integrations.chatgpt]: {
7780
key: "apiKey",
7881
},

‎src/constants/featureFlags.constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export const featureFlags = {
66
salesforceHideDefaultOAuth: import.meta.env.VITE_SALESFORCE_HIDE_DEFAULT_OAUTH,
77
zoomHideDefaultOAuth: import.meta.env.VITE_ZOOM_HIDE_DEFAULT_OAUTH,
88
microsoftHideIntegration: import.meta.env.VITE_MICROSOFT_HIDE_INTEGRATION,
9+
telegramHideIntegration: import.meta.env.VITE_HIDE_TELEGRAM_CONN,
910
sendDotEmptyTriggerFilter: import.meta.env.VITE_SEND_DOT_EMPTY_TRIGGER_FILTER,
1011
displayChatbot: import.meta.env.VITE_DISPLAY_CHATBOT,
1112
displayBilling: import.meta.env.VITE_DISPLAY_BILLING,

0 commit comments

Comments
 (0)