[form] add labels to action dialog forms

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

@@ -100,37 +100,35 @@ addNodeViewCpt = here.component "addNodeView" cpt
         T.write_ nt nodeType
       maybeChoose =
         if length nodeTypes > 1 then
-          [ Tools.formChoice
-              { items: nodeTypes
-              , default: nodeType'
-              , callback: setNodeType'
-              , print: print hasChromeAgent'
-              }
-              []
-          ]
+          Tools.formChoice
+            { items: nodeTypes
+            , default: nodeType'
+            , callback: setNodeType'
+            , print: print hasChromeAgent'
+            , label: "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
@@ -140,8 +138,16 @@ addNodeViewCpt = here.component "addNodeView" cpt
         , iconName: "plus"
         , textTitle: "Add a child node element"
         }
-        [ H.div { className: "pt-2" }
-            (maybeChoose <> maybeEdit)
+        [ R2.row
+            [ R2.col 6
+                [ H.div { className: "form-group" } [ maybeChoose ] ]
+            , R2.col 6
+                [ H.div { className: "form-group" }
+                    [ H.label {} [ H.text "Name:" ]
+                    , maybeEdit
+                    ]
+                ]
+            ]
         ]
 
 -- END Create Node

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

@@ -75,12 +75,12 @@ updateDashboardCpt = here.component "updateDashboard" cpt
         , iconName: ""
         , textTitle: "Update the dashboard"
         }
-        [ -- H.text "Update with"
-          Tools.formChoiceSafe
+        [ Tools.formChoiceSafe
             { items: [ All, Sources, Authors, Institutes, Ngrams ]
             , default: methodBoard'
             , callback: \val -> T.write_ val methodBoard
             , print: show
+            , label: "Update with:"
             }
             []
         ]
@@ -133,12 +133,12 @@ updateGraphCpt = here.component "updateGraph" cpt
         , iconName: "reload-with-settings"
         , textTitle: "Update the graph"
         }
-        [ H.text "Show subjects with Order1 or concepts with Order2 ?"
-        , Tools.formChoiceSafe
+        [ Tools.formChoiceSafe
             { items: [ Order1, Order2 ]
             , default: methodGraphMetric'
             , callback: \val -> T.write_ val methodGraphMetric
             , print: show
+            , label: "Show subjects with Order1 or concepts with Order2 ?"
             }
             []
         ]
@@ -296,12 +296,12 @@ updateCorpusCpt = here.component "updateTexts" cpt
             ]
         -- H.p {} [ H.text "Update both term and document indexing." ]
         , H.p {}
-            [ H.text "Term update mode"
-            , Tools.formChoiceSafe
+            [ Tools.formChoiceSafe
                 { items: [ Basic, Advanced, WithModel ]
                 , default: methodList'
                 , callback: \val -> T.write_ val methodList
                 , print: show
+                , label: "Term update mode"
                 }
                 []
             ]
@@ -326,12 +326,12 @@ updateNodeListCpt = here.component "updateNodeList" cpt
         , iconName: "reload-with-settings"
         , textTitle: "Update terms"
         }
-        [ -- H.text "Update with"
-          Tools.formChoiceSafe
+        [ Tools.formChoiceSafe
             { items: [ Basic, Advanced, WithModel ]
             , default: methodList'
             , callback: \val -> T.write_ val methodList
             , print: show
+            , label: "Update with:"
             }
             []
         ]

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

@@ -258,7 +258,7 @@ uploadFileViewWithLangsCpt = here.component "uploadFileViewWithLangs" cpt
       selects =
         if processed' then
           [ R2.row
-              [ H.div { className: "col-12 flex-space-around" }
+              [ H.div { className: "col-12 form-group]" }
                   [ B.formSelect'
                       { list:
                           [ TSV
@@ -286,16 +286,20 @@ uploadFileViewWithLangsCpt = here.component "uploadFileViewWithLangs" cpt
           , H.div { className: "alert alert-info", role: "alert" }
               [ H.text infoText' ]
           , R2.row
-              [ H.div { className: "col-12 flex-space-around" }
-                  [ H.text "Please choose the language of your documents:"
-                  , Tools.formChoiceSafe
+              [ H.div { className: "col-12" }
+                  [ Tools.formChoiceSafe
                       { items: langs <> [ No_extraction ]
                       , default: EN
                       , callback: setLang'
                       , print: show
+                      , label: "Please choose the language of your documents:"
                       }
                       []
-                  , H.text "Please choose the list of terms to use:"
+                  ]
+              ]
+          , R2.row
+              [ H.div { className: "col-12 form-group" }
+                  [ H.label {} [ H.text "Please choose the list of terms to use:" ]
                   , ListSelection.selection { selection, session } []
                   ]
               ]

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

@@ -263,6 +263,7 @@ type FormChoiceSafeProps item m =
   , default :: item
   , callback :: item -> Effect m
   , print :: item -> String
+  , label :: String
   )
 
 -- | Form Choice input
@@ -276,17 +277,18 @@ formChoiceSafe = R.createElement formChoiceSafeCpt
 formChoiceSafeCpt :: forall item m. Show item => R.Component (FormChoiceSafeProps item m)
 formChoiceSafeCpt = here.component "formChoiceSafe" cpt
   where
-  cpt { items, default, callback, print } _ = do
+  cpt { items, default, callback, print, label } _ = do
     pure $ case items of
       [] -> H.div {} []
       [ n ] -> formButton { item: n, callback, print } []
-      _ -> formChoice { items, default, callback, print } []
+      _ -> formChoice { items, default, callback, print, label } []
 
 type FormChoiceProps item m =
   ( items :: Array item
   , default :: item
   , callback :: item -> Effect m
   , print :: item -> String
+  , label :: String
   )
 
 -- | List Form
@@ -299,9 +301,10 @@ formChoice = R.createElement formChoiceCpt
 formChoiceCpt :: forall item m. Show item => R.Component (FormChoiceProps item m)
 formChoiceCpt = here.component "formChoice" cpt
   where
-  cpt { items, callback, default, print } _ = do
+  cpt { items, callback, default, print, label } _ = do
     pure $ H.div { className: "form-group" }
-      [ R2.select
+      [ H.label {} [ H.text label ]
+      , R2.select
           { className: "form-control with-icon-font"
           , defaultValue: show default
           , on: { change }

src/Gargantext/Components/ListSelection.purs

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