Merge branch '1814-deploy-boards-empty-state' into 'master'

Empty state for deploy boards

Closes #1814

See merge request !1342

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -39,15 +39,10 @@ const PipelineStore = require('./pipelines_store');
      */
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
-      const svgsData = document.querySelector('.pipeline-svgs').dataset;
       const store = new PipelineStore();
 
-      // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = gl.utils.DOMStringMapToObject(svgsData);
-
       return {
         endpoint: pipelinesTableData.endpoint,
-        svgs: svgsObject,
         store,
         state: store.state,
         isLoading: false,
@@ -101,10 +96,7 @@ const PipelineStore = require('./pipelines_store');
 
         <div class="table-holder pipelines"
           v-if="!isLoading && state.pipelines.length > 0">
-          <pipelines-table-component
-            :pipelines="state.pipelines"
-            :svgs="svgs">
-          </pipelines-table-component>
+          <pipelines-table-component :pipelines="state.pipelines"/>
         </div>
       </div>
     `,

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+import Vue from 'vue';
+import iconCommit from '../svg/icon_commit.svg';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -9,6 +10,11 @@
       items: Array,
       stage: Object,
     },
+
+    data() {
+      return { iconCommit };
+    },
+
     template: `
       <div>
         <div class="events-description">
@@ -31,7 +37,7 @@
               </h5>
               <span>
                 First
-                <span class="commit-icon">${global.cycleAnalytics.svgs.iconCommit}</span>
+                <span class="commit-icon">${iconCommit}</span>
                 <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
                 pushed by
                 <a :href="commit.author.webUrl" class="commit-author-link">

app/assets/javascripts/cycle_analytics/components/stage_staging_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+import Vue from 'vue';
+import iconBranch from '../svg/icon_branch.svg';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -9,6 +10,9 @@
       items: Array,
       stage: Object,
     },
+    data() {
+      return { iconBranch };
+    },
     template: `
       <div>
         <div class="events-description">
@@ -22,7 +26,7 @@
                 <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
                 <i class="fa fa-code-fork"></i>
                 <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
-                <span class="icon-branch">${global.cycleAnalytics.svgs.iconBranch}</span>
+                <span class="icon-branch">${iconBranch}</span>
                 <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
               </h5>
               <span>

app/assets/javascripts/cycle_analytics/components/stage_test_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+import Vue from 'vue';
+import iconBuildStatus from '../svg/icon_build_status.svg';
+import iconBranch from '../svg/icon_branch.svg';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -9,6 +11,9 @@
       items: Array,
       stage: Object,
     },
+    data() {
+      return { iconBuildStatus, iconBranch };
+    },
     template: `
       <div>
         <div class="events-description">
@@ -18,13 +23,13 @@
           <li v-for="build in items" class="stage-event-item item-build-component">
             <div class="item-details">
               <h5 class="item-title">
-                <span class="icon-build-status">${global.cycleAnalytics.svgs.iconBuildStatus}</span>
+                <span class="icon-build-status">${iconBuildStatus}</span>
                 <a :href="build.url" class="item-build-name">{{ build.name }}</a>
                 &middot;
                 <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
                 <i class="fa fa-code-fork"></i>
                 <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
-                <span class="icon-branch">${global.cycleAnalytics.svgs.iconBranch}</span>
+                <span class="icon-branch">${iconBranch}</span>
                 <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
               </h5>
               <span>

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -4,9 +4,6 @@
 
 window.Vue = require('vue');
 window.Cookies = require('js-cookie');
-require('./svg/icon_branch');
-require('./svg/icon_build_status');
-require('./svg/icon_commit');
 require('./components/stage_code_component');
 require('./components/stage_issue_component');
 require('./components/stage_plan_component');

app/assets/javascripts/cycle_analytics/svg/icon_branch.js

-/* eslint-disable no-param-reassign */
-((global) => {
-  global.cycleAnalytics = global.cycleAnalytics || {};
-  global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {};
-
-  global.cycleAnalytics.svgs.iconBranch = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/></svg>';
-})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/svg/icon_branch.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/></svg>

app/assets/javascripts/cycle_analytics/svg/icon_build_status.js

-/* eslint-disable no-param-reassign */
-((global) => {
-  global.cycleAnalytics = global.cycleAnalytics || {};
-  global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {};
-
-  global.cycleAnalytics.svgs.iconBuildStatus = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="#31AF64" fill-rule="evenodd"><path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/><path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.11.113-.11.303.007.42l1.91 1.91c.19.19.51.197.703.004l.264-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/></g></svg>';
-})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="#31AF64" fill-rule="evenodd"><path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/><path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.11.113-.11.303.007.42l1.91 1.91c.19.19.51.197.703.004l.264-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/></g></svg>

app/assets/javascripts/cycle_analytics/svg/icon_commit.js

