Adds counter for number of children in each folder

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

@@ -37,10 +37,10 @@
        * Folder items have different behaviours - it is possible to toggle
        * them and show their children. 
        *
-       * @returns {Number}  The length of the children array
+       * @returns {Boolean}
        */
       isFolder () {
-        return this.model.children && this.model.children.length
+        return this.model.children && this.model.children.length ? true : false;
       },
       
       /**
@@ -51,6 +51,17 @@
        */
       isChildren () {
         return this.model['vue-isChildren'];
+      },
+      
+      
+      /**
+       * Counts the number of environments in each folder.
+       * Used to show a badge with the counter.
+       *
+       * @returns {Boolean}  The number of environments for the current folder
+       */
+      childrenCounter () {
+        return this.model.children && this.model.children.length;
       }
     },
 

app/assets/stylesheets/pages/environments.scss

@@ -64,7 +64,7 @@
     }
   }
   
-  .children-row .environment-name{
+  .children-row .environment-name {
     margin-left: 17px;
     margin-right: -17px;
   }
@@ -75,6 +75,13 @@
   
   .folder-name {
     cursor: pointer;
+    
+    .badge {
+      font-weight: normal;
+      background-color: $gray-darker;
+      color: $gl-placeholder-color;
+      vertical-align: baseline;
+    }
   }
 }
 

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

@@ -14,6 +14,9 @@
           =icon("caret-right")
         
         {{model.name}}
+        
+        %span.badge 
+          {{childrenCounter}}
     
     %td.deployment-column
       %span{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.iid"}