Add external link icon

Added an external link icon

app/assets/javascripts/clusters/components/crossplane_provider_stack.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
 
 export default {
@@ -8,7 +7,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
-    Icon,
+    GlIcon,
   },
   props: {
     stacks: {
@@ -86,8 +85,9 @@ export default {
         href="https://crossplane.io/docs/master/stacks-guide.html"
         target="_blank"
         rel="noopener noreferrer"
-        >{{ __('Crossplane') }}</a
-      >
+        >{{ __('Crossplane') }}
+        <gl-icon name="external-link" class="vertical-align-middle" />
+      </a>
     </p>
   </div>
 </template>

changelogs/unreleased/36455-add-external-link-icon.yml

+---
+title: Add missing external-link icon for Crossplane managed app
+merge_request: 20283
+author:
+type: fixed

spec/frontend/clusters/services/crossplane_provider_stack_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
 
 describe('CrossplaneProviderStack component', () => {
@@ -72,7 +72,12 @@ describe('CrossplaneProviderStack component', () => {
     findFirstDropdownElement().vm.$emit('click');
     expect(wrapper.emitted().set[0][0].code).toEqual('gcp');
   });
-  it('it renders the correct dropdown text when no stack is selected', () => {
+
+  it('renders the correct dropdown text when no stack is selected', () => {
     expect(wrapper.vm.dropdownText).toBe('Select Stack');
   });
+
+  it('renders an external link', () => {
+    expect(wrapper.find(GlIcon).props('name')).toBe('external-link');
+  });
 });