shipit-engine 0.16.0 → 0.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 728cef09e4ae36c728e2a5d933f5967f4dcbe757
-  data.tar.gz: e35599675982e893d70e0c25d678da7e8910e7f4
+  metadata.gz: 823b4ce78b43702c4ee8ceb34d1d34d9bfa354a9
+  data.tar.gz: 6a1e04142c22e9d4e30abf037e0f67bc739cc524
 SHA512:
-  metadata.gz: bc3ecc88e8e13e99dca6f5789d364de99a21374fa566cd0273ed013f2f2b8da1c9a007fe9931daa76f66c12ba0ff9890cd2c8b4110d28f35510a7e3d29a3cef0
-  data.tar.gz: fde31379bbe98eb1dfb6af272a54a1b6b9e1a3e171d1dcc1588f8e67a257fe633117d1c35251f3543d3a5d585039c68e0e21dcd2ce8f945f009deee0bd722695
+  metadata.gz: 3582bf6393aed76da430d4b5a8219c4954bb7b0079f21d30ad07379c690a695a27faa91a18ad133e85ad595490e066532e837e933108838d4f35e3aa3429fe17
+  data.tar.gz: af60bdde100570fce61e7ef0ae42bd1e9f7a2b1d38ddee79ef20cbd0d11c9a0f5fb33ec4bc12db1fa757c6856e13b08ac3a82547a694ef7dac903bb9cd7dbf9a

data/README.md

@@ -634,6 +634,7 @@ Your deploy scripts have access to the following environment variables:
 * `BRANCH`: The stack branch (e.g `master`)
 * `LAST_DEPLOYED_SHA`: The git SHA of the last deployed commit
 * `DIFF_LINK`: URL to the diff on GitHub.
+* `TASK_ID`: ID of the task that is running
 * All the content of the `secrets.yml` `env` key
 * All the content of the `shipit.yml` `machine.environment` key
 

data/app/assets/images/caret-down.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" fill="#248AF2" fill-rule="evenodd"/></svg>

data/app/assets/javascripts/shipit/stacks.js.coffee

@@ -1,3 +1,13 @@
+$(document).on 'click', '.commit-lock a', (event) ->
+  event.preventDefault()
+  $commit = $(event.target).closest('.commit')
+  $link = $(event.target).closest('a')
+
+  locked = $commit.hasClass('locked')
+  $commit.toggleClass('locked')
+
+  $.ajax($link.attr('href'), method: 'PATCH', data: {commit: {locked: !locked}})
+
 jQuery ($) ->
   displayIgnoreCiMessage = ->
     ignoreCiMessage = $(".ignoring-ci")

data/app/assets/stylesheets/_base/_banner.scss

@@ -6,10 +6,14 @@
   background: $blue;
   padding: 1.75rem 0;
   position: relative;
-}
 
