Repository: provectus/kafka-ui
Issue: Inconsistent timestamps format in topic messages
Labels: type/bug
good first issue
scope/frontend
status/accepted

![image](https://user-images.githubusercontent.com/1494347/159177182-031fc6b2-d9e4-4bba-ac72-d61797956d7b.png)


Issue comments:
let's do MM.DD.YYYY (like on the left side of the screenshot)

Pull request review comments:
i think here more detailed message would be more clear what is the block actually going to test.
Is there any way to avoid using of `TestId`?

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
index 39b713d7ea6..5d226b11159 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import dayjs from 'dayjs';
 
 import * as S from './MessageContent.styled';
 
@@ -94,7 +95,9 @@ const MessageContent: React.FC<MessageContentProps> = ({
             <S.Metadata>
               <S.MetadataLabel>Timestamp</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{timestamp?.toLocaleString()}</S.MetadataValue>
+                <S.MetadataValue>
+                  {dayjs(timestamp).format('MM.DD.YYYY HH:mm:ss')}
+                </S.MetadataValue>
                 <S.MetadataMeta>Timestamp type: {timestampType}</S.MetadataMeta>
               </span>
             </S.Metadata>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
index 29c9aadea3b..325f7381989 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
@@ -28,6 +28,9 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
   );
 };
 
+const proto =
+  'syntax = "proto3";\npackage com.provectus;\n\nmessage TestProtoRecord {\n  string f1 = 1;\n  int32 f2 = 2;\n}\n';
+
 global.TextEncoder = TextEncoder;
 
 describe('MessageContent screen', () => {
@@ -78,3 +81,42 @@ describe('MessageContent screen', () => {
     });
   });
 });
+
+describe('checking content type depend on message type', () => {
+  it('renders component with message having JSON type', () => {
+    render(
+      setupWrapper({
+        messageContentFormat: 'JSON',
+        messageContent: '{"data": "test"}',
+      })
+    );
+    expect(screen.getAllByText('JSON')[1]).toBeInTheDocument();
+  });
+  it('renders component with message having AVRO type', () => {
+    render(
+      setupWrapper({
+        messageContentFormat: 'AVRO',
+        messageContent: '{"data": "test"}',
+      })
+    );
+    expect(screen.getByText('AVRO')).toBeInTheDocument();
+  });
+  it('renders component with message having PROTOBUF type', () => {
+    render(
+      setupWrapper({
+        messageContentFormat: 'PROTOBUF',
+        messageContent: proto,
+      })
+    );
+    expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
+  });
+  it('renders component with message having no type which is equal to having PROTOBUF type', () => {
+    render(
+      setupWrapper({
+        messageContentFormat: 'PROTOBUF',
+        messageContent: '',
+      })
+    );
+    expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
+  });
+});


Test patch: