Refactor dynamic panel link selector

See https://gitlab.com/gitlab-org/quality/team-tasks/-/issues/918

app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue

@@ -47,7 +47,8 @@ export default {
       >
         <a
           :href="`#${panel.name}`"
-          :data-qa-selector="`${panel.name}_link`"
+          data-qa-selector="panel_link"
+          :data-qa-panel-name="panel.name"
           class="new-namespace-panel gl-display-flex gl-flex-shrink-0 gl-flex-direction-column gl-lg-flex-direction-row gl-align-items-center gl-rounded-base gl-border-gray-100 gl-border-solid gl-border-1 gl-w-full gl-py-6 gl-px-8 gl-hover-text-decoration-none!"
           @click="track('click_tab', { label: panel.name })"
         >

ee/spec/features/admin/admin_audit_logs_spec.rb

@@ -190,7 +190,7 @@ RSpec.describe 'Admin::AuditLogs', :js do
         click_link 'Impersonate'
 
         visit(new_project_path)
-        find('[data-qa-selector="blank_project_link"]').click
+        find('[data-qa-panel-name="blank_project"]').click
 
         fill_in(:project_name, with: 'Gotham City')
 

ee/spec/features/projects/custom_projects_template_spec.rb

@@ -43,7 +43,7 @@ RSpec.describe 'Project' do
         new_path = 'example-custom-project-template'
         new_name = 'Example Custom Project Template'
 
-        find('[data-qa-selector="create_from_template_link"]').click
+        find('[data-qa-panel-name="create_from_template"]').click
         find('.project-template .custom-instance-project-templates-tab').click
         find("label[for='#{projects.first.name}']").click
 
@@ -68,7 +68,7 @@ RSpec.describe 'Project' do
         new_path = 'example-custom-project-template'
         new_name = 'Example Custom Project Template'
 
-        find('[data-qa-selector="create_from_template_link"]').click
+        find('[data-qa-panel-name="create_from_template"]').click
         find('.project-template .custom-instance-project-templates-tab').click
         find("label[for='#{projects.first.name}']").click
 
@@ -90,7 +90,7 @@ RSpec.describe 'Project' do
         new_path = 'example-custom-project-template'
         new_name = 'Example Custom Project Template'
 
-        find('[data-qa-selector="create_from_template_link"]').click
+        find('[data-qa-panel-name="create_from_template"]').click
         find('.project-template .custom-instance-project-templates-tab').click
         find("label[for='#{projects.first.name}']").click
 
@@ -111,7 +111,7 @@ RSpec.describe 'Project' do
       it 'has a working pagination', :js do
         last_project = "label[for='#{projects.last.name}']"
 
-        find('[data-qa-selector="create_from_template_link"]').click
+        find('[data-qa-panel-name="create_from_template"]').click
         find('.project-template .custom-instance-project-templates-tab').click
 
         expect(page).to have_css('.custom-project-templates .gl-pagination')

ee/spec/features/projects/new_project_spec.rb

@@ -17,7 +17,7 @@ RSpec.describe 'New project', :js do
 
       it 'shows mirror repository checkbox enabled', :js do
         visit new_project_path
-        find('[data-qa-selector="import_project_link"]').click
+        find('[data-qa-panel-name="import_project"]').click
         first('.js-import-git-toggle-button').click
 
         expect(page).to have_unchecked_field('Mirror repository', disabled: false)
@@ -31,7 +31,7 @@ RSpec.describe 'New project', :js do
 
       it 'does not show mirror repository option' do
         visit new_project_path
-        find('[data-qa-selector="import_project_link"]').click
+        find('[data-qa-panel-name="import_project"]').click
         first('.js-import-git-toggle-button').click
 
         expect(page).not_to have_content('Mirror repository')
@@ -60,16 +60,16 @@ RSpec.describe 'New project', :js do
       it 'shows CI/CD tab and pane' do
         visit new_project_path
 
-        expect(page).to have_css('[data-qa-selector="cicd_for_external_repo_link"]')
+        expect(page).to have_css('[data-qa-panel-name="cicd_for_external_repo"]')
 
-        find('[data-qa-selector="cicd_for_external_repo_link"]').click
+        find('[data-qa-panel-name="cicd_for_external_repo"]').click
 
         expect(page).to have_css('#ci-cd-project-pane')
       end
 
       it '"Import project" tab creates projects with features enabled' do
         visit new_project_path
-        find('[data-qa-selector="import_project_link"]').click
+        find('[data-qa-panel-name="import_project"]').click
 
         page.within '#import-project-pane' do
           first('.js-import-git-toggle-button').click
@@ -89,7 +89,7 @@ RSpec.describe 'New project', :js do
 
       it 'creates CI/CD project from repo URL', :sidekiq_might_not_need_inline do
         visit new_project_path
-        find('[data-qa-selector="cicd_for_external_repo_link"]').click
+        find('[data-qa-panel-name="cicd_for_external_repo"]').click
 
         page.within '#ci-cd-project-pane' do
           find('.js-import-git-toggle-button').click
@@ -109,7 +109,7 @@ RSpec.describe 'New project', :js do
 
       it 'creates CI/CD project from GitHub' do
         visit new_project_path
-        find('[data-qa-selector="cicd_for_external_repo_link"]').click
+        find('[data-qa-panel-name="cicd_for_external_repo"]').click
 
         page.within '#ci-cd-project-pane' do
           find('.js-import-github').click
@@ -146,7 +146,7 @@ RSpec.describe 'New project', :js do
 
       it 'stays on GitHub import page after access token failure' do
         visit new_project_path
-        find('[data-qa-selector="cicd_for_external_repo_link"]').click
+        find('[data-qa-panel-name="cicd_for_external_repo"]').click
 
         page.within '#ci-cd-project-pane' do
           find('.js-import-github').click
@@ -170,7 +170,7 @@ RSpec.describe 'New project', :js do
       it 'does not show CI/CD only tab' do
         visit new_project_path
 
-        expect(page).not_to have_css('[data-qa-selector="cicd_for_external_repo_link"]')
+        expect(page).not_to have_css('[data-qa-panel-name="cicd_for_external_repo"]')
       end
     end
   end
@@ -458,7 +458,7 @@ RSpec.describe 'New project', :js do
     def visit_create_from_built_in_templates_tab
       visit new_project_path
 
-      find('[data-qa-selector="create_from_template_link"]').click
+      find('[data-qa-panel-name="create_from_template"]').click
     end
   end
 end

qa/qa/ee/page/project/new.rb

@@ -29,7 +29,7 @@ module QA
               end
 
               view 'app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue' do
-                element :cicd_for_external_repo_link, ':data-qa-selector="`${panel.name}_link`"' # rubocop:disable QA/ElementWithPattern
+                element :panel_link
               end
             end
           end
@@ -51,7 +51,7 @@ module QA
           end
 
           def click_cicd_for_external_repo
-            click_element :cicd_for_external_repo_link
+            click_element(:panel_link, panel_name: 'cicd_for_external_repo')
           end
         end
       end

qa/qa/page/group/new.rb

@@ -21,6 +21,10 @@ module QA
           element :connect_instance_button
         end
 
+        view 'app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue' do
+          element :panel_link
+        end
+
         def set_path(path)
           fill_element(:group_path_field, path)
           fill_element(:group_name_field, path)
@@ -62,7 +66,7 @@ module QA
         end
 
         def switch_to_import_tab
-          click_element("import-group-pane_link")
+          click_element(:panel_link, panel_name: 'import-group-pane')
         end
       end
     end

qa/qa/page/project/new.rb

@@ -25,16 +25,15 @@ module QA
         end
 
         view 'app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue' do
-          element :blank_project_link, ':data-qa-selector="`${panel.name}_link`"' # rubocop:disable QA/ElementWithPattern
-          element :create_from_template_link, ':data-qa-selector="`${panel.name}_link`"' # rubocop:disable QA/ElementWithPattern
+          element :panel_link
         end
 
         def click_blank_project_link
-          click_element :blank_project_link
+          click_element(:panel_link, panel_name: 'blank_project')
         end
 
         def click_create_from_template_link
-          click_element :create_from_template_link
+          click_element(:panel_link, panel_name: 'create_from_template')
         end
 
         def choose_test_namespace

spec/features/admin/admin_appearance_spec.rb

@@ -90,7 +90,7 @@ RSpec.describe 'Admin Appearance' do
     sign_in(admin)
     gitlab_enable_admin_mode_sign_in(admin)
     visit new_project_path
-    find('[data-qa-selector="blank_project_link"]').click
+    find('[data-qa-panel-name="blank_project"]').click
 
     expect_custom_new_project_appearance(appearance)
   end

spec/features/projects/import_export/import_file_spec.rb

@@ -62,6 +62,6 @@ RSpec.describe 'Import/Export - project import integration test', :js do
   end
 
   def click_import_project
-    find('[data-qa-selector="import_project_link"]').click
+    find('[data-qa-panel-name="import_project"]').click
   end
 end

spec/features/projects/new_project_spec.rb

@@ -89,7 +89,7 @@ RSpec.describe 'New project', :js do
         )
 
         visit new_project_path
-        find('[data-qa-selector="blank_project_link"]').click
+        find('[data-qa-panel-name="blank_project"]').click
 
         expect(page).to have_content 'Other visibility settings have been disabled by the administrator.'
       end
@@ -100,7 +100,7 @@ RSpec.describe 'New project', :js do
         )
 
         visit new_project_path
-        find('[data-qa-selector="blank_project_link"]').click
+        find('[data-qa-panel-name="blank_project"]').click
 
         expect(page).to have_content 'Visibility settings have been disabled by the administrator.'
       end
@@ -115,14 +115,14 @@ RSpec.describe 'New project', :js do
 
       it 'shows "New project" page', :js do
         visit new_project_path
-        find('[data-qa-selector="blank_project_link"]').click
+        find('[data-qa-panel-name="blank_project"]').click
 
         expect(page).to have_content('Project name')
         expect(page).to have_content('Project URL')
         expect(page).to have_content('Project slug')
 
         click_link('New project')
-        find('[data-qa-selector="import_project_link"]').click
+        find('[data-qa-panel-name="import_project"]').click
 
         expect(page).to have_link('GitHub')
         expect(page).to have_link('Bitbucket')
@@ -135,7 +135,7 @@ RSpec.describe 'New project', :js do
         before do
           visit new_project_path
 
-          find('[data-qa-selector="import_project_link"]').click
+          find('[data-qa-panel-name="import_project"]').click
         end
 
         it 'has Manifest file' do
@@ -149,7 +149,7 @@ RSpec.describe 'New project', :js do
             stub_application_setting(default_project_visibility: level)
 
             visit new_project_path
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
             page.within('#blank-project-pane') do
               expect(find_field("project_visibility_level_#{level}")).to be_checked
             end
@@ -157,7 +157,7 @@ RSpec.describe 'New project', :js do
 
           it "saves visibility level #{level} on validation error" do
             visit new_project_path
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
 
             choose(key)
             click_button('Create project')
@@ -177,7 +177,7 @@ RSpec.describe 'New project', :js do
           context 'when admin mode is enabled', :enable_admin_mode do
             it 'has private selected' do
               visit new_project_path(namespace_id: group.id)
-              find('[data-qa-selector="blank_project_link"]').click
+              find('[data-qa-panel-name="blank_project"]').click
 
               page.within('#blank-project-pane') do
                 expect(find_field("project_visibility_level_#{Gitlab::VisibilityLevel::PRIVATE}")).to be_checked
@@ -204,7 +204,7 @@ RSpec.describe 'New project', :js do
           context 'when admin mode is enabled', :enable_admin_mode do
             it 'has private selected' do
               visit new_project_path(namespace_id: group.id, project: { visibility_level: Gitlab::VisibilityLevel::PRIVATE })
-              find('[data-qa-selector="blank_project_link"]').click
+              find('[data-qa-panel-name="blank_project"]').click
 
               page.within('#blank-project-pane') do
                 expect(find_field("project_visibility_level_#{Gitlab::VisibilityLevel::PRIVATE}")).to be_checked
@@ -225,7 +225,7 @@ RSpec.describe 'New project', :js do
       context 'Readme selector' do
         it 'shows the initialize with Readme checkbox on "Blank project" tab' do
           visit new_project_path