-/* eslint-disable no-param-reassign */
-((global) => {
-  global.cycleAnalytics = global.cycleAnalytics || {};
-  global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {};
-
-  global.cycleAnalytics.svgs.iconCommit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="#8F8F8F" fill-rule="evenodd" d="M28.777 18c-.91-4.008-4.494-7-8.777-7-4.283 0-7.868 2.992-8.777 7H4.01C2.9 18 2 18.895 2 20c0 1.112.9 2 2.01 2h7.213c.91 4.008 4.494 7 8.777 7 4.283 0 7.868-2.992 8.777-7h7.214C37.1 22 38 21.105 38 20c0-1.112-.9-2-2.01-2h-7.213zM20 25c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z"/></svg>';
-})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/svg/icon_commit.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="#8F8F8F" fill-rule="evenodd" d="M28.777 18c-.91-4.008-4.494-7-8.777-7-4.283 0-7.868 2.992-8.777 7H4.01C2.9 18 2 18.895 2 20c0 1.112.9 2 2.01 2h7.213c.91 4.008 4.494 7 8.777 7 4.283 0 7.868-2.992 8.777-7h7.214C37.1 22 38 21.105 38 20c0-1.112-.9-2-2.01-2h-7.213zM20 25c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z"/></svg>

app/assets/javascripts/environments/components/deploy_board_component.js

-/* eslint-disable no-new, import/first */
+/* eslint-disable no-new */
+/* global Flash */
 /**
  * Renders a deploy board.
  *
@@ -17,13 +18,13 @@
  * Please refer to this [comment](https://gitlab.com/gitlab-org/gitlab-ee/issues/1589#note_23630610)
  * for more information
  */
+import statusCodes from '~/lib/utils/http_status';
+import '~/flash';
+import '~/lib/utils/common_utils';
+import deployBoardSvg from 'empty_states/icons/_deploy_board.svg';
+import instanceComponent from './deploy_board_instance_component';
 
