Merge pull request #29 from unisonweb/improve-noconnection-states

Improve startup connection error

Author: hojberg

elm-git.json

@@ -1,7 +1,7 @@
 {
     "git-dependencies": {
         "direct": {
-            "https://github.com/unisonweb/ui-core": "913ad29285b9656dd43c05708d79dd826684e85a"
+            "https://github.com/unisonweb/ui-core": "9cb49aa3c4180730d27e94586fc641bbcb8aa5e5"
         },
         "indirect": {}
     }

src/Ucm/App.elm

@@ -8,6 +8,7 @@ import Lib.Util as Util
 import UI.Button as Button
 import UI.Icon as Icon
 import UI.StatusBanner as StatusBanner
+import UI.StatusIndicator as StatusIndicator
 import Ucm.Api as Api
 import Ucm.AppContext exposing (AppContext)
 import Ucm.UcmConnectivity exposing (UcmConnectivity(..))
@@ -265,15 +266,15 @@ view model =
             { title = "UCM Desktop | Couldn't connect to the UCM CLI"
             , body =
                 [ div []
-                    [ div [ class "app-error" ]
-                        [ h2 [] [ text "Couldn't connect to the UCM CLI" ]
+                    [ div [ class "app-message" ]
+                        [ h2 [] [ StatusIndicator.view StatusIndicator.working, text "Waiting on the UCM CLI" ]
                         , p []
                             [ text "Please make sure UCM is running on the right port like so: "
                             , br [] []
                             , code [] [ text apiUrl ]
                             ]
-                        , Button.iconThenLabel ReCheckUCMConnectivity Icon.refresh "Try again"
-                            |> Button.emphasized
+                        , Button.iconThenLabel ReCheckUCMConnectivity Icon.plug "Connect to the UCM CLI"
+                            |> Button.large
                             |> Button.view
                         ]
                     ]

src/Ucm/Workspace/WorkspacePane.elm

@@ -69,6 +69,7 @@ type Msg
     = NoOp
     | Focus
     | FetchDefinitionItemFinished Reference (HttpResult DefinitionItem)
+    | Refetch WorkspaceItemRef
     | CloseWorkspaceItem WorkspaceItemRef
     | ChangeDefinitionItemTab WorkspaceItemRef WorkspaceItem.DefinitionItemTab
     | OpenDependency Reference
@@ -89,6 +90,24 @@ update config msg model =
         Focus ->
             ( model, Cmd.none, RequestFocus )
 
+        Refetch ref ->
+            let
+                ( model_, cmd ) =
+                    case ref of
+                        SearchResultsItemRef _ ->
+                            ( model, Cmd.none )
+
+                        DefinitionItemRef dRef ->
+                            let
+                                nextWorkspaceItems =
+                                    WorkspaceItems.replace model.workspaceItems ref (WorkspaceItem.Loading ref)
+                            in
+                            ( { model | workspaceItems = nextWorkspaceItems }
+                            , HttpApi.perform config.api (fetchDefinition config dRef)
+                            )
+            in
+            ( model_, cmd, NoOut )
+
         FetchDefinitionItemFinished dRef (Ok defItem) ->
             let
                 workspaceItemRef =
@@ -588,10 +607,20 @@ viewItem definitionSummaryTooltip item isFocused =
                 WorkspaceItem.Failure wsRef e ->
                     cardBase
                         |> WorkspaceCard.withTitle ("Failed to load definition: " ++ WorkspaceItemRef.toHumanString wsRef)
+                        |> WorkspaceCard.withTitlebarRight
+                            [ Button.icon (CloseWorkspaceItem wsRef) Icon.x
+                                |> Button.subdued
+                                |> Button.small
+                                |> Button.view
+                            ]
                         |> WorkspaceCard.withContent
-                            [ span [ class "error" ]
-                                [ span [ class "error_icon" ] [ Icon.view Icon.warn ]
-                                , text (Util.httpErrorToString e)
+                            [ div [ class "workspace-card_error" ]
+                                [ span [ class "error" ]
+                                    [ span [ class "error_icon" ] [ Icon.view Icon.warn ]
+                                    , text (Util.httpErrorToString e)
+                                    ]
+                                , Button.iconThenLabel (Refetch wsRef) Icon.refresh "Try again"
+                                    |> Button.view
                                 ]
                             ]
     in

src/css/app-message.css

@@ -0,0 +1,34 @@
+.app-message {
+  margin: 6rem auto;
+  width: 40rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 1rem;
+  text-align: center;
+  color: var(--u-color_info_text-on-element_subdued);
+  font-size: 1.25rem;
+  border-radius: var(--border-radius-base);
+  padding: 2rem;
+}
+
+.app-message h2 {
+  color: var(--u-color_critical_text-on-element);
+  font-size: 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.app-message p {
+  margin-bottom: 0;
+}
+
+.app-message code {
+  margin-top: 0.25rem;
+  color: var(--u-color_text_subdued);
+  font-weight: bold;
+}

src/css/ucm/workspace/workspace-card.css

@@ -64,6 +64,12 @@
     width: 100%;
   }
 
+  & .workspace-card_error {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
   & .workspace-card_loading {
     display: flex;
     flex-direction: column;

src/main.css

@@ -1,6 +1,7 @@
 @import "./css/unison-dark.css";
 @import "./css/unison-light.css";
 @import "./css/app-error.css";
+@import "./css/app-message.css";
 @import "./css/window.css";
 @import "./css/ucm/search-project-sheet.css";
 @import "./css/ucm/search-branch-sheet.css";