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 f762bad647..7813a2b579 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) => `
${e}`).join('');
showAlert('error', {
id: `${clusterName}-${topicName}-createTopicMessageError`,
title: 'Validation Error',
- message: ``,
+ message: (
+
+ {errors.map((e) => (
+ - {e}
+ ))}
+
+ ),
});
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 03e08877fe..58ae2ed09d 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 6a82e6f13c..8f9d167d1e 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 = ({ title, type, message, onDissmiss }) => (
{title}
-
+ {message}
diff --git a/kafka-ui-react-app/src/lib/errorHandling.tsx b/kafka-ui-react-app/src/lib/errorHandling.tsx
index b839cfff35..a3033b87a0 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,
+ });
+ }
};