Adds external url component for environment

3 files changed, 33 insertions, 7 deletions

diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
new file mode 100644
index 00000000000..0fd91afb32a
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -0,0 +1,22 @@
+/*= require vue
+/* global Vue */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  window.gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
+    props: {
+      external_url: {
+        type: String,
+        default: '',
+      },
+    },
+
+    template: `
+      <a class="btn external_url":href="external_url" :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 7ffc289719e..06077c601b5 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -1,5 +1,6 @@
 /*= require vue_common_component/commit
 /*= require ./environment_actions
+/*= require ./environment_external_url
 /* globals Vue, timeago */
 
 (() => {
@@ -22,6 +23,7 @@
     components: {
       'commit-component': window.gl.CommitComponent,
       'actions-component': window.gl.environmentsList.ActionsComponent,
+      'external-url-component': window.gl.environmentsList.ExternalUrlComponent,
     },
 
     props: ['model', 'can-create-deployment', 'can-create-deployment', 'can-read-environment'],
@@ -247,11 +249,11 @@
       },
 
       canReadEnvironmentParsed() {
-        return convertToBoolean(this.canReadEnvironment);
+        return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
       },
 
       canCreateDeploymentParsed() {
-        return convertToBoolean(this.canCreateDeployment);
+        return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
       },
     },
 
@@ -291,10 +293,6 @@
       },
     },
 
-    ready() {
-      debugger;
-    },
-
     template: `
       <tr>
         <td v-bind:class="rowClass">
@@ -366,6 +364,12 @@
             <div v-if="hasManualActions && canCreateDeploymentParsed">
               <actions-component :actions="manualActions"></actions-component>
             </div>
+            
+            <div v-if="model.external_url && canReadEnvironmentParsed">
+              <external-url-component 
+                :external_url="model.external_url">
+              </external_url-component>
+            </div>
           </div>
         </td>
       </tr>
diff --git a/app/assets/javascripts/vue_common_component/commit.js.es6 b/app/assets/javascripts/vue_common_component/commit.js.es6
index 25c1c27bee7..053d08bb089 100644
--- a/app/assets/javascripts/vue_common_component/commit.js.es6
+++ b/app/assets/javascripts/vue_common_component/commit.js.es6
@@ -111,7 +111,7 @@
     },
 
     /**
-     * In order to reuse the svg instead of copy and paste in this template the html_safe
+     * 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