[layout] Modal reactivity for "Close" action

* #427

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

-module Gargantext.Components.Bootstrap.BaseModal (baseModal) where
+module Gargantext.Components.Bootstrap.BaseModal
+  (baseModal
+  , showModal, hideModal
+  ) where
 
 import Gargantext.Prelude
 
@@ -109,12 +112,14 @@ component = R.hooksComponent componentName cpt where
 
       id = componentName <> "-" <> uuid
 
+      selector = "#" <> id
+
     -- | Hooks
     -- |
     useUpdateEffect1' isVisible
       if isVisible
-      then showModal window $ "#" <> id
-      else hideModal window $ "#" <> id
+      then showModal window selector
+      else hideModal window selector
 
     -- | Behaviors
     -- |

src/Gargantext/Components/FolderView.purs

 module Gargantext.Components.FolderView where
 
+import Gargantext.Prelude
+
+import DOM.Simple (window)
 import Data.Array as A
-import Data.Eq ((==))
 import Data.Maybe (Maybe(..), fromMaybe)
-import Data.Nullable (null)
 import Data.Traversable (traverse_)
-import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Store (Boxes)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.BaseModal (hideModal)
+import Gargantext.Components.Bootstrap.Types (Elevation(..), Variant(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Add (AddNodeValue(..), addNode)
 import Gargantext.Components.Forest.Tree.Node.Action.Contact as Contact
 import Gargantext.Components.Forest.Tree.Node.Action.Delete (deleteNode, unpublishNode)
@@ -30,17 +33,14 @@ import Gargantext.Config.REST (AffRESTError, logRESTError)
 import Gargantext.Config.Utils (handleRESTError)
 import Gargantext.Hooks.LinkHandler (useLinkHandler)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude (Ordering, Unit, bind, compare, discard, otherwise, pure, unit, void, ($), (<$>), (<>))
 import Gargantext.Routes (AppRoute(Home), nodeTypeAppRoute)
 import Gargantext.Sessions (Session(..), sessionId)
 import Gargantext.Types (NodeType(..), SessionId)
 import Gargantext.Types as GT
-import Gargantext.Utils.Popover as Popover
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
-import Record as Record
 import Toestand as T
 
 here :: R2.Here
@@ -59,7 +59,6 @@ folderView = R2.leafComponent folderViewCpt
 folderViewCpt :: R.Component Props
 folderViewCpt = here.component "folderViewCpt" cpt where
   cpt { boxes, nodeId, session } _ = do
-    setPopoverRef <- R.useRef Nothing
     reload <- T.useBox T2.newReload
     reload' <- T.useLive T.unequal reload
     useLoader { errorHandler
@@ -70,7 +69,7 @@ folderViewCpt = here.component "folderViewCpt" cpt where
                                                    , nodeId
                                                    , reload
                                                    , session
-                                                   , setPopoverRef } [] }
+                                                   } [] }
     where
       errorHandler = logRESTError here "[folderView]"
 
@@ -80,7 +79,6 @@ type FolderViewProps =
   , nodeId        :: Int
   , reload        :: T.Box T2.Reload
   , session       :: Session
-  , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
   )
 
 folderViewMain :: R2.Component FolderViewProps
@@ -105,23 +103,26 @@ folderViewMainCpt = here.component "folderViewMainCpt" cpt where
                                         , parentId: props.nodeId
                                         , reload: props.reload
                                         , session: props.session
-                                        , setPopoverRef: props.setPopoverRef
                                         , style: FolderChild
-                                        , text: node.name } []
+                                        , text: node.name
+                                        }
 
   makeParentFolder :: TreeNode -> Maybe TreeNode -> Record FolderViewProps -> Array R.Element
   makeParentFolder root (Just parent) props =
-    [ folder { boxes: props.boxes
-             , nodeId: root.id
-             , linkId: parent.id
-             , linkNodeType: parent.node_type
-             , nodeType: root.node_type
-             , parentId: parent.id
-             , reload: props.reload
-             , session: props.session
-             , setPopoverRef: props.setPopoverRef
-             , style: FolderUp
-             , text: root.name } [] ]
+    [
+      folder
+      { boxes: props.boxes
+      , nodeId: root.id
+      , linkId: parent.id
+      , linkNodeType: parent.node_type
+      , nodeType: root.node_type
+      , parentId: parent.id
+      , reload: props.reload
+      , session: props.session
+      , style: FolderUp
+      , text: root.name
+      }
+    ]
   makeParentFolder _ Nothing _ = []
 
   sortFolders :: TreeNode-> TreeNode -> Ordering
