From c45ef949f359326926c486cd95a08ce102fb7127 Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Tue, 9 Sep 2025 15:35:28 +0200
Subject: [PATCH 1/3] Refactor and fix clipboard

---
 public/locales/en.json                        | 11 ++----
 .../ControlPlanes/CopyKubeconfigButton.tsx    | 13 ++-----
 .../KubectlCommandInfo/KubectlTerminal.tsx    | 17 ++--------
 src/components/Shared/CopyButton.tsx          | 15 +++-----
 src/components/Yaml/YamlViewer.tsx            | 10 ++----
 src/hooks/useCopyToClipboard.ts               | 34 +++++++++++++++++++
 6 files changed, 51 insertions(+), 49 deletions(-)
 create mode 100644 src/hooks/useCopyToClipboard.ts

diff --git a/public/locales/en.json b/public/locales/en.json
index ccea36bc..5a1b2f67 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -82,8 +82,6 @@
   },
   "CopyKubeconfigButton": {
     "kubeconfigButton": "Kubeconfig",
-    "copiedMessage": "Copied to Clipboard",
-    "failedMessage": "Failed to copy, Error:",
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
   },
@@ -205,10 +203,6 @@
     "treeExecution": "Execution",
     "noExecutionFound": "No Executions found"
   },
-  "CopyButton": {
-    "copiedMessage": "Copied To Clipboard",
-    "failedMessage": "Failed to copy"
-  },
   "DeleteWorkspaceDialog": {
     "title": "Delete a Workspace",
     "introSection1": "The below instructions will help you delete the workspace \"{{workspaceName}}\" from project namespace \"{{projectNamespace}}\" using kubectl.",
@@ -341,7 +335,9 @@
     "unhealthy": "Unhealthy",
     "progress": "Managed",
     "remaining": "Remaining",
-    "active": "Active"
+    "active": "Active",
+    "copyToClipboardSuccessToast": "Copied to clipboard",
+    "copyToClipboardFailedToast": "Failed to copy to clipboard"
   },
   "errors": {
     "installError": "Install error",
@@ -360,7 +356,6 @@
     "cancel": "Cancel"
   },
   "yaml": {
-    "copiedToClipboard": "YAML copied to clipboard!",
     "YAML": "File"
   },
   "createMCP": {
diff --git a/src/components/ControlPlanes/CopyKubeconfigButton.tsx b/src/components/ControlPlanes/CopyKubeconfigButton.tsx
index 8000f1ec..2ec0a4eb 100644
--- a/src/components/ControlPlanes/CopyKubeconfigButton.tsx
+++ b/src/components/ControlPlanes/CopyKubeconfigButton.tsx
@@ -1,5 +1,5 @@
 import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
-import { useToast } from '../../context/ToastContext.tsx';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useRef, useState } from 'react';
 import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 export default function CopyKubeconfigButton() {
   const popoverRef = useRef(null);
   const [open, setOpen] = useState(false);
-  const { show } = useToast();
+  const { copyToClipboard } = useCopyToClipboard();
   const { t } = useTranslation();
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,14 +37,7 @@ export default function CopyKubeconfigButton() {
             return;
           }
           if (event.detail.item.dataset.action === 'copy') {
-            try {
-              navigator.clipboard.writeText(mcp.kubeconfig ?? '');
-              show(t('CopyKubeconfigButton.copiedMessage'));
-            } catch (error) {
-              //TODO: handle error, show error to user
-              show(`${t('CopyKubeconfigButton.failedMessage')} ${error}`);
-              console.error(error);
-            }
+            void copyToClipboard(mcp.kubeconfig ?? '');
           }
 
           setOpen(false);
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlTerminal.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlTerminal.tsx
index 11442178..ef87e68b 100644
--- a/src/components/Dialogs/KubectlCommandInfo/KubectlTerminal.tsx
+++ b/src/components/Dialogs/KubectlCommandInfo/KubectlTerminal.tsx
@@ -1,5 +1,5 @@
 import { FlexBox, Button } from '@ui5/webcomponents-react';
-import { useToast } from '../../../context/ToastContext';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.ts';
 import '@ui5/webcomponents-icons/dist/copy';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
@@ -8,18 +8,7 @@ interface KubeCtlTerminalProps {
 }
 
 export const KubectlTerminal = ({ command }: KubeCtlTerminalProps) => {
-  const { show } = useToast();
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(command).then(
-      () => {
-        show('Command copied to clipboard');
-      },
-      (err) => {
-        console.error('Could not copy text: ', err);
-      },
-    );
-  };
+  const { copyToClipboard } = useCopyToClipboard();
 
   const FormattedCommand = () => {
     if (command.startsWith("echo '") && command.includes('apiVersion:')) {
@@ -91,7 +80,7 @@ export const KubectlTerminal = ({ command }: KubeCtlTerminalProps) => {
             }}
           />
         </FlexBox>
-        <Button icon="copy" design="Transparent" tooltip="Copy to clipboard" onClick={handleCopy} />
+        <Button icon="copy" design="Transparent" tooltip="Copy to clipboard" onClick={() => copyToClipboard(command)} />
       </FlexBox>
 
       <div style={{ padding: '12px 16px', overflowX: 'auto' }}>
diff --git a/src/components/Shared/CopyButton.tsx b/src/components/Shared/CopyButton.tsx
index 710b79fa..88157e95 100644
--- a/src/components/Shared/CopyButton.tsx
+++ b/src/components/Shared/CopyButton.tsx
@@ -1,5 +1,5 @@
 import { Button, ButtonPropTypes } from '@ui5/webcomponents-react';
-import { useToast } from '../../context/ToastContext.tsx';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useId, CSSProperties } from 'react';
 import { useCopyButton } from '../../context/CopyButtonContext.tsx';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
@@ -11,20 +11,15 @@ interface CopyButtonProps extends ButtonPropTypes {
 }
 
 export const CopyButton = ({ text, style = {}, ...buttonProps }: CopyButtonProps) => {
-  const { show } = useToast();
+  const { copyToClipboard } = useCopyToClipboard();
   const { activeCopyId, setActiveCopyId } = useCopyButton();
   const uniqueId = useId();
   const isCopied = activeCopyId === uniqueId;
   const { t } = useTranslation();
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setActiveCopyId(uniqueId);
-    } catch (err) {
-      console.error(`Failed to copy text: ${text}. Error: ${err}`);
-      show(`${t('CopyButton.copiedMessage')} ${err}`);
-    }
+    await copyToClipboard(text, false);
+    setActiveCopyId(uniqueId);
   };
 
   const defaultStyle: CSSProperties = {
@@ -40,7 +35,7 @@ export const CopyButton = ({ text, style = {}, ...buttonProps }: CopyButtonProps
       onClick={handleCopy}
       {...buttonProps}
     >
-      {isCopied ? t('CopyButton.copiedMessage') : text}
+      {isCopied ? t('common.copyToClipboardSuccessToast') : text}
     </Button>
   );
 };
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index fa1cefa7..090dc85d 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -4,18 +4,14 @@ import { materialLight, materialDark } from 'react-syntax-highlighter/dist/esm/s
 
 import { Button, FlexBox } from '@ui5/webcomponents-react';
 import styles from './YamlViewer.module.css';
