Add latest changes from gitlab-org/gitlab@master

36 files changed, 108 insertions, 102 deletions

diff --git a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
index 9a7296b6b1f..3b71e39d69b 100644
--- a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
+++ b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
@@ -158,7 +158,7 @@ export default {
               :aria-label="$options.i18n.revokeButton"
               :data-confirm="modalMessage(name)"
               data-confirm-btn-variant="danger"
-              data-qa-selector="revoke_button"
+              data-testid="revoke-button"
               data-method="put"
               :href="revokePath"
               icon="remove"
diff --git a/app/assets/javascripts/access_tokens/components/expires_at_field.vue b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
index 38501d63d3a..65206670a3c 100644
--- a/app/assets/javascripts/access_tokens/components/expires_at_field.vue
+++ b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
@@ -68,7 +68,7 @@ export default {
       :input-name="inputAttrs.name"
       :input-id="inputAttrs.id"
       :placeholder="inputAttrs.placeholder"
-      data-qa-selector="expiry_date_field"
+      data-testid="expiry-date-field"
     />
     <template #description>
       <template v-if="description">
diff --git a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
index 4b51b4333aa..f476503c091 100644
--- a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
+++ b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
@@ -45,7 +45,7 @@ export default {
     formInputGroupProps() {
       return {
         id: this.$options.tokenInputId,
-        'data-qa-selector': 'created_access_token_field',
+        'data-testid': 'created-access-token-field',
         name: this.$options.tokenInputId,
       };
     },
@@ -110,7 +110,7 @@ export default {
     @[$options.EVENT_ERROR]="onError"
     @[$options.EVENT_SUCCESS]="onSuccess"
   >
-    <div ref="container" data-testid="access-token-section" data-qa-selector="access_token_section">
+    <div ref="container" data-testid="access-token-section">
       <gl-alert
         v-if="newToken"
         variant="success"
diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
index d3b914ea8aa..240bf005532 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
@@ -115,14 +115,10 @@ export default {
       </gl-sprintf>
     </p>
 
-    <gl-card
-      class="codes-to-print gl-my-5"
-      data-testid="recovery-codes"
-      data-qa-selector="codes_content"
-    >
+    <gl-card class="codes-to-print gl-my-5" data-testid="recovery-codes">
       <ul class="gl-m-0 gl-pl-5">
         <li v-for="(code, index) in codes" :key="index">
-          <span class="gl-font-monospace" data-qa-selector="code_content">{{ code }}</span>
+          <span class="gl-font-monospace" data-testid="code-content">{{ code }}</span>
         </li>
       </ul>
     </gl-card>
@@ -131,7 +127,7 @@ export default {
         <clipboard-button
           :title="$options.i18n.copyButton"
           :text="codesAsString"
-          data-qa-selector="copy_button"
+          data-testid="copy-button"
           @click="handleButtonClick($options.copyButtonAction)"
         >
           {{ $options.i18n.copyButton }}
@@ -163,7 +159,7 @@ export default {
           :disabled="proceedButtonDisabled"
           :title="$options.i18n.proceedButton"
           variant="confirm"
-          data-qa-selector="proceed_button"
+          data-testid="proceed-button"
           data-track-action="click_button"
           :data-track-label="`${$options.trackingLabelPrefix}proceed_button`"
           >{{ $options.i18n.proceedButton }}</gl-button
diff --git a/app/assets/javascripts/invite_members/components/invite_group_trigger.vue b/app/assets/javascripts/invite_members/components/invite_group_trigger.vue
index 424a9d3fabd..7db315fda1a 100644
--- a/app/assets/javascripts/invite_members/components/invite_group_trigger.vue
+++ b/app/assets/javascripts/invite_members/components/invite_group_trigger.vue
@@ -28,12 +28,7 @@ export default {
 </script>
 
 <template>
-  <gl-button
-    :class="classes"
-    data-qa-selector="invite_a_group_button"
-    data-test-id="invite-group-button"
-    @click="openModal"
-  >
+  <gl-button :class="classes" data-testid="invite-a-group-button" @click="openModal">
     {{ displayText }}
   </gl-button>
 </template>
diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
index 6efb7a6cdf1..7f76b7ca1ac 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
@@ -4,7 +4,6 @@ import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 import {
   TRIGGER_ELEMENT_BUTTON,
-  TRIGGER_DEFAULT_QA_SELECTOR,
   TRIGGER_ELEMENT_WITH_EMOJI,
   TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI,
   TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN,
@@ -42,18 +41,12 @@ export default {
       required: false,
       default: 'button',
     },
-    qaSelector: {
-      type: String,
-      required: false,
-      default: TRIGGER_DEFAULT_QA_SELECTOR,
-    },
   },
   computed: {
     componentAttributes() {
       return {
         class: this.classes,
-        'data-qa-selector': this.qaSelector,
-        'data-test-id': 'invite-members-button',
+        'data-testid': 'invite-members-button',
       };
     },
     item() {
diff --git a/app/assets/javascripts/invite_members/components/invite_modal_base.vue b/app/assets/javascripts/invite_members/components/invite_modal_base.vue
index 18d22395104..20b7096785d 100644
--- a/app/assets/javascripts/invite_members/components/invite_modal_base.vue
+++ b/app/assets/javascripts/invite_members/components/invite_modal_base.vue
@@ -173,7 +173,6 @@ export default {
           variant: 'confirm',
           disabled: this.submitDisabled,
           loading: this.isLoading,
-          'data-qa-selector': 'invite_button',
         },
       };
     },
@@ -311,7 +310,7 @@ export default {
           <gl-form-select
             :id="dropdownId"
             v-model="selectedAccessLevel"
-            data-qa-selector="access_level_dropdown"
+            data-testid="access-level-dropdown"
             :options="accessLevelsOptions"
           />
         </gl-form-group>
diff --git a/app/assets/javascripts/invite_members/components/members_token_select.vue b/app/assets/javascripts/invite_members/components/members_token_select.vue
index 0be04b7af35..015cadc9993 100644
--- a/app/assets/javascripts/invite_members/components/members_token_select.vue
+++ b/app/assets/javascripts/invite_members/components/members_token_select.vue
@@ -102,7 +102,6 @@ export default {
     textInputAttrs() {
       return {
         'data-testid': 'members-token-select-input',
-        'data-qa-selector': 'members_token_select_input',
         id: this.inputId,
       };
     },
diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js
index 93386e5504b..3b2840ecf11 100644
--- a/app/assets/javascripts/invite_members/constants.js
+++ b/app/assets/javascripts/invite_members/constants.js
@@ -20,7 +20,6 @@ export const TRIGGER_ELEMENT_WITH_EMOJI = 'text-emoji';
 export const TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI = 'dropdown-text-emoji';
 export const TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN = 'dropdown-text';
 export const INVITE_MEMBER_MODAL_TRACKING_CATEGORY = 'invite_members_modal';
-export const TRIGGER_DEFAULT_QA_SELECTOR = 'invite_members_button';
 export const IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_CATEGORY = 'invite_project_members_modal';
 export const IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_LABEL = 'project-members-page';
 export const MEMBERS_MODAL_DEFAULT_TITLE = s__('InviteMembersModal|Invite members');
diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
index 8fe822e4639..41952a33c05 100644
--- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
+++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
@@ -8,7 +8,7 @@ const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSk
 
 if (skippable) {
   const button = `<div class="gl-alert-actions">
-                    <a class="btn gl-button btn-md btn-confirm gl-alert-action" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>
+                    <a class="btn gl-button btn-md btn-confirm gl-alert-action" data-testid="configure-it-later-button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>
                   </div>`;
   const flashAlert = document.querySelector('.flash-alert');
   if (flashAlert) {
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 915f6578ac3..e9a67a401b8 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -42,7 +42,7 @@ export default {
         text: __('Delete account'),
         attributes: {
           variant: 'danger',
-          'data-qa-selector': 'confirm_delete_account_button',
+          'data-testid': 'confirm-delete-account-button',
           category: 'primary',
           disabled: !this.canSubmit,
         },
@@ -128,7 +128,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
         name="password"
         class="form-control"
         type="password"
-        data-qa-selector="password_confirmation_field"
+        data-testid="password-confirmation-field"
         aria-labelledby="input-label"
       />
       <input
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index 891e883b6c0..c3655572e2f 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -88,7 +88,7 @@ export default {
         text: this.$options.i18n.editProfile,
         href: this.data.settings.profile_path,
         extraAttrs: {
-          'data-testid': 'edit_profile_link',
+          'data-testid': 'edit-profile-link',
           ...USER_MENU_TRACKING_DEFAULTS,
           'data-track-label': 'user_edit_profile',
         },
@@ -235,7 +235,7 @@ export default {
             :entity-name="data.name"
             :src="data.avatar_url"
             aria-hidden="true"
-            data-testid="user_avatar_content"
+            data-testid="user-avatar-content"
           />
           <span
             v-if="showNotificationDot"
diff --git a/app/assets/javascripts/terms/components/app.vue b/app/assets/javascripts/terms/components/app.vue
index 29099bcc366..75ee0e16d4e 100644
--- a/app/assets/javascripts/terms/components/app.vue
+++ b/app/assets/javascripts/terms/components/app.vue
@@ -66,7 +66,7 @@ export default {
 
 <template>
   <div>
-    <div class="gl-relative gl-pb-0 gl-px-0" data-qa-selector="terms_content">
+    <div class="gl-relative gl-pb-0 gl-px-0" data-testid="terms-content">
       <div
         class="terms-fade gl-absolute gl-left-5 gl-right-5 gl-bottom-0 gl-h-11 gl-pointer-events-none"
       ></div>
@@ -97,7 +97,7 @@ export default {
           type="submit"
           variant="confirm"
           :disabled="acceptDisabled"
-          data-qa-selector="accept_terms_button"
+          data-testid="accept-terms-button"
           >{{ $options.i18n.accept }}</gl-button
         >
         <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue
index 8c46c6152ce..e84b3f53b53 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue
@@ -30,7 +30,7 @@ import AlertSidebar from './alert_sidebar.vue';
 import AlertSummaryRow from './alert_summary_row.vue';
 import SystemNote from './system_notes/system_note.vue';
 
-const containerEl = document.querySelector('.page-with-contextual-sidebar');
+const containerEl = document.querySelector('.layout-page');
 
 export default {
   i18n: {
diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue
index a1ef1f30ebb..5019ab901fd 100644
--- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue
@@ -72,7 +72,7 @@ export default {
         attributes: {
           variant: 'danger',
           disabled: !this.isValid,
-          'data-qa-selector': 'confirm_danger_modal_button',
+          'data-testid': 'confirm-danger-modal-button',
         },
       };
     },
@@ -133,8 +133,7 @@ export default {
         id="confirm_name_input"
         v-model="confirmationPhrase"
         class="form-control"
-        data-qa-selector="confirm_danger_field"
-        data-testid="confirm-danger-input"
+        data-testid="confirm-danger-field"
         type="text"
       />
     </gl-form-group>
diff --git a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
index d97f1ae6135..344edc1082e 100644
--- a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
+++ b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
@@ -176,7 +176,6 @@ export default {
           :aria-label="toggleVisibilityLabel"
           :icon="toggleVisibilityIcon"
           data-testid="toggle-visibility-button"
-          data-qa-selector="toggle_visibility_button"
           @click.stop="handleToggleVisibilityButtonClick"
         />
         <clipboard-button
diff --git a/app/helpers/auth_helper.rb b/app/helpers/auth_helper.rb
index fc157df3891..2d6c9d4a068 100644
--- a/app/helpers/auth_helper.rb
+++ b/app/helpers/auth_helper.rb
@@ -47,13 +47,13 @@ module AuthHelper
     provider_has_builtin_icon?(name) || provider_has_custom_icon?(name)
   end
 
-  def qa_selector_for_provider(provider)
+  def test_id_for_provider(provider)
     {
-      saml: 'saml_login_button',
-      openid_connect: 'oidc_login_button',
-      github: 'github_login_button',
-      gitlab: 'gitlab_oauth_login_button',
-      facebook: 'facebook_login_button'
+      saml: 'saml-login-button',
+      openid_connect: 'oidc-login-button',
+      github: 'github-login-button',
+      gitlab: 'gitlab-oauth-login-button',
+      facebook: 'facebook-login-button'
     }[provider.to_sym]
   end
 
diff --git a/app/services/admin/plan_limits/update_service.rb b/app/services/admin/plan_limits/update_service.rb
index 24ce3c4095f..7412f9852d1 100644
--- a/app/services/admin/plan_limits/update_service.rb
+++ b/app/services/admin/plan_limits/update_service.rb
@@ -51,35 +51,63 @@ module Admin
 
       def validate_notification_limit
         return unless parsed_params.include?(:notification_limit)
-        return if notification_limit >= storage_size_limit && notification_limit <= enforcement_limit
+        return if unlimited_value?(:notification_limit)
 
-        plan_limits.errors.add(:notification_limit, "must be greater than or equal to " \
-                                                    "storage_size_limit (Dashboard limit): #{storage_size_limit} " \
-                                                    "and less than or equal to enforcement_limit: #{enforcement_limit}")
+        if storage_size_limit > 0 && notification_limit < storage_size_limit
+          plan_limits.errors.add(
+            :notification_limit, "must be greater than or equal to the dashboard limit (#{storage_size_limit})"
+          )
+        end
+
+        return unless enforcement_limit > 0 && notification_limit > enforcement_limit
+
+        plan_limits.errors.add(
+          :notification_limit, "must be less than or equal to the enforcement limit (#{enforcement_limit})"
+        )
       end
 
       def validate_enforcement_limit
         return unless parsed_params.include?(:enforcement_limit)
-        return if enforcement_limit >= storage_size_limit && enforcement_limit >= notification_limit
+        return if unlimited_value?(:enforcement_limit)
+
+        if storage_size_limit > 0 && enforcement_limit < storage_size_limit
+          plan_limits.errors.add(
+            :enforcement_limit, "must be greater than or equal to the dashboard limit (#{storage_size_limit})"
+          )
+        end
+
+        return unless notification_limit > 0 && enforcement_limit < notification_limit
 
-        plan_limits.errors.add(:enforcement_limit, "must be greater than or equal to " \
-                                                   "storage_size_limit (Dashboard limit): #{storage_size_limit} and " \
-                                                   "greater than or equal to notification_limit: #{notification_limit}")
+        plan_limits.errors.add(
+          :enforcement_limit, "must be greater than or equal to the notification limit (#{notification_limit})"
+        )
       end
 
       def validate_storage_size_limit
         return unless parsed_params.include?(:storage_size_limit)
-        return if storage_size_limit <= enforcement_limit && storage_size_limit <= notification_limit
+        return if unlimited_value?(:storage_size_limit)
 
-        plan_limits.errors.add(:storage_size_limit, "(Dashboard limit) must be less than or equal to " \
-                                                    "enforcement_limit: #{enforcement_limit} " \
-                                                    "and notification_limit: #{notification_limit}")
+        if enforcement_limit > 0 && storage_size_limit > enforcement_limit
+          plan_limits.errors.add(
+            :dashboard_limit, "must be less than or equal to the enforcement limit (#{enforcement_limit})"
+          )
+        end
+
+        return unless notification_limit > 0 && storage_size_limit > notification_limit
+
+        plan_limits.errors.add(
+          :dashboard_limit, "must be less than or equal to the notification limit (#{notification_limit})"
+        )
       end
 
       # Overridden in EE
       def parsed_params
         params
       end
+
+      def unlimited_value?(limit)
+        parsed_params[limit] == 0
+      end
     end
   end
 end
diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
index 35ee9a7679a..7dd4d119a62 100644
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@@ -7,13 +7,13 @@
       = f.hidden_field :reset_password_token
       .form-group.gl-px-5
         = f.label _('New password'), for: "user_password"
-        = f.password_field :password, autocomplete: 'new-password', class: "form-control gl-form-input top js-password-complexity-validation", required: true, title: _('This field is required.'), data: { qa_selector: 'password_field'}
+        = f.password_field :password, autocomplete: 'new-password', class: "form-control gl-form-input top js-password-complexity-validation", required: true, title: _('This field is required.'), data: { testid: 'password-field'}
         = render_if_exists 'shared/password_requirements_list'
       .form-group.gl-px-5
         = f.label _('Confirm new password'), for: "user_password_confirmation"
-        = f.password_field :password_confirmation, autocomplete: 'new-password', class: "form-control gl-form-input bottom", title: _('This field is required.'), data: { qa_selector: 'password_confirmation_field' }, required: true
+        = f.password_field :password_confirmation, autocomplete: 'new-password', class: "form-control gl-form-input bottom", title: _('This field is required.'), data: { testid: 'password-confirmation-field' }, required: true
       .clearfix.gl-px-5.gl-pb-5
-        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'change_password_button' } }) do
+        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'change-password-button' } }) do
           = _('Change your password')
 
 .clearfix.prepend-top-20
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 88dd4fd1721..d9b7c986a9f 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,11 +1,10 @@
 = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'gl-p-5 gl-show-field-errors js-arkose-labs-form', aria: { live: 'assertive' }, data: { testid: 'sign-in-form' }}) do |f|
   .form-group
     = f.label :login, _('Username or primary email')
-    = f.text_field :login, value: @invite_email, class: 'form-control gl-form-input js-username-field', autocomplete: 'username', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { qa_selector: 'login_field', testid: 'username-field' }
+    = f.text_field :login, value: @invite_email, class: 'form-control gl-form-input js-username-field', autocomplete: 'username', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { testid: 'username-field' }
   .form-group
     = f.label :password, _('Password')
     = f.password_field :password, class: 'form-control gl-form-input js-password', data: { id: "#{resource_name}_password",
-        qa_selector: 'password_field',
         testid: 'password-field',
         name: "#{resource_name}[password]" }
     .form-text.gl-text-right
@@ -22,5 +21,5 @@
     .form-group
       = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { autocomplete: 'off' }
 
-  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { class: 'js-sign-in-button', data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' } }) do
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { class: 'js-sign-in-button', data: { testid: 'sign-in-button' } }) do
     = _('Sign in')
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index 471cc053e6e..db7b7a4f729 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -6,13 +6,13 @@
 = gitlab_ui_form_for(provider, url: omniauth_callback_path(:user, provider), html: { class: 'gl-p-5 gl-show-field-errors', aria: { live: 'assertive' }, data: { testid: 'new_ldap_user' }}) do |f|
   .form-group
     = f.label :username, _('Username')
-    = f.text_field :username, name: :username, autocomplete: :username, class: 'form-control gl-form-input', title: _('This field is required.'), autofocus: 'autofocus', data: { qa_selector: 'username_field' }, required: true
+    = f.text_field :username, name: :username, autocomplete: :username, class: 'form-control gl-form-input', title: _('This field is required.'), autofocus: 'autofocus', data: { testid: 'username-field' }, required: true
   .form-group
     = f.label :password, _('Password')
-    %input.form-control.gl-form-input.js-password{ data: { id: "#{provider}_password", name: 'password', qa_selector: 'password_field' } }
+    %input.form-control.gl-form-input.js-password{ data: { id: "#{provider}_password", name: 'password', testid: 'password-field' } }
 
   - if render_remember_me
     = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { name: :remember_me, autocomplete: 'off' }
 
-  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'sign_in_button' } }) do
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'sign-in-button' } }) do
     = submit_message
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index acfb16b64cd..1caf0bb5893 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -29,6 +29,6 @@
   - if allow_signup?
     %p{ class: "gl-mt-3 #{'gl-text-center' if Feature.enabled?(:restyle_login_page, @project)}" }
       = _("Don't have an account yet?")
-      = link_to _("Register now"), new_registration_path(:user, invite_email: @invite_email), data: { qa_selector: 'register_link' }
+      = link_to _("Register now"), new_registration_path(:user, invite_email: @invite_email), data: { testid: 'register-link' }
   - if omniauth_enabled? && devise_mapping.omniauthable? && button_based_providers_enabled?
     = render 'devise/shared/omniauth_box'
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index e3457040e6c..96f6f5cb095 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -5,7 +5,7 @@
       = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_webauthn_enabled?}" }) do |f|
         .form-group
           = f.label :otp_attempt, _('Enter verification code')
-          = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', inputmode: 'numeric', title: _('This field is required.'), data: { qa_selector: 'two_fa_code_field' }
+          = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', inputmode: 'numeric', title: _('This field is required.'), data: { testid: 'two-fa-code-field' }
           %p.form-text.text-muted.hint
             = _("Enter the code from your two-factor authenticator app. If you've lost your device, you can enter one of your recovery codes.")
 
@@ -13,7 +13,7 @@
           - resource_params = params[resource_name].presence || params
           = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
 
-        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'verify_code_button' } }) do
+        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'verify-code-button' } }) do
           = _("Verify code")
 
     - if @user.two_factor_webauthn_enabled?
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 73b9a3d5c5a..45062745b77 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -11,7 +11,7 @@
       = _('Sign in with')
   - enabled_button_based_providers.each do |provider|
     - has_icon = provider_has_icon?(provider)
