[PLAT-15317]Alert emails are not in the correct format.

Summary:
Problem:
New Lines are displaying in the email when sent which is present in templates. The reason is the email does not respect '\n' for new line.

Fix:
We replaced the \n with <BR/> tag for email template.

Test Plan:
Tested manually by sending the email.

{F285875}

Reviewers: lsangappa

Reviewed By: lsangappa

Subscribers: yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D38069

managed/ui/src/redesign/components/YBEditor/plugins/custom-types.ts

@@ -53,6 +53,10 @@ export type JSONCodeBlock = {
   children: Descendant[];
 };
 
+export const LINE_BREAK_REGEX = /\n|\\n|<br\/>/;
+export const BR_TAG = '<br/>';
+export const NEW_LINE = '\n';
+
 export type IYBEditor = BaseEditor & ReactEditor & HistoryEditor;
 
 export type CustomElement =

managed/ui/src/redesign/components/YBEditor/transformers/HTMLToTextTransform.tsx

@@ -7,13 +7,15 @@
  * http://github.com/YugaByte/yugabyte-db/blob/master/licenses/POLYFORM-FREE-TRIAL-LICENSE-1.0.0.txt
  */
 
+import { BR_TAG, NEW_LINE } from "../plugins";
+
 // Convert html document to text.
 
 const ALLOWED_MARKUP_TAGS = ['STRONG', 'EM', 'U', 'S'];
 
-export const convertHTMLToText = (HTMLstr: string) => {
+export const convertHTMLToText = (HTMLstr: string, useNewLineInsteadOfBR = false) => {
   const htmlDoc = new DOMParser().parseFromString(HTMLstr, 'text/html');
-  return normalizeHTMLTags(htmlDoc.body).join('\n');
+  return normalizeHTMLTags(htmlDoc.body).join(useNewLineInsteadOfBR ? NEW_LINE : BR_TAG);
 };
 
 const normalizeHTMLTags = (el: Element): string[] => {
@@ -34,6 +36,10 @@ const normalizeHTMLTags = (el: Element): string[] => {
     return [el.textContent ?? ''];
   }
 
+  if(el.tagName === 'BR'){
+    return ['<br/>'];
+  }
+
   if (el.tagName === 'P') {
     const align = el.getAttribute('align');
     if (align) {

managed/ui/src/redesign/components/YBEditor/transformers/TextToHTMLTransform.tsx

@@ -12,6 +12,7 @@ import {
   ALERT_VARIABLE_ELEMENT_TYPE,
   ALERT_VARIABLE_END_TAG,
   ALERT_VARIABLE_START_TAG,
+  LINE_BREAK_REGEX,
   MATCH_ALL_BETWEEN_BRACKET_REGEX
 } from '../plugins';
 import { IAlertVariablesList } from '../../../features/alerts/TemplateComposer/ICustomVariables';
@@ -52,7 +53,7 @@ export function TextToHTMLTransform(text: string, alertVariables: IAlertVariable
 
     // split the text by \n and parse each line.
     // each line contains a list of elements
-    const domElementsByLine = text.split('\n').map((line) => {
+    const domElementsByLine = text.split(LINE_BREAK_REGEX).map((line) => {
       return Array.from(new DOMParser().parseFromString(line, 'text/html').body.childNodes);
     });
 
@@ -65,7 +66,7 @@ export function TextToHTMLTransform(text: string, alertVariables: IAlertVariable
         if (element.tagName) {
           // element is not text, it has tags like P, SPAN etc
 
-          if (element.tagName === 'P') {
+          if (element.tagName === 'P' || element.tagName === 'BR') {
             const align = element.getAttribute('align');
 
             if (align) {

managed/ui/src/redesign/features/alerts/TemplateComposer/composers/webhook/WebhookComposer.tsx

@@ -19,6 +19,7 @@ import { YBLoadingCircleIcon } from '../../../../../../components/common/indicat
 import { YBButton } from '../../../../../components';
 import { YBEditor } from '../../../../../components/YBEditor';
 import {
+  BR_TAG,
   clearEditor,
   DefaultJSONElement,
   isEditorDirty,
@@ -283,7 +284,7 @@ const WebhookComposer = React.forwardRef<IComposerRef, React.PropsWithChildren<I
                       const bodyText = new HTMLSerializer(bodyEditorRef.current).serialize();
 
                       createTemplate.mutate({
-                        textTemplate: convertHTMLToText(bodyText)
+                        textTemplate: convertHTMLToText(bodyText, true).replace(BR_TAG, '\n')
                       });
                     }
                   }}