refactor: move util and nav to inner layouts to give them Msg control

go-vela · Feb 13, 2024 · ede6b95 · ede6b95
1 parent af6fe39
commit ede6b95
Show file tree

Hide file tree

Showing 25 changed files with 1,314 additions and 1,171 deletions.
diff --git a/src/elm/Components/Nav.elm b/src/elm/Components/Nav.elm
@@ -3,12 +3,13 @@ SPDX-License-Identifier: Apache-2.0
 --}
 
 
-module Components.Nav exposing (view)
+module Components.Nav exposing (restartBuildButton, view)
 
 import Html
     exposing
         ( Html
         , button
+        , div
         , nav
         , text
         )
@@ -40,12 +41,12 @@ type alias Props msg =
 -- VIEW
 
 
-view : Shared.Model -> Route () -> Props msg -> Html msg
+view : Shared.Model -> Route params -> Props msg -> Html msg
 view shared route props =
     nav [ class "navigation", attribute "aria-label" "Navigation" ]
-        (props.crumbs
-            :: props.buttons
-        )
+        [ props.crumbs
+        , div [ class "buttons" ] props.buttons
+        ]
 
 
 

diff --git a/src/elm/Layouts.elm b/src/elm/Layouts.elm
@@ -12,7 +12,7 @@ import Layouts.Default.Repo
 
 
 type Layout msg
-    = Default (Layouts.Default.Props msg)
+    = Default Layouts.Default.Props
     | Default_Org (Layouts.Default.Org.Props msg)
     | Default_Repo (Layouts.Default.Repo.Props msg)
     | Default_Build (Layouts.Default.Build.Props msg)
@@ -22,7 +22,7 @@ map : (msg1 -> msg2) -> Layout msg1 -> Layout msg2
 map fn layout =
     case layout of
         Default data ->
-            Default <| Layouts.Default.map fn data
+            Default data
 
         Default_Org data ->
             Default_Org <| Layouts.Default.Org.map fn data

diff --git a/src/elm/Layouts/Default.elm b/src/elm/Layouts/Default.elm
@@ -3,56 +3,34 @@ SPDX-License-Identifier: Apache-2.0
 --}
 
 
-module Layouts.Default exposing (Model, Msg, Props, layout, map)
+module Layouts.Default exposing (Model, Msg, Props, layout)
 
 import Api.Endpoint exposing (Endpoint(..))
 import Auth.Session exposing (Session(..))
 import Components.Alerts exposing (Alert)
-import Components.Crumbs
-import Components.Favorites
 import Components.Footer
 import Components.Header
 import Components.Help
-import Components.Nav
-import Components.Util
 import Effect exposing (Effect)
 import Html exposing (..)
-import Html.Attributes exposing (class)
 import Interop
 import Json.Decode
 import Layout exposing (Layout)
-import Maybe.Extra
-import RemoteData exposing (WebData)
 import Route exposing (Route)
 import Shared
 import Toasty as Alerting
 import Utils.Favicons as Favicons
-import Utils.Favorites as Favorites
 import Utils.Helpers as Util
 import Utils.Theme as Theme
 import View exposing (View)
 
 