-import { useToast } from '../../context/ToastContext.tsx';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../hooks/useTheme.ts';
 type YamlViewerProps = { yamlString: string; filename: string };
 const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
-  const toast = useToast();
   const { t } = useTranslation();
   const { isDarkTheme } = useTheme();
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(yamlString);
-    toast.show(t('yaml.copiedToClipboard'));
-  };
+  const { copyToClipboard } = useCopyToClipboard();
   const downloadYaml = () => {
     const blob = new Blob([yamlString], { type: 'text/yaml' });
     const url = window.URL.createObjectURL(blob);
@@ -31,7 +27,7 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   return (
     <div className={styles.container}>
       <FlexBox className={styles.buttons} direction="Row" justifyContent="End" alignItems="Baseline" gap={16}>
-        <Button icon="copy" onClick={copyToClipboard}>
+        <Button icon="copy" onClick={() => copyToClipboard(yamlString)}>
           {t('buttons.copy')}
         </Button>
         <Button icon="download" onClick={downloadYaml}>
diff --git a/src/hooks/useCopyToClipboard.ts b/src/hooks/useCopyToClipboard.ts
new file mode 100644
index 00000000..726c784b
--- /dev/null
+++ b/src/hooks/useCopyToClipboard.ts
@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useToast } from '../context/ToastContext.tsx';
+import { useTranslation } from 'react-i18next';
+
+export type CopyFn = (text: string, showToastOnSuccess?: boolean) => Promise<boolean>;
+
+export function useCopyToClipboard(): { copyToClipboard: CopyFn } {
+  const toast = useToast();
+  const { t } = useTranslation();
+
+  const copyToClipboard: CopyFn = useCallback(
+    async (text, showToastOnSuccess = true) => {
+      if (!navigator?.clipboard) {
+        toast.show(t('common.copyToClipboardFailedToast'));
+        return false;
+      }
+
+      try {
+        await navigator.clipboard.writeText(text);
+        if (showToastOnSuccess) {
+          toast.show(t('common.copyToClipboardSuccessToast'));
+        }
+        return true;
+      } catch (error) {
+        toast.show(t('common.copyToClipboardFailedToast'));
+        console.error(error);
+        return false;
+      }
+    },
+    [toast, t],
+  );
+
+  return { copyToClipboard };
+}

From 0ea55e7f4960c900170f585e51b97722bd5b5a1a Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Tue, 9 Sep 2025 15:39:01 +0200
Subject: [PATCH 2/3] Update src/hooks/useCopyToClipboard.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/hooks/useCopyToClipboard.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useCopyToClipboard.ts b/src/hooks/useCopyToClipboard.ts
index 726c784b..c253693e 100644
--- a/src/hooks/useCopyToClipboard.ts
+++ b/src/hooks/useCopyToClipboard.ts
@@ -10,7 +10,7 @@ export function useCopyToClipboard(): { copyToClipboard: CopyFn } {
 
   const copyToClipboard: CopyFn = useCallback(
     async (text, showToastOnSuccess = true) => {
-      if (!navigator?.clipboard) {
+      if (!navigator.clipboard) {
         toast.show(t('common.copyToClipboardFailedToast'));
         return false;
       }

From 2c2a1ddea43b36e79c838fbafd315802d0fe6a24 Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Tue, 9 Sep 2025 15:47:10 +0200
Subject: [PATCH 3/3] refactor signature

---
 src/components/Shared/CopyButton.tsx | 2 +-
 src/hooks/useCopyToClipboard.ts      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Shared/CopyButton.tsx b/src/components/Shared/CopyButton.tsx
index 88157e95..c6c67070 100644
--- a/src/components/Shared/CopyButton.tsx
+++ b/src/components/Shared/CopyButton.tsx
@@ -18,7 +18,7 @@ export const CopyButton = ({ text, style = {}, ...buttonProps }: CopyButtonProps
   const { t } = useTranslation();
 
   const handleCopy = async () => {
-    await copyToClipboard(text, false);
+    await copyToClipboard(text, { showToastOnSuccess: false });
     setActiveCopyId(uniqueId);
   };
 
diff --git a/src/hooks/useCopyToClipboard.ts b/src/hooks/useCopyToClipboard.ts
index c253693e..0258508a 100644
--- a/src/hooks/useCopyToClipboard.ts
+++ b/src/hooks/useCopyToClipboard.ts
@@ -2,14 +2,14 @@ import { useCallback } from 'react';
 import { useToast } from '../context/ToastContext.tsx';
 import { useTranslation } from 'react-i18next';
 
-export type CopyFn = (text: string, showToastOnSuccess?: boolean) => Promise<boolean>;
+export type CopyFn = (text: string, options?: { showToastOnSuccess: boolean }) => Promise<boolean>;
 
 export function useCopyToClipboard(): { copyToClipboard: CopyFn } {
   const toast = useToast();
   const { t } = useTranslation();
 
   const copyToClipboard: CopyFn = useCallback(
-    async (text, showToastOnSuccess = true) => {
+    async (text, options = { showToastOnSuccess: true }) => {
       if (!navigator.clipboard) {
         toast.show(t('common.copyToClipboardFailedToast'));
         return false;
@@ -17,7 +17,7 @@ export function useCopyToClipboard(): { copyToClipboard: CopyFn } {
 
       try {
         await navigator.clipboard.writeText(text);
-        if (showToastOnSuccess) {
+        if (options.showToastOnSuccess) {
           toast.show(t('common.copyToClipboardSuccessToast'));
         }
         return true;