Merge branch '25374-svg-as-prop' into 'master'

Resolve "Provide SVG as a prop instead of hiding and copy them in environments table"

## What does this MR do?
- Provides SVG as a prop instead of manually manipulate the DOM to show it 
- Uniforms all props names in environments related components, 3 formats were being used and it was error prone
- Adds tests for the new SVG props.

## Why was this MR needed?
Technical debt.

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #25374

See merge request !7992

7 files changed, 62 insertions, 74 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 84faabf938a..1db29dd47fb 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -74,6 +74,8 @@
         projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
         newEnvironmentPath: environmentsData.newEnvironmentPath,
         helpPagePath: environmentsData.helpPagePath,
+        commitIconSvg: environmentsData.commitIconSvg,
+        playIconSvg: environmentsData.playIconSvg,
       };
     },
 
@@ -227,7 +229,9 @@
                     :model="model"
                     :toggleRow="toggleRow.bind(model)"
                     :can-create-deployment="canCreateDeploymentParsed"
-                    :can-read-environment="canReadEnvironmentParsed"></tr>
+                    :can-read-environment="canReadEnvironmentParsed"
+                    :play-icon-svg="playIconSvg"
+                    :commit-icon-svg="commitIconSvg"></tr>
 
                   <tr v-if="model.isOpen && model.children && model.children.length > 0"
                     is="environment-item"
@@ -235,7 +239,9 @@
                     :model="children"
                     :toggleRow="toggleRow.bind(children)"
                     :can-create-deployment="canCreateDeploymentParsed"
-                    :can-read-environment="canReadEnvironmentParsed">
+                    :can-read-environment="canReadEnvironmentParsed"
+                    :play-icon-svg="playIconSvg"
+                    :commit-icon-svg="commitIconSvg">
                     </tr>
 
                 </template>
diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index d149a446e0b..7c743705d51 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -12,38 +12,18 @@
         required: false,
         default: () => [],
       },
-    },
-
-    /**
-     * Appends the svg icon that were render in the index page.
-     * In order to reuse the svg instead of copy and paste in this template
-     * we need to render it outside this component using =custom_icon partial.
-     *
-     * TODO: Remove this when webpack is merged.
-     *
-     */
-    mounted() {
-      const playIcon = document.querySelector('.play-icon-svg.hidden svg');
-
-      const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
-      const actionContainers = this.$el.querySelectorAll('.action-play-icon-container');
-      // Phantomjs does not have support to iterate a nodelist.
-      const actionsArray = [].slice.call(actionContainers);
-
-      if (playIcon && actionsArray && dropdownContainer) {
-        dropdownContainer.appendChild(playIcon.cloneNode(true));
 
-        actionsArray.forEach((element) => {
-          element.appendChild(playIcon.cloneNode(true));
-        });
-      }
+      playIconSvg: {
+        type: String,
+        required: false,
+      },
     },
 
     template: `
       <div class="inline">
         <div class="dropdown">
           <a class="dropdown-new btn btn-default" data-toggle="dropdown">
-            <span class="dropdown-play-icon-container"></span>
+            <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
             <i class="fa fa-caret-down"></i>
           </a>
 
@@ -53,7 +33,9 @@
                 data-method="post"
                 rel="nofollow"
                 class="js-manual-action-link">
-                <span class="action-play-icon-container"></span>
+
+                <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
+
                 <span>
                   {{action.name}}
                 </span>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
index 79cd5ded5bd..aed65b33c04 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js.es6
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -7,14 +7,14 @@
 
   window.gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
     props: {
-      external_url: {
+      externalUrl: {
         type: String,
         default: '',
       },
     },
 
     template: `
-      <a class="btn external_url" :href="external_url" target="_blank">
+      <a class="btn external_url" :href="externalUrl" target="_blank">
         <i class="fa fa-external-link"></i>
       </a>
     `,
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 6ed14261fc3..2e046a60146 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -58,6 +58,16 @@
         required: false,
         default: false,
       },
+
+      commitIconSvg: {
+        type: String,
+        required: false,
+      },
+
+      playIconSvg: {
+        type: String,
+        required: false,
+      },
     },
 
     data() {
@@ -451,11 +461,12 @@
           <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
             <commit-component
               :tag="commitTag"
-              :commit_ref="commitRef"
-              :commit_url="commitUrl"
-              :short_sha="commitShortSha"
+              :commit-ref="commitRef"
+              :commit-url="commitUrl"
+              :short-sha="commitShortSha"
               :title="commitTitle"
-              :author="commitAuthor">
+              :author="commitAuthor"
+              :commit-icon-svg="commitIconSvg">
             </commit-component>
           </div>
           <p v-if="!isFolder && !hasLastDeploymentKey" class="commit-title">
@@ -476,6 +487,7 @@
             <div v-if="hasManualActions && canCreateDeployment"
               class="inline js-manual-actions-container">
               <actions-component
+                :play-icon-svg="playIconSvg"
                 :actions="manualActions">
               </actions-component>
             </div>
@@ -483,22 +495,22 @@
             <div v-if="model.external_url && canReadEnvironment"
               class="inline js-external-url-container">
               <external-url-component
-                :external_url="model.external_url">
-              </external_url-component>
+                :external-url="model.external_url">
+              </external-url-component>
             </div>
 
             <div v-if="isStoppable && canCreateDeployment"
               class="inline js-stop-component-container">
               <stop-component
-                :stop_url="model.stop_path">
+                :stop-url="model.stop_path">
               </stop-component>
             </div>
 
             <div v-if="canRetry && canCreateDeployment"
               class="inline js-rollback-component-container">
               <rollback-component
-                :is_last_deployment="isLastDeployment"
-                :retry_url="retryUrl">
+                :is-last-deployment="isLastDeployment"
+                :retry-url="retryUrl">
                 </rollback-component>
             </div>
           </div>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js.es6 b/app/assets/javascripts/environments/components/environment_rollback.js.es6
index 55e5c826e07..6d4e8fad604 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js.es6
+++ b/app/assets/javascripts/environments/components/environment_rollback.js.es6
@@ -7,19 +7,20 @@
 
   window.gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
     props: {
-      retry_url: {
+      retryUrl: {
         type: String,
         default: '',
       },
-      is_last_deployment: {
+
+      isLastDeployment: {
         type: Boolean,
         default: true,
       },
     },
 
     template: `