-          find('[data-qa-selector="blank_project_link"]').click
+          find('[data-qa-panel-name="blank_project"]').click
 
           expect(page).to have_css('input#project_initialize_with_readme')
           expect(page).to have_content('Initialize repository with a README')
@@ -233,7 +233,7 @@ RSpec.describe 'New project', :js do
 
         it 'does not show the initialize with Readme checkbox on "Create from template" tab' do
           visit new_project_path
-          find('[data-qa-selector="create_from_template_link"]').click
+          find('[data-qa-panel-name="create_from_template"]').click
           first('.choose-template').click
 
           page.within '.project-fields-form' do
@@ -244,7 +244,7 @@ RSpec.describe 'New project', :js do
 
         it 'does not show the initialize with Readme checkbox on "Import project" tab' do
           visit new_project_path
-          find('[data-qa-selector="import_project_link"]').click
+          find('[data-qa-panel-name="import_project"]').click
           first('.js-import-git-toggle-button').click
 
           page.within '#import-project-pane' do
@@ -258,7 +258,7 @@ RSpec.describe 'New project', :js do
         context 'with user namespace' do
           before do
             visit new_project_path
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
           end
 
           it 'selects the user namespace' do
@@ -274,7 +274,7 @@ RSpec.describe 'New project', :js do
           before do
             group.add_owner(user)
             visit new_project_path(namespace_id: group.id)
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
           end
 
           it 'selects the group namespace' do
@@ -291,7 +291,7 @@ RSpec.describe 'New project', :js do
           before do
             group.add_maintainer(user)
             visit new_project_path(namespace_id: subgroup.id)
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
           end
 
           it 'selects the group namespace' do
@@ -311,7 +311,7 @@ RSpec.describe 'New project', :js do
             internal_group.add_owner(user)
             private_group.add_owner(user)
             visit new_project_path(namespace_id: public_group.id)
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
           end
 
           it 'enables the correct visibility options' do
@@ -341,7 +341,7 @@ RSpec.describe 'New project', :js do
       context 'Import project options', :js do
         before do
           visit new_project_path
-          find('[data-qa-selector="import_project_link"]').click
+          find('[data-qa-panel-name="import_project"]').click
         end
 
         context 'from git repository url, "Repo by URL"' do
@@ -405,7 +405,7 @@ RSpec.describe 'New project', :js do
           before do
             group.add_developer(user)
             visit new_project_path(namespace_id: group.id)
-            find('[data-qa-selector="blank_project_link"]').click
+            find('[data-qa-panel-name="blank_project"]').click
           end
 
           it 'selects the group namespace' do

spec/features/projects/user_creates_project_spec.rb

@@ -15,7 +15,7 @@ RSpec.describe 'User creates a project', :js do
   it 'creates a new project' do
     visit(new_project_path)
 
-    find('[data-qa-selector="blank_project_link"]').click
+    find('[data-qa-panel-name="blank_project"]').click
     fill_in(:project_name, with: 'Empty')
 
     # part of the new_project_readme experiment
@@ -46,7 +46,7 @@ RSpec.describe 'User creates a project', :js do
     it 'creates a new project' do
       visit(new_project_path)
 
-      find('[data-qa-selector="blank_project_link"]').click
+      find('[data-qa-panel-name="blank_project"]').click
       fill_in :project_name, with: 'A Subgroup Project'
       fill_in :project_path, with: 'a-subgroup-project'
 
@@ -75,7 +75,7 @@ RSpec.describe 'User creates a project', :js do
     it 'creates a new project' do
       visit(new_project_path)
 
-      find('[data-qa-selector="blank_project_link"]').click
+      find('[data-qa-panel-name="blank_project"]').click
       fill_in :project_name, with: 'a-new-project'
       fill_in :project_path, with: 'a-new-project'
 

spec/features/projects_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe 'Project' do
 
     shared_examples 'creates from template' do |template, sub_template_tab = nil|
       it "is created from template", :js do
-        find('[data-qa-selector="create_from_template_link"]').click
+        find('[data-qa-panel-name="create_from_template"]').click
         find(".project-template #{sub_template_tab}").click if sub_template_tab
         find("label[for=#{template.name}]").click
         fill_in("project_name", with: template.name)