chore: update to markdow

Author: srikanthccv

frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx

@@ -1,4 +1,5 @@
 import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,13 +15,9 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 				label={t('field_webhook_url')}
 				tooltip={{
 					title: (
-						<div
-							dangerouslySetInnerHTML={{
-								__html: t('tooltip_ms_teams_url').replace(
-									/\[([^\]]+)\]\(([^)]+)\)/g,
-									'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-								),
-							}}
+						<MarkdownRenderer
+							markdownContent={t('tooltip_ms_teams_url')}
+							variables={{}}
 						/>
 					),
 					overlayInnerStyle: { maxWidth: 400 },

frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx

@@ -1,4 +1,5 @@
 import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import { useTranslation } from 'react-i18next';
 
 import { OpsgenieChannel } from '../../CreateAlertChannels/config';
@@ -24,13 +25,9 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 				label={t('field_opsgenie_api_key')}
 				tooltip={{
 					title: (
-						<div
-							dangerouslySetInnerHTML={{
-								__html: t('tooltip_opsgenie_api_key').replace(
-									/\[([^\]]+)\]\(([^)]+)\)/g,
-									'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-								),
-							}}
+						<MarkdownRenderer
+							markdownContent={t('tooltip_opsgenie_api_key')}
+							variables={{}}
 						/>
 					),
 					overlayInnerStyle: { maxWidth: 400 },

frontend/src/container/FormAlertChannels/Settings/Pager.tsx

@@ -1,4 +1,5 @@
 import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,13 +16,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 				label={t('field_pager_routing_key')}
 				tooltip={{
 					title: (
-						<div
-							dangerouslySetInnerHTML={{
-								__html: t('tooltip_pager_routing_key').replace(
-									/\[([^\]]+)\]\(([^)]+)\)/g,
-									'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-								),
-							}}
+						<MarkdownRenderer
+							markdownContent={t('tooltip_pager_routing_key')}
+							variables={{}}
 						/>
 					),
 					overlayInnerStyle: { maxWidth: 400 },

frontend/src/container/FormAlertChannels/Settings/Slack.tsx

@@ -1,4 +1,5 @@
 import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,13 +17,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 				label={t('field_webhook_url')}
 				tooltip={{
 					title: (
-						<div
-							dangerouslySetInnerHTML={{
-								__html: t('tooltip_slack_url').replace(
-									/\[([^\]]+)\]\(([^)]+)\)/g,
-									'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-								),
-							}}
+						<MarkdownRenderer
+							markdownContent={t('tooltip_slack_url')}
+							variables={{}}
 						/>
 					),
 					overlayInnerStyle: { maxWidth: 400 },

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,4 +1,5 @@
 import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,13 +15,9 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 				label={t('field_webhook_url')}
 				tooltip={{
 					title: (
-						<div
-							dangerouslySetInnerHTML={{
-								__html: t('tooltip_webhook_url').replace(
-									/\[([^\]]+)\]\(([^)]+)\)/g,
-									'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-								),
-							}}
+						<MarkdownRenderer
+							markdownContent={t('tooltip_webhook_url')}
+							variables={{}}
 						/>
 					),
 					overlayInnerStyle: { maxWidth: 400 },