add feature test

add feature test

add feature test

add feature test

remove test to builds_spec

remove feature test to builds_spec

remove feature test to builds_spec

add changes to methods and remove FactoryGirl

add changes to methods and remove FactoryGirl

adding changes to test and js file

changes grammar

update changelog

rename file name

update files after review

update files after review

update files after review

7 files changed, 37 insertions, 31 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 16f5258a275..982b4dd5e5a 100644
--- a/CHANGELOG
+++ b/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
@@ -130,9 +131,6 @@ 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
 
diff --git a/app/assets/javascripts/build_variables.js b/app/assets/javascripts/build_variables.js
deleted file mode 100644
index 3b77c1d4f37..00000000000
--- a/app/assets/javascripts/build_variables.js
+++ /dev/null
@@ -1,7 +0,0 @@
-$(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/javascripts/build_variables.js.es6 b/app/assets/javascripts/build_variables.js.es6
new file mode 100644
index 00000000000..8d3e29794a1
--- /dev/null
+++ b/app/assets/javascripts/build_variables.js.es6
@@ -0,0 +1,6 @@
+$(function(){
+  $('.reveal-variables').off('click').on('click',function(){
+    $('.js-build').toggle().niceScroll();
+    $(this).hide();
+  });
+});
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 6eae609555b..c5367c5a097 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -228,14 +228,12 @@ header.header-pinned-nav {
 }
 
 .js-build-variable {
-  color: #c7254e;
-  font-size: 100%;
-  border-radius: 5px;
+  color: $code-color;
 }
 
 .js-build-value {
   padding: 2px 4px;
   font-size: 100%;
-  color: #000;
-  background-color: #fff;
+  color: $black;
+  background-color: $white-light;
 }
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 585cc310be3..ba5354a1690 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -94,8 +94,9 @@
 
 
           - @build.trigger_request.variables.each do |key, value|
-            .hide.js-build-variable #{key} 
-            .hide.js-build-value  #{value}
+            .hide.js-build
+              .js-build-variable= key 
+              .js-build-value= value
 
     .block
       .title
diff --git a/spec/features/projects/builds_spec.rb b/spec/features/projects/builds_spec.rb
index d5d571e49bc..ea9e33ce722 100644
--- a/spec/features/projects/builds_spec.rb
+++ b/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')
+     
+        find('.reveal-variables').click
+
+        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
diff --git a/spec/views/projects/builds/show.html.haml_spec.rb b/spec/views/projects/builds/show.html.haml_spec.rb
index 1dc2048e1bc..446ba3bfa14 100644
--- a/spec/views/projects/builds/show.html.haml_spec.rb
+++ b/spec/views/projects/builds/show.html.haml_spec.rb
@@ -59,20 +59,10 @@ describe 'projects/builds/show' do
     end
 
     it 'shows trigger variables in separate lines' do
-      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'))
+      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(key)
-    /\A#{Regexp.escape("#{key}")}\Z/
-  end
- 
-  def variable_regexp_value(value)
-    /\A#{Regexp.escape("#{value}")}\Z/
-  end
 end