-    = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", data: { qa_selector: "#{qa_selector_for_provider(provider)}" }, class: "btn gl-button btn-default gl-mb-2 js-oauth-login gl-w-full", form: { class: restyle_login_page_enabled ? 'gl-mb-3' : 'gl-w-full gl-mb-3' } do
+    = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", data: { testid: "#{test_id_for_provider(provider)}" }, class: "btn gl-button btn-default gl-mb-2 js-oauth-login gl-w-full", form: { class: restyle_login_page_enabled ? 'gl-mb-3' : 'gl-w-full gl-mb-3' } do
       - if has_icon
         = provider_image_tag(provider)
       %span.gl-button-text
diff --git a/app/views/devise/shared/_signup_omniauth_provider_list.haml b/app/views/devise/shared/_signup_omniauth_provider_list.haml
index b9efcaa11b4..da778120e01 100644
--- a/app/views/devise/shared/_signup_omniauth_provider_list.haml
+++ b/app/views/devise/shared/_signup_omniauth_provider_list.haml
@@ -4,7 +4,7 @@
       = _("Register with:")
     .gl-text-center.gl-ml-auto.gl-mr-auto
       - providers.each do |provider|
-        = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
+        = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{test_id_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
           - if provider_has_icon?(provider)
             = provider_image_tag(provider)
           %span.gl-button-text
@@ -15,7 +15,7 @@
   .gl-display-flex.gl-justify-content-between.gl-flex-wrap
     - providers.each do |provider|
       = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)),
-        class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}",
+        class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{test_id_for_provider(provider)}",
         data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label },
         id: "oauth-login-#{provider}" do
         - if provider_has_icon?(provider)
diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml
index b7ba8870df5..9348a5e3451 100644
--- a/app/views/devise/shared/_tab_single.html.haml
+++ b/app/views/devise/shared/_tab_single.html.haml
@@ -1,2 +1,2 @@
 = gl_tabs_nav({ class: 'new-session-tabs gl-border-0' }) do
-  = gl_tab_link_to tab_title, '#', { item_active: true, class: 'gl-cursor-default!', tab_class: 'gl-bg-transparent!', tabindex: '-1', data: { qa_selector: 'sign_in_tab', testid: 'sign-in-tab' } }
+  = gl_tab_link_to tab_title, '#', { item_active: true, class: 'gl-cursor-default!', tab_class: 'gl-bg-transparent!', tabindex: '-1', data: { testid: 'sign-in-tab' } }
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
index 76c4cf41a2d..e6bc38ba6dd 100644
--- a/app/views/devise/shared/_tabs_ldap.html.haml
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -8,13 +8,13 @@
   = render_if_exists "devise/shared/kerberos_tab"
   - ldap_servers.each_with_index do |server, i|
     %li.nav-item
-      = link_to server['label'], "##{server['provider_name']}", class: "nav-link #{active_when(i == 0 && form_based_auth_provider_has_active_class?(:ldapmain))}", data: { toggle: 'tab', qa_selector: 'ldap_tab', testid: 'ldap-tab' }, role: 'tab'
+      = link_to server['label'], "##{server['provider_name']}", class: "nav-link #{active_when(i == 0 && form_based_auth_provider_has_active_class?(:ldapmain))}", data: { toggle: 'tab', testid: 'ldap-tab' }, role: 'tab'
 
   = render_if_exists 'devise/shared/tab_smartcard'
 
   - if show_password_form
     %li.nav-item
-      = link_to _('Standard'), '#login-pane', class: 'nav-link', data: { toggle: 'tab', qa_selector: 'standard_tab' }, role: 'tab'
+      = link_to _('Standard'), '#login-pane', class: 'nav-link', data: { toggle: 'tab', testid: 'standard-tab' }, role: 'tab'
   - if render_signup_link && allow_signup?
     %li.nav-item
-      = link_to _('Register'), '#register-pane', class: 'nav-link', data: { toggle: 'tab', qa_selector: 'register_tab' }, role: 'tab'
+      = link_to _('Register'), '#register-pane', class: 'nav-link', data: { toggle: 'tab', testid: 'register-tab' }, role: 'tab'
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index fd5088e04b0..116732cd98d 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -51,5 +51,5 @@
           = hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method
           = render Pajamas::ButtonComponent.new(type: :submit,
             variant: :danger,
-            button_options: { id: 'commit-changes', class: 'gl-ml-3', qa_selector: 'authorization_button'}) do
+            button_options: { id: 'commit-changes', class: 'gl-ml-3', testid: 'authorization_button'}) do
             = _("Authorize")
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index 4e9ae7c7fd8..7794e3c9853 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -3,7 +3,7 @@
 !!! 5
 %html.html-devise-layout{ lang: I18n.locale }
   = render "layouts/head", { startup_filename: 'signin' }
-  %body.gl-h-full.login-page.navless{ class: "#{system_message_class} #{user_application_theme} #{client_class_list}", data: { page: body_data_page, qa_selector: 'login_page' } }
+  %body.gl-h-full.login-page.navless{ class: "#{system_message_class} #{user_application_theme} #{client_class_list}", data: { page: body_data_page, testid: 'login-page' } }
     = header_message
     = render "layouts/init_client_detection_flags"
     - if Feature.enabled?(:restyle_login_page, @project)
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 993094c6889..fb875c67b6d 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -110,7 +110,7 @@
           - if header_link?(:user_dropdown)
             %li.nav-item.header-user.js-nav-user-dropdown.dropdown{ data: { testid: 'user-dropdown' }, class: ('mr-0' if has_impersonation_link) }
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown", track_label: "profile_dropdown", track_action: "click_dropdown", track_property: "navigation_top" } do
-                = render Pajamas::AvatarComponent.new(current_user, size: 24, class: 'header-user-avatar', avatar_options: { data: { testid: 'user_avatar_content' } })
+                = render Pajamas::AvatarComponent.new(current_user, size: 24, class: 'header-user-avatar', avatar_options: { data: { testid: 'user-avatar-content' } })
                 = render_if_exists 'layouts/header/user_notification_dot', project: project, namespace: group
                 = sprite_icon('chevron-down', css_class: 'caret-down')
               .dropdown-menu.dropdown-menu-right
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index 32f00a4c0c6..621c0579226 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -25,6 +25,6 @@
                     .gl-text-right.gl-line-height-normal
                       .gl-font-weight-bold= current_user.name
                       .gl-text-gray-700 @#{current_user.username}
