Add support for toggling masked on UI

In addition to API, add support for toggling mased on UI too.

(Though fabricate_via_browser_ui is private)

app/views/ci/variables/_variable_row.html.haml

@@ -59,7 +59,7 @@
         .append-right-default
           = s_("CiVariable|Masked")
         %button{ type: 'button',
-          class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if is_masked}",
+          class: "js-project-feature-toggle project-feature-toggle qa-variable-masked #{'is-checked' if is_masked}",
           "aria-label": s_("CiVariable|Toggle masked") }
           %input{ type: "hidden",
             class: 'js-ci-variable-input-masked js-project-feature-toggle-input',

qa/qa/page/project/settings/ci_variables.rb

@@ -11,6 +11,7 @@ module QA
             element :variable_row, '.ci-variable-row-body' # rubocop:disable QA/ElementWithPattern
             element :variable_key, '.qa-ci-variable-input-key' # rubocop:disable QA/ElementWithPattern
             element :variable_value, '.qa-ci-variable-input-value' # rubocop:disable QA/ElementWithPattern
+            element :variable_masked
           end
 
           view 'app/views/ci/variables/_index.html.haml' do
@@ -18,7 +19,7 @@ module QA
             element :reveal_values, '.js-secret-value-reveal-button' # rubocop:disable QA/ElementWithPattern
           end
 
-          def fill_variable(key, value)
+          def fill_variable(key, value, masked)
             keys = all_elements(:ci_variable_input_key)
             index = keys.size - 1
 
@@ -32,6 +33,9 @@ module QA
             # The code was inspired from:
             # https://github.com/teamcapybara/capybara/blob/679548cea10773d45e32808f4d964377cfe5e892/lib/capybara/selenium/node.rb#L217
             execute_script("arguments[0].value = #{value.to_json}", node)
+
+            masked_node = all_elements(:variable_masked)[index]
+            toggle_masked(masked_node, masked)
           end
 
           def save_variables
@@ -47,6 +51,24 @@ module QA
               find('.qa-ci-variable-input-value').value
             end
           end
+
+          private
+
+          def toggle_masked(masked_node, masked)
+            wait(reload: false) do
+              masked_node.click
+
+              masked ? masked_enabled?(masked_node) : masked_disabled?(masked_node)
+            end
+          end
+
+          def masked_enabled?(masked_node)
+            masked_node[:class].include?('is-checked')
+          end
+
+          def masked_disabled?(masked_node)
+            !masked_enabled?(masked_node)
+          end
         end
       end
     end

qa/qa/resource/ci_variable.rb

@@ -19,7 +19,7 @@ module QA
 
         Page::Project::Settings::CICD.perform do |setting|
           setting.expand_ci_variables do |page|
-            page.fill_variable(key, value)
+            page.fill_variable(key, value, masked)
 
             page.save_variables
           end