enhance: wrap deployments in Table component (#676)

Co-authored-by: David May <[email protected]>

src/elm/Main.elm

@@ -2709,7 +2709,7 @@ viewContent model =
         Pages.RepositoryDeployments org repo maybePage _ ->
             ( String.join "/" [ org, repo ] ++ " deployments" ++ Util.pageToString maybePage
             , div []
-                [ lazy3 Pages.Deployments.View.viewDeployments model.repo.deployments org repo
+                [ lazy3 Pages.Deployments.View.viewDeployments model.repo org repo
                 , Pager.view model.repo.deployments.pager Pager.defaultLabels GotoPage
                 ]
             )

src/elm/Pages/Deployments/View.elm

@@ -6,10 +6,10 @@ Use of this source code is governed by the LICENSE file in this repository.
 
 module Pages.Deployments.View exposing (addDeployment, viewDeployments)
 
-import Errors exposing (viewResourceError)
 import FeatherIcons
-import Html exposing (Html, a, div, h2, strong, text)
-import Html.Attributes exposing (class)
+import Html exposing (Html, a, div, h2, span, td, text, tr)
+import Html.Attributes exposing (attribute, class, href, scope)
+import Http
 import Pages.Deployments.Form exposing (viewDeployEnabled, viewHelp, viewParameterInput, viewSubmitButtons, viewValueInput)
 import Pages.Deployments.Model
     exposing
@@ -20,9 +20,10 @@ import Pages.Deployments.Model
 import RemoteData
 import Routes
 import Svg.Attributes
-import SvgBuilder exposing (buildStatusToIcon)
+import SvgBuilder exposing (hookSuccess)
+import Table
 import Util exposing (largeLoader)
-import Vela exposing (Deployment, DeploymentsModel, Org, Repo)
+import Vela exposing (Deployment, Org, Repo, RepoModel, Repository)
 
 
 
@@ -61,66 +62,10 @@ addForm deploymentModel =
         ]
 
 
-{-| viewPreview : renders single deployment item preview
--}
-viewPreview : Org -> Repo -> Deployment -> Html msg
-viewPreview org repo deployment =
-    let
-        deploymentId =
-            String.fromInt deployment.id
-
-        status =
-            [ buildStatusToIcon Vela.Success ]
-
-        commit =
-            [ text <| deployment.target ++ " (" ++ Util.trimCommitHash deployment.commit ++ ")" ]
-
-        ref =
-            [ text deployment.ref ]
-
-        sender =
-            [ text deployment.user ]
-
-        description =
-            [ text ("- " ++ deployment.description) ]
-
-        id =
-            [ text ("#" ++ deploymentId) ]
-
-        redeploy =
-            [ a [ Routes.href <| Routes.PromoteDeployment org repo deploymentId ] [ text "Redeploy" ] ]
-
-        markdown =
-            [ div [ class "status", Util.testAttribute "deployment-status", class "-success" ]
-                status
-            , div [ class "info" ]
-                [ div [ class "row -left" ]
-                    [ div [ class "id" ] id
-                    , div [ class "commit-msg" ] [ strong [] description ]
-                    ]
-                , div [ class "row" ]
-                    [ div [ class "git-info" ]
-                        [ div [ class "commit" ] commit
-                        , text "on"
-                        , div [ class "branch" ] ref
-                        , text "by"
-                        , div [ class "sender" ] sender
-                        ]
-                    , div [] redeploy
-                    ]
-                ]
-            ]
-    in
-    div [ class "build-container", Util.testAttribute "deployment" ]
-        [ div [ class "build", class "-success" ] <|
-            markdown
-        ]
-
-
 {-| viewDeployments : renders a list of deployments
 -}
-viewDeployments : DeploymentsModel -> Org -> Repo -> Html msg
-viewDeployments deploymentsModel org repo =
+viewDeployments : RepoModel -> Org -> Repo -> Html msg
+viewDeployments repoModel org repo =
     let
         addButton =
             a
@@ -137,33 +82,170 @@ viewDeployments deploymentsModel org repo =
                     |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ]
                 ]
 
