Automatic merge of gitlab-org/gitlab master

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

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -46,6 +50,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>

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

@@ -112,11 +112,12 @@ export default {
     />
     <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="isMergeRequest && !allAssigneesCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue

@@ -97,11 +97,12 @@ export default {
     <collapsed-reviewer v-for="user in collapsedUsers" :key="user.id" :user="user" />
     <button v-if="hasMoreThanTwoReviewers" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="!allReviewersCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue

 <script>
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -38,6 +42,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>

app/assets/javascripts/users_select/index.js

@@ -796,7 +796,7 @@ UsersSelect.prototype.renderRowAvatar = function(issuableType, user, img) {
 
   const mergeIcon =
     issuableType === 'merge_request' && !user.can_merge
-      ? `${spriteIcon('warning-solid', 's12 merge-icon')}`
+      ? spriteIcon('warning-solid', 's12 merge-icon')
       : '';
 
   return `<span class="position-relative mr-2">

app/assets/stylesheets/pages/issuable.scss

@@ -113,7 +113,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
+    filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white);
   }
 }
 
@@ -392,6 +392,13 @@
       text-align: center;
     }
 
+    .merge-icon {
+      height: 12px;
+      width: 12px;
+      bottom: -5px;
+      right: 4px;
+    }
+
     .sidebar-collapsed-icon {
       display: flex;
       flex-direction: column;
@@ -402,7 +409,7 @@
       text-align: center;
       color: $gl-text-color-secondary;
 
-      svg {
+      > svg {
         fill: $gl-text-color-secondary;
       }
 
@@ -410,7 +417,7 @@
       &:hover .todo-undone {
         color: $gl-text-color;
 
-        svg {
+        > svg {
           fill: $gl-text-color;
         }
       }
@@ -482,10 +489,6 @@
       display: none;
     }
 
-    .merge-icon {
-      font-size: 10px;
-    }
-
     .multiple-users {
       position: relative;
       height: 24px;

app/assets/stylesheets/pages/merge_requests.scss

@@ -287,10 +287,6 @@ $mr-widget-min-height: 69px;
       margin-top: 0;
       margin-bottom: 0;
 
-      &.has-conflicts .fa-exclamation-triangle {
-        color: $orange-500;
-      }
-
       time {
         font-weight: $gl-font-weight-normal;
       }

app/views/doorkeeper/authorizations/new.html.haml

@@ -10,7 +10,7 @@
         - if current_user.admin?
           .text-warning
             %p
-              = icon("exclamation-triangle fw")
+              = sprite_icon('warning-solid')
               = html_escape(_('You are an admin, which means granting access to %{client_name} will allow them to interact with GitLab as an admin as well. Proceed with caution.')) % { client_name: tag.strong(@pre_auth.client.name) }
         %p
           - link_to_client = link_to(@pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer')

app/views/projects/_archived_notice.html.haml

 - if project.archived?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _('Archived project! Repository and other project resources are read only')

app/views/projects/merge_requests/widget/open/_error.html.haml

 %h4
-  = icon('exclamation-triangle')
+  = sprite_icon('warning-solid')
   This merge request failed to be merged automatically
 
 %p

app/views/projects/tree/_truncated_notice_tree_row.html.haml

 %tr.tree-truncated-warning
   %td{ colspan: '3' }
-    = icon('exclamation-triangle fw')
+    = sprite_icon('warning-solid')
     %span
       Too many items to show. To preserve performance only
       %strong #{number_with_delimiter(limit)} of #{number_with_delimiter(total)}

app/views/shared/_md_preview.html.haml

@@ -28,7 +28,7 @@
   - if referenced_users
     .referenced-users.hide
       %span
-        = icon("exclamation-triangle")
+        = sprite_icon('warning-solid')
         You are about to add
         %strong
           %span.js-referenced-users-count 0

changelogs/unreleased/276417-replace-fa-exclamation-triangle-icons-with-gitlab-svg-warning-soli.yml

+---
+title: Replace fa-exclamation-triangle icons with GitLab SVG warning-solid icon
+merge_request: 47089
+author:
+type: changed

ee/app/views/projects/_archived_notice.html.haml

@@ -3,5 +3,5 @@
 - if project.archived?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _('Archived project! Repository and other project resources are read-only')

ee/app/views/projects/_marked_for_deletion_notice.haml

 - if project.marked_for_deletion?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _("Deletion pending. This project will be removed on %{date}. Repository and other project resources are read-only.") % { date: permanent_deletion_date(project.marked_for_deletion_at) }

ee/app/views/projects/branches/_diverged_from_upstream.html.haml

 - if @project.mirror_ever_updated_successfully? && @repository.diverged_from_upstream?(branch.name)
   %span.badge.badge-danger.gl-ml-2.has-tooltip{ data: { html: "true", title: branch_diverged_tooltip_message } }
-    = icon('exclamation-triangle')
+    = sprite_icon('warning-solid')
     = s_('Branches|diverged from upstream')

ee/app/views/projects/commits/_mirror_status.html.haml

@@ -8,7 +8,7 @@
 
       - if @ref.present? && @project.mirror_ever_updated_successfully? && @repository.diverged_from_upstream?(@ref)
         %span.has-tooltip{ data: { html: "true", title: branch_diverged_tooltip_message } }
-          = icon('exclamation-triangle')
+          = sprite_icon('warning-solid')
           This branch has diverged from upstream.
     .project-mirror-button
       = render "shared/mirror_update_button"

ee/app/views/projects/merge_requests/widget/open/_size_limit_reached.html.haml

 - error_messages = @project.repository_size_checker.error_message
 
 %h4.size-limit-reached
-  = icon("exclamation-triangle")
+  = sprite_icon('warning-solid')
   = error_messages.merge_error
 
 %p

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