From 0e384afe860dd07e3928f0bf6515e200334e9b05 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Tue, 22 Mar 2022 07:40:37 -0700
Subject: [PATCH] Make spinner pajamas compliant

Since the 'gl-spinner' class is being removed,
I introduce a new 'js-create-mr-spinner' class,
and update the logic to point to that instead.
---
 .../javascripts/issues/create_merge_request_dropdown.js     | 6 +++---
 app/views/projects/issues/_new_branch.html.haml             | 4 ++--
 spec/frontend/issues/create_merge_request_dropdown_spec.js  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js
index 247f8dd0bd6e5f..949f0033b18649 100644
--- a/app/assets/javascripts/issues/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js
@@ -43,7 +43,7 @@ export default class CreateMergeRequestDropdown {
     this.refInput = this.wrapperEl.querySelector('.js-ref');
     this.refMessage = this.wrapperEl.querySelector('.js-ref-message');
     this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
-    this.unavailableButtonSpinner = this.unavailableButton.querySelector('.gl-spinner');
+    this.unavailableButtonSpinner = this.unavailableButton.querySelector('.js-create-mr-spinner');
     this.unavailableButtonText = this.unavailableButton.querySelector('.text');
 
     this.branchCreated = false;
@@ -462,10 +462,10 @@ export default class CreateMergeRequestDropdown {
 
   setUnavailableButtonState(isLoading = true) {
     if (isLoading) {
-      this.unavailableButtonSpinner.classList.remove('hide');
+      this.unavailableButtonSpinner.classList.remove('gl-display-none');
       this.unavailableButtonText.textContent = __('Checking branch availability...');
     } else {
-      this.unavailableButtonSpinner.classList.add('hide');
+      this.unavailableButtonSpinner.classList.add('gl-display-none');
       this.unavailableButtonText.textContent = __('New branch unavailable');
     }
   }
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index f6ed6c2675211a..630abd20d0354f 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -13,13 +13,13 @@
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
     .btn-group.unavailable
       %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
-        .gl-spinner.align-text-bottom.gl-button-icon.hide
+        = gl_loading_icon(inline: true, css_class: 'js-create-mr-spinner gl-button-icon gl-display-none')
         %span.text
           Checking branch availability…
 
     .btn-group.available.hidden
       %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
-        .gl-spinner.js-spinner.gl-mr-2.gl-display-none
+        = gl_loading_icon(css_class: 'js-create-mr-spinner js-spinner gl-mr-2 gl-display-none')
         = value
 
       %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
diff --git a/spec/frontend/issues/create_merge_request_dropdown_spec.js b/spec/frontend/issues/create_merge_request_dropdown_spec.js
index c2cfb16fdf70a1..9691456dc3f357 100644
--- a/spec/frontend/issues/create_merge_request_dropdown_spec.js
+++ b/spec/frontend/issues/create_merge_request_dropdown_spec.js
@@ -15,7 +15,7 @@ describe('CreateMergeRequestDropdown', () => {
       <div id="dummy-wrapper-element">
         <div class="available"></div>
         <div class="unavailable">
-          <div class="gl-spinner"></div>
+          <div class="js-create-mr-spinner"></div>
           <div class="text"></div>
         </div>
         <div class="js-ref"></div>
-- 
GitLab