Add full message details to export (#2493)

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

@@ -40,9 +40,18 @@ const Message: React.FC<Props> = ({
   },
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const savedMessageJson = {
+    Content: content,
+    Offset: offset,
+    Key: key,
+    Partition: partition,
+    Headers: headers,
+    Timestamp: timestamp,
+  };
+  const savedMessage = JSON.stringify(savedMessageJson, null, '\t');
   const { copyToClipboard, saveFile } = useDataSaver(
     'topic-message',
-    content || ''
+    savedMessage || ''
   );
 
   const toggleIsOpen = () => setIsOpen(!isOpen);

kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx

@@ -32,11 +32,7 @@ describe('useDataSaver hook', () => {
       render(<HookWrapper />);
       expect(mockCreate).toHaveBeenCalledTimes(2);
       expect(link.download).toEqual('message_1616581196000.json');
-      expect(link.href).toEqual(
-        `data:text/json;charset=utf-8,${encodeURIComponent(
-          JSON.stringify(content)
-        )}`
-      );
+      expect(link.href).toEqual(`data:text/json;charset=utf-8,${content}`);
       expect(link.click).toHaveBeenCalledTimes(1);
 
       mockCreate.mockRestore();
@@ -59,11 +55,7 @@ describe('useDataSaver hook', () => {
       render(<HookWrapper />);
       expect(mockCreate).toHaveBeenCalledTimes(2);
       expect(link.download).toEqual('message_1616581196000.txt');
-      expect(link.href).toEqual(
-        `data:text/json;charset=utf-8,${encodeURIComponent(
-          JSON.stringify('content')
-        )}`
-      );
+      expect(link.href).toEqual(`data:text/json;charset=utf-8,content`);
       expect(link.click).toHaveBeenCalledTimes(1);
 
       mockCreate.mockRestore();

kafka-ui-react-app/src/lib/hooks/useDataSaver.ts

@@ -20,9 +20,7 @@ const useDataSaver = (
 
   const saveFile = () => {
     const extension = isObject(data) ? 'json' : 'txt';
-    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
-      JSON.stringify(data)
-    )}`;
+    const dataStr = `data:text/json;charset=utf-8,${data}`;
     const downloadAnchorNode = document.createElement('a');
     downloadAnchorNode.setAttribute('href', dataStr);
     downloadAnchorNode.setAttribute(