Repository: provectus/kafka-ui
Issue: [Bug] Export of JSON message to clipboard/file does not provide proper JSON
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

Whenever I want to copy an event to my clipboard (JSON format) (eg. to use it in my IDE for analyzis), I expect to get a proper json content.
However, it is currently having escape backslashes and surroundings double quotes, which makes it not parseable by my IDE (also less readable from my POV)

Using https://jsonformatter.curiousconcept.com/#, 
I checked that this JSON is compliant with RFC-8259 & RFC-7129 but not with others (especially with RFC-4627 which is the one for `The application/json Media Type for JavaScript Object Notation (JSON)`

I'm not sure this is _really_ a bug, maybe a feature request :)

Would it be possible to make the json without backslashes / surroundings double quotes ? 

Version : ([8a7399b](https://github.com/provectus/kafka-ui/commit/8a7399b))



Issue comments:
That seems like a bug, we previously had something close in a preview as well.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx b/kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx
index bc2cc9b66ce..937095bcb11 100644
--- a/kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx
+++ b/kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx
@@ -70,7 +70,7 @@ describe('useDataSaver hook', () => {
     });
   });
 
-  it('copies the data to the clipboard', () => {
+  describe('copies the data to the clipboard', () => {
     Object.assign(navigator, {
       clipboard: {
         writeText: jest.fn(),
@@ -78,15 +78,31 @@ describe('useDataSaver hook', () => {
     });
     jest.spyOn(navigator.clipboard, 'writeText');
 
-    const HookWrapper: React.FC = () => {
-      const { copyToClipboard } = useDataSaver('topic', content);
-      useEffect(() => copyToClipboard(), []);
-      return null;
-    };
+    it('data with type Object', () => {
+      const HookWrapper: React.FC = () => {
+        const { copyToClipboard } = useDataSaver('topic', content);
+        useEffect(() => copyToClipboard(), []);
+        return null;
+      };
+      render(<HookWrapper />);
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        JSON.stringify(content)
+      );
+    });
 
-    render(<HookWrapper />);
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-      JSON.stringify(content)
-    );
+    it('data with type String', () => {
+      const HookWrapper: React.FC = () => {
+        const { copyToClipboard } = useDataSaver(
+          'topic',
+          '{ title: "title", }'
+        );
+        useEffect(() => copyToClipboard(), []);
+        return null;
+      };
+      render(<HookWrapper />);
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        String('{ title: "title", }')
+      );
+    });
   });
 });
diff --git a/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts b/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts
index 25c42602f12..f39bac32058 100644
--- a/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts
+++ b/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts
@@ -11,7 +11,8 @@ const useDataSaver = (
   const dispatch = useAppDispatch();
   const copyToClipboard = () => {
     if (navigator.clipboard) {
-      const str = JSON.stringify(data);
+      const str =
+        typeof data === 'string' ? String(data) : JSON.stringify(data);
       navigator.clipboard.writeText(str);
       dispatch(
         alertAdded({


Test patch: