Adds CSS for children rows to be indented

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

@@ -16,7 +16,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
   
-  gl.environmentsList.EnvironmentItem = Vue.component("environment-item", {
+  gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
     
     template: '#environment-item-template',
 
@@ -41,6 +41,16 @@
        */
       isFolder () {
         return this.model.children && this.model.children.length
+      },
+      
+      /**
+       * If an item is inside a folder structure will return true.
+       * Used for css purposes.
+       *
+       * @returns {Boolean|undefined}
+       */
+      isChildren () {
+        return this.model['vue-isChildren'];
       }
     },
 

app/assets/stylesheets/pages/environments.scss

@@ -64,7 +64,7 @@
     }
   }
   
-  .children-name{
+  .children-row .environment-name{
     margin-left: 17px;
     margin-right: -17px;
   }

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

 %script#environment-item-template{ "type"=> "text/x-template" }
   %tr
-    %td.folder-name
-      %a{ "v-if" => "!isFolder",
+    %td{"v-bind:class" => "{ 'children-row': isChildren}"}
+      %a.environment-name{ "v-if" => "!isFolder",
         ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id" }
         {{model.name}}
-      %span{ "v-if" => "isFolder",
+        
+      %span.folder-name{ "v-if" => "isFolder",
         "@click" => "toggle" }
         
         %i.folder-icon{ "v-show" => "open"}
@@ -49,4 +50,7 @@
       .pull-right{ "v-if" => "!isFolder"}
         actions will go here
       
-  %tr{"v-if" => "open && isFolder", "is" => "environment-item", "v-for" => "model in model.children", ":model" => "model"}
+  %tr{"v-if" => "open && isFolder", 
+    "is" => "environment-item", 
+    "v-for" => "model in model.children",
+    ":model" => "model"}