Update Alerts to use ReactNode as a message content (#2399)

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;
       }

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;

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 />

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,
+    });
+  }
 };