Updates Component with documentation and template with links for details

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

 (() => {
+  
+  /**
+   * Envrionment Item Component
+   * 
+   * Used in a hierarchical structure to show folders with children
+   * in a table.
+   * Based on [Tree View](https://vuejs.org/examples/tree-view.html) 
+   * The template used in this Component is non recursive.
+   * 
+   * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539) 
+   * for more information.
+   */
+  
   const Store = gl.environmentsList.EnvironmentsStore;
 
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
   
-  debugger;
-  
   gl.environmentsList.EnvironmentItem = Vue.extend({
     
     template: '#environment-item-template',
@@ -21,12 +32,24 @@
     },
     
     computed: {
+      
+      /**
+       * If an item has a `children` entry it means it is a folder.
+       * Folder items have different behaviours - it is possible to toggle
+       * them and show their children. 
+       *
+       * @returns {Number}  The length of the children array
+       */
       isFolder: function () {
         return this.model.children && this.model.children.length
       }
     },
 
     methods: {
+
+      /**
+       * Toggles the visibility of a folders' children.
+       */
       toggle: function () {
         if (this.isFolder) {
           this.open = !this.open;

app/views/projects/environments/components/_environment.html.haml

-%environment-item{"inline-template" => true, 
-  "v-for" => "environment in state.environments", 
-  ":model" => "environment"}
-  .environment-folder-name{"@click" => "toggle"}
-    %span.icon-container{"v-if" => "isFolder"}
-      %i{"v-show" => "open"}
-        = icon("caret-down")
-
-      %i{"v-show" => "!open"}
-        = icon("caret-right")
-    %span.name-container
-      {{model.name}}
-
-    //  {"name":"review","children":[{"id":8,"project_id":10,"name":"review/app","created_at":"2016-10-13T14:15:33.550Z","updated_at":"2016-10-13T14:15:33.550Z","external_url":"http://gitlab.com","environment_type":"review","state":"opened"}]}
+%script#environment-item-template{ "type"=> "text/x-template" }
+  %tr.environment
+    %td.environment-folder-name{ "@click" => "toggle" }
+      %a{ "v-if" => "!isFolder", 
+        ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id" }
+        {{model.name}}
+        
+      %span{ "v-if" => "isFolder" }
+        %i{ "v-show" => "open" }
+          = icon("caret-down")
+
+        %i{ "v-show" => "!open" }
+          = icon("caret-right")
+
\ No newline at end of file
+        {{model.name}}
+
+    %td.deployment-column
+      %span{ "v-if" => "model.last_deployment && model.last_deployment.iid" }
+        {{model.last_deployment.iid}}
+        by
+        %span{ "v-if" => "model.last_deployment.user" }
+          {{model.last_deployment.user}}
+
+    %td
+      column 3
+
+    %td
+      column 4
+
+    %td 
+      column 5
+
+    %td.hidden-xs
+      .pull-right
+        actions
+        -# = render 'projects/environments/external_url', environment: "model"
+        -# = render 'projects/deployments/actions', deployment: "model.last_deployment"
+        -# = render 'projects/environments/stop', environment: "model"
+        -# = render 'projects/deployments/rollback', deployment: "model.last_deployment"
+        
+  %tr.environment-children{ "v-show" => "open", 
+    "v-if"=>"isFolder", 
+    "v-for" => "child in model.children", 
+    ":model" => "child" }
+
+    %td
+      %a{ ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + child.id" }
+        {{child.name}}
+  
+    %td.deployment-column
+      %span{ "v-if" => "child.last_deployment && child.last_deployment.iid" }
+        {{child.last_deployment.iid}}
+      %span{ "v-if" => "child.last_deployment && child.last_deployment.user" }
+        {{child.last_deployment.user}}
+        /= user_avatar(user: "child.last_deployment.user", size: 20)
+
+    %td
+      column 3
+
+    %td
+      column 4
+
+    %td 
+      column 5
+
+    %td.hidden-xs
+      .pull-right
+        actions
\ No newline at end of file

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

@@ -3,7 +3,7 @@
 = render "projects/pipelines/head"
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('environments/environments_bundle.js')
+  = page_specific_javascript_tag("environments/environments_bundle.js")
 
 %div{ class: container_class }
   .top-area
@@ -22,7 +22,7 @@
 
     - if can?(current_user, :create_environment, @project) && !@all_environments.blank?
       .nav-controls
-        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
+        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: "btn btn-create" do
           New environment
 
   #environments-list-view{ data: environments_list_data, class: "environments-container" }
@@ -51,33 +51,9 @@
           %th
           %th.hidden-xs
         %tbody
-          %tr{"is"=>"environment-item",
+          %tr{ "is"=>"environment-item",
             "inline-template" => true, 
             "v-for" => "environment in state.environments", 
-            ":model" => "environment"}
-
-
-%script#environment-item-template{"type"=> "text/x-template"}
-  %tr.environment
-    %td.environment-folder-name{"@click" => "toggle"}
-      %span.icon-container{"v-if" => "isFolder"}
-        %i{"v-show" => "open"}
-          = icon("caret-down")
+            ":model" => "environment" }
 
-        %i{"v-show" => "!open"}
-          = icon("caret-right")
+=render "projects/environments/components/environment"
\ No newline at end of file
-      %span.name-container
-        {{model.name}}
-    %td
-      %a{{"v-if" => "model.last_deployment"}}
-        {{model.last_deployment.id}}
-  %tr.environment-children{"v-show" => "open", 
-    "v-if"=>"isFolder", 
-    "v-for" => "child in model.children", 
-    ":model" => "child"}
-    %td
-      {{child.name}}
-    %td.deployment-column
-      %span{"v-if" => "child.last_deployment && child.last_deployment.iid"}
-        {{child.last_deployment.iid}}
-    
\ No newline at end of file