Merge branch 'add-svg-loader' into 'master'

Fixes Tech debt: No need to pass svgs as props into Vue with Webpack

Closes #27692 and #27840

See merge request !9522

5 files changed, 19 insertions, 69 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 277a3acfd3c..2cb48dde628 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -35,9 +35,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: {},
@@ -176,11 +173,7 @@ module.exports = Vue.component('environment-component', {
           <environment-table
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg">
-          </environment-table>
+            :can-read-environment="canReadEnvironmentParsed"/>
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index 978d4dd8b6b..15e3f8823d2 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -1,4 +1,5 @@
 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>
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 3f782742c56..7f4e070b229 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -46,21 +46,6 @@ module.exports = Vue.component('environment-item', {
       required: false,
       default: false,
     },
-
-    commitIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
   },
 
   computed: {
@@ -487,9 +472,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
@@ -506,27 +489,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>
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
index 481e0d15e7a..e86607e78f4 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
@@ -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>
   `,
 });
diff --git a/app/assets/javascripts/environments/components/environments_table.js.es6 b/app/assets/javascripts/environments/components/environments_table.js.es6
index 33ebca19f5d..4088d63be80 100644
--- a/app/assets/javascripts/environments/components/environments_table.js.es6
+++ b/app/assets/javascripts/environments/components/environments_table.js.es6
@@ -28,21 +28,6 @@ module.exports = Vue.component('environment-table-component', {
       required: false,
       default: false,
     },
-
-    commitIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
   },
 
   template: `
@@ -63,10 +48,7 @@ module.exports = Vue.component('environment-table-component', {
           <tr is="environment-item"
             :model="model"
             :can-create-deployment="canCreateDeployment"
-            :can-read-environment="canReadEnvironment"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg"></tr>
+            :can-read-environment="canReadEnvironment"></tr>
         </template>
       </tbody>
     </table>