Repository: provectus/kafka-ui
Issue: The key of the message is not visible / accessible
Labels: scope/frontend

It would be nice to see the key of a message on the messages list.

Issue comments:

Pull request review comments:

```suggestion
                messageKey={key}
```
since the key column is sometimes empty, I suggest moving it to the second position. After timestamp. cc: @germanosin 
I'm not sure we need to set width for key column
messageKey
done
done
done
done

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx
index ba92a70f847..29b63fe2346 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx
+++ b/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' }}>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
index 7152d7eab33..3a487a1ca13 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
+++ b/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}
               />
             )
           )}
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx
index 25648dab07d..b723f7517a5 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx
+++ b/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);
     });
 
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap
index 2e81720530a..c1da94e9f80 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap
+++ b/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 {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap
index bbf1d6a9e86..6763c4528bb 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap
+++ b/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}
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/fixtures.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/fixtures.ts
index 7a197be5a4a..cb24a054b69 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/fixtures.ts
+++ b/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',
   },
 ];
 


Test patch: