The key of the message is not visible / accessible #377 (#477)

* The key of the message is not visible / accessible #377

* The key of the message is not visible / accessible #377

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx

@@ -12,6 +12,7 @@ export interface MessageItemProp {
   offset: TopicMessage['offset'];
   timestamp: TopicMessage['timestamp'];
   content?: TopicMessage['content'];
+  messageKey?: TopicMessage['key'];
 }
 
 const MessageItem: React.FC<MessageItemProp> = ({
@@ -19,6 +20,7 @@ const MessageItem: React.FC<MessageItemProp> = ({
   offset,
   timestamp,
   content,
+  messageKey,
 }) => {
   const { copyToClipboard, saveFile } = useDataSaver(
     'topic-message',
@@ -27,6 +29,7 @@ const MessageItem: React.FC<MessageItemProp> = ({
   return (
     <tr>
       <td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
+      <td>{messageKey}</td>
       <td style={{ width: 150 }}>{offset}</td>
       <td style={{ width: 100 }}>{partition}</td>
       <td style={{ wordBreak: 'break-word' }}>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx

@@ -20,6 +20,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
         <thead>
           <tr>
             <th>Timestamp</th>
+            <th>Key</th>
             <th>Offset</th>
             <th>Partition</th>
             <th>Content</th>
@@ -28,13 +29,14 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
         </thead>
         <tbody>
           {messages.map(
-            ({ partition, offset, timestamp, content }: TopicMessage) => (
+            ({ partition, offset, timestamp, content, key }: TopicMessage) => (
               <MessageItem
                 key={`message-${timestamp.getTime()}-${offset}`}
                 partition={partition}
                 offset={offset}
                 timestamp={timestamp}
                 content={content}
+                messageKey={key}
               />
             )
           )}

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx

@@ -14,7 +14,7 @@ describe('MessageItem', () => {
       const wrapper = shallow(<MessageItem {...messages[0]} />);
 
       expect(wrapper.find('tr').length).toEqual(1);
-      expect(wrapper.find('td').length).toEqual(5);
+      expect(wrapper.find('td').length).toEqual(6);
       expect(wrapper.find('MessageContent').length).toEqual(1);
     });
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap

@@ -11,6 +11,7 @@ exports[`MessageItem when content is defined matches snapshot 1`] = `
   >
     mocked date
   </td>
+  <td />
   <td
     style={
       Object {
@@ -84,6 +85,7 @@ exports[`MessageItem when content is undefined matches snapshot 1`] = `
   >
     mocked date
   </td>
+  <td />
   <td
     style={
       Object {

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap

@@ -10,6 +10,9 @@ exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
         <th>
           Timestamp
         </th>
+        <th>
+          Key
+        </th>
         <th>
           Offset
         </th>
@@ -33,12 +36,14 @@ exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
           }
         }
         key="message-802310400000-2"
+        messageKey="1"
         offset={2}
         partition={1}
         timestamp={1995-06-05T00:00:00.000Z}
       />
       <MessageItem
         key="message-1596585600000-20"
+        messageKey="1"
         offset={20}
         partition={2}
         timestamp={2020-08-05T00:00:00.000Z}

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/fixtures.ts

@@ -9,12 +9,14 @@ export const messages: TopicMessage[] = [
       foo: 'bar',
       key: 'val',
     },
+    key: '1',
   },
   {
     partition: 2,
     offset: 20,
     timestamp: new Date(Date.UTC(2020, 7, 5)),
     content: undefined,
+    key: '1',
   },
 ];