fix(deployments): consistent styling resource preview (#437)

* fix(deployments): consistent styling resource preview * chore: save work * fix: format deployment preview to be consistent with builds * fix: remove unused scss for deployments * fix: remove unused code in deployments view * chore: refactor deployment viewpreview to use variables * chore: remove unused imports Co-authored-by: Jordan <Jordan.Brockopp@target.com> Co-authored-by: Emmanuel.Meinen <emmanuel.meinen@target.com>
go-vela · Aug 24, 2021 · 94c99ec · 94c99ec
1 parent 7b416da
commit 94c99ec
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 108 deletions.
diff --git a/src/elm/Pages/Deployments/View.elm b/src/elm/Pages/Deployments/View.elm
@@ -8,7 +8,7 @@ module Pages.Deployments.View exposing (addDeployment, addForm, promoteDeploymen
 
 import Errors exposing (viewResourceError)
 import FeatherIcons
-import Html exposing (Html, a, div, h2, p, text)
+import Html exposing (Html, a, div, h2, strong, text)
 import Html.Attributes exposing (class)
 import Pages.Deployments.Form exposing (viewDeployEnabled, viewHelp, viewParameterInput, viewSubmitButtons, viewValueInput)
 import Pages.Deployments.Model
@@ -19,10 +19,10 @@ import Pages.Deployments.Model
         )
 import RemoteData exposing (RemoteData(..))
 import Routes
-import Svg exposing (svg)
-import Svg.Attributes exposing (d, height, strokeWidth, viewBox, width)
+import Svg.Attributes
+import SvgBuilder exposing (buildStatusToIcon)
 import Time exposing (Posix, Zone)
-import Util exposing (ariaHidden, largeLoader)
+import Util exposing (largeLoader)
 import Vela exposing (Deployment, DeploymentsModel, Org, Repo)
 
 
@@ -70,53 +70,50 @@ viewPreview org repo deployment =
         deploymentId =
             String.fromInt deployment.id
 
-        info =
-            div [ class "deployment-info" ]
-                [ div []
-                    [ p [] [ text ("#" ++ deploymentId) ]
-                    , p [] [ text deployment.task ]
-                    ]
-                , div []
-                    [ p [] [ text (deployment.target ++ " at (" ++ Util.trimCommitHash deployment.commit ++ ")") ]
-                    , p [] [ text (" Deployed by " ++ deployment.user) ]
-                    ]
-                ]
+        status =
+            [ buildStatusToIcon Vela.Success ]
 
-        promoteDeploymentLink =
-            div [ class "deployment-link" ] [ a [ Routes.href <| Routes.PromoteDeployment org repo deploymentId ] [ text "Deploy" ] ]
+        commit =
+            [ text <| deployment.target ++ " (" ++ Util.trimCommitHash deployment.commit ++ ")" ]
 
-        deploymentDetails =
-            div [ class "deployment-details" ]
-                [ p [] [ text (" Task: " ++ deployment.task) ]
-                , p [] [ text (" Ref: " ++ deployment.ref) ]
-                , p [] [ text <| " Description: " ++ deployment.description ]
-                ]
+        ref =
+            [ text deployment.ref ]
 
-        status =
-            div [ class "deployment-icon", Util.testAttribute "build-status" ]
-                [ svg
-                    [ Svg.Attributes.class "build-icon -success"
-                    , strokeWidth "2"
-                    , viewBox "0 0 44 44"
-                    , width "44"
-                    , height "44"
-                    , ariaHidden
+        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 ]
                     ]
-                    [ Svg.path [ d "M15 20.1l6.923 6.9L42 5" ] []
-                    , Svg.path [ d "M43 22v16.333A4.668 4.668 0 0138.333 43H5.667A4.668 4.668 0 011 38.333V5.667A4.668 4.668 0 015.667 1h25.666" ] []
+                , 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
                     ]
                 ]
-
-        markdown =
-            [ info
-
-            --, deploymentDetails
-            , promoteDeploymentLink
             ]
     in
-    div [ class "deployment-container", Util.testAttribute "deployment" ]
-        [ status
-        , div [ class "deployment" ] <|
+    div [ class "build-container", Util.testAttribute "deployment" ]
+        [ div [ class "build", class "-success" ] <|
             markdown
         ]
 
@@ -156,7 +153,7 @@ viewDeployments deploymentsModel now zone org repo =
             else
                 let
                     deploymentList =
-                        div [ class "deployments", Util.testAttribute "deployments" ] <| List.map (viewPreview org repo) deployments
+                        div [ Util.testAttribute "deployments" ] <| List.map (viewPreview org repo) deployments
                 in
                 div []
                     [ div [ class "buttons", class "add-deployment-buttons" ] [ text "", addButton ]

diff --git a/src/scss/_main.scss b/src/scss/_main.scss
@@ -313,70 +313,6 @@ nav {
   font-weight: 300;
 }
 
-// deployments
-.deployment-container {
-  display: flex;
-  width: 100%;
-  margin: 12px 0;
-  overflow: hidden;
-
-  border-top: 2px solid var(--color-green);
-  border-bottom: 2px solid var(--color-green);
-}
-
-.deployment-icon {
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  padding: 1em;
-
-  background: var(--color-green);
-}
-
-.deployment-icon svg {
-  fill: none;
-  stroke: var(--color-bg);
-}
-
-.deployment {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  padding: 1em;
-
-  font-weight: 300;
-  font-size: 18px;
-
-  border: 2px solid var(--color-bg-dark);
-  border-right: 0;
-  border-left: 0;
-}
-
-.deployment .deployment-link {
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
-  padding-right: 1em;
-}
-
-.deployment div.deployment-info {
-  display: flex;
-  flex-direction: row;
-}
-
-.deployment div.deployment-info div {
-  min-width: 10em;
-}
-
-.deployment div p {
-  margin: 0;
-}
-
 // builds styles for /:org/:repo/:build_number
 .builds {
   display: flex;