Merge remote-tracking branch 'origin/262-dev-phylo-doc-search-ux-improvements' into dev

src/Gargantext/Components/PhyloExplorer/Sidebar/DocList.purs

@@ -12,7 +12,7 @@ import Data.Sequence as Seq
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
 import Gargantext.Components.FacetsTable (DocumentsView(..), Rows(..), publicationDate, initialPageGQL, loadPageGQL)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
 import Gargantext.Components.PhyloExplorer.Types (CorpusId, DocId, FrameDoc(..), ListId)
@@ -190,6 +190,8 @@ docListCpt = here.component "main" cpt where
         Docs { docs } -> T.write_ (Just docs) rows
         _             -> T.write_ (Just Seq.empty) rows
 
+    let statusOrAndButtons = if A.length q' >= 2 then Enabled else Disabled
+
     -- | Computed
     -- |
     let
@@ -246,7 +248,7 @@ docListCpt = here.component "main" cpt where
             H.div {}
             [
               H.ul { className: "flex-row list-group justify-content-space-between align-items-center mb-1" } 
-              [ H.li {} [ andOrButton { state: buttonState } ]
+              [ H.li {} [ andOrButton { state: buttonState, buttonStatus: statusOrAndButtons } ]
               , H.li {} [ H.p { className: "text-bold" } [ H.text "No related documents" ] ]
               , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch q' goToURLInNewTab} ]
               , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch q' goToURLInNewTab} ]
@@ -262,7 +264,7 @@ docListCpt = here.component "main" cpt where
           H.div {}
           [
             H.ul { className: "flex-row list-group justify-content-space-between align-items-center mb-1" } 
-              [ H.li {} [ andOrButton { state: buttonState } ]
+              [ H.li {} [ andOrButton { state: buttonState, buttonStatus: statusOrAndButtons } ]
               , H.li {} [ H.p { className: "text-bold" } [ H.text $ show (Seq.length results) <> " related documents" ] ]
               , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch q' goToURLInNewTab} ]
               , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch q' goToURLInNewTab} ]
@@ -382,6 +384,7 @@ itemCpt = here.component "item" cpt where
 
 type AndOrButtonProps =
   ( state :: T.Box Boolean
+  , buttonStatus  :: ComponentStatus
   )
 
 andOrButton :: R2.Leaf AndOrButtonProps
@@ -389,7 +392,7 @@ andOrButton = R2.leaf andOrButtonCpt
 andOrButtonCpt :: R.Component AndOrButtonProps
 andOrButtonCpt = here.component "andOrButton" cpt
   where
-    cpt { state } _ = do
+    cpt { state, buttonStatus } _ = do
       state' <- R2.useLive' state
 
       pure $
@@ -403,6 +406,7 @@ andOrButtonCpt = here.component "andOrButton" cpt
         [
           B.button
           { className: "btn-sm"
+          , status: buttonStatus
           , callback: \_ -> T.write_ false state
           , variant: state' ?
               OutlinedButtonVariant Secondary $
@@ -412,6 +416,7 @@ andOrButtonCpt = here.component "andOrButton" cpt
         ,
           B.button
           { className: "btn-sm"
+          , status: buttonStatus
           , callback: \_ -> T.write_ true state
           , variant: state' ?
               ButtonVariant Secondary $