-.banner a {
-  color: #fff;
+  a {
+    color: #fff;
+  }
+
+  .icon {
+    background-color: #fff;
+  }
 }
 
 .banner__inner {

data/app/assets/stylesheets/_base/_base.scss

@@ -106,8 +106,6 @@ a {
   text-decoration: none;
   cursor: pointer;
   color: $blue;
-    &.subdued { color: #999; }
-    &.subdued:hover { color: $blue; }
 }
 
 .more {
@@ -145,79 +143,7 @@ h5 {
   margin: 0; margin-bottom: .5rem;
 }
 
-// Buttons
-
-
-
-.ico {
-  display: inline-block;
-  background-position: center center;
-  background-repeat: no-repeat;
-  text-indent: -99999px;
-}
-
-.ico-refresh-wrapper {
-  display: inline-block;
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-.ico-refresh {
-  @extend .ico;
-  background-image: asset-data-url('refresh.svg');
-  background-size: 24px auto;
-  width: 18px; height: 18px;
-  border:none;
-  background-color: transparent;
-}
-
-.ico-github {
-  @extend .ico;
-  background-image: asset-data-url('github.svg');
-  background-size: 22px auto;
-  width: 18px; height: 18px;
-}
-
-.ico-settings {
-  @extend .ico;
-  background-image: asset-data-url('settings.svg');
-  width: 18px; height: 18px;
-}
-
-.ico-pending-small,
-.ico-success-small,
-.ico-error-small, .ico-failure-small {
-  @extend .ico;
-  width: 14px; height: 14px;
-  margin-bottom: -2px;
-}
-
-.ico-success-small {
-  background: asset-data-url("success.svg") center center no-repeat;
-  background-size: contain;
-  margin-right: 3px;
-}
-
-.ico-error-small, .ico-failure-small {
-  background: asset-data-url("failure.svg") center center no-repeat;
-  background-size: contain;
-}
-
-.ico-pending-small {
-  background: asset-data-url("pending.gif") center center no-repeat;
-  background-size: contain;
-  margin-right: 3px;
-}
-
-.icon--lock {
-  display: inline-block;
-  background: asset-data-url("lock.svg") center center no-repeat;
-  height: 15px;
-  width: 12px;
-}
-
 [data-tooltip], [data-tooltip-multiline] { // Add this attribute to the element that needs a tooltip
-
   position: relative;
   cursor: pointer;
   -webkit-transform: translate3d(0,0,0);

data/app/assets/stylesheets/_base/_buttons.scss

@@ -19,16 +19,18 @@
   background-color: $blue;
   color: #fff;
   box-shadow: none;
+
   &.btn--disabled {
     box-shadow: 0 0 0 1px rgba(#000, 0.15);
   }
+
   &.btn--warning {
     background-color: $yellow;
   }
 }
 
 .btn--disabled {
-  color: #999;
+  color: $grey;
   background-color: #fafafa;
   cursor: default;
 }
@@ -37,8 +39,9 @@
   color: #fff;
   border: none;
   background-color: $bright-red;
+
   &.btn-disabled {
-    color: #999;
+    color: $grey;
     background-color: $light-red;
   }
 }
@@ -46,8 +49,9 @@
 .btn--alert {
   color: #fff;
   background-color: $orange;
+
   &.btn-disabled {
-    color: #999;
+    color: $grey;
     background-color: $light-orange;
   }
 }

data/app/assets/stylesheets/_base/_colors.scss

@@ -15,3 +15,5 @@ $orange: #FFAD4C;
 $light-orange: #ffebcc;
 $slate: #2E343A;
 $terminal-black: #272C30;
+$grey: #999;
+$grey-light: #e0e0e0;

data/app/assets/stylesheets/_base/_icons.scss

@@ -0,0 +1,8 @@
+.icon--lock {
+  display: inline-block;
+  background-color: #000;
+  mask: asset-data-url("lock.svg") no-repeat 50% 50%;
+//  background: asset-data-url("lock.svg") center center no-repeat;
+  height: 15px;
+  width: 12px;
+}

data/app/assets/stylesheets/_base/_spacing.scss

@@ -0,0 +1,21 @@
+$spacing-data: (
+  tight: 0.75rem,
+  base: 1rem,
+  loose: 1.5rem
+);
+
+/// Returns the spacing value for a given variant.
+///
+/// @param {String} $variant - The key for the given variant.
+/// @return {Number} The spacing for the variant.
+
+@function spacing($variant: base) {
+  $fetched-value: map-get($spacing-data, $variant);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error 'Spacing variant `#{$variant}` not found. Available variants: #{available-names($spacing-data)}';
+  }
+}
+

data/app/assets/stylesheets/_pages/_commits.scss

@@ -63,7 +63,7 @@
 }
 
 .commit-author__name__username {
-  color: #999;
+  color: $grey;
 }
 
 
@@ -98,9 +98,42 @@
   color: $blue;
 }
 
+.commit-lock {
+  display: inline-block;
+  .icon {
+    background-color: #ddd;
+  }
+
+  &:hover .icon {
+    background-color: darken(#ddd, 20%);
+  }
+
+  .action-unlock-commit {
+    display: none;
+  }
+}
+
+.commit.locked .commit-lock {
+  .icon {
+    background-color: $bright-red;
+  }
+
+  &:hover .icon {
+    background-color: darken($bright-red, 20%);
+  }
+
+  .action-lock-commit {
+    display: none;
+  }
+
+  .action-unlock-commit {
+    display: inline-block;
+  }
+}
+
 .commit-meta, .pr-meta {
   font-size: 0.8em;
-  color: #999;
+  color: $grey;
   margin: 0;
 
   @include media(desktop) {
@@ -133,6 +166,11 @@
 
   @include media(desktop) {
     margin-left: 1rem;
+    min-width: 10rem;
+
+    .btn {
+      float: right;
+    }
   }
 }
 
@@ -285,5 +323,5 @@
 
 .commit-summary__sha {
   font-size: 0.875rem;
-  color: #999;
+  color: $grey;
 }

data/app/assets/stylesheets/_structure/_layout.scss

@@ -16,13 +16,13 @@
 .header {
   border-bottom: 1px solid #e5e5e5;
   background-color: #fff;
-  color: #999;
+  color: $grey;
 }
 
 .header__inner {
   display: flex;
   flex-wrap: wrap;
-  padding: 1.5em 0;
+  padding: spacing(loose) 0;
   position: relative;
 }
 
@@ -35,16 +35,16 @@
 }
 
 .header__btn {
-  margin: .4em .5em .4em 0;
+  margin: 0.4em 0.5em 0.4em 0;
 }
 
 .powered-by {
   float: right;
   position: relative;
-  top: .5rem;
-  right: 1rem;
+  top: spacing(tight);
+  right: spacing();
   font-size: 12px;
-  color: #999;
+  color: $grey;
 }
 
 
@@ -56,42 +56,15 @@
   display: block;
   width: 40px;
   height: 40px;
-  transition: transform .3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   text-indent: -9999px;
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-right: 1em;
+  margin-right: spacing();
   margin-top: -20px;
 
   &:hover {
     transform: rotate(-25deg);
   }
 }
-
-
-// NAVIGATION
-// -----------------------------------------------------------------------------
-
-.nav {
-  display: flex;
-  margin-bottom: 1.5rem;
-}
-
-.nav__list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav__list--primary {
-  flex-grow: 1;
-}
-
-.nav__list__item {
-  display: inline-block;
-
-  & + & {
-    margin-left: 1.5em;
-  }
-}

data/app/assets/stylesheets/_structure/_main.scss

@@ -40,7 +40,7 @@
         & > p {
           margin: 0;
           padding: .7rem 0;
-          color: #999;
+          color: $grey;
           font-size: .875rem;
             .repo-name { font-weight: 500; color: #777; }
         }
@@ -140,7 +140,7 @@ pre {
 }
 
 .less-important {
-    color: #999;
+    color: $grey;
     margin-bottom: 0em;
     margin-top: 1em;
     p {

data/app/assets/stylesheets/_structure/_navigation.scss

@@ -0,0 +1,89 @@
+// NAVIGATION
+// -----------------------------------------------------------------------------
+
+.nav {
+  display: flex;
+}
+
+.nav__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav__list--primary {
+  flex-grow: 1;
+}
+
+.nav__list__item {
+  display: inline-block;
+  cursor: pointer;
+  color: $blue;
+  padding-bottom: spacing(loose);
+
+  + .nav__list__item {
+    margin-left: spacing(loose);
+  }
+}
+
+.nav__list__sub__item {
+  list-style: none;
+  white-space: nowrap;
+
+  + .nav__list__sub__item {
+    margin-top: spacing(tight);
+  }
+}
+
+$tool-tip-size: 12px;
+$tool-tip-offset: $tool-tip-size / 2 + 1;
+$sub-nav-offset: -10px;
+
+.nav__sub__list {
+  position: absolute;
+  top: calc(100% - #{spacing(tight)});
+  z-index: 10;
+  background-color: white;
+  padding: spacing(tight);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY($sub-nav-offset);
+  border: 1px solid $grey-light;
+  border-radius: 3px;
+  transition:
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -1 * $tool-tip-offset;
+    background-color: white;
+    border: 1px solid $grey-light;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    height: $tool-tip-size;
+    width: $tool-tip-size;
+    transform: rotate(45deg);
+  }
+}
+
+.nav__list__item--has-children {
+  position: relative;
+  display: inline-flex;
+
+  &::after {
+    display: inline-block;
+    content: '';
+    background-image: asset-data-url('caret-down.svg');
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover .nav__sub__list {
+    opacity: 1;
+    pointer-events: initial;
+    transform: translateY(0);
+  }
+}