Update/remove old vue qa selectors

Updates deprecated vue qa class selectors to data-qa-selectors
Removes unused selectors

app/assets/javascripts/access_tokens/components/new_access_token_app.vue

@@ -42,7 +42,6 @@ export default {
     formInputGroupProps() {
       return {
         id: this.$options.tokenInputId,
-        class: 'qa-created-access-token',
         'data-qa-selector': 'created_access_token_field',
         name: this.$options.tokenInputId,
       };

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -176,7 +176,11 @@ export default {
             :placeholder="placeholder"
           />
         </form>
-        <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list">
+        <ul
+          v-if="isCreatingNewFile"
+          class="file-templates gl-mt-3 list-inline"
+          data-qa-selector="template_list_content"
+        >
           <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
             <gl-button
               variant="dashed"

app/assets/javascripts/jobs/components/job_app.vue

@@ -197,7 +197,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation gl-mt-6" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-6" />
 
     <template v-else-if="shouldRenderContent">
       <div class="build-page" data-testid="job-content">

app/assets/javascripts/pipelines/components/pipeline_mini_graph/job_item.vue

@@ -158,7 +158,7 @@ export default {
       :href="detailsPath"
       :title="tooltipText"
       :class="jobClasses"
-      class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none"
+      class="js-pipeline-graph-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none"
       data-testid="job-with-link"
       @click.stop="hideTooltips"
       @mouseout="hideTooltips"

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue

@@ -83,9 +83,7 @@ export default {
 
       <span class="font-weight-bold">{{ __('Pipeline') }}</span>
 
-      <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path"
-        >#{{ pipeline.id }}</a
-      >
+      <a :href="pipeline.path" class="js-pipeline-path link-commit">#{{ pipeline.id }}</a>
       <template v-if="hasRef">
         {{ __('from') }}
         <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a>

app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -3,7 +3,6 @@ import { GlLink, GlIcon, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import {
   issuableIconMap,
-  issuableQaClassMap,
   linkedIssueTypesMap,
   linkedIssueTypesTextMap,
   issuablesBlockHeaderTextMap,
@@ -142,9 +141,6 @@ export default {
     issuableTypeIcon() {
       return issuableIconMap[this.issuableType];
     },
-    qaClass() {
-      return issuableQaClassMap[this.issuableType];
-    },
     toggleIcon() {
       return this.isOpen ? 'chevron-lg-up' : 'chevron-lg-down';
     },
@@ -205,7 +201,6 @@ export default {
           data-qa-selector="related_issues_plus_button"
           data-testid="related-issues-plus-button"
           :aria-label="addIssuableButtonText"
-          :class="qaClass"
           class="gl-ml-3"
           @click="addButtonClick"
         >

app/assets/javascripts/related_issues/constants.js

@@ -99,15 +99,6 @@ export const issuableIconMap = {
   [issuableTypesMap.EPIC]: 'epic',
 };
 
-/**
- * These are used to map issuableType to the correct QA class.
- * Since these are never used for any display purposes, don't wrap
- * them inside i18n functions.
- */
-export const issuableQaClassMap = {
-  [issuableTypesMap.EPIC]: 'qa-add-epics-button',
-};
-
 export const PathIdSeparator = {
   Epic: '&',
   Issue: '#',

app/assets/javascripts/repository/components/breadcrumbs.vue

@@ -191,7 +191,7 @@ export default {
               href: `${this.newBlobPath}/${
                 this.currentPath ? encodeURIComponent(this.currentPath) : ''
               }`,
-              class: 'qa-new-file-option',
+              'data-qa-selector': 'new_file_menu_item',
             },
             text: __('New file'),
           },
@@ -300,7 +300,11 @@ export default {
         </router-link>
       </li>
       <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
-        <gl-dropdown toggle-class="add-to-tree qa-add-to-tree gl-ml-2">
+        <gl-dropdown
+          toggle-class="add-to-tree gl-ml-2"
+          data-testid="add-to-tree"
+          data-qa-selector="add_to_tree_dropdown"
+        >
           <template #button-content>
             <span class="sr-only">{{ __('Add to tree') }}</span>
             <gl-icon name="plus" :size="16" class="float-left" />

app/assets/javascripts/repository/components/last_commit.vue

@@ -135,7 +135,7 @@ export default {
       <div
         class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-flex-start gl-flex-grow-1 gl-min-w-0"
       >
-        <div class="commit-content qa-commit-content">
+        <div class="commit-content" data-qa-selector="commit_content">
           <gl-link
             v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml"
             :href="commit.webPath"

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

@@ -57,13 +57,19 @@ export default {
     },
     cssClass() {
       const className = this.status.group;
-      return className ? `ci-status ci-${className} qa-status-badge` : 'ci-status qa-status-badge';
+      return className ? `ci-status ci-${className}` : 'ci-status';
     },
   },
 };
 </script>
 <template>
-  <a v-gl-tooltip :href="detailsPath" :class="cssClass" :title="title">
+  <a
+    v-gl-tooltip
+    :href="detailsPath"
+    :class="cssClass"
+    :title="title"
+    data-qa-selector="status_badge_link"
+  >
     <ci-icon :status="status" :css-classes="iconClasses" />
 
     <template v-if="showText">

app/views/shared/access_tokens/_created_container.html.haml

@@ -3,7 +3,7 @@
     = _('Your new %{type}') % { type: type }
   .form-group
     .input-group
-      = text_field_tag 'created-personal-access-token', new_token_value, readonly: true, class: 'qa-created-access-token form-control js-select-on-focus', 'aria-describedby' => 'created-token-help-block'
+      = text_field_tag 'created-personal-access-token', new_token_value, readonly: true, class: 'form-control js-select-on-focus', data: { qa_selector: 'created_access_token_field' }, 'aria-describedby' => 'created-token-help-block'
       %span.input-group-append
         = clipboard_button(text: new_token_value, title: _('Copy %{type}') % { type: type }, placement: 'left', class: 'input-group-text btn-default btn-clipboard')
     %span#created-token-help-block.form-text.text-muted.text-danger

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -150,7 +150,7 @@ export default {
       >
         <epic-actions-split-button
           :allow-sub-epics="allowSubEpics"
-          class="js-add-epics-issues-button qa-add-epics-button w-100"
+          class="js-add-epics-issues-button w-100"
           @showAddIssueForm="showAddIssueForm"
           @showCreateIssueForm="showCreateIssueForm"
           @showAddEpicForm="showAddEpicForm"

ee/app/assets/javascripts/repository/components/code_owners.vue

@@ -99,7 +99,7 @@ export default {
 <template>
   <div
     v-if="hasCodeOwners && !isFetching"
-    class="well-segment blob-auxiliary-viewer file-owner-content qa-file-owner-content"
+    class="well-segment blob-auxiliary-viewer file-owner-content"
   >
     <gl-icon name="users" data-testid="users-icon" />
     <strong>{{ $options.i18n.title }}</strong>

ee/app/assets/javascripts/requirements/components/requirements_tabs.vue

@@ -109,7 +109,7 @@ export default {
           :title="$options.i18n.importRequirementsLabel"
           :aria-label="$options.i18n.importRequirementsLabel"
           category="secondary"
-          class="js-import-requirements qa-import-requirements-button"
+          class="js-import-requirements"
           :disabled="showCreateForm"
           icon="import"
           @click="$emit('click-import-requirements')"
@@ -119,7 +119,7 @@ export default {
       <gl-button
         category="primary"
         variant="confirm"
-        class="js-new-requirement qa-new-requirement-button"
+        class="js-new-requirement"
         :disabled="showCreateForm"
         @click="$emit('click-new-requirement')"
         >{{ __('New requirement') }}</gl-button

ee/app/assets/javascripts/test_case_show/components/test_case_show_root.vue

@@ -215,7 +215,7 @@ export default {
           :loading="testCaseSaveInProgress"
           category="primary"
           variant="confirm"
-          class="float-left qa-save-button"
+          class="float-left"
           @click.prevent="handleSaveTestCase(issuableMeta)"
           >{{ __('Save changes') }}</gl-button
         >

ee/app/views/projects/blob/_owners.html.haml

 - owners = Gitlab::CodeOwners.for_blob(@project, blob)
 - return if owners.empty?
 
-.well-segment.blob-auxiliary-viewer.file-owner-content.qa-file-owner-content
+.well-segment.blob-auxiliary-viewer.file-owner-content
   = sprite_icon('users', size: 18, css_class: 'icon')
   %strong
     = _("Code owners")
   = link_to sprite_icon('question-o'), help_page_path('user/project/code_owners'), title: 'About this feature', target: '_blank', rel: 'noopener noreferrer'
   :
-  = users_sentence(owners, link_class: 'file-owner-link qa-link-file-owner')
+  = users_sentence(owners, link_class: 'file-owner-link')

ee/spec/frontend/repository/components/__snapshots__/code_owners_spec.js.snap

@@ -4,7 +4,7 @@ exports[`Code owners component matches the snapshot 1`] = `<!---->`;
 
 exports[`Code owners component matches the snapshot 2`] = `
 <div
-  class="well-segment blob-auxiliary-viewer file-owner-content qa-file-owner-content"
+  class="well-segment blob-auxiliary-viewer file-owner-content"
 >
   <gl-icon-stub
     data-testid="users-icon"
@@ -53,7 +53,7 @@ exports[`Code owners component matches the snapshot 2`] = `
 
 exports[`Code owners component matches the snapshot 3`] = `
 <div
-  class="well-segment blob-auxiliary-viewer file-owner-content qa-file-owner-content"
+  class="well-segment blob-auxiliary-viewer file-owner-content"
 >
   <gl-icon-stub
     data-testid="users-icon"
@@ -124,7 +124,7 @@ exports[`Code owners component matches the snapshot 3`] = `
 
 exports[`Code owners component matches the snapshot 4`] = `
 <div
-  class="well-segment blob-auxiliary-viewer file-owner-content qa-file-owner-content"
+  class="well-segment blob-auxiliary-viewer file-owner-content"
 >
   <gl-icon-stub
     data-testid="users-icon"

qa/qa/ee/page/file/show.rb

@@ -13,11 +13,6 @@ def self.prepended(base)
             base.class_eval do
               include QA::Page::Component::ConfirmModal
 
-              view 'ee/app/views/projects/blob/_owners.html.haml' do
-                element :file_owner_content
-                element :link_file_owner
-              end
-
               # These two lock button elements are used for locking at directory level
               view 'ee/app/helpers/ee/lock_helper.rb' do
                 element :lock_button

qa/qa/ee/page/operations_dashboard.rb

@@ -48,7 +48,7 @@ def find_project_card_by_name(name)
         end
 
         def pipeline_status(project_card)
-          project_card.find(element_selector_css(:status_badge)).text
+          project_card.find(element_selector_css(:status_badge_link)).text
         end
 
         private

qa/qa/page/component/access_tokens.rb

@@ -18,6 +18,10 @@ def self.included(base)
             element :expiry_date_field
           end
 
+          base.view 'app/views/shared/access_tokens/_created_container.html.haml' do
+            element :created_access_token_field
+          end
+
           base.view 'app/views/shared/access_tokens/_form.html.haml' do
             element :access_token_name_field
             element :create_token_button
@@ -32,7 +36,7 @@ def self.included(base)
           end
 
           base.view 'app/assets/javascripts/access_tokens/components/new_access_token_app.vue' do
-            element :created_access_token
+            element :created_access_token_field
           end
 
           base.view 'app/assets/javascripts/access_tokens/components/access_token_table_app.vue' do
@@ -53,7 +57,7 @@ def click_create_token_button
         end
 
         def created_access_token
-          find_element(:created_access_token, wait: 30).value
+          find_element(:created_access_token_field, wait: 30).value
         end
 
         def fill_expiry_date(date)