0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* added alert after "Copy to clipborad"

* moved main logic to useDataSaver

* fixed typographical mistake

* updated useDataSaver test
This commit is contained in:
Denys Malofeiev 2022-02-10 08:58:12 +02:00 • committed by GitHub
parent a040a66f09
commit 164d33b707
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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)
);

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

@ -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);
}
};