-                    = render Pajamas::AvatarComponent.new(current_user, size: 32, avatar_options: { data: { qa_selector: 'user_avatar_content' } })
+                    = render Pajamas::AvatarComponent.new(current_user, size: 32, avatar_options: { data: { testid: 'user-avatar-content' } })
               - c.with_body do
                 = yield
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 799dfaae8c5..75dba925328 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -30,7 +30,7 @@
       = render Pajamas::ButtonComponent.new(variant: :confirm, href: profile_two_factor_auth_path) do
         = _('Manage two-factor authentication')
     - else
-      = render Pajamas::ButtonComponent.new(variant: :confirm, href: profile_two_factor_auth_path, button_options: { data: { qa_selector: 'enable_2fa_button' }}) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, href: profile_two_factor_auth_path, button_options: { data: { testid: 'enable-2fa-button' }}) do
         = _('Enable two-factor authentication')
 
 - if display_providers_on_profile?
@@ -76,7 +76,7 @@
       = render 'users/deletion_guidance', user: current_user
 
       -# Delete button here
-      = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { id: 'delete-account-button', disabled: true, data: { qa_selector: 'delete_account_button' }}) do
+      = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { id: 'delete-account-button', disabled: true, data: { testid: 'delete-account-button' }}) do
         = s_('Profiles|Delete account')
 
       #delete-account-modal{ data: { action_url: user_registration_path,
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index ff0b31da022..25badbcdb16 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -29,7 +29,7 @@
                 = _("To add the entry manually, provide the following details to the application on your phone.")
               %p.gl-mt-0.gl-mb-0
                 = _('Account: %{account}') % { account: @account_string }
