Merge branch 'emilyring-tf-widget-link' into 'master'

Refactor mr_widget_terraform_plan to use GitLab UI components

See merge request gitlab-org/gitlab!33720

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_terraform_plan.vue

 <script>
 import { __ } from '~/locale';
-import { GlIcon, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
-import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import flash from '~/flash';
 import Poll from '~/lib/utils/poll';
 
 export default {
   name: 'MRWidgetTerraformPlan',
   components: {
-    CiIcon,
     GlIcon,
+    GlLink,
     GlLoadingIcon,
     GlSprintf,
   },
@@ -36,12 +35,6 @@ export default {
     deleteNum() {
       return Number(this.plan.delete);
     },
-    iconStatusObj() {
-      return {
-        group: 'warning',
-        icon: 'status_warning',
-      };
-    },
     logUrl() {
       return this.plan.job_path;
     },
@@ -90,7 +83,7 @@ export default {
   <section class="mr-widget-section">
     <div class="mr-widget-body media d-flex flex-row">
       <span class="append-right-default align-self-start align-self-lg-center">
-        <ci-icon :status="iconStatusObj" :size="24" />
+        <gl-icon name="status_warning" :size="24" />
       </span>
 
       <div class="d-flex flex-fill flex-column flex-md-row">
@@ -125,7 +118,7 @@ export default {
         </div>
 
         <div class="terraform-mr-plan-actions">
-          <a
+          <gl-link
             v-if="logUrl"
             :href="logUrl"
             target="_blank"
@@ -137,7 +130,7 @@ export default {
           >
             {{ __('View full log') }}
             <gl-icon name="external-link" />
-          </a>
+          </gl-link>
         </div>
       </div>
     </div>

spec/frontend/vue_mr_widget/components/mr_widget_terraform_plan_spec.js

-import { GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import axios from '~/lib/utils/axios_utils';
 import MockAdapter from 'axios-mock-adapter';
@@ -80,7 +80,7 @@ describe('MrWidgetTerraformPlan', () => {
     });
 
     it('renders button when url is found', () => {
-      expect(wrapper.find('a').text()).toContain('View full log');
+      expect(wrapper.find(GlLink).exists()).toBe(true);
     });
 
     it('does not make additional requests after poll is successful', () => {
@@ -101,7 +101,7 @@ describe('MrWidgetTerraformPlan', () => {
       );
 
       expect(wrapper.find('.js-terraform-report-link').exists()).toBe(false);
-      expect(wrapper.text()).not.toContain('View full log');
+      expect(wrapper.find(GlLink).exists()).toBe(false);
     });
   });
 });