@@ -138,11 +139,10 @@ type FolderProps =
   , boxes         :: Boxes
   , parentId      :: Int
   , reload        :: T.Box T2.Reload
-  , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
   )
 
-folder :: R2.Component FolderProps
-folder = R.createElement folderCpt
+folder :: R2.Leaf FolderProps
+folder = R2.leaf folderCpt
 folderCpt :: R.Component FolderProps
 folderCpt = here.component "folderCpt" cpt where
   cpt props@{ boxes
@@ -153,57 +153,71 @@ folderCpt = here.component "folderCpt" cpt where
             , parentId
             , reload
             , session
-            , setPopoverRef
             , style
-            , text } _ = do
-    let sid = sessionId session
-    let rootId = treeId session
-    let dispatch a = performAction a { boxes, nodeId, parentId, reload, session, setPopoverRef }
-    popoverRef <- R.useRef null
+            , text
+            } _ = do
+    -- States
+    isBoxVisible <- T.useBox false
+
+    -- Hooks
     { goToRoute } <- useLinkHandler
 
-    R.useEffect' $ do
-      R.setRef setPopoverRef $ Just $ Popover.setOpen popoverRef
+    -- Computed
+    let sid = sessionId session
+    let rootId = treeId session
+    let dispatch a = performAction a { boxes, nodeId, parentId, reload, session, isBoxVisible }
 
+    -- Render
     pure $
-      H.div {}
-      [ H.span { style: { position: "absolute" } }
-        [ Popover.popover {
-            arrow: false
-          , open: false
-          , onClose: \_ -> pure unit
-          , onOpen:  \_ -> pure unit
-          , ref: popoverRef
-          }
-          [ popOverIcon
-          , mNodePopupView (Record.merge props { dispatch }) (onPopoverClose popoverRef)
-          ]
+
+      H.div
+      {}
+      [
+        B.iconButton
+        { name: "cog"
+        , callback: \_ -> T.write_ true isBoxVisible
+        , title:
+              "Each node of the Tree can perform some actions.\n"
+            <> "Click here to execute one of them."
+        , variant: Secondary
+        , elevation: Level0
+        , overlay: false
+        }
+      ,
+        H.button
+        { className: "btn btn-primary fv btn"
+        , on: { click: \_ -> goToRoute $ route linkId rootId linkNodeType sid }
+        }
+        [
+          H.i
+          { className: icon style nodeType }
+          []
+        ,
+          H.br {}
+        ,
+          H.text text
         ]
-        , H.button { className: "btn btn-primary fv btn"
-                   , on: { click: \_ -> goToRoute $ route linkId rootId linkNodeType sid }
-                   }
-          [ H.i {className: icon style nodeType} []
-          , H.br {}
-          , H.text text
-          ]
+      ,
+        -- // Modals //
+        B.baseModal
+        { isVisibleBox: isBoxVisible
+        , noBody: true
+        , noHeader: true
+        , modalClassName: "forest-tree-node-modal"
+        }
+        [
+          nodePopupView
+          { boxes: props.boxes
+          , dispatch: dispatch
+          , id: props.nodeId
+          , nodeType: props.nodeType
+          , name: props.text
+          , session: props.session
+          , closeCallback: \_ -> T.write_ false isBoxVisible
+          }
         ]
+      ]
 
-  onPopoverClose popoverRef _ = Popover.setOpen popoverRef false
-
-  popOverIcon = H.span { className: "fv action" }
-                [ H.a { className: "settings fa fa-cog"
-                      , title : "Each node of the Tree can perform some actions.\n"
-                        <> "Click here to execute one of them." } []
-                ]
-
-  mNodePopupView props opc = nodePopupView { boxes: props.boxes
-                                           , dispatch: props.dispatch
-                                           , id: props.nodeId
-                                           , onPopoverClose: opc
-                                           , nodeType: props.nodeType
-                                           , name: props.text
-                                           , session: props.session
-                                           }
   route :: Int -> Int -> NodeType -> SessionId -> AppRoute
   route lId rootId nType sid
     | rootId == lId    = Home
@@ -256,7 +270,7 @@ backButtonSmartMainCpt = here.component "backButtonSmartMain" cpt where
     handlers <- useLinkHandler
     let rootId = treeId session
 
-    pure $ 
+    pure $
       H.button {
         className: "btn btn-primary"
       , on: { click: action rootId node.parent_id handlers }
@@ -289,8 +303,8 @@ type PerformActionProps =
   , nodeId        :: Int
   , parentId      :: Int
   , reload        :: T.Box T2.Reload
-  , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
   , session       :: Session
+  , isBoxVisible  :: T.Box Boolean
   )
 
 performAction :: Action -> Record PerformActionProps -> Aff Unit
@@ -312,16 +326,30 @@ performAction = performAction' where
   performAction' (MergeNode {params}) p = mergeNode params p
   performAction' (LinkNode { nodeType, params }) p = linkNode nodeType params p
   performAction' NoAction _ = liftEffect $ here.log "[performAction] NoAction"
-  performAction' ClosePopover p = closePopover p
+  performAction' CloseBox p = closeBox p
   performAction' _ _ = liftEffect $ here.log "[performAction] unsupported action"
 
-  closePopover { setPopoverRef } =
-    liftEffect $ traverse_ (\set -> set false) (R.readRef setPopoverRef)
+  closeBox { isBoxVisible, nodeId } =
+    liftEffect $ do
+      T.write_ false isBoxVisible
+      -- @XXX ReactJS unreactive ref
+      --
+      -- /!\ extra care here:
+      --
+      --  - due to a ReactJS yet another flaw, we have to make an extra closing
+      --    modal method call here (bc. even if the `T.Box` change its value
+      --    no reactivity will be perfomed, for some unknown reason, and
+      --    the modal would so partially close)
+      --
+      --  - also make an extra assumption here, as the `querySelector` used for
+      --    modal close call should be the same as the selector qualifying the
+      --    created <base-modal>)
+      hideModal window $ "#" <> (show nodeId)
 
   refreshFolders p@{ boxes: { reloadForest }, reload } = do
     liftEffect $ T2.reload reload
     liftEffect $ T2.reload reloadForest
-    closePopover p
+    closeBox p
 
   deleteNode' nt p@{ nodeId: id, parentId: parent_id, session } = do
     case nt of

src/Gargantext/Components/FolderView/Box.purs

@@ -42,7 +42,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt where
         ]
       ]
 
