Repository: provectus/kafka-ui
Issue: [FE] Update display of key/value format
Labels: good first issue
scope/frontend
status/accepted
type/chore

![image](https://user-images.githubusercontent.com/1494347/209088893-23812066-914d-47b8-9059-b0bad9be8c3b.png)
key/value types are not displayed, they're currently being fetched from `keyFormat` and `valueFormat` fields, but:
![image](https://user-images.githubusercontent.com/1494347/209088998-3d1dd995-34fc-4c5f-a4c1-48d7a69b6e44.png)


Issue comments:
@David-DB88 Implementation is invalid.
#3117 clearly states that the value should be fetched from API (the second screenshot is of deprecated fields in API response).

```
const keyFormat = searchParams.get('keySerde') || '';
  const valueFormat = searchParams.get('valueSerde') || '';
```
This will display the currently selected serdes no matter which serde is used for the message itself.

Got it. Thank you for pointing out.

Pull request review comments:
shouldn't we test it by setting search params in the testing to these values ? then render the component for testing. that way we can test `messageContentFormat`
@Mgo i wrote above that i will change test cases if the solution is normal, i know about linter error i commented  some code in test cases 

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 cb2dbbb3c0c..47b6e49a41e 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
@@ -42,8 +42,6 @@ const Message: React.FC<Props> = ({
     key,
     partition,
     content,
-    valueFormat,
-    keyFormat,
     headers,
   },
   keyFilters,
@@ -140,9 +138,7 @@ const Message: React.FC<Props> = ({
       {isOpen && (
         <MessageContent
           messageKey={key}
-          messageKeyFormat={keyFormat}
           messageContent={content}
-          messageContentFormat={valueFormat}
           headers={headers}
           timestamp={timestamp}
           timestampType={timestampType}
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index 6edfdde54c1..fe472ad3b12 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -3,6 +3,7 @@ import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import { useSearchParams } from 'react-router-dom';
 
 import * as S from './MessageContent.styled';
 
@@ -10,9 +11,7 @@ type Tab = 'key' | 'content' | 'headers';
 
 export interface MessageContentProps {
   messageKey?: string;
-  messageKeyFormat?: string;
   messageContent?: string;
-  messageContentFormat?: string;
   headers?: { [key: string]: string | undefined };
   timestamp?: Date;
   timestampType?: TopicMessageTimestampTypeEnum;
@@ -20,14 +19,15 @@ export interface MessageContentProps {
 
 const MessageContent: React.FC<MessageContentProps> = ({
   messageKey,
-  messageKeyFormat,
   messageContent,
-  messageContentFormat,
   headers,
   timestamp,
   timestampType,
 }) => {
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
+  const [searchParams] = useSearchParams();
+  const keyFormat = searchParams.get('keySerde') || '';
+  const valueFormat = searchParams.get('valueSerde') || '';
 
   const activeTabContent = () => {
     switch (activeTab) {
@@ -54,7 +54,6 @@ const MessageContent: React.FC<MessageContentProps> = ({
     e.preventDefault();
     setActiveTab('headers');
   };
-
   const keySize = new TextEncoder().encode(messageKey).length;
   const contentSize = new TextEncoder().encode(messageContent).length;
   const contentType =
@@ -106,21 +105,21 @@ const MessageContent: React.FC<MessageContentProps> = ({
             </S.Metadata>
 
             <S.Metadata>
-              <S.MetadataLabel>Value</S.MetadataLabel>
+              <S.MetadataLabel>Key Serde</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{messageContentFormat}</S.MetadataValue>
+                <S.MetadataValue>{keyFormat}</S.MetadataValue>
                 <S.MetadataMeta>
-                  Size: <BytesFormatted value={contentSize} />
+                  Size: <BytesFormatted value={keySize} />
                 </S.MetadataMeta>
               </span>
             </S.Metadata>
 
             <S.Metadata>
-              <S.MetadataLabel>Key</S.MetadataLabel>
+              <S.MetadataLabel>Value Serde</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{messageKeyFormat}</S.MetadataValue>
+                <S.MetadataValue>{valueFormat}</S.MetadataValue>
                 <S.MetadataMeta>
-                  Size: <BytesFormatted value={keySize} />
+                  Size: <BytesFormatted value={contentSize} />
                 </S.MetadataMeta>
               </span>
             </S.Metadata>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
index 23af3d45cf4..91310a30e41 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
@@ -16,9 +16,7 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
       <tbody>
         <MessageContent
           messageKey='"test-key"'
-          messageKeyFormat="JSON"
           messageContent='{"data": "test"}'
-          messageContentFormat="AVRO"
           headers={{ header: 'test' }}
           timestamp={new Date(0)}
           timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME}
@@ -34,14 +32,33 @@ const proto =
 
 global.TextEncoder = TextEncoder;
 
+const searchParamsContentAVRO = new URLSearchParams({
+  keySerde: 'SchemaRegistry',
+  valueSerde: 'AVRO',
+  limit: '100',
+});
+
+const searchParamsContentJSON = new URLSearchParams({
+  keySerde: 'SchemaRegistry',
+  valueSerde: 'JSON',
+  limit: '100',
+});
+
+const searchParamsContentPROTOBUF = new URLSearchParams({
+  keySerde: 'SchemaRegistry',
+  valueSerde: 'PROTOBUF',
+  limit: '100',
+});
 describe('MessageContent screen', () => {
   beforeEach(() => {
-    render(setupWrapper());
+    render(setupWrapper(), {
+      initialEntries: [`/messages?${searchParamsContentAVRO}`],
+    });
   });
 
   describe('renders', () => {
     it('key format in document', () => {
-      expect(screen.getByText('JSON')).toBeInTheDocument();
+      expect(screen.getByText('SchemaRegistry')).toBeInTheDocument();
     });
 
     it('content format in document', () => {
@@ -86,36 +103,36 @@ describe('checking content type depend on message type', () => {
   it('renders component with message having JSON type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'JSON',
         messageContent: '{"data": "test"}',
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentJSON}`] }
     );
-    expect(screen.getAllByText('JSON')[1]).toBeInTheDocument();
+    expect(screen.getByText('JSON')).toBeInTheDocument();
   });
   it('renders component with message having AVRO type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'AVRO',
         messageContent: '{"data": "test"}',
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentAVRO}`] }
     );
     expect(screen.getByText('AVRO')).toBeInTheDocument();
   });
   it('renders component with message having PROTOBUF type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'PROTOBUF',
         messageContent: proto,
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentPROTOBUF}`] }
     );
     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: '',
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentPROTOBUF}`] }
     );
     expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
   });


Test patch: