fixing timestamp type for message content (#1821)

* fixing timestamp type for message content

* adding test cases to improve coverage

* fixing test cases names

* removing testId from test cases

Author: rAzizbekyan

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>

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