Repository: provectus/kafka-ui
Issue: FE: Mark serde-failed messages with red
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

mark red in case of keySerde / valueSerde == “Fallback”

https://www.figma.com/file/ZkvysdRUmt9p2PDNU3a9WU/Kafka-UI?node-id=3161%3A16359&t=Hq9IHVUrCgjb9fqt-0

Issue comments:

Pull request review comments:
do we have an `enum` for this ? `'Fallback'`
i didn't find 
Move it to styled.ts
I would suggest to create ellipsis common component with width property 
Color should be moved to theme
Color should be moved to theme
done
done
done
done
```suggestion
const Ellipsis: React.FC<PropsWithChildren<{ text: string }>> = ({ text, children }) => {
  return (
    <S.Wrapper>
      <S.Text>{children}</S.Text>
      {children && (<S.Postfix>{children}</S.Postfix>)}
    </S.Wrapper>
  );
};
```
```suggestion
export const Wrapper = styled.div`
  display: flex;
  gap: 8px;
  align-items: center;
`;

```
Ellipsis is a common component. why we sending serde property here?
```suggestion
          <Ellipsis еуче={renderFilteredJson(key, keyFilters)}>
            {serde === 'Fallback' && <WarningRedIcon />}
          </Ellipsis>
```
```suggestion
        <S.DataCell title={key}>
```
It must be color from `Colors` object
i think something stayed in russian here
done
done
done
done
done
done

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
index 60f09b82933..0282cde2ea7 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import useDataSaver from 'lib/hooks/useDataSaver';
 import { TopicMessage } from 'generated-sources';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
@@ -7,22 +6,12 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 import { JSONPath } from 'jsonpath-plus';
+import Ellipsis from 'components/common/Ellipsis/Ellipsis';
+import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
 
 import MessageContent from './MessageContent/MessageContent';
 import * as S from './MessageContent/MessageContent.styled';
 
-const StyledDataCell = styled.td`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 350px;
-  min-width: 350px;
-`;
-
-const ClickableRow = styled.tr`
-  cursor: pointer;
-`;
-
 export interface PreviewFilter {
   field: string;
   path: string;
@@ -43,6 +32,8 @@ const Message: React.FC<Props> = ({
     partition,
     content,
     headers,
+    valueSerde,
+    keySerde,
   },
   keyFilters,
   contentFilters,
@@ -100,7 +91,7 @@ const Message: React.FC<Props> = ({
 
   return (
     <>
-      <ClickableRow
+      <S.ClickableRow
         onMouseEnter={() => setVEllipsisOpen(true)}
         onMouseLeave={() => setVEllipsisOpen(false)}
         onClick={toggleIsOpen}
@@ -115,16 +106,20 @@ const Message: React.FC<Props> = ({
         <td>
           <div>{formatTimestamp(timestamp)}</div>
         </td>
-        <StyledDataCell title={key}>
-          {renderFilteredJson(key, keyFilters)}
-        </StyledDataCell>
-        <StyledDataCell title={content}>
+        <S.DataCell title={key}>
+          <Ellipsis text={renderFilteredJson(key, keyFilters)}>
+            {keySerde === 'Fallback' && <WarningRedIcon />}
+          </Ellipsis>
+        </S.DataCell>
+        <S.DataCell title={content}>
           <S.Metadata>
             <S.MetadataValue>
-              {renderFilteredJson(content, contentFilters)}
+              <Ellipsis text={renderFilteredJson(content, contentFilters)}>
+                {valueSerde === 'Fallback' && <WarningRedIcon />}
+              </Ellipsis>
             </S.MetadataValue>
           </S.Metadata>
-        </StyledDataCell>
+        </S.DataCell>
         <td style={{ width: '5%' }}>
           {vEllipsisOpen && (
             <Dropdown>
@@ -135,7 +130,7 @@ const Message: React.FC<Props> = ({
             </Dropdown>
           )}
         </td>
-      </ClickableRow>
+      </S.ClickableRow>
       {isOpen && (
         <MessageContent
           messageKey={key}
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts
index 9eb5e6b0627..1d8672042b7 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts
@@ -35,7 +35,16 @@ export const ContentBox = styled.div`
     flex-grow: 1;
   }
 `;
-
+export const DataCell = styled.td`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  min-width: 350px;
+`;
+export const ClickableRow = styled.tr`
+  cursor: pointer;
+`;
 export const MetadataWrapper = styled.div`
   background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
   padding: 24px;
diff --git a/kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.styled.ts b/kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.styled.ts
new file mode 100644
index 00000000000..d301090b46c
--- /dev/null
+++ b/kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.styled.ts
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Text = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 340px;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
diff --git a/kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.tsx b/kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.tsx
new file mode 100644
index 00000000000..f6a690d9c60
--- /dev/null
+++ b/kafka-ui-react-app/src/components/common/Ellipsis/Ellipsis.tsx
@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+
+import * as S from './Ellipsis.styled';
+
+type EllipsisProps = {
+  text: React.ReactNode;
+};
+
+const Ellipsis: React.FC<PropsWithChildren<EllipsisProps>> = ({
+  text,
+  children,
+}) => {
+  return (
+    <S.Wrapper>
+      <S.Text>{text}</S.Text>
+      {children}
+    </S.Wrapper>
+  );
+};
+export default Ellipsis;
diff --git a/kafka-ui-react-app/src/components/common/Icons/WarningRedIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/WarningRedIcon.tsx
new file mode 100644
index 00000000000..13231f58944
--- /dev/null
+++ b/kafka-ui-react-app/src/components/common/Icons/WarningRedIcon.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const WarningRedIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="20"
+        height="20"
+        rx="10"
+        fill={theme.icons.warningRedIcon.rectFill}
+      />
+      <path
+        d="M9 4.74219H11V12.7422H9V4.74219Z"
+        fill={theme.icons.warningRedIcon.pathFill}
+      />
+      <path
+        d="M9 14.7422C9 14.1899 9.44772 13.7422 10 13.7422C10.5523 13.7422 11 14.1899 11 14.7422C11 15.2945 10.5523 15.7422 10 15.7422C9.44772 15.7422 9 15.2945 9 14.7422Z"
+        fill={theme.icons.warningRedIcon.pathFill}
+      />
+    </svg>
+  );
+};
+
+export default WarningRedIcon;
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index 978b694913f..33dbf1c619e 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -173,6 +173,10 @@ const baseTheme = {
     closeIcon: Colors.neutral[30],
     deleteIcon: Colors.red[20],
     warningIcon: Colors.yellow[20],
+    warningRedIcon: {
+      rectFill: Colors.red[10],
+      pathFill: Colors.red[50],
+    },
     messageToggleIcon: {
       normal: Colors.brand[30],
       hover: Colors.brand[40],


Test patch: