Merge branch 'icons-ci-icons' into 'master'

Convert Icons in CI to SVG Sprite Icons

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

11 files changed, 69 insertions, 83 deletions

diff --git a/spec/javascripts/jobs/mock_data.js b/spec/javascripts/jobs/mock_data.js
index 17e4ef26b2c..43532275121 100644
--- a/spec/javascripts/jobs/mock_data.js
+++ b/spec/javascripts/jobs/mock_data.js
@@ -22,7 +22,7 @@ export default {
     details_path: '/root/ci-mock/-/jobs/4757',
     favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
     action: {
-      icon: 'icon_action_retry',
+      icon: 'retry',
       title: 'Retry',
       path: '/root/ci-mock/-/jobs/4757/retry',
       method: 'post',
diff --git a/spec/javascripts/pipelines/graph/action_component_spec.js b/spec/javascripts/pipelines/graph/action_component_spec.js
index 85bd87318db..e8fcd4b1a36 100644
--- a/spec/javascripts/pipelines/graph/action_component_spec.js
+++ b/spec/javascripts/pipelines/graph/action_component_spec.js
@@ -11,7 +11,7 @@ describe('pipeline graph action component', () => {
         tooltipText: 'bar',
         link: 'foo',
         actionMethod: 'post',
-        actionIcon: 'icon_action_cancel',
+        actionIcon: 'cancel',
       },
     }).$mount();
 
diff --git a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
index 25fd18b197e..ba721bc53c6 100644
--- a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
+++ b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
@@ -11,7 +11,7 @@ describe('action component', () => {
         tooltipText: 'bar',
         link: 'foo',
         actionMethod: 'post',
-        actionIcon: 'icon_action_cancel',
+        actionIcon: 'cancel',
       },
     }).$mount();
 
diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js
index e90593e0f40..342ee6c1242 100644
--- a/spec/javascripts/pipelines/graph/job_component_spec.js
+++ b/spec/javascripts/pipelines/graph/job_component_spec.js
@@ -14,7 +14,7 @@ describe('pipeline graph job component', () => {
       group: 'success',
       details_path: '/root/ci-mock/builds/4256',
       action: {
-        icon: 'icon_action_retry',
+        icon: 'retry',
         title: 'Retry',
         path: '/root/ci-mock/builds/4256/retry',
         method: 'post',
diff --git a/spec/javascripts/pipelines/graph/mock_data.js b/spec/javascripts/pipelines/graph/mock_data.js
index 56c522b7f77..b9494f86d74 100644
--- a/spec/javascripts/pipelines/graph/mock_data.js
+++ b/spec/javascripts/pipelines/graph/mock_data.js
@@ -39,7 +39,7 @@ export default {
           "details_path": "/root/ci-mock/builds/4153",
           "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
           "action": {
-            "icon": "icon_action_retry",
+            "icon": "retry",
             "title": "Retry",
             "path": "/root/ci-mock/builds/4153/retry",
             "method": "post"
@@ -62,7 +62,7 @@ export default {
             "details_path": "/root/ci-mock/builds/4153",
             "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
             "action": {
-              "icon": "icon_action_retry",
+              "icon": "retry",
               "title": "Retry",
               "path": "/root/ci-mock/builds/4153/retry",
               "method": "post"
@@ -96,7 +96,7 @@ export default {
           "details_path": "/root/ci-mock/builds/4166",
           "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
           "action": {
-            "icon": "icon_action_retry",
+            "icon": "retry",
             "title": "Retry",
             "path": "/root/ci-mock/builds/4166/retry",
             "method": "post"
@@ -119,7 +119,7 @@ export default {
             "details_path": "/root/ci-mock/builds/4166",
             "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
             "action": {
-              "icon": "icon_action_retry",
+              "icon": "retry",
               "title": "Retry",
               "path": "/root/ci-mock/builds/4166/retry",
               "method": "post"
@@ -138,7 +138,7 @@ export default {
           "details_path": "/root/ci-mock/builds/4159",
           "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
           "action": {
-            "icon": "icon_action_retry",
+            "icon": "retry",
             "title": "Retry",
             "path": "/root/ci-mock/builds/4159/retry",
             "method": "post"
@@ -161,7 +161,7 @@ export default {
             "details_path": "/root/ci-mock/builds/4159",
             "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
             "action": {
-              "icon": "icon_action_retry",
+              "icon": "retry",
               "title": "Retry",
               "path": "/root/ci-mock/builds/4159/retry",
               "method": "post"
diff --git a/spec/javascripts/pipelines/graph/stage_column_component_spec.js b/spec/javascripts/pipelines/graph/stage_column_component_spec.js
index aa4d6eedaf4..063ab53681b 100644
--- a/spec/javascripts/pipelines/graph/stage_column_component_spec.js
+++ b/spec/javascripts/pipelines/graph/stage_column_component_spec.js
@@ -13,7 +13,7 @@ describe('stage column component', () => {
       group: 'success',
       details_path: '/root/ci-mock/builds/4256',
       action: {
-        icon: 'icon_action_retry',
+        icon: 'retry',
         title: 'Retry',
         path: '/root/ci-mock/builds/4256/retry',
         method: 'post',
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 690665ae12c..33ed0cb4342 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline';
 import mockData from '../mock_data';
 
@@ -29,14 +28,6 @@ describe('MRWidgetPipeline', () => {
   });
 
   describe('computed', () => {
-    describe('svg', () => {
-      it('should have the proper SVG icon', () => {
-        const vm = createComponent({ pipeline: mockData.pipeline });
-
-        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_failed);
-      });
-    });
-
     describe('hasPipeline', () => {
       it('should return true when there is a pipeline', () => {
         expect(Object.keys(mockData.pipeline).length).toBeGreaterThan(0);
@@ -142,6 +133,7 @@ describe('MRWidgetPipeline', () => {
       Vue.nextTick(() => {
         expect(el.querySelectorAll('.js-ci-error').length).toEqual(1);
         expect(el.innerText).toContain('Could not connect to the CI server');
+        expect(el.querySelector('.ci-status-icon svg use').getAttribute('xlink:href')).toContain('status_failed');
         done();
       });
     });
diff --git a/spec/javascripts/vue_shared/ci_action_icons_spec.js b/spec/javascripts/vue_shared/ci_action_icons_spec.js
deleted file mode 100644
index 3d53a5ab24d..00000000000
--- a/spec/javascripts/vue_shared/ci_action_icons_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import getActionIcon from '~/vue_shared/ci_action_icons';
-import cancelSVG from 'icons/_icon_action_cancel.svg';
-import retrySVG from 'icons/_icon_action_retry.svg';
-import playSVG from 'icons/_icon_action_play.svg';
-import stopSVG from 'icons/_icon_action_stop.svg';
-
-describe('getActionIcon', () => {
-  it('should return an empty string', () => {
-    expect(getActionIcon()).toEqual('');
-  });
-
-  it('should return cancel svg', () => {
-    expect(getActionIcon('icon_action_cancel')).toEqual(cancelSVG);
-  });
-
-  it('should return retry svg', () => {
-    expect(getActionIcon('icon_action_retry')).toEqual(retrySVG);
-  });
-
-  it('should return play svg', () => {
-    expect(getActionIcon('icon_action_play')).toEqual(playSVG);
-  });
-
-  it('should render stop svg', () => {
-    expect(getActionIcon('icon_action_stop')).toEqual(stopSVG);
-  });
-});
diff --git a/spec/javascripts/vue_shared/ci_status_icon_spec.js b/spec/javascripts/vue_shared/ci_status_icon_spec.js
deleted file mode 100644
index b6621d6054d..00000000000
--- a/spec/javascripts/vue_shared/ci_status_icon_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { borderlessStatusIconEntityMap, statusIconEntityMap } from '~/vue_shared/ci_status_icons';
-
-describe('CI status icons', () => {
-  const statuses = [
-    'icon_status_canceled',
-    'icon_status_created',
-    'icon_status_failed',
-    'icon_status_manual',
-    'icon_status_pending',
-    'icon_status_running',
-    'icon_status_skipped',
-    'icon_status_success',
-    'icon_status_warning',
-  ];
-
-  it('should have a dictionary for borderless icons', () => {
-    statuses.forEach((status) => {
-      expect(borderlessStatusIconEntityMap[status]).toBeDefined();
-    });
-  });
-
-  it('should have a dictionary for icons', () => {
-    statuses.forEach((status) => {
-      expect(statusIconEntityMap[status]).toBeDefined();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
index ba303738f71..8762ce9903b 100644
--- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
@@ -11,63 +11,63 @@ describe('CI Badge Link Component', () => {
       text: 'canceled',
       label: 'canceled',
       group: 'canceled',
-      icon: 'icon_status_canceled',
+      icon: 'status_canceled',
       details_path: 'status/canceled',
     },
     created: {
       text: 'created',
       label: 'created',
       group: 'created',
-      icon: 'icon_status_created',
+      icon: 'status_created',
       details_path: 'status/created',
     },
     failed: {
       text: 'failed',
       label: 'failed',
       group: 'failed',
-      icon: 'icon_status_failed',
+      icon: 'status_failed',
       details_path: 'status/failed',
     },
     manual: {
       text: 'manual',
       label: 'manual action',
       group: 'manual',
-      icon: 'icon_status_manual',
+      icon: 'status_manual',
       details_path: 'status/manual',
     },
     pending: {
       text: 'pending',
       label: 'pending',
       group: 'pending',
-      icon: 'icon_status_pending',
+      icon: 'status_pending',
       details_path: 'status/pending',
     },
     running: {
       text: 'running',
       label: 'running',
       group: 'running',
-      icon: 'icon_status_running',
+      icon: 'status_running',
       details_path: 'status/running',
     },
     skipped: {
       text: 'skipped',
       label: 'skipped',
       group: 'skipped',
-      icon: 'icon_status_skipped',
+      icon: 'status_skipped',
       details_path: 'status/skipped',
     },
     success_warining: {
       text: 'passed',
       label: 'passed',
       group: 'success_with_warnings',
-      icon: 'icon_status_warning',
+      icon: 'status_warning',
       details_path: 'status/warning',
     },
     success: {
       text: 'passed',
       label: 'passed',
       group: 'passed',
-      icon: 'icon_status_success',
+      icon: 'status_success',
       details_path: 'status/passed',
     },
   };
diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js
new file mode 100644
index 00000000000..104da4473ce
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/icon_spec.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Sprite Icon Component', function () {
+  describe('Initialization', function () {
+    let icon;
+
+    beforeEach(function () {
+      const IconComponent = Vue.extend(Icon);
+
+      icon = mountComponent(IconComponent, {
+        name: 'test',
+        size: 99,
+        cssClasses: 'extraclasses',
+      });
+    });
+
+    afterEach(() => {
+      icon.$destroy();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(icon).toBeDefined();
+    });
+
+    it('should have <svg> as a child element', function () {
+      expect(icon.$el.tagName).toBe('svg');
+    });
+
+    it('should have <use> as a child element with the correct href', function () {
+      expect(icon.$el.firstChild.tagName).toBe('use');
+      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
+    });
+
+    it('should properly compute iconSizeClass', function () {
+      expect(icon.iconSizeClass).toBe('s99');
+    });
+
+    it('should properly render img css', function () {
+      const classList = icon.$el.classList;
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('extraclasses');
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
+    });
+  });
+});