-        none : Html msg
-        none =
-            div []
-                [ div [ class "buttons", class "add-deployment-buttons" ] [ text "", addButton ]
-                , h2 [] [ text "No deployments found." ]
-                ]
-    in
-    case deploymentsModel.deployments of
-        RemoteData.Success deployments ->
-            if List.length deployments == 0 then
-                none
-
-            else
-                let
-                    deploymentList =
-                        div [ Util.testAttribute "deployments" ] <| List.map (viewPreview org repo) deployments
-                in
-                div []
-                    [ div [ class "buttons", class "add-deployment-buttons" ] [ text "", addButton ]
-                    , deploymentList
+        actions =
+            Just <|
+                div [ class "buttons" ]
+                    [ addButton
                     ]
 
-        RemoteData.Loading ->
-            largeLoader
+        ( noRowsView, rows ) =
+            case ( repoModel.repo, repoModel.deployments.deployments ) of
+                ( RemoteData.Success repo_, RemoteData.Success s ) ->
+                    ( text "No deployments found for this repo"
+                    , deploymentsToRows repo_ s
+                    )
+
+                ( _, RemoteData.Failure error ) ->
+                    ( span [ Util.testAttribute "repo-deployments-error" ]
+                        [ text <|
+                            case error of
+                                Http.BadStatus statusCode ->
+                                    case statusCode of
+                                        401 ->
+                                            "No deployments found for this repo, most likely due to not having access to the source control repo"
+
+                                        _ ->
+                                            "No deployments found for this repo, there was an error with the server (" ++ String.fromInt statusCode ++ ")"
+
+                                _ ->
+                                    "No deployments found for this repo, there was an error with the server"
+                        ]
+                    , []
+                    )
+
+                ( RemoteData.Failure error, _ ) ->
+                    ( span [ Util.testAttribute "repo-deployments-error" ]
+                        [ text <|
+                            case error of
+                                Http.BadStatus statusCode ->
+                                    case statusCode of
+                                        401 ->
+                                            "No repo found, most likely due to not having access to the source control provider"
+
+                                        _ ->
+                                            "No repo found, there was an error with the server (" ++ String.fromInt statusCode ++ ")"
+
+                                _ ->
+                                    "No deployments found for this repo, there was an error with the server"
+                        ]
+                    , []
+                    )
+
+                _ ->
+                    ( largeLoader, [] )
+
+        cfg =
+            Table.Config
+                "Deployments"
+                "deployments"
+                noRowsView
+                tableHeaders
+                rows
+                actions
+    in
+    div [] [ Table.view cfg ]
 
-        RemoteData.NotAsked ->
-            largeLoader
 
-        RemoteData.Failure _ ->
-            viewResourceError { resourceLabel = "deployments for this repository", testLabel = "deployments" }
+
+-- TABLE
+
+
+{-| deploymentsToRows : takes list of deployments and produces list of Table rows
+-}
+deploymentsToRows : Repository -> List Deployment -> Table.Rows Deployment msg
+deploymentsToRows repo_ deployments =
+    List.map (\deployment -> Table.Row deployment (renderDeployment repo_)) deployments
+
+
+{-| tableHeaders : returns table headers for deployments table
+-}
+tableHeaders : Table.Columns
+tableHeaders =
+    [ ( Just "-icon", "" )
+    , ( Nothing, "number" )
+    , ( Nothing, "target" )
+    , ( Nothing, "commit" )
+    , ( Nothing, "ref" )
+    , ( Nothing, "description" )
+    , ( Nothing, "user" )
+    , ( Nothing, "" )
+    ]
+
+
+{-| renderDeployment : takes deployment and renders a table row
+-}
+renderDeployment : Repository -> Deployment -> Html msg
+renderDeployment repo_ deployment =
+    tr [ Util.testAttribute <| "deployments-row" ]
+        [ td
+            [ attribute "data-label" ""
+            , scope "row"
+            , class "break-word"
+            , class "-icon"
+            ]
+            [ hookSuccess ]
+        , td
+            [ attribute "data-label" "id"
+            , scope "row"
+            , class "break-word"
+            , Util.testAttribute <| "deployments-row-id"
+            ]
+            [ text <| String.fromInt deployment.id ]
+        , td
+            [ attribute "data-label" "target"
+            , scope "row"
+            , class "break-word"
+            , Util.testAttribute <| "deployments-row-target"
+            ]
+            [ text deployment.target ]
+        , td
+            [ attribute "data-label" "commit"
+            , scope "row"
+            , class "break-word"
+            , Util.testAttribute <| "deployments-row-commit"
+            ]
+            [ a [ href <| Util.buildRefURL repo_.clone deployment.commit ]
+                [ text <| Util.trimCommitHash deployment.commit ]
+            ]
+        , td
+            [ attribute "data-label" "ref"
+            , scope "row"
+            , class "break-word"
+            , class "ref"
+            , Util.testAttribute <| "deployments-row-ref"
+            ]
+            [ span [ class "list-item" ] [ text <| deployment.ref ] ]
+        , td
+            [ attribute "data-label" "description"
+            , scope "row"
+            , class "break-word"
+            , class "description"
+            ]
+            [ text deployment.description ]
+        , td
+            [ attribute "data-label" "user"
+            , scope "row"
+            , class "break-word"
+            ]
+            [ text deployment.user ]
+        , td
+            [ attribute "data-label" ""
+            , scope "row"
+            , class "break-word"
+            ]
+            [ redeployLink repo_.org repo_.name deployment ]
+        ]
+
+
+{-| redeployLink : takes org, repo and deployment and renders a link to redirect to the promote deployment page
+-}
+redeployLink : Org -> Repo -> Deployment -> Html msg
+redeployLink org repo deployment =
+    a
+        [ class "redeploy-link"
+        , attribute "aria-label" <| "redeploy deployment " ++ String.fromInt deployment.id
+        , Routes.href <| Routes.PromoteDeployment org repo (String.fromInt deployment.id)
+        , Util.testAttribute "redeploy-deployment"
+        ]
+        [ text "Redeploy"
+        ]

src/elm/Pages/Hooks.elm

@@ -174,7 +174,7 @@ renderHook now org repo redeliverHook hook =
             ]
             [ text hook.branch ]
         , td
-            [ attribute "data-label" "redeliver"
+            [ attribute "data-label" ""
             , scope "row"
             , class "break-word"
             ]

src/elm/Pages/Schedules/View.elm

@@ -140,6 +140,7 @@ renderSchedule org repo schedule =
             [ attribute "data-label" "name"
             , scope "row"
             , class "break-word"
+            , class "name"
             , Util.testAttribute <| "schedules-row-name"
             ]
             [ a [ updateScheduleHref org repo schedule ] [ text schedule.name ] ]