-  closePopover props = props.onPopoverClose <<< R.unsafeEventTarget
+  closeBox props = props.onPopoverClose <<< R.unsafeEventTarget
 
   panelHeading props@{ nodeType } =
     H.div { className: "popup-container__header card-header" }
@@ -53,5 +53,5 @@ nodePopupViewCpt = here.component "nodePopupView" cpt where
       , H.div { className: "col-6" }
         [ H.span { className: "text-primary center" } [ H.text props.name ] ]
       , H.div { className: "col-1" }
-        [ H.a { type: "button", on: { click: closePopover props }, title: "Close"
+        [ H.a { type: "button", on: { click: closeBox props }, title: "Close"
               , className: glyphicon "window-close" } [] ]]]

src/Gargantext/Components/Forest/Tree.purs

@@ -7,7 +7,6 @@ import Data.Array as Array
 import Data.Maybe (Maybe(..), isJust)
 import Data.Traversable (intercalate, traverse, traverse_)
 import Data.Tuple.Nested ((/\))
-import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import Gargantext.AsyncTasks as GAT
@@ -31,13 +30,13 @@ import Gargantext.Components.Forest.Tree.Node.Tools.SubTree.Types (SubTreeOut(..
 import Gargantext.Config.REST (AffRESTError, logRESTError)
 import Gargantext.Config.Utils (handleRESTError)
 import Gargantext.Ends (Frontends)
-import Gargantext.Hooks.Loader (useLoader, useLoaderEffect)
+import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, get, mkNodeId)
 import Gargantext.Sessions.Types (useOpenNodesMemberBox, openNodesInsert, openNodesDelete)
-import Gargantext.Types (Handed, ID, isPublic, publicize, switchHanded)
+import Gargantext.Types (Handed, ID, isPublic, publicize)
 import Gargantext.Types as GT
-import Gargantext.Utils (nbsp, (?))
+import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import Reactix as R
@@ -99,11 +98,13 @@ type ChildLoaderProps =
   ( id     :: ID
   , render :: R2.Leaf TreeProps
   , root   :: ID
-  | NodeProps )
+  | NodeProps
+  )
 
 type PerformActionProps =
-  ( setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
-  | PACommon )
+  ( isBoxVisible :: T.Box Boolean
+  | PACommon
+  )
 
 -- | Loads and renders the tree starting at the given root node id.
 treeLoader :: R2.Leaf ( key :: String | LoaderProps )
