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) => `
  • ${e}
  • `).join(''); showAlert('error', { id: `${clusterName}-${topicName}-createTopicMessageError`, title: 'Validation Error', - message: ``, + message: ( + + ), }); 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 = ({ 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 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, + }); + } };