Textarea with auto resize in UI (#1893)

* textarea with auto resize

Signed-off-by: mizukoshi-m <mizukoshi@mfeed.ad.jp>

* implement resize textarea on type

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

* remove scrollHeight

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

* Add new function for textarea field

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

* remove unnecessary code

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

ui/app/src/Utils/Views.elm

@@ -12,6 +12,7 @@ module Utils.Views exposing
     , tab
     , textField
     , validatedField
+    , validatedTextareaField
     )
 
 import Html exposing (..)
@@ -131,6 +132,56 @@ validatedField htmlField labelText classes inputMsg blurMsg field =
                 ]
 
 
+validatedTextareaField : String -> String -> (String -> msg) -> msg -> ValidatedField -> Html msg
+validatedTextareaField labelText classes inputMsg blurMsg field =
+    let
+        lineCount =
+            String.lines field.value
+                |> List.length
+                |> clamp 3 15
+    in
+    case field.validationState of
+        Valid ->
+            div [ class <| "d-flex flex-column form-group has-success " ++ classes ]
+                [ label [] [ strong [] [ text labelText ] ]
+                , textarea
+                    [ value field.value
+                    , onInput inputMsg
+                    , onBlur blurMsg
+                    , class "form-control form-control-success"
+                    , rows lineCount
+                    ]
+                    []
+                ]
+
+        Initial ->
+            div [ class <| "d-flex flex-column form-group " ++ classes ]
+                [ label [] [ strong [] [ text labelText ] ]
+                , textarea
+                    [ value field.value
+                    , onInput inputMsg
+                    , onBlur blurMsg
+                    , class "form-control"
+                    , rows lineCount
+                    ]
+                    []
+                ]
+
+        Invalid error_ ->
+            div [ class <| "d-flex flex-column form-group has-danger " ++ classes ]
+                [ label [] [ strong [] [ text labelText ] ]
+                , textarea
+                    [ value field.value
+                    , onInput inputMsg
+                    , onBlur blurMsg
+                    , class "form-control form-control-danger"
+                    , rows lineCount
+                    ]
+                    []
+                , div [ class "form-control-feedback" ] [ text error_ ]
+                ]
+
+
 formField : String -> String -> String -> (String -> msg) -> Html msg
 formField labelText content classes msg =
     div [ class <| "d-flex flex-column " ++ classes ]

ui/app/src/Views/SilenceForm/Views.elm

@@ -7,7 +7,7 @@ import Html.Events exposing (onClick)
 import Utils.Filter
 import Utils.FormValidation exposing (ValidatedField, ValidationState(..))
 import Utils.Types exposing (ApiData)
-import Utils.Views exposing (checkbox, iconButtonMsg, loading, validatedField)
+import Utils.Views exposing (checkbox, iconButtonMsg, loading, validatedField, validatedTextareaField)
 import Views.Shared.SilencePreview
 import Views.Shared.Types exposing (Msg)
 import Views.SilenceForm.Types exposing (MatcherForm, Model, SilenceForm, SilenceFormFieldMsg(..), SilenceFormMsg(..))
@@ -34,7 +34,7 @@ view maybeId matchers defaultCreator { form, silenceId, alerts, activeAlertId }
             (UpdateCreatedBy >> UpdateField)
             (ValidateCreatedBy |> UpdateField)
             form.createdBy
-        , validatedField textarea
+        , validatedTextareaField
             "Comment"
             inputSectionPadding
             (UpdateComment >> UpdateField)