add js file

show variables on-click

show variables on-click

show variables on-click

remove = and add new js classes into sidebar.scss

show variables by clicking button

show variables by clicking button

show variables by clicking button

show variables by clicking button

use id for a class

add nicescroll

add nicescroll

5 files changed, 36 insertions, 11 deletions

diff --git a/CHANGELOG b/CHANGELOG
index bed16907410..16f5258a275 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -130,6 +130,9 @@ v 8.11.2
   - Show "Create Merge Request" widget for push events to fork projects on the source project. !5978
   - Use gitlab-workhorse 0.7.11 !5983
   - Does not halt the GitHub import process when an error occurs. !5763
+  - Show value variables onclick (Katarzyna Kobierska Ula Budziszewska)
+
+v 8.11.1 (unreleased)
   - Fix file links on project page when default view is Files !5933
   - Fixed enter key in search input not working !5888
 
@@ -535,10 +538,6 @@ v 8.9.7 (unreleased)
 
 v 8.9.6
   - Fix importing of events under notes for GitLab projects
-  - Added setting to set new users by default as external !4545 (Dravere)
-  - Add min value for project limit field on user's form !3622 (jastkand)
-  - Add reminder to not paste private SSH keys !4399 (Ingo Blechschmidt)
-  - Render only commit message title in builds
 
 v 8.9.5
   - Add more debug info to import/export and memory killer. !5108
diff --git a/app/assets/javascripts/build_variables.js b/app/assets/javascripts/build_variables.js
new file mode 100644
index 00000000000..3b77c1d4f37
--- /dev/null
+++ b/app/assets/javascripts/build_variables.js
@@ -0,0 +1,7 @@
+$(function(){
+  $('.reveal-variables').off('click').on('click',function(){
+    $('.js-build-variable').toggle();
+    $('.js-build-value').toggle().niceScroll();
+    $('.reveal-variables').show();
+  });
+});
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 015fe3debf9..6eae609555b 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -226,3 +226,16 @@ header.header-pinned-nav {
 .right-sidebar {
   border-left: 1px solid $border-color;
 }
+
+.js-build-variable {
+  color: #c7254e;
+  font-size: 100%;
+  border-radius: 5px;
+}
+
+.js-build-value {
+  padding: 2px 4px;
+  font-size: 100%;
+  color: #000;
+  background-color: #fff;
+}
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 5ce36a475a9..585cc310be3 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -90,12 +90,12 @@
 
         - if @build.trigger_request.variables
           %p
-            %span.build-light-text Variables:
+            .btn.group.btn-group-justified.reveal-variables Reveal Variables
 
 
           - @build.trigger_request.variables.each do |key, value|
-            %code
-              #{key}=#{value}
+            .hide.js-build-variable #{key} 
+            .hide.js-build-value  #{value}
 
     .block
       .title
diff --git a/spec/views/projects/builds/show.html.haml_spec.rb b/spec/views/projects/builds/show.html.haml_spec.rb
index 464051063d8..1dc2048e1bc 100644
--- a/spec/views/projects/builds/show.html.haml_spec.rb
+++ b/spec/views/projects/builds/show.html.haml_spec.rb
@@ -59,14 +59,20 @@ 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: variable_regexp_key('TRIGGER_KEY_1'))
+      expect(rendered).to have_css('.js-build-variable', visible: false, text: variable_regexp_key('TRIGGER_KEY_2'))
+      expect(rendered).to have_css('.js-build-value', visible: false, text: variable_regexp_value('TRIGGER_VALUE_1'))
+      expect(rendered).to have_css('.js-build-value', visible: false, text: variable_regexp_value('TRIGGER_VALUE_2'))
     end
   end
 
   private
 
-  def variable_regexp(key, value)
-    /\A#{Regexp.escape("#{key}=#{value}")}\Z/
+  def variable_regexp_key(key)
+    /\A#{Regexp.escape("#{key}")}\Z/
+  end
+ 
+  def variable_regexp_value(value)
+    /\A#{Regexp.escape("#{value}")}\Z/
   end
 end