enhance(build): logic parsing and linking of auto cancel messaging

cypress/fixtures/build_canceled.json

@@ -0,0 +1,27 @@
+{
+  "id": 6,
+  "repo_id": 1,
+  "number": 6,
+  "parent": 1,
+  "event": "push",
+  "status": "canceled",
+  "error": "build canceled in favor of build 7",
+  "enqueued": 1572980376,
+  "created": 1572980376,
+  "started": 1572980375,
+  "finished": 1572980375,
+  "deploy": "",
+  "clone": "https://github.com/github/octocat.git",
+  "source": "https://github.com/github/octocat/commit/9b1d8bded6e992ab660eaee527c5e3232d0a2441",
+  "title": "push received from https://github.com/github/octocat",
+  "message": "fixing docker params",
+  "commit": "9b1d8bded6e992ab660eaee527c5e3232d0a2441",
+  "sender": "CookieCat",
+  "author": "CookieCat",
+  "branch": "infra",
+  "ref": "refs/heads/infra",
+  "base_ref": "",
+  "host": "",
+  "runtime": "docker",
+  "distribution": "linux"
+}

cypress/integration/build.spec.js

@@ -295,5 +295,33 @@ context('Build', () => {
         cy.get('[data-test=build-error]').contains('failure authenticating');
       });
     });
+
+    context('visit canceled build', () => {
+      beforeEach(() => {
+        cy.visit('/github/octocat/6');
+        cy.get('[data-test=full-build]').as('build');
+        cy.get('@build').get('[data-test=build-status]').as('buildStatus');
+      });
+
+      it('build should have canceled style', () => {
+        cy.get('@buildStatus').should('have.class', '-canceled');
+      });
+
+      it('build error should show', () => {
+        cy.get('[data-test=build-error]').should('be.visible');
+      });
+
+      it('build error should contain error', () => {
+        cy.get('[data-test=build-error]').contains('msg:');
+        cy.get('[data-test=build-error]').contains(
+          'build canceled in favor of build 7',
+        );
+      });
+
+      it('clicking superseding build link should direct to new build page', () => {
+        cy.get('[data-test=new-build-link]').click({ force: true });
+        cy.location('pathname').should('eq', '/github/octocat/7');
+      });
+    });
   });
 });

cypress/support/commands.js

