[CSS] add labels to input form

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

@@ -99,44 +99,46 @@ addNodeViewCpt = here.component "addNodeView" cpt
         T.write_ nt nodeType
       maybeChoose =
         if length nodeTypes > 1 then
-          [ Tools.formChoice
-              { items: nodeTypes
-              , box: nodeType
-              , callback: \nt -> T.write_ (GT.prettyNodeType nt) nodeName
-              , print: print hasChromeAgent'
-              }
-              []
-          ]
+          Tools.formChoice
+            { items: nodeTypes
+            , box: nodeType
+            , callback: \nt -> T.write_ (GT.prettyNodeType nt) nodeName
+            , print: print hasChromeAgent'
+            , label: Just "Node type:"
+            }
+            []
         else
-          [ H.div {}
-              [ H.text $ "Creating a node of type "
-                  <> show defaultNodeType
-                  <> " with name:"
-              ]
-          ]
+          H.div {}
+            [ H.text $ "Creating a node of type "
+                <> show defaultNodeType
+                <> " with name:"
+            ]
       maybeEdit =
         if edit then
-          [ inputWithEnterWithKey
-              { autoFocus: true
-              , className: "form-control"
-              , defaultValue: nodeName' -- (prettyNodeType nt')
-              , key: show nodeType'
-              , onBlur: \val -> T.write_ val nodeName
-              , onEnter: \_ -> launchAff_ $ dispatch action
-              , onValueChanged: \val -> T.write_ val nodeName
-              , placeholder: nodeName' -- (prettyNodeType nt')
-              , required: false
-              , type: "text"
-              }
-          ]
-        else []
+          inputWithEnterWithKey
+            { autoFocus: true
+            , className: "form-control"
+            , defaultValue: nodeName' -- (prettyNodeType nt')
+            , key: show nodeType'
+            , onBlur: \val -> T.write_ val nodeName
+            , onEnter: \_ -> launchAff_ $ dispatch action
+            , onValueChanged: \val -> T.write_ val nodeName
+            , placeholder: nodeName' -- (prettyNodeType nt')
+            , required: false
+            , type: "text"
+            }
+        else H.div {} []
 
     pure $ Tools.panelWithSubmitButton
       { action
       , dispatch
       , mError: Nothing
       }
-      (maybeChoose <> maybeEdit)
+      [ R2.row
+          [ R2.col 6 [ maybeChoose ]
+          , R2.col 6 [ maybeEdit ]
+          ]
+      ]
 
 -- END Create Node
 

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

@@ -78,6 +78,7 @@ updateDashboardCpt = here.component "updateDashboard" cpt
             , box: methodBoard
             , callback: const $ pure unit
             , print: show
+            , label: Just "Method:"
             }
             []
         ]
@@ -134,6 +135,7 @@ updateGraphCpt = here.component "updateGraph" cpt
             , box: methodGraphMetric
             , callback: const $ pure unit
             , print: show
+            , label: Just "Method:"
             }
             []
         ]
@@ -291,6 +293,7 @@ updateCorpusCpt = here.component "updateTexts" cpt
                 , box: methodList
                 , callback: const $ pure unit
                 , print: show
+                , label: Just "Method:"
                 }
                 []
             ]
@@ -319,6 +322,7 @@ updateNodeListCpt = here.component "updateNodeList" cpt
             , box: methodList
             , callback: const $ pure unit
             , print: show
+            , label: Just "Method:"
             }
             []
         ]

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

@@ -175,6 +175,7 @@ uploadFileViewWithLangsCpt = here.component "uploadFileViewWithLangs" cpt
                     , box: fileType
                     , callback: const $ T.write_ false isPristine
                     , print: show
+                    , label: Just "File type:"
                     }
                     []
                 , Tools.formChoiceSafe
@@ -185,25 +186,22 @@ uploadFileViewWithLangsCpt = here.component "uploadFileViewWithLangs" cpt
                     , box: fileFormat
                     , callback: const $ T.write_ false isPristine
                     , print: show
+                    , label: Just "File format:"
                     }
                     []
                 ]
-            ]
-        , R2.row
-            [ H.div { className: "col-6 flex-space-around" }
+            , H.div { className: "col-6 flex-space-around" }
                 [ Tools.formChoiceSafe
                     { items: langs <> [ No_extraction ]
                     , box: lang
                     , callback: const $ T.write_ false isPristine
                     , print: show
+                    , label: Just "Language:"
                     }
                     []
+                , ListSelection.selection { selection, session } []
                 ]
             ]
-        , R2.row
-            [ H.div { className: "col-6 flex-space-around" }
-                [ ListSelection.selection { selection, session } [] ]
-            ]
         ]
 
     let

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

@@ -252,10 +252,10 @@ inviteInputBoxCpt = here.component "textInputBox" cpt
 
 type FormChoiceSafeProps item m =
   ( items :: Array item
-  -- , default :: item
   , box :: T.Box item
   , callback :: item -> Effect m
   , print :: item -> String
+  , label :: Maybe String
   )
 
 -- | Form Choice input
@@ -274,18 +274,18 @@ formChoiceSafeCpt
   => R.Component (FormChoiceSafeProps item m)
 formChoiceSafeCpt = here.component "formChoiceSafe" cpt
   where
-  cpt { items, box, callback, print } _ = do
+  cpt { items, box, callback, print, label } _ = do
     pure $ case items of
       [] -> H.div {} []
       [ n ] -> formButton { item: n, callback, print } []
-      _ -> formChoice { items, box, callback, print } []
+      _ -> formChoice { items, box, callback, print, label } []
 
 type FormChoiceProps item m =
   ( items :: Array item
-  -- , default :: item
   , box :: T.Box item
   , callback :: item -> Effect m
   , print :: item -> String
+  , label :: Maybe String
   )
 
 -- | List Form
@@ -303,11 +303,17 @@ formChoiceCpt
   => R.Component (FormChoiceProps item m)
 formChoiceCpt = here.component "formChoice" cpt
   where
-  cpt { items, callback, box, print } _ = do
+  cpt { items, callback, box, print, label } _ = do
     value' <- T.useLive T.unequal box
 
+    let
+      labelCpt = case label of
+        Nothing -> H.div {} []
+        Just l -> H.label {} [ H.text l ]
+
     pure $ H.div { className: "form-group" }
-      [ R2.select
+      [ labelCpt
+      , R2.select
           { className: "form-control with-icon-font"
           , value: show value'
           , on: { change }

src/Gargantext/Components/ListSelection.purs

@@ -32,8 +32,9 @@ selectionCpt = here.component "selection" cpt
   where
   cpt { selection, session } _ = do
     selection' <- R2.useLive' selection
-    pure $ H.div { className: "list-selection p-1" }
-      [ B.formSelect'
+    pure $ H.div { className: "list-selection form-group" }
+      [ H.label {} [ H.text "List selection:" ]
+      , B.formSelect'
           { callback: flip T.write_ selection
           , value: selection'
           , list: