fix: add warning for copying not working in insecure contexts

hawtio · Aug 29, 2024 · bdc7f40 · bdc7f40
1 parent 4368104
commit bdc7f40
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/packages/hawtio/src/core/event-service.ts b/packages/hawtio/src/core/event-service.ts
@@ -1,13 +1,14 @@
 import EventEmitter from 'eventemitter3'
 import { Logger } from './logging'
+import React from 'react'
 
 const log = Logger.get('hawtio-core-event')
 
 export type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'custom'
 
 export type Notification = {
   type: NotificationType
-  message: string
+  message: React.ReactNode
   duration?: number
 }
 

diff --git a/packages/hawtio/src/plugins/shared/operations/OperationForm.tsx b/packages/hawtio/src/plugins/shared/operations/OperationForm.tsx
@@ -2,6 +2,7 @@ import { eventService } from '@hawtiosrc/core'
 import { PluginNodeSelectionContext } from '@hawtiosrc/plugins/context'
 import {
   ActionGroup,
+  Alert,
   Button,
   Checkbox,
   ClipboardCopy,
@@ -93,6 +94,17 @@ export const OperationForm: React.FunctionComponent<{
   )
 }
 
+const insecureContextMsg =
+  'Because Hawtio is accessed through insecure context (http:), it is not possible to copy data into the clipboard.'
+
+const InsecureContextWarning: React.FunctionComponent = () => {
+  return (
+    <Alert title='Insecure context limits functionality' variant='warning'>
+      {insecureContextMsg}
+    </Alert>
+  )
+}
+
 const OperationActions: React.FunctionComponent = () => {
   const { name, operation, objectName } = useContext(OperationContext)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
@@ -108,9 +120,28 @@ const OperationActions: React.FunctionComponent = () => {
     })
   }
 
+  const notifyCopyFailure = (text: string) => {
+    eventService.notify({
+      type: 'warning',
+      message: (
+        <>
+          <p>{insecureContextMsg}</p>
+          <p>
+            You can copy the URL manually: <code>{text}</code>
+          </p>
+        </>
+      ),
+      duration: 10_000,
+    })
+  }
+
   const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text)
-    notifySuccessfulCopy()
+    try {
+      navigator.clipboard.writeText(text)
+      notifySuccessfulCopy()
+    } catch (e) {
+      notifyCopyFailure(text)
+    }
   }
 
   const copyMethodName = () => {
@@ -129,6 +160,7 @@ const OperationActions: React.FunctionComponent = () => {
     >
       <Dropdown
         key={`operation-action-dropdown-${name}`}
+        popperProps={{ position: 'right' }}
         isOpen={isDropdownOpen}
         onOpenChange={setIsDropdownOpen}
         toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -138,6 +170,7 @@ const OperationActions: React.FunctionComponent = () => {
         )}
       >
         <DropdownList>
+          {!isSecureContext && <InsecureContextWarning />}
           <DropdownItem key={`operation-action-copy-method-name-${name}`} onClick={copyMethodName}>
             Copy method name
           </DropdownItem>

diff --git a/packages/hawtio/src/ui/notification/HawtioNotification.tsx b/packages/hawtio/src/ui/notification/HawtioNotification.tsx
@@ -14,7 +14,7 @@ export const HawtioNotification: React.FunctionComponent = () => {
     return overflow > 0 ? `View ${overflow} more alerts` : ''
   }
 
-  const addAlert = (title: string, variant: NotificationType, key: React.Key) => {
+  const addAlert = (title: React.ReactNode, variant: NotificationType, key: React.Key) => {
     const newAlerts = [...alerts, { title, variant, key }]
     setAlerts(newAlerts)
     setOverflowMessage(getOverflowMessage(newAlerts.length))