Merge branch 'fix/detailed-status-groups' into 'master'

Improve icons and style for manual build status

## What does this MR do?

This MR changes the CSS class for manual build status badge to make it a little more different than skipped build status badge. It makes it darker.

## Screenshots

![Screen_Shot_2016-12-17_at_13.37.58](/uploads/9628f0e84fdaad82d8833f546f0192a6/Screen_Shot_2016-12-17_at_13.37.58.png)![Screen_Shot_2016-12-17_at_13.31.48](/uploads/fe8e27df0274b9f9ae840110593a298a/Screen_Shot_2016-12-17_at_13.31.48.png)


See merge request !8102

app/assets/stylesheets/framework/icons.scss

@@ -49,3 +49,11 @@
     fill: $gray-darkest;
   }
 }
+
+.ci-status-icon-manual {
+  color: $gl-text-color;
+
+  svg {
+    fill: $gl-text-color;
+  }
+}

app/assets/stylesheets/pages/status.scss

 .container-fluid {
   .ci-status {
+    display: inline-block;
     padding: 2px 7px;
     margin-right: 10px;
     border: 1px solid $gray-darker;
@@ -15,8 +16,7 @@
       height: 13px;
       width: 13px;
       position: relative;
-      top: 1px;
-      margin-right: 3px;
+      top: 2px;
       overflow: visible;
     }
 
@@ -25,7 +25,7 @@
       border-color: $gl-danger;
 
       &:not(span):hover {
-        background-color: rgba( $gl-danger, .07);
+        background-color: rgba($gl-danger, .07);
       }
 
       svg {
@@ -39,7 +39,7 @@
       border-color: $gl-success;
 
       &:not(span):hover {
-        background-color: rgba( $gl-success, .07);
+        background-color: rgba($gl-success, .07);
       }
 
       svg {
@@ -52,7 +52,7 @@
       border-color: $gl-info;
 
       &:not(span):hover {
-        background-color: rgba( $gl-info, .07);
+        background-color: rgba($gl-info, .07);
       }
 
       svg {
@@ -66,7 +66,7 @@
       border-color: $gl-gray;
 
       &:not(span):hover {
-        background-color: rgba( $gl-gray, .07);
+        background-color: rgba($gl-gray, .07);
       }
 
       svg {
@@ -79,7 +79,7 @@
       border-color: $gl-warning;
 
       &:not(span):hover {
-        background-color: rgba( $gl-warning, .07);
+        background-color: rgba($gl-warning, .07);
       }
 
       svg {
@@ -92,7 +92,7 @@
       border-color: $blue-normal;
 
       &:not(span):hover {
-        background-color: rgba( $blue-normal, .07);
+        background-color: rgba($blue-normal, .07);
       }
 
       svg {
@@ -106,13 +106,26 @@
       border-color: $gl-gray-light;
 
       &:not(span):hover {
-        background-color: rgba( $gl-gray-light, .07);
+        background-color: rgba($gl-gray-light, .07);
       }
 
       svg {
         fill: $gl-gray-light;
       }
     }
+
+    &.ci-manual {
+      color: $gl-text-color;
+      border-color: $gl-text-color;
+
+      &:not(span):hover {
+        background-color: rgba($gl-text-color, .07);
+      }
+
+      svg {
+        fill: $gl-text-color;
+      }
+    }
   }
 }
 

app/views/ci/status/_badge.html.haml

 - status = local_assigns.fetch(:status)
+- css_classes = "ci-status ci-#{status.group}"
 
 - if status.has_details?
-  = link_to status.details_path, class: "ci-status ci-#{status}" do
+  = link_to status.details_path, class: css_classes do
     = custom_icon(status.icon)
     = status.text
 - else
-  %span{ class: "ci-status ci-#{status}" }
+  %span{ class: css_classes }
     = custom_icon(status.icon)
     = status.text

app/views/ci/status/_graph_badge.html.haml

@@ -2,7 +2,7 @@
 
 - subject = local_assigns.fetch(:subject)
 - status = subject.detailed_status(current_user)
-- klass = "ci-status-icon ci-status-icon-#{status}"
+- klass = "ci-status-icon ci-status-icon-#{status.group}"
 
 - if status.has_details?
   = link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do

lib/gitlab/ci/status/build/play.rb

@@ -17,6 +17,10 @@ module Gitlab
             'icon_status_manual'
           end
 
+          def group
+            'manual'
+          end
+
           def has_action?
             can?(user, :update_build, subject)
           end

lib/gitlab/ci/status/build/stop.rb

@@ -17,6 +17,10 @@ module Gitlab
             'icon_status_manual'
           end
 
+          def group
+            'manual'
+          end
+
           def has_action?
             can?(user, :update_build, subject)
           end

lib/gitlab/ci/status/core.rb

@@ -22,15 +22,8 @@ module Gitlab
           raise NotImplementedError
         end
 
-        # Deprecation warning: this method is here because we need to maintain
-        # backwards compatibility with legacy statuses. We often do something
-        # like "ci-status ci-status-#{status}" to set CSS class.
-        #
-        # `to_s` method should be renamed to `group` at some point, after
-        # phasing legacy satuses out.
-        #
-        def to_s
-          self.class.name.demodulize.downcase.underscore
+        def group
+          self.class.name.demodulize.underscore
         end
 
         def has_details?

lib/gitlab/ci/status/pipeline/success_with_warnings.rb

@@ -17,7 +17,7 @@ module Gitlab
             'icon_status_warning'
           end
 
-          def to_s
+          def group
             'success_with_warnings'
           end
 

spec/features/projects/pipelines/pipeline_spec.rb

@@ -99,7 +99,7 @@ describe "Pipelines", feature: true, js: true do
       context 'when pipeline has manual builds' do
         it 'shows the skipped icon and a play action for the manual build' do
           page.within('a[data-title="manual build - manual play action"]') do
-            expect(page).to have_selector('.ci-status-icon-skipped')
+            expect(page).to have_selector('.ci-status-icon-manual')
             expect(page).to have_content('manual')
           end
 

spec/lib/gitlab/ci/status/build/cancelable_spec.rb

@@ -32,6 +32,14 @@ describe Gitlab::Ci::Status::Build::Cancelable do
     end
   end
 
+  describe '#group' do
+    it 'does not override status group' do
+      expect(status).to receive(:group)
+
+      subject.group
+    end
+  end
+
   describe 'action details' do
     let(:user) { create(:user) }
     let(:build) { create(:ci_build) }

spec/lib/gitlab/ci/status/build/play_spec.rb

@@ -18,6 +18,10 @@ describe Gitlab::Ci::Status::Build::Play do
     it { expect(subject.icon).to eq 'icon_status_manual' }
   end
 
+  describe '#group' do
+    it { expect(subject.group).to eq 'manual' }
+  end
+
   describe 'action details' do
     let(:user) { create(:user) }
     let(:build) { create(:ci_build) }

spec/lib/gitlab/ci/status/build/retryable_spec.rb

@@ -32,6 +32,14 @@ describe Gitlab::Ci::Status::Build::Retryable do
     end
   end
 
+  describe '#group' do
+    it 'does not override status group' do
+      expect(status).to receive(:group)
+
+      subject.group
+    end
+  end
+
   describe 'action details' do
     let(:user) { create(:user) }
     let(:build) { create(:ci_build) }

spec/lib/gitlab/ci/status/build/stop_spec.rb

@@ -20,6 +20,10 @@ describe Gitlab::Ci::Status::Build::Stop do
     it { expect(subject.icon).to eq 'icon_status_manual' }
   end
 
+  describe '#group' do
+    it { expect(subject.group).to eq 'manual' }
+  end
+
   describe 'action details' do
     let(:user) { create(:user) }
     let(:build) { create(:ci_build) }

spec/lib/gitlab/ci/status/canceled_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Canceled do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_canceled' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'canceled' }
+  end
 end

spec/lib/gitlab/ci/status/created_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Created do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_created' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'created' }
+  end
 end

spec/lib/gitlab/ci/status/failed_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Failed do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_failed' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'failed' }
+  end
 end

spec/lib/gitlab/ci/status/pending_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Pending do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_pending' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'pending' }
+  end
 end

spec/lib/gitlab/ci/status/pipeline/success_with_warnings_spec.rb

@@ -17,6 +17,10 @@ describe Gitlab::Ci::Status::Pipeline::SuccessWithWarnings do
     it { expect(subject.icon).to eq 'icon_status_warning' }
   end
 
+  describe '#group' do
+    it { expect(subject.group).to eq 'success_with_warnings' }
+  end
+
   describe '.matches?' do
     context 'when pipeline is successful' do
       let(:pipeline) do

spec/lib/gitlab/ci/status/running_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Running do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_running' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'running' }
+  end
 end

spec/lib/gitlab/ci/status/skipped_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Skipped do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_skipped' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'skipped' }
+  end
 end

spec/lib/gitlab/ci/status/success_spec.rb

@@ -16,4 +16,8 @@ describe Gitlab::Ci::Status::Success do
   describe '#icon' do
     it { expect(subject.icon).to eq 'icon_status_success' }
   end
+
+  describe '#group' do
+    it { expect(subject.group).to eq 'success' }
+  end
 end