Add keyboard shortcuts to modals

elm.json

@@ -39,6 +39,7 @@
             "jinjor/elm-diff": "1.0.6",
             "justinmimbs/time-extra": "1.2.0",
             "kuon/elm-string-normalize": "1.0.6",
+            "leojpod/elm-keyboard-shortcut": "1.0.1",
             "myrho/elm-round": "1.0.5",
             "noahzgordon/elm-color-extra": "1.0.2",
             "pablohirafuji/elm-syntax-highlight": "3.6.0",

engine-wizard/elm/Wizard/Common/Components/Questionnaire.elm

@@ -2063,6 +2063,8 @@ viewActionResultModal appState model =
     Modal.simple
         { modalContent = modalContent
         , visible = Maybe.isJust model.questionnaireActionResult
+        , enterMsg = Just CloseActionResult
+        , escMsg = Just CloseActionResult
         , dataCy = "questionnaire-action-result"
         }
 
@@ -2185,6 +2187,8 @@ viewPhaseModal appState model =
                 [ div [] (List.indexedMap viewPhase phases)
                 ]
             ]
+        , enterMsg = Nothing
+        , escMsg = Just (PhaseModalUpdate False Nothing)
         , visible = model.phaseModalOpen
         , dataCy = "phase-selection"
         }

engine-wizard/elm/Wizard/Common/Components/Questionnaire/FileUploadModal.elm

@@ -245,9 +245,18 @@ view appState isKmEditor model =
                 ]
             ]
 
+        ( enterMsg, escMsg ) =
+            if ActionResult.isLoading model.submitting then
+                ( Nothing, Nothing )
+
+            else
+                ( Just Save, Just Close )
+
         modalConfig =
             { modalContent = modalContent
             , visible = model.isOpen
+            , enterMsg = enterMsg
+            , escMsg = escMsg
             , dataCy = "file-upload"
             }
     in

engine-wizard/elm/Wizard/Common/Menu/View.elm

@@ -1,6 +1,6 @@
 module Wizard.Common.Menu.View exposing (view, viewAboutModal, viewLanguagesModal, viewReportIssueModal)
 
-import ActionResult exposing (ActionResult(..))
+import ActionResult exposing (ActionResult)
 import Dict
 import Gettext exposing (gettext)
 import Html exposing (Html, a, button, code, div, em, h5, img, li, p, span, table, tbody, td, text, th, thead, tr, ul)
@@ -785,8 +785,8 @@ viewReportIssueModal appState isOpen =
             Modal.confirmConfig (gettext "Report Issue" appState.locale)
                 |> Modal.confirmConfigContent modalContent
                 |> Modal.confirmConfigVisible isOpen
-                |> Modal.confirmConfigActionResult Unset
                 |> Modal.confirmConfigAction (gettext "OK" appState.locale) (Wizard.Msgs.MenuMsg <| SetReportIssueOpen False)
+                |> Modal.confirmConfigCancelShortcutMsg (Wizard.Msgs.MenuMsg <| SetReportIssueOpen False)
                 |> Modal.confirmConfigDataCy "report-issue"
     in
     Modal.confirm appState modalConfig
@@ -842,6 +842,8 @@ viewAboutModal appState isOpen recentlyCopied serverBuildInfoActionResult =
         modalConfig =
             { modalContent = modalContent
             , visible = isOpen
+            , enterMsg = Just (Wizard.Msgs.MenuMsg (SetAboutOpen False))
+            , escMsg = Just (Wizard.Msgs.MenuMsg (SetAboutOpen False))
             , dataCy = "about"
             }
     in
@@ -955,5 +957,7 @@ viewLanguagesModal appState visible =
     Modal.simple
         { modalContent = content
         , visible = visible
+        , enterMsg = Nothing
+        , escMsg = Just (Wizard.Msgs.MenuMsg (Wizard.Common.Menu.Msgs.SetLanguagesOpen False))
         , dataCy = "languages"
         }

engine-wizard/elm/Wizard/Common/View/Modal.elm

@@ -7,6 +7,7 @@ module Wizard.Common.View.Modal exposing
     , confirmConfigAction
     , confirmConfigActionResult
     , confirmConfigCancelMsg
+    , confirmConfigCancelShortcutMsg
     , confirmConfigContent
     , confirmConfigDangerous
     , confirmConfigDataCy
@@ -25,7 +26,9 @@ import Html exposing (Attribute, Html, button, div, h5, pre, text)
 import Html.Attributes exposing (class, classList, disabled)
 import Html.Events exposing (onClick)
 import Html.Extra as Html
+import Maybe.Extra as Maybe
 import Shared.Html exposing (emptyNode)
+import Shortcut
 import Wizard.Common.AppState exposing (AppState)
 import Wizard.Common.GuideLinks exposing (GuideLinks)
 import Wizard.Common.Html exposing (guideLink)
@@ -37,6 +40,8 @@ import Wizard.Common.View.FormResult as FormResult
 type alias SimpleConfig msg =
     { modalContent : List (Html msg)
     , visible : Bool
+    , enterMsg : Maybe msg
+    , escMsg : Maybe msg
     , dataCy : String
     }
 
@@ -48,7 +53,19 @@ simple =
 
 simpleWithAttrs : List (Attribute msg) -> SimpleConfig msg -> Html msg
 simpleWithAttrs attributes cfg =
-    div ([ class "modal modal-cover", classList [ ( "visible", cfg.visible ) ] ] ++ attributes)
+    let
+        shortcuts =
+            if cfg.visible then
+                Maybe.values
+                    [ Maybe.map (Shortcut.simpleShortcut Shortcut.Enter) cfg.enterMsg
+                    , Maybe.map (Shortcut.simpleShortcut Shortcut.Escape) cfg.escMsg
+                    ]
+
+            else
+                []
+    in
+    Shortcut.shortcutElement shortcuts
+        ([ class "modal modal-cover", classList [ ( "visible", cfg.visible ) ] ] ++ attributes)
         [ div [ class "modal-dialog" ]
             [ div [ class "modal-content", dataCy ("modal_" ++ cfg.dataCy) ]
                 cfg.modalContent
@@ -67,6 +84,7 @@ type alias ConfirmConfigData msg =
     , actionResult : ActionResult String
     , action : Maybe ( String, msg )
     , cancelMsg : Maybe msg
+    , cancelShortcutMsg : Maybe msg
     , dangerous : Bool
     , extraClass : Maybe String
     , guideLink : Maybe (GuideLinks -> String)
@@ -83,6 +101,7 @@ confirmConfig title =
         , actionResult = ActionResult.Unset
         , action = Nothing
         , cancelMsg = Nothing
+        , cancelShortcutMsg = Nothing
         , dangerous = False
         , extraClass = Nothing
         , guideLink = Nothing
@@ -120,6 +139,11 @@ confirmConfigMbCancelMsg cancelMsg (ConfirmConfig data) =
     ConfirmConfig { data | cancelMsg = cancelMsg }
 
 
+confirmConfigCancelShortcutMsg : msg -> ConfirmConfig msg -> ConfirmConfig msg
+confirmConfigCancelShortcutMsg cancelShortcutMsg (ConfirmConfig data) =
+    ConfirmConfig { data | cancelShortcutMsg = Just cancelShortcutMsg }
+
+
 confirmConfigDangerous : Bool -> ConfirmConfig msg -> ConfirmConfig msg
 confirmConfigDangerous dangerous (ConfirmConfig data) =
     ConfirmConfig { data | dangerous = dangerous }
@@ -146,32 +170,61 @@ confirm appState (ConfirmConfig data) =
         content =
             FormResult.view appState data.actionResult :: data.modalContent
 
-        actionButton =
+        actionsDisabled =
+            not data.visible || ActionResult.isLoading data.actionResult
+
+        wrapShortcut shortcut =
+            if actionsDisabled then
+                Nothing
+
+            else
+                Just shortcut
+
+        ( actionButton, actionShortcut ) =
             case data.action of
                 Just ( actionName, actionMsg ) ->
-                    ActionButton.buttonWithAttrs appState <|
-                        ActionButton.ButtonWithAttrsConfig actionName data.actionResult actionMsg data.dangerous [ dataCy "modal_action-button" ]
+                    let
+                        btn =
+                            ActionButton.buttonWithAttrs appState <|
+                                ActionButton.ButtonWithAttrsConfig actionName data.actionResult actionMsg data.dangerous [ dataCy "modal_action-button" ]
+
+                        shortcut =
+                            wrapShortcut (Shortcut.simpleShortcut Shortcut.Enter actionMsg)
+                    in
+                    ( btn, shortcut )
 
                 Nothing ->
-                    emptyNode
+                    ( emptyNode, Nothing )
 
-        cancelButton =
+        ( cancelButton, cancelShortcut ) =
             case data.cancelMsg of
                 Just cancelMsg ->
                     let
-                        cancelDisabled =
-                            ActionResult.isLoading data.actionResult
+                        btn =
+                            button
+                                [ onClick cancelMsg
+                                , disabled actionsDisabled
+                                , class "btn btn-secondary"
+                                , dataCy "modal_cancel-button"
+                                ]
+                                [ text (gettext "Cancel" appState.locale) ]
+
+                        shortcut =
+                            wrapShortcut (Shortcut.simpleShortcut Shortcut.Escape cancelMsg)
                     in
-                    button
-                        [ onClick cancelMsg
-                        , disabled cancelDisabled
-                        , class "btn btn-secondary"
-                        , dataCy "modal_cancel-button"
-                        ]
-                        [ text (gettext "Cancel" appState.locale) ]
+                    ( btn, shortcut )
 
                 Nothing ->
-                    emptyNode
+                    case data.cancelShortcutMsg of
+                        Just cancelShortcutMsg ->
+                            let
+                                shortcut =
+                                    wrapShortcut (Shortcut.simpleShortcut Shortcut.Escape cancelShortcutMsg)
+                            in
+                            ( emptyNode, shortcut )
+
+                        Nothing ->
+                            ( emptyNode, Nothing )
 
         mbGuideLink =
             case data.guideLink of
@@ -180,8 +233,12 @@ confirm appState (ConfirmConfig data) =
 
                 Nothing ->
                     Html.nothing
+
+        shortcuts =
+            Maybe.values [ actionShortcut, cancelShortcut ]
     in
-    div [ class "modal modal-cover", class (Maybe.withDefault "" data.extraClass), classList [ ( "visible", data.visible ) ] ]
+    Shortcut.shortcutElement shortcuts
+        [ class "modal modal-cover", class (Maybe.withDefault "" data.extraClass), classList [ ( "visible", data.visible ) ] ]
         [ div [ class "modal-dialog" ]
             [ div [ class "modal-content", dataCy ("modal_" ++ Maybe.withDefault "confirm" data.dataCy) ]
                 [ div [ class "modal-header" ]
@@ -227,6 +284,8 @@ error appState cfg =
         modalConfig =
             { modalContent = modalContent
             , visible = cfg.visible
+            , enterMsg = Just cfg.actionMsg
+            , escMsg = Just cfg.actionMsg
             , dataCy = cfg.dataCy
             }
     in

engine-wizard/elm/Wizard/DocumentTemplateEditors/Editor/Components/FileEditor.elm

@@ -1501,6 +1501,8 @@ viewAddFolderModal appState model =
     Modal.simple
         { modalContent = modalContent
         , visible = model.addFolderModalOpen
+        , enterMsg = Just AddFolderModalSubmit
+        , escMsg = Just (SetAddFolderModalOpen False)
         , dataCy = "add-file-modal"
         }
 

engine-wizard/elm/Wizard/DocumentTemplateEditors/Editor/Components/FileEditor/AssetUploadModal.elm

@@ -286,9 +286,18 @@ view appState model =
                 ]
             ]
 
+        ( enterMsg, escMsg ) =
+            if ActionResult.isLoading actionResult then
+                ( Nothing, Nothing )
+
+            else
+                ( Just Upload, Just (SetOpen False) )
+
         modalConfig =
             { modalContent = content
             , visible = model.open
+            , enterMsg = enterMsg
+            , escMsg = escMsg
             , dataCy = "logo-upload"
             }
     in

engine-wizard/elm/Wizard/Documents/Index/View.elm

@@ -471,9 +471,18 @@ submitModal appState model =
                 ]
             ]
 
+        ( enterMsg, escMsg ) =
+            if ActionResult.isLoading model.submittingDocument then
+                ( Nothing, Nothing )
+
+            else
+                ( Just SubmitDocument, Just (ShowHideSubmitDocument Nothing) )
+
         modalConfig =
             { modalContent = content
             , visible = visible
+            , enterMsg = enterMsg
+            , escMsg = escMsg
             , dataCy = "document-submit"
             }
     in