Migrate assignee sidebar loading spinner to new one

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/24919

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 
 export default {
   name: 'AssigneeTitle',
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     loading: {
       type: Boolean,
@@ -34,7 +38,7 @@ export default {
 <template>
   <div class="title hide-collapsed">
     {{ assigneeTitle }}
-    <i v-if="loading" aria-hidden="true" class="fa fa-spinner fa-spin block-loading"></i>
+    <gl-loading-icon v-if="loading" inline class="align-bottom" />
     <a
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link float-right"

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -4,7 +4,7 @@
 #js-vue-sidebar-assignees{ data: { field: "#{issuable_type}", signed_in: signed_in } }
   .title.hide-collapsed
     = _('Assignee')
-    = icon('spinner spin')
+    .spinner.spinner-sm.align-bottom
 
 .selectbox.hide-collapsed
   - if assignees.none?

changelogs/unreleased/rk4bir-master-patch-92247.yml

+---
+title: Migrated from .fa-spinner to .spinner in app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+merge_request: 24919
+author: rk4bir
+type: changed

spec/javascripts/sidebar/assignee_title_spec.js → spec/frontend/sidebar/assignee_title_spec.js

-import Vue from 'vue';
-import { mockTracking, triggerEvent } from 'spec/helpers/tracking_helper';
-import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
+import Component from '~/sidebar/components/assignees/assignee_title.vue';
 
 describe('AssigneeTitle component', () => {
-  let component;
-  let AssigneeTitleComponent;
+  let wrapper;
 
-  beforeEach(() => {
-    AssigneeTitleComponent = Vue.extend(AssigneeTitle);
+  const createComponent = props => {
+    return shallowMount(Component, {
+      propsData: {
+        numberOfAssignees: 0,
+        editable: false,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('assignee title', () => {
     it('renders assignee', () => {
-      component = new AssigneeTitleComponent({
-        propsData: {
-          numberOfAssignees: 1,
-          editable: false,
-        },
-      }).$mount();
-
-      expect(component.$el.innerText.trim()).toEqual('Assignee');
+      wrapper = createComponent({
+        numberOfAssignees: 1,
+        editable: false,
+      });
+
+      expect(wrapper.vm.$el.innerText.trim()).toEqual('Assignee');
     });
 
     it('renders 2 assignees', () => {
-      component = new AssigneeTitleComponent({
-        propsData: {
-          numberOfAssignees: 2,
-          editable: false,
-        },
-      }).$mount();
-
-      expect(component.$el.innerText.trim()).toEqual('2 Assignees');
+      wrapper = createComponent({
+        numberOfAssignees: 2,
+        editable: false,
+      });
+
+      expect(wrapper.vm.$el.innerText.trim()).toEqual('2 Assignees');
     });
   });
 
   describe('gutter toggle', () => {
     it('does not show toggle by default', () => {
-      component = new AssigneeTitleComponent({
-        propsData: {
-          numberOfAssignees: 2,
-          editable: false,
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.gutter-toggle')).toBeNull();
+      wrapper = createComponent({
+        numberOfAssignees: 2,
+        editable: false,
+      });
+
+      expect(wrapper.vm.$el.querySelector('.gutter-toggle')).toBeNull();
     });
 
     it('shows toggle when showToggle is true', () => {
-      component = new AssigneeTitleComponent({
-        propsData: {
-          numberOfAssignees: 2,
-          editable: false,
-          showToggle: true,
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.gutter-toggle')).toEqual(jasmine.any(Object));
+      wrapper = createComponent({
+        numberOfAssignees: 2,
+        editable: false,
+        showToggle: true,
+      });
+
+      expect(wrapper.vm.$el.querySelector('.gutter-toggle')).toEqual(expect.any(Object));
     });
   });
 
   it('does not render spinner by default', () => {
-    component = new AssigneeTitleComponent({
-      propsData: {
-        numberOfAssignees: 0,
-        editable: false,
-      },
-    }).$mount();
+    wrapper = createComponent({
+      numberOfAssignees: 0,
+      editable: false,
+    });
 
-    expect(component.$el.querySelector('.fa')).toBeNull();
+    expect(wrapper.find(GlLoadingIcon).exists()).toBeFalsy();
   });
 
   it('renders spinner when loading', () => {
-    component = new AssigneeTitleComponent({
-      propsData: {
-        loading: true,
-        numberOfAssignees: 0,
-        editable: false,
-      },
-    }).$mount();
+    wrapper = createComponent({
+      loading: true,
+      numberOfAssignees: 0,
+      editable: false,
+    });
 
-    expect(component.$el.querySelector('.fa')).not.toBeNull();
+    expect(wrapper.find(GlLoadingIcon).exists()).toBeTruthy();
   });
 
   it('does not render edit link when not editable', () => {
-    component = new AssigneeTitleComponent({
-      propsData: {
-        numberOfAssignees: 0,
-        editable: false,
-      },
-    }).$mount();
+    wrapper = createComponent({
+      numberOfAssignees: 0,
+      editable: false,
+    });
 
-    expect(component.$el.querySelector('.edit-link')).toBeNull();
+    expect(wrapper.vm.$el.querySelector('.edit-link')).toBeNull();
   });
 
   it('renders edit link when editable', () => {
-    component = new AssigneeTitleComponent({
-      propsData: {
-        numberOfAssignees: 0,
-        editable: true,
-      },
-    }).$mount();
+    wrapper = createComponent({
+      numberOfAssignees: 0,
+      editable: true,
+    });
 
-    expect(component.$el.querySelector('.edit-link')).not.toBeNull();
+    expect(wrapper.vm.$el.querySelector('.edit-link')).not.toBeNull();
   });
 
   it('tracks the event when edit is clicked', () => {
-    component = new AssigneeTitleComponent({
-      propsData: {
-        numberOfAssignees: 0,
-        editable: true,
-      },
-    }).$mount();
+    wrapper = createComponent({
+      numberOfAssignees: 0,
+      editable: true,
+    });
 
-    const spy = mockTracking('_category_', component.$el, spyOn);
+    const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
     triggerEvent('.js-sidebar-dropdown-toggle');
 
     expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {