Moves check for latest key to store instead of poluting the view making it...

Moves check for latest key to store instead of poluting the view making it reusable between endpoints.

app/assets/javascripts/environments/stores/environments_store.js.es6

@@ -20,8 +20,12 @@ class EnvironmentsStore {
    *
    * Stores the received environments.
    *
-   * Each environment has the following schema
+   * In the main environments endpoint, each environment has the following schema
    * { name: String, size: Number, latest: Object }
+   * In the endpoint to retrieve environments from each folder, the environment does
+   * not have the `latest` key and the data is all in the root level.
+   * To avoid doing this check in the view, we store both cases the same by extracting
+   * what is inside the `latest` key.
    *
    * If the `size` is bigger than 1, it means it should be rendered as a folder.
    * In those cases we add `isFolder` key in order to render it properly.
@@ -31,11 +35,20 @@ class EnvironmentsStore {
    */
   storeEnvironments(environments = []) {
     const filteredEnvironments = environments.map((env) => {
+      let filtered = {};
+
       if (env.size > 1) {
-        return Object.assign({}, env, { isFolder: true });
+        filtered = Object.assign({}, env, { isFolder: true });
+      }
+
+      if (env.latest) {
+        filtered = Object.assign(filtered, env, env.latest, { folderName: env.name });
+        delete filtered.latest;
+      } else {
+        filtered = Object.assign(filtered, env);
       }
 
-      return env;
+      return filtered;
     });
 
     this.state.environments = filteredEnvironments;

app/assets/stylesheets/pages/environments.scss

@@ -118,6 +118,7 @@
   .folder-icon {
     margin-right: 3px;
     color: $gl-text-color-secondary;
+    display: inline-block;
 
     .fa:nth-child(1) {
       margin-right: 3px;