Add a fallback when the browser does not support copying the share link to clipboard (not a secure origin)

See: https://stackoverflow.com/a/51823007

ui/src/dialogs/ShareDialog.js

@@ -47,21 +47,23 @@ export const ShareDialog = () => {
     {
       onSuccess: (res) => {
         const url = shareUrl(res?.data?.id)
-        navigator.clipboard
-          .writeText(url)
-          .then(() => {
-            notify('message.shareSuccess', 'info', { url }, false, 0)
-          })
-          .catch((err) => {
-            notify(
-              translate('message.shareFailure', { url }) + ': ' + err.message,
-              {
-                type: 'warning',
-                multiLine: true,
-                duration: 0,
-              }
-            )
-          })
+        if (navigator.clipboard && window.isSecureContext) {
+          navigator.clipboard
+            .writeText(url)
+            .then(() => {
+              notify('message.shareSuccess', 'info', { url }, false, 0)
+            })
+            .catch((err) => {
+              notify(
+                translate('message.shareFailure', { url }) + ': ' + err.message,
+                {
+                  type: 'warning',
+                  multiLine: true,
+                  duration: 0,
+                }
+              )
+            })
+        } else prompt(translate('message.shareCopyToClipboard'), url)
       },
       onFailure: (error) =>
         notify(translate('ra.page.error') + ': ' + error.message, {

ui/src/i18n/en.json

@@ -369,6 +369,7 @@
         "shareOriginalFormat": "Share in original format",
         "shareDialogTitle": "Share %{resource} '%{name}'",
         "shareBatchDialogTitle": "Share 1 %{resource} |||| Share %{smart_count} %{resource}",
+        "shareCopyToClipboard": "Copy to clipboard: Ctrl+C, Enter",
         "shareSuccess": "URL copied to clipboard: %{url}",
         "shareFailure": "Error copying URL %{url} to clipboard",
         "downloadDialogTitle": "Download %{resource} '%{name}' (%{size})",

ui/src/share/ShareList.js

@@ -29,25 +29,28 @@ const ShareList = (props) => {
 
   const handleShare = (r) => (e) => {
     const url = shareUrl(r?.id)
-    navigator.clipboard
-      .writeText(url)
-      .then(() => {
-        notify(translate('message.shareSuccess', { url }), {
-          type: 'info',
-          multiLine: true,
-          duration: 0,
-        })
-      })
-      .catch((err) => {
-        notify(
-          translate('message.shareFailure', { url }) + ': ' + err.message,
-          {
-            type: 'warning',
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard
+        .writeText(url)
+        .then(() => {
+          notify(translate('message.shareSuccess', { url }), {
+            type: 'info',
             multiLine: true,
             duration: 0,
-          }
-        )
-      })
+          })
+        })
+        .catch((err) => {
+          notify(
+            translate('message.shareFailure', { url }) + ': ' + err.message,
+            {
+              type: 'warning',
+              multiLine: true,
+              duration: 0,
+            }
+          )
+        })
+    } else prompt(translate('message.shareCopyToClipboard'), url)
+
     e.preventDefault()
     e.stopPropagation()
   }