Merge branch '719-dev-clipboard-copy-improvements' into 'dev'

Resolve "Share link copy to clipboard"

See merge request !512

dist/styles/bootstrap-darkster.css

@@ -11126,6 +11126,10 @@ select.form-control {
   margin: 0.33em;
 }
 
+.copy-btn {
+  margin-left: 0.5em;
+}
+
 .table tr td {
   height: 48px;
 }

dist/styles/bootstrap-default.css

@@ -10932,6 +10932,10 @@ select.form-control {
   margin: 0.33em;
 }
 
+.copy-btn {
+  margin-left: 0.5em;
+}
+
 .table tr td {
   height: 48px;
 }

dist/styles/bootstrap-greyson.css

@@ -10777,6 +10777,10 @@ select.form-control {
   margin: 0.33em;
 }
 
+.copy-btn {
+  margin-left: 0.5em;
+}
+
 .table tr td {
   height: 48px;
 }

dist/styles/bootstrap-herbie.css

@@ -11002,6 +11002,10 @@ select.form-control {
   margin: 0.33em;
 }
 
+.copy-btn {
+  margin-left: 0.5em;
+}
+
 .table tr td {
   height: 48px;
 }

dist/styles/bootstrap-monotony.css

@@ -11075,6 +11075,10 @@ select.form-control {
   margin: 0.33em;
 }
 
+.copy-btn {
+  margin-left: 0.5em;
+}
+
 .table tr td {
   height: 48px;
 }

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

 module Gargantext.Components.Forest.Tree.Node.Action.Share where
 
+import Gargantext.Prelude
+
 import Data.Array (filter, nub)
 import Data.Either (Either(..))
 import Data.Generic.Rep (class Generic)
@@ -9,6 +11,7 @@ import Data.String (Pattern(..), contains)
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
+import Effect.Timer (setTimeout)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (Elevation(Level1))
 import Gargantext.Components.Forest.Tree.Node.Action.Types as Action
@@ -17,14 +20,13 @@ import Gargantext.Components.Forest.Tree.Node.Tools.SubTree (subTreeView, SubTre
 import Gargantext.Components.InputWithAutocomplete (inputWithAutocomplete)
 import Gargantext.Config.REST (AffRESTError)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, get, post)
 import Gargantext.Types (ID, NodeID, NodeType)
 import Gargantext.Types as GT
+import Gargantext.Utils.Clipboard (modalClipboard)
 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
@@ -197,23 +199,31 @@ shareURLcpt :: R.Component ShareURL
 shareURLcpt = R2.hereComponent here "shareURL" hCpt
   where
   hCpt hp { nodeType, id, session } _ = do
+    copied <- T.useBox false
+
     useLoader
       { errorHandler: Just errorHandler
       , herePrefix: hp
       , loader: loadUrl
       , path: { nodeType, id, session }
-      , render: \url -> shareURLInner { url } []
+      , render: \url -> shareURLInner { url, copied } []
       }
   errorHandler err = here.warn2 "[ShareURL] RESTError" err
 
-shareURLInner :: R2.Component (url :: String)
+type ShareURLInnerProps =
+  ( url :: String
+  , copied :: T.Box Boolean
+  )
+
+shareURLInner :: R2.Component ShareURLInnerProps
 shareURLInner = R.createElement shareURLInnercpt
 
-shareURLInnercpt :: R.Component (url :: String)
+shareURLInnercpt :: R.Component ShareURLInnerProps
 shareURLInnercpt = here.component "shareURLInner" cpt
   where
-  cpt { url } _ = do
+  cpt { url, copied } _ = do
     R.useEffect' $ modalClipboard ".copy" url
+    copied' <- T.useLive T.unequal copied
 
     pure $ Tools.panelNoFooter
       { mError: Nothing
@@ -221,12 +231,15 @@ shareURLInnercpt = here.component "shareURLInner" cpt
       , textTitle: "Share the node (URL)"
       }
       [ H.div {}
-          [ H.text url
+          [ H.a { href: url } [ H.text url ]
           , B.iconButton
-              { name: "clone"
-              , title: "Copy to clipboard"
-              , className: "copy"
-              , callback: \_ -> pure unit
+              { name: if copied' then "check" else "copy"
+              , title: if copied' then "Copied" else "Copy to clipboard"
+              , className: "copy copy-btn"
+              , callback: \_ -> do
+                  T.write_ true copied
+                  _ <- setTimeout 2000 (T.write_ false copied)
+                  pure unit
               }
           ]
       ]

src/sass/_legacy/_styles.scss

@@ -503,3 +503,7 @@ select.form-control {
     margin: 0.33em;
   }
 }
+
+.copy-btn {
+    margin-left: 0.5em;
+}