-type alias Props contentMsg =
-    { navButtons : List (Html contentMsg)
-    , utilButtons : List (Html contentMsg)
-    , helpCommands : List Components.Help.Command
-    , crumbs : List Components.Crumbs.Crumb
-    , repo : Maybe ( String, String )
+type alias Props =
+    { helpCommands : List Components.Help.Command
     }
 
 
-map : (msg1 -> msg2) -> Props msg1 -> Props msg2
-map fn props =
-    { navButtons = List.map (Html.map fn) props.navButtons
-    , utilButtons = List.map (Html.map fn) props.utilButtons
-    , helpCommands = props.helpCommands
-    , crumbs = props.crumbs
-    , repo = props.repo
-    }
-
-
-layout : Props contentMsg -> Shared.Model -> Route () -> Layout () Model Msg contentMsg
+layout : Props -> Shared.Model -> Route () -> Layout () Model Msg contentMsg
 layout props shared route =
     Layout.new
         { init = init shared
@@ -90,8 +68,6 @@ type Msg
       -- HEADER
     | ShowHideIdentity (Maybe Bool)
     | ShowHideHelp (Maybe Bool)
-      -- FAVORITES
-    | ToggleFavorite String (Maybe String)
       -- THEME
     | SetTheme Theme.Theme
       -- ALERTS
@@ -107,15 +83,6 @@ update msg model =
             , Effect.none
             )
 
-        ToggleFavorite org maybeRepo ->
-            ( model
-            , Effect.updateFavorites
-                { org = org
-                , maybeRepo = maybeRepo
-                , updateType = Favorites.Toggle
-                }
-            )
-
         -- HEADER
         ShowHideIdentity show ->
             ( { model
@@ -184,7 +151,7 @@ decodeOnThemeChange inTheme =
 -- VIEW
 
 
-view : Props contentMsg -> Shared.Model -> Route () -> { toContentMsg : Msg -> contentMsg, content : View contentMsg, model : Model } -> View contentMsg
+view : Props -> Shared.Model -> Route () -> { toContentMsg : Msg -> contentMsg, content : View contentMsg, model : Model } -> View contentMsg
 view props shared route { toContentMsg, model, content } =
     { title =
         if String.isEmpty content.title then
@@ -198,8 +165,6 @@ view props shared route { toContentMsg, model, content } =
             { from = Route.toString route
             , theme = shared.theme
             , setTheme = SetTheme
-
-            -- todo: use props for this
             , helpProps =
                 { show = model.showHelp
                 , showHide = ShowHideHelp
@@ -210,25 +175,7 @@ view props shared route { toContentMsg, model, content } =
             , showHideIdentity = ShowHideIdentity
             }
             |> Html.map toContentMsg
-        , Components.Nav.view shared
-            route
-            { buttons =
-                props.navButtons
-                    ++ [ props.repo
-                            |> Maybe.Extra.unwrap (text "")
-                                (\( org, repo ) ->
-                                    Components.Favorites.viewStarToggle
-                                        { msg = ToggleFavorite
-                                        , org = org
-                                        , repo = repo
-                                        , user = shared.user
-                                        }
-                                        |> Html.map toContentMsg
-                                )
-                       ]
-            , crumbs = Components.Crumbs.view route.path props.crumbs
-            }
-        , main_ [ class "content-wrap" ] (Components.Util.view shared route props.utilButtons :: content.body)
+        , span [] content.body
         , Components.Footer.view
             { toasties = shared.toasties
             , copyAlertMsg = AddAlertCopiedToClipboard

diff --git a/src/elm/Layouts/Default/Build.elm b/src/elm/Layouts/Default/Build.elm
@@ -7,13 +7,15 @@ module Layouts.Default.Build exposing (Model, Msg, Props, layout, map)
 
 import Components.Build
 import Components.Crumbs
-import Components.Favorites
 import Components.Help
+import Components.Nav
 import Components.RecentBuilds
 import Components.Tabs
+import Components.Util
 import Dict exposing (Dict)
 import Effect exposing (Effect)
-import Html exposing (Html)
+import Html exposing (Html, main_, text)
+import Html.Attributes exposing (class)
 import Http
 import Http.Detailed
 import Layout exposing (Layout)
@@ -56,7 +58,7 @@ map fn props =
     }
 
 
-layout : Props contentMsg -> Shared.Model -> Route () -> Layout (Layouts.Default.Props contentMsg) Model Msg contentMsg
+layout : Props contentMsg -> Shared.Model -> Route () -> Layout Layouts.Default.Props Model Msg contentMsg
 layout props shared route =
     Layout.new
         { init = init props shared route
@@ -66,11 +68,7 @@ layout props shared route =
         }
         |> Layout.withOnUrlChanged OnUrlChanged
         |> Layout.withParentProps
-            { navButtons = props.navButtons
-            , utilButtons = []
-            , helpCommands = props.helpCommands
-            , crumbs = props.crumbs
-            , repo = Just ( props.org, props.repo )
+            { helpCommands = props.helpCommands
             }
 
 
@@ -214,25 +212,38 @@ view : Props contentMsg -> Shared.Model -> Route () -> { toContentMsg : Msg -> c
 view props shared route { toContentMsg, model, content } =
     { title = props.org ++ "/" ++ props.repo ++ " #" ++ props.buildNumber ++ " " ++ content.title
     , body =
-        [ Components.RecentBuilds.view shared
-            { builds = shared.builds
-            , build = model.build
-            , num = 10
-            , toPath = props.toBuildPath
-            }
-        , Components.Build.view shared
-            { build = model.build
-            , showFullTimestamps = False
-            , actionsMenu = Html.div [] []
-            , showActionsMenuBool = True
-            }
-        , Components.Tabs.viewBuildTabs shared
-            { org = props.org
-            , repo = props.repo
-            , buildNumber = props.buildNumber
-            , currentPath = route.path
-            , tabHistory = model.tabHistory
+        [ Components.Nav.view shared
+            route
+            { buttons =
+                [ Html.button [ class "button", class "-outline" ] [ text "restart build" ]
+                , Html.button [ class "button", class "-outline" ] [ text "cancel build" ]
+                ]
+                    ++ props.navButtons
+            , crumbs = Components.Crumbs.view route.path props.crumbs
             }
+        , main_ [ class "content-wrap" ]
+            ([ Components.Util.view shared route props.utilButtons
+             , Components.RecentBuilds.view shared
+                { builds = shared.builds
+                , build = model.build
+                , num = 10
+                , toPath = props.toBuildPath
+                }
+             , Components.Build.view shared
+                { build = model.build
+                , showFullTimestamps = False
+                , actionsMenu = Html.div [] []
+                , showActionsMenuBool = True
+                }
+             , Components.Tabs.viewBuildTabs shared
+                { org = props.org
+                , repo = props.repo
+                , buildNumber = props.buildNumber
+                , currentPath = route.path
+                , tabHistory = model.tabHistory
+                }
+             ]
+                ++ content.body
+            )
         ]
-            ++ content.body
     }
diff --git a/src/elm/Layouts/Default/Org.elm b/src/elm/Layouts/Default/Org.elm
@@ -7,11 +7,13 @@ module Layouts.Default.Org exposing (Model, Msg, Props, layout, map)
 
 import Components.Crumbs
 import Components.Help
+import Components.Nav
 import Components.Tabs
 import Components.Util
 import Dict exposing (Dict)
 import Effect exposing (Effect)
-import Html exposing (..)
+import Html exposing (Html, main_)
+import Html.Attributes exposing (class)
 import Layout exposing (Layout)
 import Layouts.Default
 import Route exposing (Route)
@@ -40,7 +42,7 @@ map fn props =
     }
 
 
-layout : Props contentMsg -> Shared.Model -> Route () -> Layout (Layouts.Default.Props contentMsg) Model Msg contentMsg
+layout : Props contentMsg -> Shared.Model -> Route () -> Layout Layouts.Default.Props Model Msg contentMsg
 layout props shared route =
     Layout.new
         { init = init shared route
@@ -50,11 +52,7 @@ layout props shared route =
         }
         |> Layout.withOnUrlChanged OnUrlChanged
         |> Layout.withParentProps
-            { navButtons = props.navButtons
-            , utilButtons = []
-            , helpCommands = props.helpCommands
-            , crumbs = props.crumbs
-            , repo = Nothing
+            { helpCommands = props.helpCommands
             }
 
 
@@ -85,6 +83,7 @@ type Msg
 update : Shared.Model -> Route () -> Msg -> Model -> ( Model, Effect Msg )
 update shared route msg model =
     case msg of
+        -- BROWSER
         OnUrlChanged options ->
             ( { model
                 | tabHistory =
@@ -107,15 +106,24 @@ view : Props contentMsg -> Shared.Model -> Route () -> { toContentMsg : Msg -> c
 view props shared route { toContentMsg, model, content } =
     { title = props.org ++ " " ++ content.title
     , body =
-        Components.Util.view shared
+        [ Components.Nav.view shared
             route
-            (Components.Tabs.viewOrgTabs
+            { buttons = props.navButtons
+            , crumbs = Components.Crumbs.view route.path props.crumbs
+            }
+        , main_ [ class "content-wrap" ]
+            (Components.Util.view
                 shared
-                { org = props.org
-                , currentPath = route.path
-                , tabHistory = model.tabHistory
-                }
-                :: props.utilButtons
+                route
+                (Components.Tabs.viewOrgTabs
+                    shared
+                    { org = props.org
+                    , currentPath = route.path
+                    , tabHistory = model.tabHistory
+                    }
+                    :: props.utilButtons
+                )
+                :: content.body
             )
-            :: content.body
+        ]
     }