Merge branch '20321-handle-long-variable-values-better' into 'master'

Handle variable values

## What does this MR do?
User can display variables on click. Variables will hide after page is refresh.

## What are the relevant issue numbers?
Closes #20321 

## Screenshots (if relevant)
![Zrzut_ekranu_z_2016-08-23_16_32_29](/uploads/649576b5c77fc4636924de00ddb0f190/Zrzut_ekranu_z_2016-08-23_16_32_29.png)
![Zrzut_ekranu_z_2016-09-01_17_59_40](/uploads/7e96210b9c8354f0b406b9df8018a94c/Zrzut_ekranu_z_2016-09-01_17_59_40.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added

- Tests
 - [x] All builds are passing
 - [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
 - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

cc: @kradydal @grzesiek @yorickpeterse [@chastell](https://github.com/chastell) @tmaczukin 

See merge request !5628

CHANGELOG

@@ -88,6 +88,7 @@ v 8.12.0 (unreleased)
   - Fixed invisible scroll controls on build page on iPhone
   - Fix error on raw build trace download for old builds stored in database !4822
   - Refactor the triggers page and documentation !6217
+  - Show values of CI trigger variables only when clicked (Katarzyna Kobierska Ula Budziszewska)
 
 v 8.11.5 (unreleased)
   - Optimize branch lookups and force a repository reload for Repository#find_branch

app/assets/javascripts/build_variables.js.es6

+$(function(){
+  $('.reveal-variables').off('click').on('click',function(){
+    $('.js-build').toggle().niceScroll();
+    $(this).hide();
+  });
+});

app/assets/stylesheets/pages/builds.scss

@@ -115,6 +115,16 @@
     width: 100%;
   }
 
+  .js-build-variable {
+    color: $code-color;
+  }
+
+  .js-build-value {
+    padding: 2px 4px;
+    color: $black;
+    background-color: $white-light;
+  }
+
   .build-sidebar-header {
     padding: 0 $gl-padding $gl-padding;
 

app/views/projects/builds/_sidebar.html.haml

@@ -90,12 +90,13 @@
 
         - if @build.trigger_request.variables
           %p
-            %span.build-light-text Variables:
+            %button.btn.group.btn-group-justified.reveal-variables Reveal Variables
 
 
           - @build.trigger_request.variables.each do |key, value|
-            %code
-              #{key}=#{value}
+            .hide.js-build
+              .js-build-variable= key 
+              .js-build-value= value
 
     .block
       .title

spec/features/projects/builds_spec.rb

@@ -164,6 +164,26 @@ describe "Builds" do
         expect(page).to have_link 'Raw'
       end
     end
+
+    describe 'Variables' do
+      before do
+        @trigger_request = create :ci_trigger_request_with_variables 
+        @build = create :ci_build, pipeline: @commit, trigger_request: @trigger_request
+        visit namespace_project_build_path(@project.namespace, @project, @build)
+      end
+
+      it 'shows variable key and value after click', js: true do
+        expect(page).to have_css('.reveal-variables')
+        expect(page).not_to have_css('.js-build-variable')
+        expect(page).not_to have_css('.js-build-value')
+     
+        click_button 'Reveal Variables'
+
+        expect(page).not_to have_css('.reveal-variables')
+        expect(page).to have_selector('.js-build-variable', text: 'TRIGGER_KEY_1')
+        expect(page).to have_selector('.js-build-value', text: 'TRIGGER_VALUE_1')
+      end
+    end    
   end
 
   describe "POST /:project/builds/:id/cancel" do

spec/views/projects/builds/show.html.haml_spec.rb

@@ -59,14 +59,10 @@ describe 'projects/builds/show' do
     end
 
     it 'shows trigger variables in separate lines' do
-      expect(rendered).to have_css('code', text: variable_regexp('TRIGGER_KEY_1', 'TRIGGER_VALUE_1'))
-      expect(rendered).to have_css('code', text: variable_regexp('TRIGGER_KEY_2', 'TRIGGER_VALUE_2'))
+      expect(rendered).to have_css('.js-build-variable', visible: false, text: 'TRIGGER_KEY_1')
+      expect(rendered).to have_css('.js-build-variable', visible: false, text: 'TRIGGER_KEY_2')
+      expect(rendered).to have_css('.js-build-value', visible: false, text: 'TRIGGER_VALUE_1')
+      expect(rendered).to have_css('.js-build-value', visible: false, text: 'TRIGGER_VALUE_2')
     end
   end
-
-  private
-
-  def variable_regexp(key, value)
-    /\A#{Regexp.escape("#{key}=#{value}")}\Z/
-  end
 end