Merge branch '41920-download-button' into 'master'

Resolve "Download button in pipelines table has wrong height"

Closes #41920 and #38653

See merge request gitlab-org/gitlab-ce!16488

app/assets/javascripts/pipelines/components/async_button.vue

@@ -3,6 +3,7 @@
 
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
@@ -11,6 +12,7 @@
     },
     components: {
       loadingIcon,
+      icon,
     },
     props: {
       endpoint: {
@@ -41,9 +43,6 @@
       };
     },
     computed: {
-      iconClass() {
-        return `fa fa-${this.icon}`;
-      },
       buttonClass() {
         return `btn ${this.cssClass}`;
       },
@@ -76,10 +75,9 @@
     data-container="body"
     data-placement="top"
     :disabled="isLoading">
-    <i
-      :class="iconClass"
-      aria-hidden="true">
-    </i>
+    <icon
+      :name="icon"
+    />
     <loading-icon v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/pipelines/components/pipelines_actions.vue

 <script>
-  import playIconSvg from 'icons/_icon_play.svg';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
@@ -10,6 +10,7 @@
     },
     components: {
       loadingIcon,
+      icon,
     },
     props: {
       actions: {
@@ -19,7 +20,6 @@
     },
     data() {
       return {
-        playIconSvg,
         isLoading: false,
       };
     },
@@ -52,7 +52,10 @@
       aria-label="Manual job"
       :disabled="isLoading"
     >
-      <span v-html="playIconSvg"></span>
+      <icon
+        name="play"
+        class="icon-play"
+      />
       <i
         class="fa fa-caret-down"
         aria-hidden="true">

app/assets/javascripts/pipelines/components/pipelines_table_row.vue

@@ -312,7 +312,7 @@
           :endpoint="pipeline.cancel_path"
           css-class="js-pipelines-cancel-button btn-remove"
           title="Cancel"
-          icon="remove"
+          icon="close"
           confirm-action-message="Are you sure you want to cancel this pipeline?"
         />
       </div>

app/assets/stylesheets/pages/pipelines.scss

@@ -69,13 +69,6 @@
             border-color: $border-white-normal;
           }
         }
-
-        .btn {
-          .icon-play {
-            height: 13px;
-            width: 12px;
-          }
-        }
       }
 
       .btn .text-center {

spec/javascripts/pipelines/async_button_spec.js

@@ -13,7 +13,7 @@ describe('Pipelines Async Button', () => {
       propsData: {
         endpoint: '/foo',
         title: 'Foo',
-        icon: 'fa fa-foo',
+        icon: 'repeat',
         cssClass: 'bar',
       },
     }).$mount();
@@ -23,8 +23,8 @@ describe('Pipelines Async Button', () => {
     expect(component.$el.tagName).toEqual('BUTTON');
   });
 
-  it('should render the provided icon', () => {
-    expect(component.$el.querySelector('i').getAttribute('class')).toContain('fa fa-foo');
+  it('should render svg icon', () => {
+    expect(component.$el.querySelector('svg')).not.toBeNull();
   });
 
   it('should render the provided title', () => {