Merge branch '5538-svg' into 'master'

Resolve "Use `long-arrow` icon in downstream pipeline instead of importing the svg into the vue component"

Closes #5538

See merge request gitlab-org/gitlab-ee!6132

ee/app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue

 <script>
-  import arrowSvg from 'ee_icons/_arrow_mini_pipeline_graph.svg';
   import icon from '~/vue_shared/components/icon.vue';
   import ciStatus from '~/vue_shared/components/ci_icon.vue';
   import tooltip from '~/vue_shared/directives/tooltip';
@@ -31,7 +30,6 @@
     },
     data() {
       return {
-        arrowSvg,
         maxRenderedPipelines: 3,
       };
     },
@@ -88,13 +86,11 @@
     class="linked-pipeline-mini-list"
   >
 
-    <span
+    <icon
       v-if="isDownstream"
       class="arrow-icon"
-      aria-hidden="true"
-      v-html="arrowSvg"
-    >
-    </span>
+      name="long-arrow"
+    />
 
     <a
       v-tooltip
@@ -124,12 +120,10 @@
       {{ counterLabel }}
     </a>
 
-    <span
+    <icon
       v-if="isUpstream"
       class="arrow-icon"
-      aria-hidden="true"
-      v-html="arrowSvg"
-    >
-    </span>
+      name="long-arrow"
+    />
   </span>
 </template>

ee/app/assets/stylesheets/pages/pipelines.scss

@@ -13,6 +13,9 @@
 
     svg {
       fill: $border-color;
+      position: relative;
+      top: 4px;
+      left: -1px;
     }
   }
 

ee/app/views/shared/icons/_arrow_mini_pipeline_graph.svg

-<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10 3H0v2h10v3l5.549-3.7c.251-.167.25-.435 0-.6L10 0v3z" fill-rule="nonzero"/></svg>

spec/javascripts/vue_shared/components/linked_pipelines_mini_list_spec.js

@@ -36,7 +36,7 @@ describe('Linked pipeline mini list', function() {
     it('should render an arrow icon', () => {
       const iconElement = this.component.$el.querySelector('.arrow-icon');
       expect(iconElement).not.toBeNull();
-      expect(iconElement.innerHTML).toContain('<svg');
+      expect(iconElement.innerHTML).toContain('long-arrow');
     });
 
     it('should have an activated tooltip', () => {
@@ -88,7 +88,7 @@ describe('Linked pipeline mini list', function() {
     it('should render an arrow icon', () => {
       const iconElement = this.component.$el.querySelector('.arrow-icon');
       expect(iconElement).not.toBeNull();
-      expect(iconElement.innerHTML).toContain('<svg');
+      expect(iconElement.innerHTML).toContain('long-arrow');
     });
 
     it('should have prepped tooltips', () => {