Merge branch...

Merge branch '225953-replace-fa-external-link-icons-with-gitlab-svg-external-link-icon' into 'master'

Replace external-link icons with GitLab SVG

See merge request gitlab-org/gitlab!45685

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf, GlLink, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 import gkeDropdownMixin from './gke_dropdown_mixin';
@@ -10,6 +10,7 @@ export default {
   components: {
     GlSprintf,
     GlLink,
+    GlIcon,
   },
   mixins: [gkeDropdownMixin],
   props: {
@@ -178,14 +179,14 @@ export default {
               'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'
             "
             target="_blank"
-            >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i
-          ></gl-link>
+            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
+          /></gl-link>
         </template>
 
         <template #docsLink="{ content }">
           <gl-link :href="docsUrl" target="_blank"
-            >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i
-          ></gl-link>
+            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
+          /></gl-link>
         </template>
 
         <template #error>

app/assets/javascripts/reports/codequality_report/store/getters.js

 import { LOADING, ERROR, SUCCESS } from '../../constants';
 import { sprintf, __, s__, n__ } from '~/locale';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 export const hasCodequalityIssues = state =>
   Boolean(state.newIssues?.length || state.resolvedIssues?.length);
@@ -48,7 +49,7 @@ export const codequalityPopover = state => {
         s__('ciReport|%{linkStartTag}Learn more about codequality reports %{linkEndTag}'),
         {
           linkStartTag: `<a href="${state.helpPath}" target="_blank" rel="noopener noreferrer">`,
-          linkEndTag: '<i class="fa fa-external-link" aria-hidden="true"></i></a>',
+          linkEndTag: `${spriteIcon('external-link', 's16')}</a>`,
         },
         false,
       ),

app/assets/stylesheets/fontawesome_custom.scss

@@ -101,10 +101,6 @@
   content: '\f071';
 }
 
-.fa-external-link::before {
-  content: '\f08e';
-}
-
 .fa-spinner::before {
   content: '\f110';
 }

app/helpers/commits_helper.rb

@@ -196,7 +196,7 @@ module CommitsHelper
     return unless external_url
 
     link_to(external_url, class: 'btn btn-file-option has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: "View on #{environment.formatted_external_url}", data: { container: 'body' }) do
-      icon('external-link')
+      sprite_icon('external-link')
     end
   end
 

app/views/clusters/clusters/aws/_new.html.haml

@@ -14,4 +14,4 @@
     'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index'),
     'account-and-external-ids-help-path' => help_page_path('user/project/clusters/add_remove_clusters.md', anchor: 'new-eks-cluster'),
     'create-role-arn-help-path' => help_page_path('user/project/clusters/add_remove_clusters.md', anchor: 'new-eks-cluster'),
-    'external-link-icon' => icon('external-link') } }
+    'external-link-icon' => sprite_icon('external-link') } }

app/views/clusters/clusters/gcp/_form.html.haml

 = javascript_include_tag 'https://apis.google.com/js/api.js'
-- external_link_icon = icon('external-link')
+- external_link_icon = sprite_icon('external-link')
 - zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
 - machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
 - pricing_link_url = 'https://cloud.google.com/compute/pricing#machinetype'

app/views/projects/mattermosts/_no_teams.html.haml

@@ -9,7 +9,7 @@
   To install this service,
   = link_to "#{Gitlab.config.mattermost.host}/select_team", target: '__blank' do
     join a team
-    = icon('external-link')
+    = sprite_icon('external-link')
   and try again.
 %hr
 .clearfix

app/views/projects/mattermosts/_team_selection.html.haml

@@ -19,7 +19,7 @@
     To create a team,
     = link_to "#{Gitlab.config.mattermost.host}/create_team" do
       use Mattermost's interface
-      = icon('external-link')
+      = sprite_icon('external-link')
     or ask your Mattermost system administrator.
   %hr
   %h4 Command trigger word
@@ -38,7 +38,7 @@
       Reserved:
       = link_to 'https://docs.mattermost.com/help/messaging/executing-commands.html#built-in-commands', target: '__blank' do
         see list of built-in slash commands