@@ -62,6 +62,7 @@ Cypress.Commands.add('stubBuild', () => {
   cy.fixture('build_success.json').as('successBuild');
   cy.fixture('build_failure.json').as('failureBuild');
   cy.fixture('build_error.json').as('errorBuild');
+  cy.fixture('build_canceled.json').as('cancelBuild');
   cy.route({
     method: 'GET',
     url: 'api/v1/repos/*/*/builds/1',
@@ -92,6 +93,18 @@ Cypress.Commands.add('stubBuild', () => {
     status: 200,
     response: '@errorBuild',
   });
+  cy.route({
+    method: 'GET',
+    url: 'api/v1/repos/*/*/builds/6',
+    status: 200,
+    response: '@cancelBuild',
+  });
+  cy.route({
+    method: 'GET',
+    url: 'api/v1/repos/*/*/builds/7',
+    status: 200,
+    response: '@successBuild',
+  });
 });
 
 Cypress.Commands.add('stubBuilds', () => {

src/elm/Pages/Build/View.elm

@@ -1113,8 +1113,48 @@ viewError build =
                 ]
 
         Vela.Canceled ->
-            div [ class "error", Util.testAttribute "build-canceled" ]
-                [ text "build was canceled"
+            let
+                message =
+                    if String.isEmpty build.error then
+                        text "no error message"
+
+                    else
+                        let
+                            tgtBuild =
+                                String.split " " build.error
+                                    |> List.Extra.last
+                                    |> Maybe.withDefault ""
+                        in
+                        -- check if the last part of the error message was a digit
+                        -- to handle auto canceled build messages which come in the
+                        -- form of "build was auto canceled in favor of build 42"
+                        case String.toInt tgtBuild of
+                            -- not an auto cancel message, use the returned error msg
+                            Nothing ->
+                                text build.error
+
+                            -- some special treatment to turn build number
+                            -- into a link to the respective build
+                            Just _ ->
+                                let
+                                    linkList =
+                                        String.split "/" build.link
+                                            |> List.reverse
+
+                                    newLink =
+                                        linkList
+                                            |> List.Extra.setAt 0 tgtBuild
+                                            |> List.reverse
+                                            |> String.join "/"
+
+                                    msg =
+                                        String.replace tgtBuild "" build.error
+                                in
+                                span [] [ text msg, a [ href newLink, Util.testAttribute "new-build-link" ] [ text tgtBuild ] ]
+            in
+            div [ class "error", Util.testAttribute "build-error" ]
+                [ span [ class "label" ] [ text "msg:" ]
+                , span [ class "message" ] [ message ]
                 ]
 
         _ ->
@@ -1150,7 +1190,7 @@ statusToClass status =
             class "-failure"
 
         Vela.Canceled ->
-            class "-failure"
+            class "-canceled"
 
         Vela.Error ->
             class "-error"

src/elm/SvgBuilder.elm

@@ -122,6 +122,41 @@ buildFailure =
         ]
 
 
+{-| buildCanceled : produces svg icon for build status - canceled
+-}
+buildCanceled : Html msg
+buildCanceled =
+    svg
+        [ class "build-icon -canceled"
+        , strokeWidth "2"
+        , viewBox "0 0 44 44"
+        , width "44"
+        , height "44"
+        , ariaHidden
+        ]
+        [ Svg.path [ d "M5.667 1h32.666A4.668 4.668 0 0143 5.667v32.666A4.668 4.668 0 0138.333 43H5.667A4.668 4.668 0 011 38.333V5.667A4.668 4.668 0 015.667 1z" ] []
+        , Svg.path [ d "M15 15L29 29" ] []
+        ]
+
+
+{-| buildError : produces svg icon for build status - error
+-}
+buildError : Html msg
+buildError =
+    svg
+        [ class "build-icon -error"
+        , strokeWidth "2"
+        , viewBox "0 0 44 44"
+        , width "44"
+        , height "44"
+        , ariaHidden
+        ]
+        [ Svg.path [ d "M5.667 1h32.666A4.668 4.668 0 0143 5.667v32.666A4.668 4.668 0 0138.333 43H5.667A4.668 4.668 0 011 38.333V5.667A4.668 4.668 0 015.667 1z" ] []
+        , Svg.path [ d "M22 14V25" ] []
+        , Svg.path [ d "M22 30V27" ] []
+        ]
+
+
 {-| buildStatusAnimation : takes dashes as particles an svg meant to parallax scroll on a running build
 -}
 buildStatusAnimation : String -> String -> List String -> Html msg
@@ -245,6 +280,61 @@ stepFailure =
         ]
 
 
+{-| stepError : produces svg icon for step status - error
+-}
+stepError : Html msg
+stepError =
+    svg
+        [ class "-icon -error"
+        , strokeWidth "2"
+        , viewBox "0 0 44 44"
+        , width "32"
+        , height "32"
+        , ariaHidden
+        ]
+        [ Svg.path
+            [ attribute "vector-effect" "non-scaling-stroke"
+            , d "M5.667 1h32.666A4.668 4.668 0 0143 5.667v32.666A4.668 4.668 0 0138.333 43H5.667A4.668 4.668 0 011 38.333V5.667A4.668 4.668 0 015.667 1z"
+            ]
+            []
+        , Svg.path
+            [ attribute "vector-effect" "non-scaling-stroke"
+            , d "M22 13V25"
+            ]
+            []
+        , Svg.path
+            [ attribute "vector-effect" "non-scaling-stroke"
+            , d "M22 29V32"
+            ]
+            []
+        ]
+
+
+{-| stepCanceled : produces svg icon for step status - canceled
+-}
+stepCanceled : Html msg
+stepCanceled =
+    svg
+        [ class "-icon -canceled"
+        , strokeWidth "2"
+        , viewBox "0 0 44 44"
+        , width "32"
+        , height "32"
+        , ariaHidden
+        ]
+        [ Svg.path
+            [ attribute "vector-effect" "non-scaling-stroke"
+            , d "M5.667 1h32.666A4.668 4.668 0 0143 5.667v32.666A4.668 4.668 0 0138.333 43H5.667A4.668 4.668 0 011 38.333V5.667A4.668 4.668 0 015.667 1z"
+            ]
+            []
+        , Svg.path
+            [ attribute "vector-effect" "non-scaling-stroke"
+            , d "M15 15l14 14"
+            ]
+            []
+        ]
+
+
 {-| stepSkipped : produces svg icon for step status - killed
 Note: killed/skipped are the same thing.
 -}
@@ -455,6 +545,36 @@ buildHistoryFailure _ =
         [ Svg.path [ d "M8 8l12 12M20 8L8 20" ] [] ]
 
 
+{-| buildHistoryError : produces svg icon for build history status - error
+-}
+buildHistoryError : Int -> Html msg
+buildHistoryError _ =
+    svg
+        [ class "-icon -error"
+        , strokeWidth "2"
+        , viewBox "0 0 28 28"
+        , width "26"
+        , height "26"
+        ]
+        [ Svg.path [ d "M14 8v7" ] []
+        , Svg.path [ d "M14 18v2" ] []
+        ]
+
+
+{-| buildHistoryError : produces svg icon for build history status - error
+-}
+buildHistoryCanceled : Int -> Html msg
+buildHistoryCanceled _ =
+    svg
+        [ class "-icon -canceled"
+        , strokeWidth "2"
+        , viewBox "0 0 28 28"
+        , width "26"
+        , height "26"
+        ]
+        [ Svg.path [ d "M8 8l12 12" ] [] ]
+
+
 {-| buildStatusToIcon : takes build status and returns Icon from SvgBuilder
 -}
 buildStatusToIcon : Status -> Html msg
@@ -476,10 +596,10 @@ buildStatusToIcon status =
             buildFailure
 
         Vela.Canceled ->
-            buildFailure
+            buildCanceled
 
         Vela.Error ->
-            buildFailure
+            buildError
 
 
 {-| recentBuildStatusToIcon : takes build status string and returns Icon from SvgBuilder
@@ -503,10 +623,10 @@ recentBuildStatusToIcon status index =
             buildHistoryFailure index
 
         Vela.Canceled ->
-            buildHistoryFailure index
+            buildHistoryCanceled index
 
         Vela.Error ->
-            buildHistoryFailure index
+            buildHistoryError index
 
 
 {-| stepStatusToIcon : takes build status and returns Icon from SvgBuilder
@@ -530,10 +650,10 @@ stepStatusToIcon status =
             stepSkipped
 
         Vela.Canceled ->
-            stepFailure
+            stepCanceled
 
         Vela.Error ->
-            stepFailure
+            stepError
 
 
 {-| hookStatusToIcon : takes hook status string and returns Icon from SvgBuilder

src/elm/Vela.elm

@@ -1427,7 +1427,7 @@ statusToFavicon status =
                             "-failure"
 
                         Canceled ->
-                            "-failure"
+                            "-canceled"
 
                         Error ->
                             "-failure"

src/scss/_main.scss

@@ -569,6 +569,10 @@ details.build-toggle {
   background: var(--color-red);
 }
 
+.build .status.-canceled {
+  background: var(--color-cyan-dark);
+}
+
 .build .info {
   position: relative;
 
@@ -600,10 +604,14 @@ details.build-toggle {
 .build .error {
   max-width: 80%;
 
-  color: var(--color-red-light);
   font-size: 16px;
 }
 
+/* canceled build messages aren't errors */
+.build:not(.-canceled) .error {
+  color: var(--color-red-light);
+}
+
 .build .error .message {
   margin-left: 0.2em;
 }
@@ -760,6 +768,11 @@ details.build-toggle {
   border-bottom: 2px solid var(--color-red);
 }
 
+.build.-canceled {
+  border-top: 2px solid var(--color-cyan-dark);
+  border-bottom: 2px solid var(--color-cyan-dark);
+}
+
 .-animation-dashes-1 {
   stroke-dasharray: 20 220 5 360;
 }
@@ -826,6 +839,10 @@ details.build-toggle {
     background-color: var(--color-red);
   }
 
+  &.-canceled {
+    background-color: var(--color-cyan-dark);
+  }
+
   &.-success {
     background-color: var(--color-green);
   }
@@ -1296,6 +1313,10 @@ details.build-toggle {
     stroke: var(--color-red);
   }
 
+  &.-canceled {
+    stroke: var(--color-cyan-dark);
+  }
+
   &.-pending {
     fill: var(--color-bg-light);
     stroke: var(--color-bg-light);