Merge remote-tracking branch 'origin/dev-552-home-instances-blocks-adding-logout-btn' into dev

src/Gargantext/Components/Nodes/Home.purs

 module Gargantext.Components.Nodes.Home
-  ( Action(..)
+  ( HomeAction(..)
   , HomeProps
   , State(..)
   , Tuto(..)
@@ -18,7 +18,7 @@ module Gargantext.Components.Nodes.Home
   , jumboTitle
   , langLandingData
   , license
-  , performAction
+  , performHomeAction
   , playTutos
   , startTutos
   , summary
@@ -36,13 +36,14 @@ import Data.Newtype (class Newtype)
 import Effect (Effect)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), Position(..), TooltipPosition(..), Variant(..))
 import Gargantext.Components.Data.Landing (BlockText(..), BlockTexts(..), Button(..), LandingData(..))
 import Gargantext.Components.FolderView as FV
 import Gargantext.Components.Lang (LandingLang(..))
 import Gargantext.Components.Lang.Landing.EnUS as En
 import Gargantext.Components.Lang.Landing.FrFR as Fr
 import Gargantext.Config as Config
-import Gargantext.Sessions (Sessions)
+import Gargantext.Sessions (Session(..), Sessions, Action(Logout), unSessions)
 import Gargantext.Sessions as Sessions
 import Gargantext.Sessions.Types (Session(..), cleanBackendUrl)
 import Gargantext.Utils.Reactix as R2
@@ -51,6 +52,9 @@ import Reactix.DOM.HTML as H
 import Routing.Hash (setHash)
 import Toestand as T
 
+import Effect.Console (log)
+
+
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Home"
 
@@ -61,17 +65,17 @@ derive instance Newtype State _
 initialState :: State
 initialState = State { userName: "", password: "" }
 
-data Action
+data HomeAction
   = Documentation
   | Enter
   | Login
   | SignUp
 
-performAction :: Action -> Effect Unit
-performAction Documentation = pure unit
-performAction Enter = void $ setHash "/search"
-performAction Login = void $ setHash "/login"
-performAction SignUp = pure unit
+performHomeAction :: HomeAction -> Effect Unit
+performHomeAction Documentation = pure unit
+performHomeAction Enter = void $ setHash "/search"
+performHomeAction Login = void $ setHash "/login"
+performHomeAction SignUp = pure unit
 
 langLandingData :: LandingLang -> LandingData
 langLandingData LL_FR = Fr.landingData
@@ -226,7 +230,7 @@ tutorial :: R2.Leaf TutorialProps
 tutorial = R2.leaf tutorialCpt
 tutorialCpt :: R.Component TutorialProps
 tutorialCpt = here.component "tutorial" cpt where
-  cpt { sessions } _ = do
+  cpt { boxes, sessions } _ = do
 
     pure $
 
@@ -249,6 +253,9 @@ tutorialCpt = here.component "tutorial" cpt where
         [ video x.id, H.h4 {} [ H.text x.title ], H.p  {} [ H.text x.text ] ]
       -}
 
+      onSignOutClick session = void $ Sessions.change (Logout session) boxes.sessions
+
+
       makeFolders :: Array Session -> Array R.Element
       makeFolders s = sessionToFolder <$> s
         where
@@ -265,16 +272,35 @@ tutorialCpt = here.component "tutorial" cpt where
               [
                 B.wad
                 [ "d-flex", "align-items-center" ]
+                [
+                  B.wad
+                  [ "text-left", "w-10/12" ]
                   [
                     B.icon
-                  { name: "user" }
-                ,
-                  B.wad_
-                  [ "virtual-space", "w-1" ]
+                    { name: "user", className: "pr-1" }
                   ,
                     B.span_ $
                     username <> "@" <> cleanBackendUrl backend
                   ]
+                ,
+                  B.wad
+                  [ "text-right", "w-2/12" ]
+                  [
+                    B.tooltipContainer
+                    { position: TooltipPosition Top
+                    , delayShow: 600
+                    , tooltipSlot:
+                        B.span_ "Log out"
+                    , defaultSlot:
+                        B.iconButton
+                        { name: "sign-out"
+                        , callback: \_ -> onSignOutClick session
+                        , elevation: Level2
+                        , className: "text-light"
+                        }
+                    }
+                  ]
+                ]
               ]
             ,
               H.div
@@ -287,6 +313,7 @@ tutorialCpt = here.component "tutorial" cpt where
               ]
             ]
       
+
 startTutos :: Array Tuto
 startTutos =
   [ Tuto { title: "The tree to manage your data"