Merge branch '281108-removing-remaining-references-to-fa-spinner' into 'master'

Resolve "Removing remaining references to .fa-spinner"

See merge request gitlab-org/gitlab!48928

ee/spec/frontend/environments/deploy_board_component_spec.js

-import { GlTooltip, GlIcon } from '@gitlab/ui';
+import { GlTooltip, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import DeployBoard from 'ee/environments/components/deploy_board_component.vue';
@@ -95,7 +95,7 @@ describe('Deploy Board', () => {
     });
 
     it('should render loading spinner', () => {
-      expect(wrapper.find('.fa-spin')).toBeDefined();
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
 

qa/qa/page/base.rb

@@ -228,7 +228,7 @@ module QA
       def finished_loading_block?
         wait_for_requests
 
-        has_no_css?('.fa-spinner.block-loading', wait: Capybara.default_max_wait_time)
+        has_no_css?('.gl-spinner', wait: Capybara.default_max_wait_time)
       end
 
       def has_loaded_all_images?

qa/qa/support/wait_for_requests.rb

@@ -25,7 +25,7 @@ module QA
         # https://gitlab.com/groups/gitlab-org/-/epics/956
         # retry_on_exception added here due to `StaleElementReferenceError`. See: https://gitlab.com/gitlab-org/gitlab/-/issues/232485
         Support::Retrier.retry_on_exception do
-          Capybara.page.has_no_css?('.gl-spinner, .fa-spinner, .spinner', wait: wait)
+          Capybara.page.has_no_css?('.gl-spinner', wait: wait)
         end
       end
     end

spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe "User interacts with deploy keys", :js do
 
         click_button("Enable")
 
-        expect(page).not_to have_selector(".fa-spinner")
+        expect(page).not_to have_selector(".gl-spinner")
         expect(current_path).to eq(project_settings_repository_path(project))
 
         find(".js-deployKeys-tab-enabled_keys").click

spec/frontend/fixtures/static/create_item_dropdown.html

 <div class="js-create-item-dropdown-fixture-root">
-<input name="variable[environment]" type="hidden">
-<div class="dropdown "><button class="dropdown-menu-toggle js-dropdown-menu-toggle" type="button" data-toggle="dropdown"><span class="dropdown-toggle-text ">some label</span><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i></button><div class="dropdown-menu dropdown-select dropdown-menu-selectable"><div class="dropdown-input"><input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i><i aria-hidden="true" data-hidden="true" role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i></div><div class="dropdown-content js-dropdown-content"></div><div class="dropdown-footer"><ul class="dropdown-footer-list">
-<li>
-<button class="dropdown-create-new-item-button js-dropdown-create-new-item">
-Create wildcard
-<code></code>
-</button>
-</li>
-</ul>
-</div><div class="dropdown-loading"><i aria-hidden="true" data-hidden="true" class="fa fa-spinner fa-spin"></i></div></div></div></div>
+  <input name="variable[environment]" type="hidden" />
+  <div class="dropdown ">
+    <button
+      class="dropdown-menu-toggle js-dropdown-menu-toggle"
+      type="button"
+      data-toggle="dropdown"
+    >
+      <span class="dropdown-toggle-text ">some label</span
+      ><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+    </button>
+    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+      <div class="dropdown-input">
+        <input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-search dropdown-input-search"
+        ></i
+        ><i
+          aria-hidden="true"
+          data-hidden="true"
+          role="button"
+          class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+        ></i>
+      </div>
+      <div class="dropdown-content js-dropdown-content"></div>
+      <div class="dropdown-footer">
+        <ul class="dropdown-footer-list">
+          <li>
+            <button class="dropdown-create-new-item-button js-dropdown-create-new-item">
+              Create wildcard
+              <code></code>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="dropdown-loading">
+        <span aria-hidden="true" data-hidden="true" class="gl-spinner"></span>
+      </div>
+    </div>
+  </div>
+</div>

spec/frontend/fixtures/static/deprecated_jquery_dropdown.html

@@ -32,7 +32,7 @@
       </div>
       <div class="dropdown-content"></div>
       <div class="dropdown-loading">
-        <i class="fa fa-spinner fa-spin"></i>
+        <span class="gl-spinner"></span>
       </div>
     </div>
   </div>

spec/frontend/fixtures/static/mini_dropdown_graph.html

@@ -7,7 +7,7 @@
       <ul></ul>
     </li>
     <li class="js-builds-dropdown-loading hidden">
-      <span class="fa fa-spinner"></span>
+      <span class="gl-spinner"></span>
     </li>
   </ul>
 </div>

spec/frontend/fixtures/static/project_select_combo_button.html

 <div class="project-item-select-holder">
-<input class="project-item-select" data-group-id="12345" data-relative-path="issues/new">
-<a class="new-project-item-link" data-label="New issue" data-type="issues" href="">
-<i class="fa fa-spinner spin"></i>
-</a>
-<a class="new-project-item-select-button">
-<i class="fa fa-caret-down"></i>
-</a>
+  <input class="project-item-select" data-group-id="12345" data-relative-path="issues/new" />
+  <a class="new-project-item-link" data-label="New issue" data-type="issues" href="">
+    <span class="gl-spinner"></span>
+  </a>
+  <a class="new-project-item-select-button">
+    <i class="fa fa-caret-down"></i>
+  </a>
 </div>

spec/frontend/pipelines/graph/graph_component_legacy_spec.js

 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { setHTMLFixture } from 'helpers/fixtures';
 import PipelineStore from '~/pipelines/stores/pipeline_store';
 import GraphComponentLegacy from '~/pipelines/components/graph/graph_component_legacy.vue';
@@ -42,7 +43,7 @@ describe('graph component', () => {
         },
       });
 
-      expect(wrapper.find('.gl-spinner').exists()).toBe(true);
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
@@ -85,7 +86,7 @@ describe('graph component', () => {
       });
 
       it('should not include the loading icon', () => {
-        expect(wrapper.find('.fa-spinner').exists()).toBe(false);
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
       });
 
       it('should include the stage column', () => {

spec/views/projects/commits/_commit.html.haml_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe 'projects/commits/_commit.html.haml' do
       }
 
       within '.gpg-status-box' do
-        expect(page).not_to have_css('i.fa.fa-spinner.fa-spin')
+        expect(page).not_to have_css('.gl-spinner')
       end
     end
   end