feature/configurable_icons (#498)

* svg icons, dynamic imports, fallback typeToIcon

* fixed tests

* viber logo

* screenshots

* screenshot update

src/Components/ContactTypeIcon/ContactTypeIcon.tsx

@@ -1,51 +1,40 @@
-import * as React from "react";
-import TelegramIcon from "@skbkontur/react-icons/Telegram2";
-import MailIcon from "@skbkontur/react-icons/Mail2";
-import FacebookIcon from "@skbkontur/react-icons/Facebook2";
-import TwitterIcon from "@skbkontur/react-icons/Twitter2";
-import PhoneIcon from "@skbkontur/react-icons/Phone2";
-import WhatsappIcon from "@skbkontur/react-icons/WhatsApp2";
-import ViberIcon from "@skbkontur/react-icons/Viber2";
+import React, { useState, useEffect } from "react";
 import SvgIcon from "../SvgIcon/SvgIcon";
-import PushoverLogo from "./pushover-logo.svg";
-import SlackLogo from "./slack-logo.svg";
-import MsTeamsLogo from "./msteams-logo.svg";
-import TwilioLogo from "./twilio-logo.svg";
-import WebhookLogo from "./webhook-logo.svg";
-import DiscordLogo from "./discord-logo.svg";
-import PagerdutyLogo from "./pagerduty-logo.svg";
-import VictoropsLogo from "./victorops-logo.svg";
-import OpsgenieLogo from "./opsgenie-logo.svg";
-import MattermostLogo from "./mattermost-logo.svg";
+import MailLogo from "./mail-logo.svg";
+import { useAppSelector } from "../../store/hooks";
+import { ConfigState } from "../../store/selectors";
+import { DefaultTypeToIcon } from "./DefaultTypeToIcon";
 
 type Props = {
     type: string;
 };
 
-const TypeToIcon: { [key: string]: React.ReactElement } = {
-    slack: <SvgIcon path={SlackLogo} size={15} offsetTop={2} />,
-    msteams: <SvgIcon path={MsTeamsLogo} size={15} offsetTop={2} />,
-    telegram: <TelegramIcon />,
-    facebook: <FacebookIcon />,
-    viber: <ViberIcon />,
-    whatsapp: <WhatsappIcon />,
-    twitter: <TwitterIcon />,
-    mail: <MailIcon />,
-    email: <MailIcon />,
-    pushover: <SvgIcon path={PushoverLogo} size={14} offsetTop={2} />,
-    twilio: <SvgIcon path={TwilioLogo} size={14} offsetTop={2} />,
-    webhook: <SvgIcon path={WebhookLogo} size={14} offsetTop={2} />,
-    discord: <SvgIcon path={DiscordLogo} size={14} offsetTop={2} />,
-    pagerduty: <SvgIcon path={PagerdutyLogo} size={14} offsetTop={2} />,
-    victorops: <SvgIcon path={VictoropsLogo} size={14} offsetTop={2} />,
-    opsgenie: <SvgIcon path={OpsgenieLogo} size={14} offsetTop={2} />,
-    mattermost: <SvgIcon path={MattermostLogo} size={14} offsetTop={2} />,
-    phone: <PhoneIcon />,
-    tel: <PhoneIcon />,
-    sms: <PhoneIcon />,
-};
-
 export default function ContactTypeIcon({ type }: Props): React.ReactElement {
-    const iconKey = Object.keys(TypeToIcon).find((key) => type.includes(key));
-    return iconKey ? TypeToIcon[iconKey] : <MailIcon />;
+    const { config } = useAppSelector(ConfigState);
+
+    const contact = config?.contacts.find((contact) => type.includes(contact.type));
+
+    const [svgPath, setSvgPath] = useState<string | null>(null);
+
+    useEffect(() => {
+        import(`./${contact?.logo_uri}`)
+            .then((module) => {
+                setSvgPath(module.default);
+            })
+            .catch((error) => {
+                console.error(`Failed to load SVG: ${error.message}`);
+                setSvgPath(null);
+            });
+    }, [contact?.logo_uri]);
+
+    const getDefaultIcons = () => {
+        const iconKey = Object.keys(DefaultTypeToIcon).find((key) => type.includes(key));
+        return iconKey ? (
+            DefaultTypeToIcon[iconKey]
+        ) : (
+            <SvgIcon path={MailLogo} size={16} offsetTop={3} />
+        );
+    };
+
+    return svgPath ? <SvgIcon path={svgPath} size={16} offsetTop={3} /> : getDefaultIcons();
 }

src/Components/ContactTypeIcon/DefaultTypeToIcon.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import TelegramLogo from "./telegram-logo.svg";
+import MailLogo from "./mail-logo.svg";
+import FacebookLogo from "./facebook-logo.svg";
+import TwitterLogo from "./twitter-logo.svg";
+import PhoneLogo from "./phone-logo.svg";
+import WhatsappLogo from "./whatsapp-logo.svg";
+import ViberLogo from "./viber-logo.svg";
+import SvgIcon from "../SvgIcon/SvgIcon";
+import PushoverLogo from "./pushover-logo.svg";
+import SlackLogo from "./slack-logo.svg";
+import MsTeamsLogo from "./msteams-logo.svg";
+import TwilioLogo from "./twilio-logo.svg";
+import WebhookLogo from "./webhook-logo.svg";
+import DiscordLogo from "./discord-logo.svg";
+import PagerdutyLogo from "./pagerduty-logo.svg";
+import VictoropsLogo from "./victorops-logo.svg";
+import OpsgenieLogo from "./opsgenie-logo.svg";
+import MattermostLogo from "./mattermost-logo.svg";
+
+export const DefaultTypeToIcon: { [key: string]: React.ReactElement } = {
+    slack: <SvgIcon path={SlackLogo} size={15} offsetTop={2} />,
+    msteams: <SvgIcon path={MsTeamsLogo} size={15} offsetTop={2} />,
+    telegram: <SvgIcon path={TelegramLogo} size={14} offsetTop={2} />,
+    facebook: <SvgIcon path={FacebookLogo} size={14} offsetTop={2} />,
+    viber: <SvgIcon path={ViberLogo} size={14} offsetTop={2} />,
+    whatsapp: <SvgIcon path={WhatsappLogo} size={14} offsetTop={2} />,
+    twitter: <SvgIcon path={TwitterLogo} size={14} offsetTop={2} />,
+    mail: <SvgIcon path={MailLogo} size={14} offsetTop={2} />,
+    email: <SvgIcon path={MailLogo} size={14} offsetTop={2} />,
+    pushover: <SvgIcon path={PushoverLogo} size={14} offsetTop={2} />,
+    twilio: <SvgIcon path={TwilioLogo} size={14} offsetTop={2} />,
+    webhook: <SvgIcon path={WebhookLogo} size={14} offsetTop={2} />,
+    discord: <SvgIcon path={DiscordLogo} size={14} offsetTop={2} />,
+    pagerduty: <SvgIcon path={PagerdutyLogo} size={14} offsetTop={2} />,
+    victorops: <SvgIcon path={VictoropsLogo} size={14} offsetTop={2} />,
+    opsgenie: <SvgIcon path={OpsgenieLogo} size={14} offsetTop={2} />,
+    mattermost: <SvgIcon path={MattermostLogo} size={14} offsetTop={2} />,
+    phone: <SvgIcon path={PhoneLogo} size={14} offsetTop={2} />,
+    tel: <SvgIcon path={PhoneLogo} size={14} offsetTop={2} />,
+    sms: <SvgIcon path={PhoneLogo} size={14} offsetTop={2} />,
+};

src/Domain/Config.ts

@@ -4,6 +4,7 @@ import { TMetricSourceCluster } from "./Metric";
 export interface ContactConfig {
     type: ContactTypes;
     label: string;
+    logo_uri?: string;
     validation?: string;
     placeholder?: string;
     help?: string;

src/tests/core/api/local/api.yml

@@ -33,7 +33,7 @@ api:
   listen: ":8081"
   enable_cors: false
 web:
-  contacts:
+  contacts_template:
     - type: mail
       label: E-mail
     - type: pushover