-              %p.gl-mt-0.gl-mb-0{ data: { qa_selector: 'otp_secret_content' } }
+              %p.gl-mt-0.gl-mb-0{ data: { testid: 'otp-secret-content' } }
                 = _('Key:')
                 %code.two-factor-secret= current_user.otp_secret.scan(/.{4}/).join(' ')
               %p.gl-mb-0.two-factor-new-manual-content
@@ -46,14 +46,14 @@
           - if current_password_required?
             .form-group
               = label_tag :current_password, _('Current password'), class: 'label-bold'
-              = password_field_tag :current_password, nil, autocomplete: 'current-password', required: true, class: 'form-control gl-form-input', data: { qa_selector: 'current_password_field' }
+              = password_field_tag :current_password, nil, autocomplete: 'current-password', required: true, class: 'form-control gl-form-input', data: { testid: 'current-password-field' }
               %p.form-text.text-muted
                 = _('Your current password is required to register a two-factor authenticator app.')
           .form-group
             = label_tag :pin_code, _('Enter verification code'), class: "label-bold"
-            = text_field_tag :pin_code, nil, autocomplete: 'off', inputmode: 'numeric', class: "form-control gl-form-input", required: true, data: { qa_selector: 'pin_code_field' }
+            = text_field_tag :pin_code, nil, autocomplete: 'off', inputmode: 'numeric', class: "form-control gl-form-input", required: true, data: { testid: 'pin-code-field' }
           .gl-mt-3
-            = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { data: { qa_selector: 'register_2fa_app_button' } }) do
+            = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { data: { testid: 'register-2fa-app-button' } }) do
               = _('Register with two-factor app')
 
   %hr
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index 3bf85da83b1..79c4bfca630 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -15,7 +15,7 @@
 
   .form-group
     = f.label :name, s_('AccessTokens|Token name'), class: 'label-bold'
-    = f.text_field :name, class: 'form-control gl-form-input gl-form-input-xl', required: true, data: { qa_selector: 'access_token_name_field' }, :'aria-describedby' => 'access_token_help_text'
+    = f.text_field :name, class: 'form-control gl-form-input gl-form-input-xl', required: true, data: { testid: 'access-token-name-field' }, :'aria-describedby' => 'access_token_help_text'
     %span.form-text.text-muted#access_token_help_text
       - if resource
         - resource_type = resource.is_a?(Group) ? "group" : "project"
@@ -42,6 +42,6 @@
     = render 'shared/tokens/scopes_form', prefix: prefix, description_prefix: description_prefix, token: token, scopes: scopes, f: f
 
   .gl-mt-3
-    = f.submit s_('AccessTokens|Create %{type}') % { type: type }, data: { qa_selector: 'create_token_button' }, pajamas_button: true
+    = f.submit s_('AccessTokens|Create %{type}') % { type: type }, data: { testid: 'create-token-button' }, pajamas_button: true
     = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
       = _('Cancel')
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index bb7e0d774cc..44d261b84f1 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -6,12 +6,12 @@
 
   .form-group
     = f.label :name, class: 'label-bold'
-    = f.text_field :name, class: 'form-control gl-form-input', data: { qa_selector: 'deploy_token_name_field' }, required: true
+    = f.text_field :name, class: 'form-control gl-form-input', data: { testid: 'deploy-token-name-field' }, required: true
     .text-secondary= s_('DeployTokens|Enter a unique name for your deploy token.')
 
   .form-group
     = f.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
