hide stuff from ui

also rearrange top bar menu
also add format-ps (npm run format-ps)

package.json

@@ -21,6 +21,7 @@
     "test": "spago test",
     "dev": "concurrently \"npm run watch\" \"npm run serve\" ",
     "serve": "npx parcel serve --dist-dir ./dist/dev/bundle ./dist/dev/index.html",
+    "format-ps": "purs-tidy format-in-place src",
     "prepare": "husky"
   },
   "dependencies": {

src/Gargantext/Components/TopBar.purs

 module Gargantext.Components.TopBar (component) where
 
+import Gargantext.Prelude
+
+import Affjax.RequestBody (document)
 import Data.Foldable (intercalate)
+import Data.Maybe (Maybe(..), isJust, fromMaybe)
+import Data.Tuple.Nested ((/\))
 import Effect (Effect)
+import Effect.Console (log)
 import Gargantext.Components.App.Store as AppStore
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.Themes (themeSwitcher, allThemes)
-import Gargantext.Prelude
+import Gargantext.Components.Themes as Themes
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
+import Gargantext.Hooks.UseFeatureFlag as Feature
+import Gargantext.Sessions.Types (update)
 import Gargantext.Types (Handed(..), defaultCacheParams)
 import Gargantext.Utils (setter, (?))
 import Gargantext.Utils.Reactix as R2
+import Reactix (Hooks)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
+import Web.HTML (window)
+import Web.HTML.Location (host, protocol)
+import Web.HTML.Window as Window
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.TopBar"
@@ -31,9 +44,15 @@ componentCpt = here.component "main" cpt
     } <- AppStore.use
 
     showTree' <- R2.useLive' showTree
+    (windowLocation /\ updateWindowLocation) <- R.useState' Nothing
 
     -- | Effects
     -- |
+    useFirstEffect' $ do
+      l <- window >>= Window.location >>= host
+      protocol <- window >>= Window.location >>= protocol
+      let url = protocol <> "//" <> l
+      updateWindowLocation (\_prev -> Just url)
 
     -- | Behaviors
     -- |
