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