[FIXED issue/1545] added feedback to the user when a message content is copied to clipboard (#1570)

* added alert after "Copy to clipborad"

* moved main logic to useDataSaver

* fixed typographical mistake

* updated useDataSaver test

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

@@ -1,9 +1,12 @@
+import React, { useEffect } from 'react';
+import { render } from 'lib/testHelpers';
 import useDataSaver from 'lib/hooks/useDataSaver';
 
 describe('useDataSaver hook', () => {
   const content = {
     title: 'title',
   };
+
   describe('Save as file', () => {
     beforeAll(() => {
       jest.useFakeTimers('modern');
@@ -20,10 +23,14 @@ describe('useDataSaver hook', () => {
         .spyOn(document, 'createElement')
         .mockImplementation(() => link);
 
-      const { saveFile } = useDataSaver('message', content);
-      saveFile();
+      const HookWrapper: React.FC = () => {
+        const { saveFile } = useDataSaver('message', content);
+        useEffect(() => saveFile(), []);
+        return null;
+      };
 
-      expect(mockCreate).toHaveBeenCalledTimes(1);
+      render(<HookWrapper />);
+      expect(mockCreate).toHaveBeenCalledTimes(2);
       expect(link.download).toEqual('message_1616581196000.json');
       expect(link.href).toEqual(
         `data:text/json;charset=utf-8,${encodeURIComponent(
@@ -43,10 +50,14 @@ describe('useDataSaver hook', () => {
         .spyOn(document, 'createElement')
         .mockImplementation(() => link);
 
-      const { saveFile } = useDataSaver('message', 'content');
-      saveFile();
+      const HookWrapper: React.FC = () => {
+        const { saveFile } = useDataSaver('message', 'content');
+        useEffect(() => saveFile(), []);
+        return null;
+      };
 
-      expect(mockCreate).toHaveBeenCalledTimes(1);
+      render(<HookWrapper />);
+      expect(mockCreate).toHaveBeenCalledTimes(2);
       expect(link.download).toEqual('message_1616581196000.txt');
       expect(link.href).toEqual(
         `data:text/json;charset=utf-8,${encodeURIComponent(
@@ -66,9 +77,14 @@ describe('useDataSaver hook', () => {
       },
     });
     jest.spyOn(navigator.clipboard, 'writeText');
-    const { copyToClipboard } = useDataSaver('topic', content);
-    copyToClipboard();
 
+    const HookWrapper: React.FC = () => {
+      const { copyToClipboard } = useDataSaver('topic', content);
+      useEffect(() => copyToClipboard(), []);
+      return null;
+    };
+
+    render(<HookWrapper />);
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
       JSON.stringify(content)
     );

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

@@ -1,13 +1,28 @@
 import { isObject } from 'lodash';
+import { alertAdded, alertDissmissed } from 'redux/reducers/alerts/alertsSlice';
+import { useAppDispatch } from 'lib/hooks/redux';
+
+const AUTO_DISMISS_TIME = 2000;
 
 const useDataSaver = (
   subject: string,
   data: Record<string, string> | string
 ) => {
+  const dispatch = useAppDispatch();
   const copyToClipboard = () => {
     if (navigator.clipboard) {
       const str = JSON.stringify(data);
       navigator.clipboard.writeText(str);
+      dispatch(
+        alertAdded({
+          id: subject,
+          type: 'success',
+          title: '',
+          message: 'Copied successfully!',
+          createdAt: Date.now(),
+        })
+      );
+      setTimeout(() => dispatch(alertDissmissed(subject)), AUTO_DISMISS_TIME);
     }
   };