-const instanceComponent = require('./deploy_board_instance_component');
-const statusCodes = require('~/lib/utils/http_status');
-const Flash = require('~/flash');
-require('~/lib/utils/common_utils');
-
-module.exports = {
+export default {
 
   components: {
     instanceComponent,
@@ -61,6 +62,7 @@ module.exports = {
       isLoading: false,
       hasError: false,
       backOffRequestCounter: 0,
+      deployBoardSvg,
     };
   },
 
@@ -110,7 +112,15 @@ module.exports = {
 
   computed: {
     canRenderDeployBoard() {
-      return !this.isLoading && !this.hasError && Object.keys(this.deployBoardData).length;
+      return !this.isLoading && !this.hasError && this.deployBoardData.valid;
+    },
+
+    canRenderEmptyState() {
+      return !this.isLoading && !this.hasError && !this.deployBoardData.valid;
+    },
+
+    canRenderErrorState() {
+      return !this.isLoading && this.hasError;
     },
 
     instanceTitle() {
@@ -124,6 +134,10 @@ module.exports = {
 
       return title;
     },
+
+    projectName() {
+      return '<projectname>';
+    },
   },
 
   template: `
@@ -149,8 +163,7 @@ module.exports = {
             <template v-for="instance in deployBoardData.instances">
               <instance-component
                 :status="instance.status"
-                :tooltipText="instance.tooltip">
-              </instance-component>
+                :tooltipText="instance.tooltip"/>
             </template>
           </div>
         </section>
@@ -174,7 +187,21 @@ module.exports = {
         </section>
       </div>
 
-      <div v-if="!isLoading && hasError" class="deploy-board-error-message">
+      <div v-if="canRenderEmptyState">
+        <section class="deploy-board-empty-state-svg">
+          ${deployBoardSvg}
+        </section>
+
+        <section class="deploy-board-empty-state-text">
+          <span class="title">Kubernetes deployment not found</span>
+          <span>
+            To see deployment progress for your environments, make sure your deployments are in Kubernetes namespace
+            <code>{{projectName}}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
+          </span>
+        </section>
+      </div>
+
+      <div v-if="canRenderErrorState" class="deploy-board-error-message">
         We can't fetch the data right now. Please try again later.
       </div>
     </div>

app/assets/javascripts/environments/components/deploy_board_instance_component.js

@@ -4,14 +4,13 @@
  *
  * Each instance has a state and a tooltip.
  * The state needs to be represented in different colors,
- * see more information about this in https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
+ * see more information about this in
+ * https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
  *
  */
 
-module.exports = {
-
+export default {
   props: {
-
     /**
      * Represents the status of the pod. Each state is represented with a different
      * color.

app/assets/javascripts/environments/components/environment.js

@@ -36,9 +36,6 @@ module.exports = Vue.component('environment-component', {
       projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
       newEnvironmentPath: environmentsData.newEnvironmentPath,
       helpPagePath: environmentsData.helpPagePath,
-      commitIconSvg: environmentsData.commitIconSvg,
-      playIconSvg: environmentsData.playIconSvg,
-      terminalIconSvg: environmentsData.terminalIconSvg,
 
       // Pagination Properties,
       paginationInformation: {},
@@ -195,13 +192,9 @@ module.exports = Vue.component('environment-component', {
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
             :can-read-environment="canReadEnvironmentParsed"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg"
             :toggleDeployBoard="toggleDeployBoard"
             :store="store"
-            :service="service">
-          </environment-table>
+            :service="service"/>
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"

app/assets/javascripts/environments/components/environment_actions.js

 const Vue = require('vue');
+const playIconSvg = require('icons/_icon_play.svg');
 
 module.exports = Vue.component('actions-component', {
   props: {
@@ -7,11 +8,10 @@ module.exports = Vue.component('actions-component', {
       required: false,
       default: () => [],
     },
+  },
 
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
+  data() {
+    return { playIconSvg };
   },
 
   template: `
@@ -28,9 +28,7 @@ module.exports = Vue.component('actions-component', {
             data-method="post"
             rel="nofollow"
             class="js-manual-action-link">
-
-            <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
-
+            ${playIconSvg}
             <span>
               {{action.name}}
             </span>

app/assets/javascripts/environments/components/environment_item.js

@@ -47,21 +47,6 @@ module.exports = Vue.component('environment-item', {
       default: false,
     },
 
-    commitIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
-
     toggleDeployBoard: {
       type: Function,
       required: false,
@@ -507,9 +492,7 @@ module.exports = Vue.component('environment-item', {
             :commit-url="commitUrl"
             :short-sha="commitShortSha"
             :title="commitTitle"
-            :author="commitAuthor"
-            :commit-icon-svg="commitIconSvg">
-          </commit-component>
+            :author="commitAuthor"/>
         </div>
         <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
           No deployments yet
@@ -526,27 +509,20 @@ module.exports = Vue.component('environment-item', {
       <td class="environments-actions">
         <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
           <actions-component v-if="hasManualActions && canCreateDeployment"
-            :play-icon-svg="playIconSvg"
-            :actions="manualActions">
-          </actions-component>
+            :actions="manualActions"/>
 
           <external-url-component v-if="externalURL && canReadEnvironment"
-            :external-url="externalURL">
-          </external-url-component>
+            :external-url="externalURL"/>
 
           <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path">
-          </stop-component>
+            :stop-url="model.stop_path"/>
 
           <terminal-button-component v-if="model && model.terminal_path"
-            :terminal-icon-svg="terminalIconSvg"
-            :terminal-path="model.terminal_path">
-          </terminal-button-component>
+            :terminal-path="model.terminal_path"/>
 
           <rollback-component v-if="canRetry && canCreateDeployment"
             :is-last-deployment="isLastDeployment"
-            :retry-url="retryUrl">
-            </rollback-component>
+            :retry-url="retryUrl"/>
         </div>
       </td>
     </tr>

app/assets/javascripts/environments/components/environment_terminal_button.js

@@ -3,6 +3,7 @@
  * Used in environments table.
  */
 const Vue = require('vue');
+const terminalIconSvg = require('icons/_icon_terminal.svg');
 
 module.exports = Vue.component('terminal-button-component', {
   props: {
@@ -10,16 +11,16 @@ module.exports = Vue.component('terminal-button-component', {
       type: String,
       default: '',
     },
-    terminalIconSvg: {
-      type: String,
-      default: '',
-    },
+  },
+
+  data() {
+    return { terminalIconSvg };
   },
 
   template: `
     <a class="btn terminal-button"
       :href="terminalPath">
-      <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
+      ${terminalIconSvg}
     </a>
   `,
 });

app/assets/javascripts/environments/components/environments_table.js

@@ -6,7 +6,7 @@
  */
 const Vue = require('vue');
 const EnvironmentItem = require('./environment_item');
-const DeployBoard = require('./deploy_board_component');
+const DeployBoard = require('./deploy_board_component').default;
 
 module.exports = Vue.component('environment-table-component', {
 
@@ -34,21 +34,6 @@ module.exports = Vue.component('environment-table-component', {
       default: false,
     },
 
-    commitIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
-
     toggleDeployBoard: {
       type: Function,
       required: false,
@@ -88,9 +73,6 @@ module.exports = Vue.component('environment-table-component', {
             :model="model"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg"
             :toggleDeployBoard="toggleDeployBoard"></tr>
 
           <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">

app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js

 /* global Vue */
+import stopwatchSvg from 'icons/_icon_stopwatch.svg';
+
 require('../../../lib/utils/pretty_time');
 
 (() => {
@@ -11,7 +13,6 @@ require('../../../lib/utils/pretty_time');
       'showNoTimeTrackingState',
       'timeSpentHumanReadable',
       'timeEstimateHumanReadable',
-      'stopwatchSvg',
     ],
     methods: {
       abbreviateTime(timeStr) {
@@ -20,7 +21,7 @@ require('../../../lib/utils/pretty_time');
     },
     template: `
       <div class='sidebar-collapsed-icon'>
-        <div v-html='stopwatchSvg'></div>
+        ${stopwatchSvg}
         <div class='time-tracking-collapsed-summary'>
           <div class='compare' v-if='showComparisonState'>
             <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>

app/assets/javascripts/issuable/time_tracking/components/time_tracker.js

@@ -15,7 +15,6 @@ require('./comparison_pane');
       'time_spent',
       'human_time_estimate',
       'human_time_spent',
-      'stopwatchSvg',
       'docsUrl',
     ],
     data() {
@@ -71,8 +70,7 @@ require('./comparison_pane');
           :show-spent-only-state='showSpentOnlyState'
           :show-estimate-only-state='showEstimateOnlyState'
           :time-spent-human-readable='timeSpentHumanReadable'
-          :time-estimate-human-readable='timeEstimateHumanReadable'
-          :stopwatch-svg='stopwatchSvg'>
+          :time-estimate-human-readable='timeEstimateHumanReadable'>
         </time-tracking-collapsed-state>
         <div class='title hide-collapsed'>
           Time tracking

app/assets/javascripts/lib/utils/common_utils.js

@@ -246,17 +246,6 @@
       previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10),
     });
 
-    /**
-     * Transforms a DOMStringMap into a plain object.
-     *
-     * @param {DOMStringMap} DOMStringMapObject
-     * @returns {Object}
-     */
-    w.gl.utils.DOMStringMapToObject = DOMStringMapObject => Object.keys(DOMStringMapObject).reduce((acc, element) => {
-      acc[element] = DOMStringMapObject[element];
-      return acc;
-    }, {});
-
     /**
      * Updates the search parameter of a URL given the parameter and values provided.
      *

app/assets/javascripts/vue_pipelines_index/index.js

@@ -11,15 +11,10 @@ $(() => new Vue({
 
   data() {
     const project = document.querySelector('.pipelines');
-    const svgs = document.querySelector('.pipeline-svgs').dataset;
-
-    // Transform svgs DOMStringMap to a plain Object.
-    const svgsObject = gl.utils.DOMStringMapToObject(svgs);
 
     return {
       scope: project.dataset.url,
       store: new gl.PipelineStore(),
-      svgs: svgsObject,
     };
   },
   components: {
@@ -27,10 +22,8 @@ $(() => new Vue({
   },
   template: `
     <vue-pipelines
-      :scope='scope'
-      :store='store'
-      :svgs='svgs'
-    >
+      :scope="scope"
+      :store="store">
     </vue-pipelines>
   `,
 }));

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js

 /* global Vue, Flash, gl */
-/* eslint-disable no-param-reassign, no-alert */
+/* eslint-disable no-param-reassign,  no-alert */
+const playIconSvg = require('icons/_icon_play.svg');
 
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
-    props: ['pipeline', 'svgs'],
+    props: ['pipeline'],
     computed: {
       actions() {
         return this.pipeline.details.manual_actions.length > 0;
@@ -31,6 +32,11 @@
         }
       },
     },
+
+    data() {
+      return { playIconSvg };
+    },
+
     template: `
       <td class="pipeline-actions">
         <div class="pull-right">
@@ -42,7 +48,7 @@
                 title="Manual job"
                 data-placement="top"
                 aria-label="Manual job">
-                <span v-html="svgs.iconPlay" aria-hidden="true"></span>
+                <span v-html="playIconSvg" aria-hidden="true"></span>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
               <ul class="dropdown-menu dropdown-menu-align-right">
@@ -50,8 +56,8 @@
                   <a
                     rel="nofollow"
                     data-method="post"
-                    :href="action.path">
-                    <span v-html="svgs.iconPlay" aria-hidden="true"></span>
+                    :href="action.path" >
+                    <span v-html="playIconSvg" aria-hidden="true"></span>
                     <span>{{action.name}}</span>
                   </a>
                 </li>

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -27,7 +27,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         pageRequest: false,
       };
     },
-    props: ['scope', 'store', 'svgs'],
+    props: ['scope', 'store'],
     created() {
       const pagenum = gl.utils.getParameterByName('page');
       const scope = gl.utils.getParameterByName('scope');
@@ -70,10 +70,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         </div>
 
         <div class="table-holder" v-if='!pageRequest && pipelines.length'>
-          <pipelines-table-component
-            :pipelines='pipelines'
-            :svgs='svgs'>
-          </pipelines-table-component>
+          <pipelines-table-component :pipelines='pipelines'/>
         </div>
 
         <gl-pagination

app/assets/javascripts/vue_pipelines_index/stage.js

 /* global Vue, Flash, gl */
 /* eslint-disable no-param-reassign */
+import canceledSvg from 'icons/_icon_status_canceled_borderless.svg';
+import createdSvg from 'icons/_icon_status_created_borderless.svg';
+import failedSvg from 'icons/_icon_status_failed_borderless.svg';
+import manualSvg from 'icons/_icon_status_manual_borderless.svg';
+import pendingSvg from 'icons/_icon_status_pending_borderless.svg';
+import runningSvg from 'icons/_icon_status_running_borderless.svg';
+import skippedSvg from 'icons/_icon_status_skipped_borderless.svg';
+import successSvg from 'icons/_icon_status_success_borderless.svg';
+import warningSvg from 'icons/_icon_status_warning_borderless.svg';
 
 ((gl) => {
   gl.VueStage = Vue.extend({
     data() {
+      const svgsDictionary = {
+        icon_status_canceled: canceledSvg,
+        icon_status_created: createdSvg,
+        icon_status_failed: failedSvg,
+        icon_status_manual: manualSvg,
+        icon_status_pending: pendingSvg,
+        icon_status_running: runningSvg,
+        icon_status_skipped: skippedSvg,
+        icon_status_success: successSvg,
+        icon_status_warning: warningSvg,
+      };
+
       return {
         builds: '',
         spinner: '<span class="fa fa-spinner fa-spin"></span>',
+        svg: svgsDictionary[this.stage.status.icon],
       };
     },
+
     props: {
       stage: {
         type: Object,
         required: true,
       },
-      svgs: {
-        type: Object,
-        required: true,
-      },
-      match: {
-        type: Function,
-        required: true,
-      },
     },
 
     updated() {
@@ -73,11 +88,6 @@
       tooltip() {
         return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
       },
-      svg() {
-        const { icon } = this.stage.status;
-        const stageIcon = icon.replace(/icon/i, 'stage_icon');
-        return this.svgs[this.match(stageIcon)];
-      },
       triggerButtonClass() {
         return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
       },
@@ -91,8 +101,7 @@
           data-placement="top"
           data-toggle="dropdown"
           type="button"
-          :aria-label="stage.title"
-        >
+          :aria-label="stage.title">
           <span v-html="svg" aria-hidden="true"></span>
           <i class="fa fa-caret-down" aria-hidden="true"></i>
         </button>
@@ -101,8 +110,7 @@
           <div
             :class="dropdownClass"
             class="js-builds-dropdown-list scrollable-menu"
-            v-html="buildsOrSpinner"
-          >
+            v-html="buildsOrSpinner">
           </div>
         </ul>
       </div>

app/assets/javascripts/vue_pipelines_index/status.js

 /* global Vue, gl */
 /* eslint-disable no-param-reassign */
 
+import canceledSvg from 'icons/_icon_status_canceled.svg';
+import createdSvg from 'icons/_icon_status_created.svg';
+import failedSvg from 'icons/_icon_status_failed.svg';
+import manualSvg from 'icons/_icon_status_manual.svg';
+import pendingSvg from 'icons/_icon_status_pending.svg';
+import runningSvg from 'icons/_icon_status_running.svg';
+import skippedSvg from 'icons/_icon_status_skipped.svg';
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+
 ((gl) => {
   gl.VueStatusScope = Vue.extend({
     props: [
-      'pipeline', 'svgs', 'match',
+      'pipeline',
     ],
+
+    data() {
+      const svgsDictionary = {
+        icon_status_canceled: canceledSvg,
+        icon_status_created: createdSvg,
+        icon_status_failed: failedSvg,
+        icon_status_manual: manualSvg,
+        icon_status_pending: pendingSvg,
+        icon_status_running: runningSvg,
+        icon_status_skipped: skippedSvg,
+        icon_status_success: successSvg,
+        icon_status_warning: warningSvg,
+      };
+
+      return {
+        svg: svgsDictionary[this.pipeline.details.status.icon],
+      };
+    },
+
     computed: {
       cssClasses() {
         const cssObject = { 'ci-status': true };
         cssObject[`ci-${this.pipeline.details.status.group}`] = true;
         return cssObject;
       },
-      svg() {
-        return this.svgs[this.match(this.pipeline.details.status.icon)];
-      },
+
       detailsPath() {
         const { status } = this.pipeline.details;
         return status.has_details ? status.details_path : false;
       },
+
+      content() {
+        return `${this.svg} ${this.pipeline.details.status.text}`;
+      },
     },
     template: `
       <td class="commit-link">
         <a
-          :class='cssClasses'
-          :href='detailsPath'
-          v-html='svg + pipeline.details.status.text'
-        >
+          :class="cssClasses"
+          :href="detailsPath"
+          v-html="content">
         </a>
       </td>
     `,

app/assets/javascripts/vue_pipelines_index/time_ago.js

@@ -4,14 +4,17 @@
 window.Vue = require('vue');
 require('../lib/utils/datetime_utility');
 
+const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg');
+
 ((gl) => {
   gl.VueTimeAgo = Vue.extend({
     data() {
       return {
         currentTime: new Date(),
+        iconTimerSvg,
       };
     },
-    props: ['pipeline', 'svgs'],
+    props: ['pipeline'],
     computed: {
       timeAgo() {
         return gl.utils.getTimeago();
@@ -56,7 +59,7 @@ require('../lib/utils/datetime_utility');
     template: `
       <td class="pipelines-time-ago">
         <p class="duration" v-if='duration'>
-          <span v-html='svgs.iconTimer'></span>
+          <span v-html="iconTimerSvg"></span>
           {{duration}}
         </p>
         <p class="finished-at" v-if='timeStopped'>

app/assets/javascripts/vue_shared/components/commit.js

 /* global Vue */
 window.Vue = require('vue');
+const commitIconSvg = require('icons/_icon_commit.svg');
 
 (() => {
   window.gl = window.gl || {};
@@ -69,11 +70,6 @@ window.Vue = require('vue');
         required: false,
         default: () => ({}),
       },
-
-      commitIconSvg: {
-        type: String,
-        required: false,
-      },
     },
 
     computed: {
@@ -116,6 +112,10 @@ window.Vue = require('vue');
       },
     },
 
+    data() {
+      return { commitIconSvg };
+    },
+
     template: `
       <div class="branch-commit">
 

app/assets/javascripts/vue_shared/components/pipelines_table.js

@@ -21,14 +21,6 @@ require('./pipelines_table_row');
         default: () => ([]),
       },
 
-      /**
-       * TODO: Remove this when we have webpack.
-       */
-      svgs: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
     },
 
     components: {
@@ -51,8 +43,7 @@ require('./pipelines_table_row');
           <template v-for="model in pipelines"
             v-bind:model="model">
             <tr is="pipelines-table-row-component"
-              :pipeline="model"
-              :svgs="svgs"></tr>
+              :pipeline="model"></tr>
           </template>
         </tbody>
       </table>

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

@@ -25,14 +25,6 @@ require('./commit');
         default: () => ({}),
       },
 
-      /**
-       * TODO: Remove this when we have webpack;
-       */
-      svgs: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
     },
 
     components: {
@@ -174,30 +166,9 @@ require('./commit');
       },
     },
 
-    methods: {
-      /**
-       * FIXME: This should not be in this component but in the components that
-       * need this function.
-       *
-       * Used to render SVGs in the following components:
-       * - status-scope
-       * - dropdown-stage
-       *
-       * @param  {String} string
-       * @return {String}
-       */
-      match(string) {
-        return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
-      },
-    },
-
     template: `
       <tr class="commit">
-        <status-scope
-          :pipeline="pipeline"
-          :svgs="svgs"
-          :match="match">
-        </status-scope>
+        <status-scope :pipeline="pipeline"/>
 
         <pipeline-url :pipeline="pipeline"></pipeline-url>
 
@@ -208,26 +179,20 @@ require('./commit');
             :commit-url="commitUrl"
             :short-sha="commitShortSha"
             :title="commitTitle"
-            :author="commitAuthor"
-            :commit-icon-svg="svgs.commitIconSvg">
-          </commit-component>
+            :author="commitAuthor"/>
         </td>
 
         <td class="stage-cell">
           <div class="stage-container dropdown js-mini-pipeline-graph"
             v-if="pipeline.details.stages.length > 0"
             v-for="stage in pipeline.details.stages">
-            <dropdown-stage
-              :stage="stage"
-              :svgs="svgs"
-              :match="match">
-            </dropdown-stage>
+            <dropdown-stage :stage="stage"/>
           </div>
         </td>
 
-        <time-ago :pipeline="pipeline" :svgs="svgs"></time-ago>
+        <time-ago :pipeline="pipeline"/>
 
-        <pipeline-actions :pipeline="pipeline" :svgs="svgs"></pipeline-actions>
+        <pipeline-actions :pipeline="pipeline" />
       </tr>
     `,
   });

app/assets/javascripts/vue_shared/components/table_pagination.js

@@ -19,7 +19,6 @@ window.Vue = require('vue');
 
       /**
         This function will take the information given by the pagination component
-        And make a new Turbolinks call
 
         Here is an example `change` method:
 

app/assets/stylesheets/pages/environments.scss

@@ -200,6 +200,25 @@
   &.deploy-board-error-message {
     justify-content: center;
   }
+
+  .deploy-board-empty-state-svg {
+    order: 1;
+    width: 90px;
+    margin: auto 0 auto 20px;
+  }
+
+  .deploy-board-empty-state-text {
+    order: 2;
+    flex-wrap: wrap;
+    margin: auto auto 15px 0;
+
+    .title {
+      order: 1;
+      display: flex;
+      font-size: 17px;
+      line-height: 40px;
+    }
+  }
 }
 
 .deploy-board-instance {

app/views/projects/commit/_pipelines_list.haml

@@ -2,27 +2,6 @@
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
 } }
-.pipeline-svgs{ data: { "commit_icon_svg" => custom_icon("icon_commit"),
-  "icon_status_canceled" => custom_icon("icon_status_canceled"),
-  "icon_status_running" => custom_icon("icon_status_running"),
-  "icon_status_skipped" => custom_icon("icon_status_skipped"),
-  "icon_status_created" => custom_icon("icon_status_created"),
-  "icon_status_pending" => custom_icon("icon_status_pending"),
-  "icon_status_success" => custom_icon("icon_status_success"),
-  "icon_status_failed" => custom_icon("icon_status_failed"),
-  "icon_status_warning" => custom_icon("icon_status_warning"),
-  "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
-  "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
-  "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
-  "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
-  "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
-  "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
-  "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
-  "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
-  "icon_play" => custom_icon("icon_play"),
-  "icon_timer" => custom_icon("icon_timer"),
-  "icon_status_manual" => custom_icon("icon_status_manual"),
-} }
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')

app/views/projects/environments/index.html.haml

@@ -14,7 +14,4 @@
   "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped),
   "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
   "help-page-path" => help_page_path("ci/environments"),
-  "css-class" => container_class,
-  "commit-icon-svg" => custom_icon("icon_commit"),
-  "terminal-icon-svg" => custom_icon("icon_terminal"),
-  "play-icon-svg" => custom_icon("icon_play") } }
+  "css-class" => container_class } }

app/views/projects/pipelines/index.html.haml

@@ -52,29 +52,7 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
   .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
-    .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
-      "icon_status_canceled" => custom_icon("icon_status_canceled"),
-      "icon_status_running" => custom_icon("icon_status_running"),
-      "icon_status_skipped" => custom_icon("icon_status_skipped"),
-      "icon_status_created" => custom_icon("icon_status_created"),
-      "icon_status_pending" => custom_icon("icon_status_pending"),
-      "icon_status_success" => custom_icon("icon_status_success"),
-      "icon_status_failed" => custom_icon("icon_status_failed"),
-      "icon_status_warning" => custom_icon("icon_status_warning"),
-      "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
-      "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
-      "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
-      "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
-      "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
-      "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
-      "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
-      "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
-      "icon_play" => custom_icon("icon_play"),
-      "icon_timer" => custom_icon("icon_timer"),
-      "icon_status_manual" => custom_icon("icon_status_manual"),
-    } }
-
-      .vue-pipelines-index
+    .vue-pipelines-index
 
 = page_specific_javascript_bundle_tag('common_vue')
 = page_specific_javascript_bundle_tag('vue_pipelines')

app/views/shared/empty_states/icons/_deploy_board.svg

+<svg width="55" height="44" viewBox="0 0 55 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(1.488 .803)"><rect stroke="#E5E5E5" stroke-width="1.6" fill="#FFF" width="42" height="42" rx="4"/><rect stroke="#E7E7E7" stroke-width="1.6" fill="#FFF" x="6" y="12" width="7.171" height="24" rx="2"/><rect stroke="#B5A7DD" stroke-width="1.6" fill="#FFF" x="6" y="5" width="32.17" height="3.5" rx="1.75"/><rect stroke="#FDE5D8" stroke-width="1.6" fill="#FFF" x="17" y="12" width="21.17" height="24" rx="2"/><rect fill="#E52C5A" x="19.74" y="14.197" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="28.35" y="18.272" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="26.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="30.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E52C5A" x="21.911" y="21.272" width="4.78" height="2.408" rx="1.204"/><rect fill="#FC8A51" x="28.472" y="22.429" width="7.171" height="2.408" rx="1.204"/><rect fill="#FDE5D8" x="26.691" y="8.429" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="14.85" width="2.39" height="2.408" rx="1.195"/><rect fill="#E52C5A" x="8.512" y="19.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="31.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#E7E7E7" x="8.512" y="27.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#B5A7DD" x="8.512" y="23.197" width="2.39" height="2.408" rx="1.195"/></g><g transform="rotate(-45 33.371 -12.99)"><ellipse stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".1" fill="#FFF" cx="11.951" cy="12.041" rx="11.951" ry="12.041"/><path d="M5.536 22.29c5.716 3.3 13.046 1.307 16.37-4.452 3.326-5.759 1.387-13.103-4.329-16.403" stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".3" fill="#FFF"/><rect fill="#6B4FBB" x="9.561" y="23.279" width="4.78" height="13.646" rx="2.39"/></g></g></svg>

app/views/shared/issuable/_sidebar.html.haml

@@ -78,7 +78,7 @@
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
       - if issuable.has_attribute?(:time_estimate)
         #issuable-time-tracker.block
-          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'stopwatch-svg' => custom_icon('icon_stopwatch'), 'docs-url' => help_page_path('workflow/time_tracking.md') }
+          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'docs-url' => help_page_path('workflow/time_tracking.md') }
             // Fallback while content is loading
             .title.hide-collapsed
               Time tracking

config/webpack.config.js

@@ -64,6 +64,10 @@ var config = {
             'stage-2'
           ]
         }
+      },
+      {
+        test: /\.svg$/,
+        use: 'raw-loader'
       }
     ]
   },
@@ -130,6 +134,8 @@ var config = {
     alias: {
       '~':              path.join(ROOT_PATH, 'app/assets/javascripts'),
       'emoji-aliases$': path.join(ROOT_PATH, 'fixtures/emojis/aliases.json'),
+      'empty_states':   path.join(ROOT_PATH, 'app/views/shared/empty_states'),
+      'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
       'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
       'vue$':           'vue/dist/vue.common.js',
     }

package.json

@@ -25,6 +25,7 @@
     "js-cookie": "^2.1.3",
     "mousetrap": "^1.4.6",
     "pikaday": "^1.5.1",
+    "raw-loader": "^0.5.1",
     "select2": "3.5.2-browserify",
     "stats-webpack-plugin": "^0.4.3",
     "timeago.js": "^2.0.5",

spec/javascripts/environments/deploy_board_component_spec.js

-const Vue = require('vue');
-const DeployBoard = require('~/environments/components/deploy_board_component');
-const Service = require('~/environments/services/environments_service');
-const { deployBoardMockData } = require('./mock_data');
+import Vue from 'vue';
+import DeployBoard from '~/environments/components/deploy_board_component';
+import Service from '~/environments/services/environments_service';
+
+const { deployBoardMockData, invalidDeployBoardMockData } = require('./mock_data');
 
 describe('Deploy Board', () => {
   let DeployBoardComponent;
@@ -77,6 +78,46 @@ describe('Deploy Board', () => {
     });
   });
 
+  describe('successfull request without valid data', () => {
+    const deployBoardInterceptorInvalidData = (request, next) => {
+      next(request.respondWith(JSON.stringify(invalidDeployBoardMockData), {
+        status: 200,
+      }));
+    };
+
+    let component;
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(deployBoardInterceptorInvalidData);
+
+      this.service = new Service('environments');
+
+      component = new DeployBoardComponent({
+        propsData: {
+          store: {},
+          service: new Service('environments'),
+          deployBoardData: invalidDeployBoardMockData,
+          environmentID: 1,
+          endpoint: 'endpoint',
+        },
+      }).$mount();
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, deployBoardInterceptorInvalidData,
+      );
+    });
+
+    it('should render the empty state', (done) => {
+      setTimeout(() => {
+        expect(component.$el.querySelector('.deploy-board-empty-state-svg svg')).toBeDefined();
+        expect(component.$el.querySelector('.deploy-board-empty-state-text .title').textContent).toContain('Kubernetes deployment not found');
+        done();
+      }, 0);
+    });
+  });
+
   describe('unsuccessfull request', () => {
     const deployBoardErrorInterceptor = (request, next) => {
       next(request.respondWith(JSON.stringify({}), {
@@ -108,7 +149,7 @@ describe('Deploy Board', () => {
 
     it('should render empty state', (done) => {
       setTimeout(() => {
-        expect(component.$el.children.length).toEqual(0);
+        expect(component.$el.children.length).toEqual(1);
         done();
       }, 0);
     });

spec/javascripts/environments/deploy_board_instance_component_spec.js

-const Vue = require('vue');
-const DeployBoardInstance = require('~/environments/components/deploy_board_instance_component');
+import Vue from 'vue';
+import DeployBoardInstance from '~/environments/components/deploy_board_instance_component';
 
 describe('Deploy Board Instance', () => {
   let DeployBoardInstanceComponent;

spec/javascripts/environments/environment_actions_spec.js

@@ -23,7 +23,6 @@ describe('Actions Component', () => {
       el: document.querySelector('.test-dom-element'),
       propsData: {
         actions: actionsMock,
-        playIconSvg: '<svg></svg>',
       },
     });
 
@@ -34,33 +33,4 @@ describe('Actions Component', () => {
       component.$el.querySelector('.dropdown-menu li a').getAttribute('href'),
     ).toEqual(actionsMock[0].play_path);
   });
-
-  it('should render a dropdown with the provided svg', () => {
-    const actionsMock = [
-      {
-        name: 'bar',
-        play_path: 'https://gitlab.com/play',
-      },
-      {
-        name: 'foo',
-        play_path: '#',
-      },
-    ];
-
-    const component = new ActionsComponent({
-      el: document.querySelector('.test-dom-element'),
-      propsData: {
-        actions: actionsMock,
-        playIconSvg: '<svg></svg>',
-      },
-    });
-
-    expect(
-      component.$el.querySelector('.js-dropdown-play-icon-container').children,
-    ).toContain('svg');
-
-    expect(
-      component.$el.querySelector('.js-action-play-icon-container').children,
-    ).toContain('svg');
-  });
 });

spec/javascripts/environments/mock_data.js

@@ -120,7 +120,15 @@ const deployBoardMockData = {
   abort_url: 'url',
   rollback_url: 'url',
   completion: 100,
-  is_completed: true,
+  valid: true,
+};
+
+const invalidDeployBoardMockData = {
+  instances: [],
+  abort_url: 'url',
+  rollback_url: 'url',
+  completion: 100,
+  valid: false,
 };
 
 module.exports = {
@@ -128,4 +136,5 @@ module.exports = {
   environment,
   serverData,
   deployBoardMockData,
+  invalidDeployBoardMockData,
 };

yarn.lock

@@ -3566,6 +3566,10 @@ raw-body@~2.2.0:
     iconv-lite "0.4.15"
     unpipe "1.0.0"
 
+raw-loader@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+
 rc@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"