From 8efd8905402db793fb8d4393415926ad0d70bf95 Mon Sep 17 00:00:00 2001
From: Oleg Shur <workshur@gmail.com>
Date: Mon, 8 Aug 2022 13:00:43 +0300
Subject: [PATCH] Update Alerts to use ReactNode as a message content (#2399)

---
 .../Topics/Topic/SendMessage/SendMessage.tsx     |  9 +++++++--
 .../src/components/common/Alert/Alert.styled.ts  |  2 +-
 .../src/components/common/Alert/Alert.tsx        |  7 ++-----
 kafka-ui-react-app/src/lib/errorHandling.tsx     | 16 +++++++++-------
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
index f762bad6474dbca125a13f76ae366252df081e6b..7813a2b579c5ec55549fe438fb20324b75107330 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
@@ -109,11 +109,16 @@ const SendMessage: React.FC = () => {
         }
       }
       if (errors.length > 0) {
-        const errorsHtml = errors.map((e) => `<li>${e}</li>`).join('');
         showAlert('error', {
           id: `${clusterName}-${topicName}-createTopicMessageError`,
           title: 'Validation Error',
-          message: `<ul>${errorsHtml}</ul>`,
+          message: (
+            <ul>
+              {errors.map((e) => (
+                <li>{e}</li>
+              ))}
+            </ul>
+          ),
         });
         return;
       }
diff --git a/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts b/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts
index 03e08877feb4cec887ff8358650766af074a4ca8..58ae2ed09df3bc6bd10928beebf45d3440a307d7 100644
--- a/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts
+++ b/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 export const Alert = styled.div<{ $type: ToastType }>`
   background-color: ${({ $type, theme }) => theme.alert.color[$type]};
-  min-width: 500px;
+  width: 500px;
   min-height: 64px;
   border-radius: 8px;
   padding: 12px;
diff --git a/kafka-ui-react-app/src/components/common/Alert/Alert.tsx b/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
index 6a82e6f13ce1e41e8f40f4f6d633ce5d3ff52a22..8f9d167d1e837f042a4d67a61982cd3276ff5016 100644
--- a/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
+++ b/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
@@ -8,7 +8,7 @@ import * as S from './Alert.styled';
 export interface AlertProps {
   title: string;
   type: ToastType;
-  message: string;
+  message: React.ReactNode;
   onDissmiss(): void;
 }
 
@@ -16,10 +16,7 @@ const Alert: React.FC<AlertProps> = ({ title, type, message, onDissmiss }) => (
   <S.Alert $type={type} role="alert">
     <div>
       <S.Title role="heading">{title}</S.Title>
-      <S.Message
-        role="contentinfo"
-        dangerouslySetInnerHTML={{ __html: message }}
-      />
+      <S.Message role="contentinfo">{message}</S.Message>
     </div>
     <IconButtonWrapper role="button" onClick={onDissmiss}>
       <CloseIcon />
diff --git a/kafka-ui-react-app/src/lib/errorHandling.tsx b/kafka-ui-react-app/src/lib/errorHandling.tsx
index b839cfff3585829c8fb87c5ef6a3a3536bd6150e..a3033b87a0631549c8302aa788900c4d48f7a0cf 100644
--- a/kafka-ui-react-app/src/lib/errorHandling.tsx
+++ b/kafka-ui-react-app/src/lib/errorHandling.tsx
@@ -30,7 +30,7 @@ export const getResponse = async (
 interface AlertOptions {
   id?: string;
   title?: string;
-  message: string;
+  message: React.ReactNode;
 }
 
 export const showAlert = (
@@ -67,10 +67,12 @@ export const showServerError = async (
   } catch (e) {
     // do nothing;
   }
-  showAlert('error', {
-    id: response.url,
-    title: `${response.status} ${response.statusText}`,
-    message: body?.message || 'An error occurred',
-    ...options,
-  });
+  if (response.status) {
+    showAlert('error', {
+      id: response.url,
+      title: `${response.status} ${response.statusText}`,
+      message: body?.message || 'An error occurred',
+      ...options,
+    });
+  }
 };