@@ -163,9 +164,9 @@ treeCpt = here.component "tree" cpt where
         , session
         , tree: NTree (LNode { id, name, nodeType }) children } _ = do
 
-    setPopoverRef <- R.useRef Nothing
-    folderOpen <- useOpenNodesMemberBox nodeId forestOpen
-    folderOpen' <- T.useLive T.unequal folderOpen
+    isBoxVisible  <- T.useBox false
+    folderOpen    <- useOpenNodesMemberBox nodeId forestOpen
+    folderOpen'   <- T.useLive T.unequal folderOpen
 
     pure $
 
@@ -183,7 +184,7 @@ treeCpt = here.component "tree" cpt where
         [
           nodeSpan
           { boxes
-          , dispatch: dispatch setPopoverRef
+          , dispatch: dispatch' isBoxVisible
           , folderOpen
           , frontends
           , id
@@ -193,7 +194,7 @@ treeCpt = here.component "tree" cpt where
           , reload
           , root
           , session
-          , setPopoverRef
+          , isBoxVisible
           }
         <>
           R2.when (folderOpen')
@@ -213,9 +214,9 @@ treeCpt = here.component "tree" cpt where
       nodeId = mkNodeId session id
       children' = A.sortWith fTreeID pubChildren
       pubChildren = if isPublic nodeType then map (map pub) children else children
-      dispatch setPopoverRef a = performAction a (Record.merge common' spr) where
+      dispatch' isBoxVisible a = performAction a (Record.merge common' extra) where
         common' = RecordE.pick p :: Record PACommon
-        spr = { setPopoverRef }
+        extra = { isBoxVisible }
   pub (LNode n@{ nodeType: t }) = LNode (n { nodeType = publicize t })
 
 
@@ -295,10 +296,10 @@ childLoaderCpt = here.component "childLoader" cpt where
         extra = { root, tree: tree' }
         nodeProps = RecordE.pick p :: Record NodeProps
 
-closePopover { setPopoverRef } =
-   liftEffect $ traverse_ (\set -> set false) (R.readRef setPopoverRef)
+closeBox { isBoxVisible } =
+  liftEffect $ T.write_ false isBoxVisible
 
-refreshTree p@{ reloadTree } = liftEffect $ T2.reload reloadTree *> closePopover p
+refreshTree p@{ reloadTree } = liftEffect $ T2.reload reloadTree *> closeBox p
 
 deleteNode' nt p@{ boxes: { forestOpen }, session, tree: (NTree (LNode {id, parent_id}) _) } = do
   case nt of
@@ -407,6 +408,6 @@ performAction (MoveNode {params}) p                           = moveNode params
 performAction (MergeNode {params}) p                          = mergeNode params p
 performAction (LinkNode { nodeType, params }) p               = linkNode nodeType params p
 performAction RefreshTree p                                   = refreshTree p
-performAction ClosePopover p                                  = closePopover p
+performAction CloseBox p                                      = closeBox p
 performAction (DocumentsFromWriteNodes { id }) p              = documentsFromWriteNodes id p
 performAction NoAction _                                      = liftEffect $ here.log "[performAction] NoAction"

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

@@ -8,7 +8,6 @@ import Gargantext.Prelude
 import Data.Array.NonEmpty as NArray
 import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..), maybe)
-import Data.Nullable (null)
 import Data.String.Regex as Regex
 import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
@@ -18,7 +17,7 @@ import Effect.Class (liftEffect)
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), TooltipEffect(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), TooltipEffect(..), Variant(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (DroppedFile(..), fileTypeView)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload.Types (FileType(..), UploadFileBlob(..))
@@ -31,7 +30,6 @@ import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Config.REST (logRESTError)
 import Gargantext.Context.Progress (asyncContext, asyncProgress)
 import Gargantext.Ends (Frontends, url)
-import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Hooks.Version (Version, useVersion)
 import Gargantext.Routes as Routes
@@ -39,7 +37,6 @@ import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types (ID, Name)
 import Gargantext.Types as GT
 import Gargantext.Utils (nbsp, textEllipsisBreak, (?))
-import Gargantext.Utils.Popover as Popover
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import React.SyntheticEvent as SE
@@ -47,7 +44,6 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
 import Toestand as T
-import Unsafe.Coerce (unsafeCoerce)
 
 -- (?) never been able to properly declare PureScript Regex...
 foreign import nodeUserRegexp :: Regex.Regex
@@ -68,7 +64,7 @@ type NodeSpanProps =
   , reload        :: T2.ReloadS
   , root          :: ID
   , session       :: Session
-  , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
+  , isBoxVisible  :: T.Box Boolean
   )
 
 type IsLeaf = Boolean
