Merge branch '719-dev-share-url-copy' into 'dev'

Resolve "Share link copy to clipboard"

Closes #719

See merge request !496

package-lock.json

@@ -21,6 +21,7 @@
         "bootstrap": "~4.6.0",
         "bootstrap-dark": "~1.0.3",
         "buffer": "~6.0.3",
+        "clipboard": "^2.0.11",
         "concurrently": "^9.1.0",
         "create-react-class": "~15.6.3",
         "crypto": "~1.0.1",
@@ -5308,6 +5309,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/clipboardy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
@@ -6491,6 +6503,12 @@
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "license": "MIT"
+    },
     "node_modules/depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -7499,6 +7517,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "license": "MIT",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/got": {
       "version": "11.8.6",
       "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
@@ -12826,6 +12853,12 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -13765,6 +13798,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",

package.json

@@ -37,6 +37,7 @@
     "bootstrap": "~4.6.0",
     "bootstrap-dark": "~1.0.3",
     "buffer": "~6.0.3",
+    "clipboard": "^2.0.11",
     "concurrently": "^9.1.0",
     "create-react-class": "~15.6.3",
     "crypto": "~1.0.1",

src/Gargantext/Components/Forest/Tree/Node/Action/Share.purs

@@ -24,6 +24,7 @@ import Gargantext.Types (ID, NodeID, NodeType)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.SimpleJSON as GUSJ
+import Gargantext.Utils.Clipboard (modalClipboard)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Simple.JSON as JSON
@@ -212,12 +213,23 @@ shareURLInnercpt :: R.Component (url :: String)
 shareURLInnercpt = here.component "shareURLInner" cpt
   where
   cpt { url } _ = do
+    R.useEffect' $ modalClipboard ".copy" url
+
     pure $ Tools.panelNoFooter
       { mError: Nothing
       , iconName: "share-alt"
       , textTitle: "Share the node (URL)"
       }
-      [ H.div {} [ H.text url ] ]
+      [ H.div {}
+          [ H.text url
+          , B.iconButton
+              { name: "clone"
+              , title: "Copy to clipboard"
+              , className: "copy"
+              , callback: \_ -> pure unit
+              }
+          ]
+      ]
 
 loadUrl :: { session :: Session, id :: NodeID, nodeType :: NodeType } -> AffRESTError String
 loadUrl { session, id, nodeType } = get session $ GR.ShareURL id nodeType

src/Gargantext/Utils/Clipboard.js

+import ClipboardJS from "clipboard";
+
+export function _modalClipboard(el, url) {
+    modal_id = document.getElementsByClassName("b-modal modal show")[0].id
+
+    return new ClipboardJS(el, {
+        container: document.getElementById(modal_id),
+        text: function(trigger) {
+            return url
+        }
+    });
+}

src/Gargantext/Utils/Clipboard.purs

+module Gargantext.Utils.Clipboard where
+
+import Effect (Effect)
+import Effect.Uncurried (EffectFn2, runEffectFn2)
+import Gargantext.Prelude
+
+foreign import _modalClipboard :: EffectFn2 String String Unit
+
+modalClipboard :: String -> String -> Effect Unit
+modalClipboard = runEffectFn2 _modalClipboard