@@ -53,80 +72,21 @@ componentCpt = here.component "main" cpt
         , role: "navigation"
         }
         [ logo
-        , divDropdownLeft {} []
-        , H.li
-            { title: "If you are Left Handed you can change\n"
-                <> "the interface by clicking on me. Click\n"
-                <> "again to come back to previous state."
-            , className: "nav-item main-topbar__hand-button"
+        , viewSideBar showTree' onTreeToggleClick
+        , viewChangeLayoutSide
+        , viewInfoMenu { location: windowLocation } []
+        , Feature.feature
+            { keys: [ "expert" ]
+            , render: \shouldRender ->
+                if shouldRender then viewQuestionMark else empty
             }
-            [ handedChooser
-                {}
-            ]
-        , H.li
-            { title: "Hello! Looking for the tree?\n"
-                <> "Just watch on the other side!\n"
-                <> "Click on the hand again to see it back."
-            , className: "nav-item main-topbar__help-button"
+
+        , Feature.feature
+            { keys: [ "expert" ]
+            , render: \shouldRender ->
+                if shouldRender then viewThemeSelector theme else empty
             }
-            [ H.a
-                { className: "nav-link navbar-text" }
-                [ H.span
-                    { className: "fa fa-question-circle-o" }
-                    []
-                ]
-            ]
-        , H.li { className: "nav-item" }
-            [ B.button
-                { variant: showTree'
-                    ? ButtonVariant Light
-                    $
-                      OutlinedButtonVariant Light
-                , callback: onTreeToggleClick
-                , className: "main-topbar__tree-switcher rounded-circle-2"
-                , title:
-                    if showTree' then "Hide Tree"
-                    else "Show Tree"
-                }
-                [ B.icon
-                    { name: "sidebar"
-                    , className: ""
-                    }
-                -- , 
-                --   if showTree'
-                --   then H.text $ nbsp 1 <> "Hide Tree"
-                --   else H.text $ nbsp 1 <> "Show Tree"
-                ]
-
-            ]
-        , H.li
-            { className: "nav-item main-topbar__theme-switcher" }
-            [ themeSwitcher
-                { theme
-                , themes: allThemes
-                }
-                []
-            ]
-
-        {-      ,
-        H.li { className: "nav-item main-topbar__lang-switcher" }
-          [ langSwitcher
-            { lang
-            , langs: allFeLangs
-            } []
-          ]-}
-        {-        , B.button
-        { variant: showTree' ?
-            ButtonVariant Light $
-            OutlinedButtonVariant Light
-        , callback: onTreeToggleClick
-        , className: "main-topbar__tree-switcher"
-        }
-        [
-          if showTree'
-          then H.text "Hide Tree"
-          else H.text "Show Tree"
-        ]-}
+
         , H.div
             { id: "portal-topbar"
             , className: "ml-1 w-100 h-100"
@@ -134,6 +94,71 @@ componentCpt = here.component "main" cpt
             []
         ]
 
+viewChangeLayoutSide :: R.Element
+viewChangeLayoutSide =
+  H.li
+    { title: "If you are Left Handed you can change\n"
+        <> "the interface by clicking on me. Click\n"
+        <> "again to come back to previous state."
+    , className: "nav-item main-topbar__hand-button"
+    }
+    [ handedChooser
+        {}
+    ]
+
+viewSideBar :: Boolean -> (Unit -> Effect Unit) -> R.Element
+viewSideBar showTree' onTreeToggleClick =
+  H.li { className: "nav-item" }
+
+    [ B.button
+        { variant: showTree'
+            ? ButtonVariant Light
+            $
+              OutlinedButtonVariant Light
+        , callback: onTreeToggleClick
+        , className: "main-topbar__tree-switcher rounded-circle-2"
+        , title:
+            if showTree' then "Hide Tree"
+            else "Show Tree"
+        }
+        [ B.icon
+            { name: "sidebar"
+            , className: ""
+            }
+        ]
+    ]
+
+viewThemeSelector :: T.Box Themes.Theme -> R.Element
+viewThemeSelector theme =
+  H.li
+    { className: "nav-item main-topbar__theme-switcher" }
+    [ themeSwitcher
+        { theme
+        , themes: allThemes
+        }
+        []
+    ]
+
+empty :: R.Element
+empty =
+  H.text ""
+
+viewQuestionMark :: R.Element
+viewQuestionMark =
+  H.li
+    { title: "Hello! Looking for the tree?\n"
+        <> "Just watch on the other side!\n"
+        <> "Click on the hand again to see it back."
+    , className: "nav-item main-topbar__help-button"
+    }
+    [ H.a
+        { className: "nav-link navbar-text" }
+        [ H.span
+            { className: "fa fa-question-circle-o" }
+            []
+        ]
+    ]
+
 -- SB.searchBar {session, databases: allDatabases}
 
 onTreeToggleChange :: Boolean -> Effect Unit
@@ -154,28 +179,28 @@ logo =
   src = "images/logoSmall.png"
   title = "Back to home"
 
-divDropdownLeft :: R2.Component ()
-divDropdownLeft = R.createElement divDropdownLeftCpt
+viewInfoMenu :: R2.Component (location :: Maybe String)
+viewInfoMenu = R.createElement viewInfoMenu'
 
-divDropdownLeftCpt :: R.Component ()
-divDropdownLeftCpt = here.component "divDropdownLeft" cpt
+viewInfoMenu' :: R.Component (location :: Maybe String)
+viewInfoMenu' = here.component "divDropdownLeft" cpt
   where
-  cpt {} _ = do
+  cpt { location } _ = do
     show <- T.useBox false
 
     pure $ H.li { className: "nav-item dropdown" }
       [ menuButton { element: menuElement, show } []
-      , menuElements { elements, show } []
+      , menuElements { elements: elements location, show } []
       ]
 
   menuElement = LiNav
     { title: "GarganText"
     , href: "#"
-    , icon: "fa fa-navicon"
-    , text: "GarganText"
+    , icon: "fa fa-question-circle-o"
+    , text: "infos"
     }
 
-  elements =
+  elements location =
     [ [ LiNav
           { title: "User documentation"
           , href: "https://write.frame.gargantext.org/s/649a6d7e1db3b365d6d0b1430d9700cc0bb4fdb1348dd1040a94c95f98979abe"
@@ -228,7 +253,13 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
       -}
       , LiNav
           { title: "API documentation"
-          , href: "https://cnrs.gargantext.org/swagger-ui"
+          , href: case location of
+              Just l ->
+                l <> "/swagger-ui"
+
+              Nothing ->
+                "https://cnrs.gargantext.org/swagger-ui"
+
           , icon: "fa fa-code-fork"
           , text: "API documentation"
           }