-      <a class="btn" :href="retry_url" data-method="post" rel="nofollow">
-        <span v-if="is_last_deployment">
+      <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
+        <span v-if="isLastDeployment">
           Re-deploy
         </span>
         <span v-else>
diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6
index e6d66a0148c..7292f924e5c 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js.es6
+++ b/app/assets/javascripts/environments/components/environment_stop.js.es6
@@ -7,7 +7,7 @@
 
   window.gl.environmentsList.StopComponent = Vue.component('stop-component', {
     props: {
-      stop_url: {
+      stopUrl: {
         type: String,
         default: '',
       },
@@ -15,7 +15,7 @@
 
     template: `
       <a class="btn stop-env-link"
-        :href="stop_url"
+        :href="stopUrl"
         data-confirm="Are you sure you want to stop this environment?"
         data-method="post"
         rel="nofollow">
diff --git a/app/assets/javascripts/vue_common_component/commit.js.es6 b/app/assets/javascripts/vue_common_component/commit.js.es6
index 2ef2959cbf4..62a22e39a3b 100644
--- a/app/assets/javascripts/vue_common_component/commit.js.es6
+++ b/app/assets/javascripts/vue_common_component/commit.js.es6
@@ -23,7 +23,7 @@
        * name
        * ref_url
        */
-      commit_ref: {
+      commitRef: {
         type: Object,
         required: false,
         default: () => ({}),
@@ -32,16 +32,16 @@
       /**
        * Used to link to the commit sha.
        */
-      commit_url: {
+      commitUrl: {
         type: String,
         required: false,
         default: '',
       },
 
       /**
-       * Used to show the commit short_sha that links to the commit url.
+       * Used to show the commit short sha that links to the commit url.
        */
-      short_sha: {
+      shortSha: {
         type: String,
         required: false,
         default: '',
@@ -68,6 +68,11 @@
         required: false,
         default: () => ({}),
       },
+
+      commitIconSvg: {
+        type: String,
+        required: false,
+      },
     },
 
     computed: {
@@ -80,7 +85,7 @@
        * @returns {Boolean}
        */
       hasCommitRef() {
-        return this.commit_ref && this.commit_ref.name && this.commit_ref.ref_url;
+        return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
       },
 
       /**
@@ -110,24 +115,6 @@
       },
     },
 
-    /**
-     * In order to reuse the svg instead of copy and paste in this template
-     * we need to render it outside this component using =custom_icon partial.
-     * Make sure it has this structure:
-     * .commit-icon-svg.hidden
-     *   svg
-     *
-     * TODO: Find a better way to include SVG
-     */
-    mounted() {
-      const commitIconContainer = this.$el.querySelector('.commit-icon-container');
-      const commitIcon = document.querySelector('.commit-icon-svg.hidden svg');
-
-      if (commitIconContainer && commitIcon) {
-        commitIconContainer.appendChild(commitIcon.cloneNode(true));
-      }
-    },
-
     template: `
       <div class="branch-commit">
 
@@ -138,15 +125,15 @@
 
         <a v-if="hasCommitRef"
           class="monospace branch-name"
-          :href="commit_ref.ref_url">
-          {{commit_ref.name}}
+          :href="commitRef.ref_url">
+          {{commitRef.name}}
         </a>
 
-        <div class="icon-container commit-icon commit-icon-container"></div>
+        <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
 
         <a class="commit-id monospace"
-          :href="commit_url">
-          {{short_sha}}
+          :href="commitUrl">
+          {{shortSha}}
         </a>
 
         <p class="commit-title">
@@ -162,7 +149,7 @@
             </a>
 
             <a class="commit-row-message"
-              :href="commit_url">
+              :href="commitUrl">
               {{title}}
             </a>
           </span>