Repository: provectus/kafka-ui
Issue: "Copy to clipboard" doesn't work
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

## Thanks App ^O^

## Environment

- kafka-ui：v0.4.0
- Microsoft Edge：106.0.1370.52 - x64


## Problem description

- don't work after clicking, nothing has changed.

![image](https://user-images.githubusercontent.com/2867798/197730162-bd172d3c-bfcb-4667-85b2-72782e58675b.png)


Issue comments:
Hello there judasn! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Ah, I see. There's no need to open up a duplicate tho.


@David-DB88 

This is a regression. PTAL why did this happen again and make sure (tests?) this doesn't happen again.
Related:
#2365
#1544
#1545
An issue is persistent if there's no SSL enabled and the app is accessed with http

Pull request review comments:
```suggestion
          'Copying to clipboard is unavailable due to unsecured (non-HTTPS) connection',
```
I would suggest to use `warning` here
ok
ok
```suggestion
        title: 'Warning',
```

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts b/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts
index 58ae2ed09df..eefd3bd3be0 100644
--- a/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts
+++ b/kafka-ui-react-app/src/components/common/Alert/Alert.styled.ts
@@ -1,7 +1,7 @@
-import { ToastType } from 'react-hot-toast';
 import styled from 'styled-components';
+import { ToastTypes } from 'lib/errorHandling';
 
-export const Alert = styled.div<{ $type: ToastType }>`
+export const Alert = styled.div<{ $type: ToastTypes }>`
   background-color: ${({ $type, theme }) => theme.alert.color[$type]};
   width: 500px;
   min-height: 64px;
diff --git a/kafka-ui-react-app/src/components/common/Alert/Alert.tsx b/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
index 8f9d167d1e8..5b58a573d4a 100644
--- a/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
+++ b/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import CloseIcon from 'components/common/Icons/CloseIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import { ToastType } from 'react-hot-toast';
+import { ToastTypes } from 'lib/errorHandling';
 
 import * as S from './Alert.styled';
 
 export interface AlertProps {
   title: string;
-  type: ToastType;
+  type: ToastTypes;
   message: React.ReactNode;
   onDissmiss(): void;
 }
diff --git a/kafka-ui-react-app/src/lib/errorHandling.tsx b/kafka-ui-react-app/src/lib/errorHandling.tsx
index f07f4cf52ac..58b2a8bb704 100644
--- a/kafka-ui-react-app/src/lib/errorHandling.tsx
+++ b/kafka-ui-react-app/src/lib/errorHandling.tsx
@@ -9,6 +9,7 @@ interface ServerResponse {
   url?: string;
   message?: ErrorResponse['message'];
 }
+export type ToastTypes = ToastType | 'warning';
 
 export const getResponse = async (
   response: Response
@@ -34,7 +35,7 @@ interface AlertOptions {
 }
 
 export const showAlert = (
-  type: ToastType,
+  type: ToastTypes,
   { title, message, id }: AlertOptions
 ) => {
   toast.custom(
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 f0631850e5c..9b125575d97 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
@@ -1,7 +1,12 @@
 import React, { useEffect } from 'react';
 import useDataSaver from 'lib/hooks/useDataSaver';
 import { render } from '@testing-library/react';
+import { showAlert } from 'lib/errorHandling';
 
+jest.mock('lib/errorHandling', () => ({
+  ...jest.requireActual('lib/errorHandling'),
+  showAlert: jest.fn(),
+}));
 describe('useDataSaver hook', () => {
   const content = {
     title: 'title',
@@ -38,7 +43,6 @@ describe('useDataSaver hook', () => {
       mockCreate.mockRestore();
     });
   });
-
   describe('copies the data to the clipboard', () => {
     Object.assign(navigator, {
       clipboard: {
@@ -74,4 +78,29 @@ describe('useDataSaver hook', () => {
       );
     });
   });
+  describe('navigator clipboard is undefined', () => {
+    it('calls showAlert with the correct parameters when clipboard API is unavailable', () => {
+      Object.assign(navigator, {
+        clipboard: undefined,
+      });
+
+      const HookWrapper: React.FC = () => {
+        const { copyToClipboard } = useDataSaver('topic', content);
+        useEffect(() => {
+          copyToClipboard();
+        }, [copyToClipboard]);
+        return null;
+      };
+
+      render(<HookWrapper />);
+
+      expect(showAlert).toHaveBeenCalledTimes(1);
+      expect(showAlert).toHaveBeenCalledWith('warning', {
+        id: 'topic',
+        title: 'Warning',
+        message:
+          'Copying to clipboard is unavailable due to unsecured (non-HTTPS) connection',
+      });
+    });
+  });
 });
diff --git a/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts b/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts
index d1ff61386dc..9bcc1036794 100644
--- a/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts
+++ b/kafka-ui-react-app/src/lib/hooks/useDataSaver.ts
@@ -1,4 +1,4 @@
-import { showSuccessAlert } from 'lib/errorHandling';
+import { showAlert, showSuccessAlert } from 'lib/errorHandling';
 
 const useDataSaver = (
   subject: string,
@@ -14,6 +14,13 @@ const useDataSaver = (
         title: '',
         message: 'Copied successfully!',
       });
+    } else {
+      showAlert('warning', {
+        id: subject,
+        title: 'Warning',
+        message:
+          'Copying to clipboard is unavailable due to unsecured (non-HTTPS) connection',
+      });
     }
   };
   const saveFile = () => {


Test patch: