UCM Error indicator

src/Ucm/App.elm

@@ -5,7 +5,8 @@ import Html
 import Lib.HttpApi as HttpApi exposing (HttpResult)
 import Lib.Util as Util
 import Ucm.Api as Api
-import Ucm.AppContext as AppContext exposing (AppContext)
+import Ucm.AppContext exposing (AppContext)
+import Ucm.UcmConnectivity exposing (UcmConnectivity(..))
 import Ucm.WelcomeScreen as WelcomeScreen exposing (OutMsg(..))
 import Ucm.Workspace.WorkspaceContext exposing (WorkspaceContext)
 import Ucm.WorkspaceScreen as WorkspaceScreen
@@ -117,12 +118,12 @@ update msg model =
                 appContext_ =
                     case res of
                         Ok _ ->
-                            { appContext | ucmConnected = AppContext.Connected }
+                            { appContext | ucmConnectivity = Connected }
 
                         Err e ->
-                            { appContext | ucmConnected = AppContext.NotConnected e }
+                            { appContext | ucmConnectivity = NotConnected e }
             in
-            ( { model | appContext = appContext_ }, Util.delayMsg 2000 CheckUCMConnectivity )
+            ( { model | appContext = appContext_ }, Util.delayMsg 5000 CheckUCMConnectivity )
 
         _ ->
             ( model, Cmd.none )
@@ -169,10 +170,10 @@ view model =
     case model.screen of
         WelcomeScreen m ->
             m
-                |> WelcomeScreen.view
+                |> WelcomeScreen.view model.appContext
                 |> mapDocument WelcomeScreenMsg
 
         WorkspaceScreen m ->
             m
-                |> WorkspaceScreen.view
+                |> WorkspaceScreen.view model.appContext
                 |> mapDocument WorkspaceScreenMsg

src/Ucm/AppContext.elm

@@ -2,24 +2,19 @@ module Ucm.AppContext exposing (..)
 
 import Code.Config
 import Code.Perspective as Perspective
-import Http
 import Json.Decode exposing (Value)
 import Lib.HttpApi as HttpApi exposing (HttpApi)
 import Lib.OperatingSystem as OS exposing (OperatingSystem)
 import Ucm.Api as Api
+import Ucm.UcmConnectivity exposing (UcmConnectivity(..))
 import Ucm.Workspace.WorkspaceContext exposing (WorkspaceContext)
 
 
-type UCMConnectivity
-    = Connected
-    | NotConnected Http.Error
-
-
 type alias AppContext =
     { operatingSystem : OperatingSystem
     , basePath : String
     , api : HttpApi
-    , ucmConnected : UCMConnectivity
+    , ucmConnectivity : UcmConnectivity
     }
 
 
@@ -36,7 +31,7 @@ init flags =
     { operatingSystem = OS.fromString flags.operatingSystem
     , basePath = flags.basePath
     , api = HttpApi.httpApi False flags.apiUrl Nothing
-    , ucmConnected = Connected
+    , ucmConnectivity = Connected
     }
 
 

src/Ucm/UcmConnectivity.elm

@@ -0,0 +1,54 @@
+module Ucm.UcmConnectivity exposing (..)
+
+import Html exposing (Html, div, h3, p, text)
+import Html.Attributes exposing (class)
+import Http
+import UI
+import UI.Icon as Icon
+import UI.Tooltip as Tooltip
+
+
+type UcmConnectivity
+    = Connected
+    | NotConnected Http.Error
+
+
+view : UcmConnectivity -> Html msg
+view ucmConnectivity =
+    case ucmConnectivity of
+        Connected ->
+            UI.nothing
+
+        NotConnected err ->
+            let
+                ( errorTitle, errorMessage ) =
+                    case err of
+                        Http.Timeout ->
+                            ( "UCM Timeout", "The connection to UCM timed out" )
+
+                        Http.NetworkError ->
+                            ( "UCM Network error"
+                            , "There was a network error when trying to connect to UCM. Make sure its running."
+                            )
+
+                        Http.BadStatus status ->
+                            ( "Unexpected response from UCM", "Bad status: " ++ String.fromInt status )
+
+                        Http.BadBody resp ->
+                            ( "Unexpected response from UCM: ", resp )
+
+                        Http.BadUrl url ->
+                            ( "Malformed URL ", url )
+
+                tooltipContent =
+                    Tooltip.rich (div [] [ h3 [] [ text errorTitle ], p [] [ text errorMessage ] ])
+
+                icon =
+                    div
+                        [ class "ucm-connectivity ucm-connectivity_error" ]
+                        [ Icon.view Icon.warn ]
+            in
+            Tooltip.tooltip tooltipContent
+                |> Tooltip.withPosition Tooltip.Above
+                |> Tooltip.withArrow Tooltip.End
+                |> Tooltip.view icon

src/Ucm/WelcomeScreen.elm

@@ -141,8 +141,8 @@ isMatch s (ProjectName handle slug) =
     String.startsWith (removeAt s) handle_ || String.startsWith s slug_
 
 
-view : Model -> Browser.Document Msg
-view model =
+view : AppContext -> Model -> Browser.Document Msg
+view _ model =
     let
         viewProjectOption p =
             Click.onClick (SelectProject p BranchRef.main_)

src/Ucm/WorkspaceScreen.elm

@@ -5,7 +5,8 @@ import Code.BranchRef as BranchRef
 import Code.CodebaseTree as CodebaseTree
 import Code.Config
 import Html exposing (Html, div)
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, title)
+import Lib.Util as Util
 import RemoteData exposing (RemoteData(..))
 import UI.AnchoredOverlay as AnchoredOverlay
 import UI.Button as Button
@@ -18,6 +19,7 @@ import Ucm.AppContext as AppContext exposing (AppContext)
 import Ucm.CommandPalette as CommandPalette
 import Ucm.SwitchBranch as SwitchBranch
 import Ucm.SwitchProject as SwitchProject
+import Ucm.UcmConnectivity as UcmConnectivity exposing (UcmConnectivity)
 import Ucm.Workspace.WorkspaceContext as WorkspaceContext exposing (WorkspaceContext)
 import Ucm.Workspace.WorkspacePane as WorkspacePane
 import Window
@@ -405,8 +407,8 @@ viewLeftSidebar codebaseTree =
     ]
 
 
-view : Model -> Browser.Document Msg
-view model =
+view : AppContext -> Model -> Browser.Document Msg
+view appContext model =
     let
         window =
             Window.window "workspace-screen"
@@ -428,7 +430,7 @@ view model =
             ]
 
         footerRight =
-            []
+            [ UcmConnectivity.view appContext.ucmConnectivity ]
 
         window__ =
             case model.modal of

src/css/ucm/ucm-connectivity.css

@@ -0,0 +1,28 @@
+.ucm-connectivity {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.25rem;
+}
+
+.ucm-connectivity_error {
+  background: var(--u-color_critical_element);
+
+  & .icon {
+    color: var(--u-color_critical_icon-on-element);
+    margin-top: -4px;
+  }
+}
+
+.tooltip-trigger:has(.ucm-connectivity) .tooltip-bubble {
+  margin-right: -1.75rem;
+  margin-bottom: -0.65rem;
+}
+
+.tooltip-trigger:has(.ucm-connectivity) .tooltip-bubble p {
+  margin: 0;
+}

src/main.css

@@ -6,4 +6,5 @@
 @import "./css/ucm/welcome-screen.css";
 @import "./css/ucm/workspace-screen.css";
 @import "./css/ucm/command-palette-modal.css";
+@import "./css/ucm/ucm-connectivity.css";