@@ -92,7 +88,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
               , nodeType
               , reload
               , session
-              , setPopoverRef
+              , isBoxVisible
               } _ = do
     -- States
 
@@ -108,8 +104,6 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
       folderOpen' <- R2.useLive' folderOpen
 
-      isSettingsModalVisible <- T.useBox false
-
       -- tasks' <- T.read tasks
 
     -- Computed
@@ -198,18 +192,10 @@ nodeSpanCpt = here.component "nodeSpan" cpt
           --   Nothing -> pure unit
           -- T2.reload reloadRoot
 
-        onPopoverClose ::
-             Popover.PopoverRef
-          -> Effect Unit
-        onPopoverClose ref = Popover.setOpen ref false
-
         -- NOTE Don't toggle tree if it is not selected
         onNodeLinkClick :: Unit -> Effect Unit
         onNodeLinkClick _ = when (not isSelected) (T.write_ true folderOpen)
 
-        toggleSettingsModal :: Unit -> Effect Unit
-        toggleSettingsModal _ = T.modify_ (not) isSettingsModalVisible
-
     -- Hooks
 
       mVersion <- useVersion $ nodeType == GT.NodeUser ?
@@ -320,7 +306,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             B.iconButton
             { name: "cog"
             , className: "mainleaf__settings-icon"
-            , callback: toggleSettingsModal
+            , callback: \_ -> T.write_ true isBoxVisible
             , title:
                   "Each node of the Tree can perform some actions.\n"
                 <> "Click here to execute one of them."
@@ -346,7 +332,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
         -- // Modals //
 
           B.baseModal
-          { isVisibleBox: isSettingsModalVisible
+          { isVisibleBox: isBoxVisible
           , noBody: true
           , noHeader: true
           , modalClassName: "forest-tree-node-modal"
@@ -358,7 +344,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             , id
             , name
             , nodeType
-            , onPopoverClose: \_ -> toggleSettingsModal unit
+            , closeCallback: \_ -> T.write_ false isBoxVisible
             , session
             }
           ]

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

@@ -46,7 +46,7 @@ icon (UploadFile _ _ _ _ _ _)       = glyphiconNodeAction Upload
 icon (UploadArbitraryFile _ _ _ _ ) = glyphiconNodeAction Upload
 icon UploadFrameCalc                = glyphiconNodeAction Upload
 icon  RefreshTree                   = glyphiconNodeAction Refresh
-icon  ClosePopover                  = glyphiconNodeAction CloseNodePopover
+icon  CloseBox                      = glyphiconNodeAction CloseNodePopover
 icon  DownloadNode                  = glyphiconNodeAction Download
 icon (MoveNode _ )                  = glyphiconNodeAction (Move  { subTreeParams : SubTreeParams {showtypes:[], valitypes:[] }})
 icon (MergeNode _ )                 = glyphiconNodeAction (Merge { subTreeParams : SubTreeParams {showtypes:[], valitypes:[] }})
@@ -70,7 +70,7 @@ text (UploadFile _  _ _ _ _ _)      = "Upload File !"
 text (UploadArbitraryFile _ _  _ _) = "Upload arbitrary file !"
 text UploadFrameCalc                = "Upload frame calc"
 text  RefreshTree                   = "Refresh Tree !"
-text  ClosePopover                  = "Close Popover !"
+text  CloseBox                      = "Close Box !"
 text DownloadNode                   = "Download !"
 text (MoveNode  _ )                 = "Move !"
 text (MergeNode _ )                 = "Merge !"
@@ -78,4 +78,3 @@ text (LinkNode  _ )                 = "Link !"
 text (DocumentsFromWriteNodes _ )   = "Documents from Write Nodes !"
 text NoAction                       = "No Action"
 -----------------------------------------------------------------------
-

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

@@ -54,7 +54,7 @@ actionSearchCpt = here.component "actionSearch" cpt
           searchOn dispatch' task = do
             _ <- launchAff $ dispatch' (DoSearch task)
             -- close popup
-            _ <- launchAff $ dispatch' ClosePopover
+            _ <- launchAff $ dispatch' CloseBox
             -- TODO
             --snd p $ const Nothing
             pure unit

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

@@ -21,7 +21,7 @@ data Action = AddNode     String GT.NodeType
             | UploadFrameCalc
             | DownloadNode
             | RefreshTree
-            | ClosePopover
+            | CloseBox
 
             | ShareTeam   String
             | AddContact  AddContactParams
@@ -48,7 +48,7 @@ instance Eq Action where
   eq UploadFrameCalc UploadFrameCalc = true
   eq DownloadNode DownloadNode = true
   eq RefreshTree RefreshTree = true
-  eq ClosePopover ClosePopover = true
+  eq CloseBox CloseBox = true
   eq (ShareTeam s1) (ShareTeam s2) = eq s1 s2
   eq (AddContact ac1) (AddContact ac2) = eq ac1 ac2
   eq (SharePublic p1) (SharePublic p2) = eq p1 p2
@@ -72,7 +72,7 @@ instance Show Action where
   show (UploadArbitraryFile _ _ _ _) = "UploadArbitraryFile"
   show UploadFrameCalc               = "UploadFrameCalc"
   show  RefreshTree                  = "RefreshTree"
-  show  ClosePopover                 = "ClosePopover"
+  show  CloseBox                     = "CloseBox"
   show  DownloadNode                 = "Download"
   show (MoveNode  _ )                = "MoveNode"
   show (MergeNode _ )                = "MergeNode"

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

@@ -86,7 +86,7 @@ updateGraphCpt = here.component "updateGraph" cpt where
 
     let
       callback :: Action -> Aff Unit
-      callback = dispatch >=> \_ -> dispatch ClosePopover
+      callback = dispatch >=> \_ -> dispatch CloseBox
 
     pure $ panel [ H.text "Show subjects with Order1 or concepts with Order2 ?"
                  , formChoiceSafe { items: [Order1, Order2]
@@ -153,7 +153,7 @@ updatePhyloCpt = here.component "updatePhylo" cpt where
           opts <- pure $ options r'
           launchAff_ do
             dispatch opts
-            dispatch ClosePopover
+            dispatch CloseBox
 
         where
           options :: Phylo.UpdateData -> Action

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

@@ -265,7 +265,7 @@ uploadButtonCpt = here.component "uploadButton" cpt
               T.write_ Plain fileFormat
               T.write_ EN lang
               T.write_ false onPendingBox
-            dispatch ClosePopover
+            dispatch CloseBox
 
 uploadListView :: R2.Leaf Props
 uploadListView = R2.leafComponent uploadListViewCpt

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -39,8 +39,9 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Box"
 
 type CommonProps =
-  ( dispatch :: Action -> Aff Unit
-  , session :: Session )
+  ( dispatch  :: Action -> Aff Unit
+  , session   :: Session
+  )
 
 nodePopupView :: R2.Leaf NodePopupProps
 nodePopupView = R2.leafComponent nodePopupCpt
@@ -71,7 +72,6 @@ nodePopupCpt = here.component "nodePopupView" cpt where
         ]
       ]
 
-  closePopover p = p.onPopoverClose <<< R.unsafeEventTarget
   panelHeading renameIsOpen open p@{ dispatch, id, name, nodeType } =
     H.div { className: "popup-container__header card-header" }
     [ R2.row
@@ -86,7 +86,7 @@ nodePopupCpt = here.component "nodePopupView" cpt where
         ]
       , H.div { className: "col-1" } [ editIcon renameIsOpen open ]
       , H.div { className: "col-1" }
-        [ H.a { type: "button", on: { click: closePopover p }, title: "Close"
+        [ H.a { type: "button", on: { click: \_ -> p.closeCallback unit }, title: "Close"
               , className: glyphicon "window-close" } [] ]]]
   editIcon _ true = H.div {} []
   editIcon isOpen false =

src/Gargantext/Components/Forest/Tree/Node/Box/Types.purs

 module Gargantext.Components.Forest.Tree.Node.Box.Types where
 
-import DOM.Simple as DOM
 import Data.Maybe (Maybe)
 import Effect (Effect)
 import Effect.Aff (Aff)
@@ -18,11 +17,11 @@ type CommonProps =
   )
 
 type NodePopupProps =
-  ( boxes :: Boxes
-  , id             :: ID
-  , name           :: Name
-  , nodeType       :: GT.NodeType
-  , onPopoverClose :: DOM.Element -> Effect Unit
+  ( boxes           :: Boxes
+  , id              :: ID
+  , name            :: Name
+  , nodeType        :: GT.NodeType
+  , closeCallback   :: Unit -> Effect Unit
   | CommonProps
   )