-    = f.gitlab_ui_datepicker :expires_at, data: { qa_selector: 'deploy_token_expires_at_field' }, value: f.object.expires_at
+    = f.gitlab_ui_datepicker :expires_at, data: { testid: 'deploy-token-expires-at-field' }, value: f.object.expires_at
     .text-secondary= s_('DeployTokens|Enter an expiration date for your token. Defaults to never expire.')
 
   .form-group
@@ -22,15 +22,15 @@
 
   .form-group
     = f.label :scopes, _('Scopes (select at least one)'), class: 'label-bold'
-    = f.gitlab_ui_checkbox_component :read_repository, 'read_repository', help_text: s_('DeployTokens|Allows read-only access to the repository.'), checkbox_options: { data: { qa_selector: 'deploy_token_read_repository_checkbox' } }
+    = f.gitlab_ui_checkbox_component :read_repository, 'read_repository', help_text: s_('DeployTokens|Allows read-only access to the repository.'), checkbox_options: { data: { testid: 'deploy-token-read-repository-checkbox' } }
 
     - if container_registry_enabled?(group_or_project)
-      = f.gitlab_ui_checkbox_component :read_registry, 'read_registry', help_text: s_('DeployTokens|Allows read-only access to registry images.'), checkbox_options: { data: { qa_selector: 'deploy_token_read_registry_checkbox' } }
-      = f.gitlab_ui_checkbox_component :write_registry, 'write_registry', help_text: s_('DeployTokens|Allows write access to registry images.'), checkbox_options: { data: { qa_selector: 'deploy_token_write_registry_checkbox' } }
+      = f.gitlab_ui_checkbox_component :read_registry, 'read_registry', help_text: s_('DeployTokens|Allows read-only access to registry images.'), checkbox_options: { data: { testid: 'deploy-token-read-registry-checkbox' } }
+      = f.gitlab_ui_checkbox_component :write_registry, 'write_registry', help_text: s_('DeployTokens|Allows write access to registry images.'), checkbox_options: { data: { testid: 'deploy-token-write-registry-checkbox' } }
 
     - if packages_registry_enabled?(group_or_project)
-      = f.gitlab_ui_checkbox_component :read_package_registry, 'read_package_registry', help_text: s_('DeployTokens|Allows read-only access to the package registry.'), checkbox_options: { data: { qa_selector: 'deploy_token_read_package_registry_checkbox' } }
-      = f.gitlab_ui_checkbox_component :write_package_registry, 'write_package_registry', help_text: s_('DeployTokens|Allows read and write access to the package registry.'), checkbox_options: { data: { qa_selector: 'deploy_token_write_package_registry_checkbox' } }
+      = f.gitlab_ui_checkbox_component :read_package_registry, 'read_package_registry', help_text: s_('DeployTokens|Allows read-only access to the package registry.'), checkbox_options: { data: { testid: 'deploy-token-read-package-registry-checkbox' } }
+      = f.gitlab_ui_checkbox_component :write_package_registry, 'write_package_registry', help_text: s_('DeployTokens|Allows read and write access to the package registry.'), checkbox_options: { data: { testid: 'deploy-token-write-package-registry-checkbox' } }
 
   .gl-mt-3
-    = f.submit s_('DeployTokens|Create deploy token'), data: { qa_selector: 'create_deploy_token_button' }, pajamas_button: true
+    = f.submit s_('DeployTokens|Create deploy token'), data: { testid: 'create-deploy-token-button' }, pajamas_button: true
diff --git a/app/views/shared/deploy_tokens/_new_deploy_token.html.haml b/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
index 30917ee6fff..2bc2e6c5b81 100644
--- a/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
+++ b/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
@@ -1,11 +1,11 @@
-.created-deploy-token-container.info-well{ data: { qa_selector: 'created_deploy_token_container' } }
+.created-deploy-token-container.info-well{ data: { testid: 'created-deploy-token-container' } }
   .well-segment
     %h5.gl-mt-0
       = s_('DeployTokens|Your new Deploy Token username')
 
     .form-group
       .input-group
-        = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus', data: { qa_selector: 'deploy_token_user_field' }
+        = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus', data: { testid: 'deploy-token-user-field' }
         .input-group-append
           = deprecated_clipboard_button(text: deploy_token.username, title: s_('DeployTokens|Copy username'), placement: 'left')
       %span.deploy-token-help-block.gl-mt-2.text-success
@@ -15,7 +15,7 @@
 
     .form-group
       .input-group
-        = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus', data: { qa_selector: 'deploy_token_field' }
+        = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus', data: { testid: 'deploy-token-field' }
         .input-group-append
           = deprecated_clipboard_button(text: deploy_token.token, title: s_('DeployTokens|Copy deploy token'), placement: 'left')
       %span.deploy-token-help-block.gl-mt-2.text-danger