-        = icon('external-link')
+        = sprite_icon('external-link')
   %hr
   .clearfix
     .float-right

changelogs/unreleased/225953-replace-fa-external-link-icons-with-gitlab-svg-external-link-icon.yml

+---
+title: Replace external-link icons with GitLab SVG
+merge_request: 45685
+author:
+type: changed

ee/app/assets/javascripts/vue_shared/security_reports/mixins/security_report_mixin.js

 import { sprintf, s__ } from '~/locale';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 // Securely open external links in a new tab.
 function getLinkStartTag(url) {
@@ -6,7 +7,7 @@ function getLinkStartTag(url) {
 }
 
 // Add in the external link icon at the end of every link.
-const linkEndTag = '<i class="fa fa-external-link" aria-hidden="true"></i></a>';
+const linkEndTag = `${spriteIcon('external-link', 's16')}</a>`;
 
 export default {
   computed: {

ee/app/views/groups/saml_providers/_info.html.haml

@@ -4,13 +4,11 @@
     %ol
       %li
         = _('Review the process for configuring service providers in your identity provider — in this case, GitLab is the "service provider" or "relying party".')
-        = link_to help_page_path('user/group/saml_sso/index', anchor: 'providers'), target: '_blank' do
-          = _("Documentation for popular identity providers")
-          = icon('external-link')
+        = external_link _('Documentation for popular identity providers'), help_page_path('user/group/saml_sso/index', anchor: 'providers')
       %li
         = _("During this process, you’ll be asked for URLs from GitLab’s side. Use the URLs shown below.")
       %li
-        = (_("Set up assertions/attributes/claims (email, first_name, last_name) and NameID according to %{docsLinkStart}the documentation %{icon}%{docsLinkEnd}") % { icon: icon('external-link'), docsLinkStart: "<a href='#{help_page_path('user/group/saml_sso/group_managed_accounts', anchor: 'assertions')}' target='_blank'>", docsLinkEnd: '</a>' }).html_safe
+        = (_("Set up assertions/attributes/claims (email, first_name, last_name) and NameID according to %{docsLinkStart}the documentation %{icon}%{docsLinkEnd}") % { icon: sprite_icon('external-link'), docsLinkStart: "<a href='#{help_page_path('user/group/saml_sso/group_managed_accounts', anchor: 'assertions')}' target='_blank'>", docsLinkEnd: '</a>' }).html_safe
       %li
         = html_escape(_("Fill in the fields below, turn on %{strong_open}Enable SAML authentication for this group%{strong_close}, and press %{strong_open}Save changes%{strong_close}")) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
       %li

ee/app/views/groups/saml_providers/show.html.haml

@@ -5,9 +5,7 @@
       = s_("GroupSAML|SAML Single Sign On")
     %p
       = s_("GroupSAML|Manage your group’s membership while adding another level of security with SAML.")
-    = link_to help_page_path('user/group/saml_sso/index'), target: '_blank' do
-      = _("Learn more")
-      = icon('external-link')
+    = external_link _('Learn more'), help_page_path('user/group/saml_sso/index')
   .col-lg-9
     = render 'info'
 %section.row.border-top.mt-4

ee/app/views/projects/services/gitlab_slack_application/_help.html.haml

@@ -2,9 +2,7 @@
   %p
     This service allows users to perform common operations on this
     project by entering slash commands in Slack.
-    = link_to help_page_path('user/project/integrations/gitlab_slack_application.md'), target: '_blank' do
-      View documentation
-      = icon('external-link')
+    = external_link _('View documentation'), help_page_path('user/project/integrations/gitlab_slack_application.md')
   %p.inline
     See the list of available commands in Slack after setting up this service
     by entering

ee/spec/frontend/vue_shared/security_reports/mixins/security_report_mixin_spec.js

@@ -26,6 +26,6 @@ describe('securityReportMixin', () => {
     expect(mixinLink).toContain(`href="${link}`);
     expect(mixinLink).toContain('target="_blank"');
     expect(mixinLink).toContain('rel="noopener noreferrer"');
-    expect(mixinLink).toContain('<i class="fa fa-external-link" aria-hidden="true"></i>');
+    expect(mixinLink).toContain('external-link');
   });
 });