Refactor elements used by ci_variable and ::CICD

Many elements defined in the QA framework in ci_variable.rb
call elements and methods that are not framework specific.

Fix these issues, as well as use data-qa-selector s

app/views/layouts/nav/sidebar/_project.html.haml

@@ -9,7 +9,7 @@
           = @project.name
     %ul.sidebar-top-level-items
       = nav_link(path: sidebar_projects_paths, html_options: { class: 'home' }) do
-        = link_to project_path(@project), class: 'shortcuts-project qa-link-project' do
+        = link_to project_path(@project), class: 'shortcuts-project', data: { qa_selector: 'project_link' } do
           .nav-icon-container
             = sprite_icon('home')
           %span.nav-item-name
@@ -26,7 +26,7 @@
               %span= _('Details')
 
           = nav_link(path: 'projects#activity') do
-            = link_to activity_project_path(@project), title: _('Activity'), class: 'shortcuts-project-activity qa-activity-link' do
+            = link_to activity_project_path(@project), title: _('Activity'), class: 'shortcuts-project-activity', data: { qa_selector: 'activity_link' } do
               %span= _('Activity')
 
           - if project_nav_tab?(:releases)
@@ -146,7 +146,7 @@
 
       - if project_nav_tab? :merge_requests
         = nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :labels, :milestones]) do
-          = link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests qa-merge-requests-link' do
+          = link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests', data: { qa_selector: 'merge_requests_link' } do
             .nav-icon-container
               = sprite_icon('git-merge')
             %span.nav-item-name#js-onboarding-mr-link
@@ -277,7 +277,7 @@
       - if project_nav_tab? :wiki
         - wiki_url = project_wiki_path(@project, :home)
         = nav_link(controller: :wikis) do
-          = link_to wiki_url, class: 'shortcuts-wiki qa-wiki-link' do
+          = link_to wiki_url, class: 'shortcuts-wiki', data: { qa_selector: 'wiki_link' } do
             .nav-icon-container
               = sprite_icon('book')
             %span.nav-item-name

app/views/projects/settings/ci_cd/_autodevops_form.html.haml

@@ -8,7 +8,7 @@
             .card.auto-devops-card
               .card-body
                 .form-check
-                  = form.check_box :enabled, class: 'form-check-input js-toggle-extra-settings', checked: auto_devops_enabled
+                  = form.check_box :enabled, class: 'form-check-input js-toggle-extra-settings', checked: auto_devops_enabled, data: { qa_selector: 'enable_autodevops_checkbox' }
                   = form.label :enabled, class: 'form-check-label' do
                     %strong= s_('CICD|Default to Auto DevOps pipeline')
                     - if auto_devops_enabled
@@ -42,4 +42,4 @@
                     = s_('CICD|Automatic deployment to staging, manual deployment to production')
                     = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'incremental-rollout-to-production'), target: '_blank'
 
-          = f.submit _('Save changes'), class: "btn btn-success prepend-top-15"
+          = f.submit _('Save changes'), class: "btn btn-success prepend-top-15", data: { qa_selector: 'save_changes_button' }

app/views/projects/settings/ci_cd/show.html.haml

@@ -16,7 +16,7 @@
   .settings-content
     = render 'form'
 
-%section.qa-autodevops-settings.settings#autodevops-settings.no-animate{ class: ('expanded' if expanded) }
+%section.settings#autodevops-settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'autodevops_settings_content' } }
   .settings-header
     %h4
       = s_('CICD|Auto DevOps')
@@ -30,7 +30,7 @@
 
 = render_if_exists 'projects/settings/ci_cd/protected_environments', expanded: expanded
 
-%section.qa-runners-settings.settings.no-animate#js-runners-settings{ class: ('expanded' if expanded) }
+%section.settings.no-animate#js-runners-settings{ class: ('expanded' if expanded), data: { qa_selector: 'runners_settings_content' } }
   .settings-header
     %h4
       = _("Runners")
@@ -41,7 +41,7 @@
   .settings-content
     = render 'projects/runners/index'
 
-%section.qa-variables-settings.settings.no-animate{ class: ('expanded' if expanded) }
+%section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'variables_settings_content' } }
   .settings-header
     = render 'ci/variables/header', expanded: expanded
   .settings-content

qa/qa/page/project/settings/ci_cd.rb

@@ -8,33 +8,32 @@ module QA
           include Common
 
           view 'app/views/projects/settings/ci_cd/show.html.haml' do
-            element :autodevops_settings
-            element :runners_settings
-            element :variables_settings
+            element :autodevops_settings_content
+            element :runners_settings_content
+            element :variables_settings_content
           end
 
           view 'app/views/projects/settings/ci_cd/_autodevops_form.html.haml' do
-            element :enable_auto_devops_field, 'check_box :enabled' # rubocop:disable QA/ElementWithPattern
-            element :enable_auto_devops_button, "%strong= s_('CICD|Default to Auto DevOps pipeline')" # rubocop:disable QA/ElementWithPattern
-            element :save_changes_button, "submit _('Save changes')" # rubocop:disable QA/ElementWithPattern
+            element :enable_autodevops_checkbox
+            element :save_changes_button
           end
 
           def expand_runners_settings(&block)
-            expand_section(:runners_settings) do
+            expand_section(:runners_settings_content) do
               Settings::Runners.perform(&block)
             end
           end
 
           def expand_ci_variables(&block)
-            expand_section(:variables_settings) do
+            expand_section(:variables_settings_content) do
               Settings::CiVariables.perform(&block)
             end
           end
 
           def enable_auto_devops
-            expand_section(:autodevops_settings) do
-              check 'Default to Auto DevOps pipeline'
-              click_on 'Save changes'
+            expand_section(:autodevops_settings_content) do
+              check_element :enable_autodevops_checkbox
+              click_element :save_changes_button
             end
           end
         end

qa/qa/page/project/sub_menus/project.rb

@@ -10,7 +10,7 @@ module QA
           def self.included(base)
             base.class_eval do
               view 'app/views/layouts/nav/sidebar/_project.html.haml' do
-                element :link_project
+                element :project_link
               end
             end
           end
@@ -18,7 +18,7 @@ module QA
           def click_project
             retry_on_exception do
               within_sidebar do
-                click_element(:link_project)
+                click_element(:project_link)
               end
             end
           end