Refactor to work with vue 2 with just one root element

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

@@ -81,7 +81,9 @@ $(() => {
      * Toggles loading property.
      */
     mounted() {
-      window.gl.environmentsService.all().then(resp => resp.json()).then((json) => {
+      window.gl.environmentsService.all()
+      .then(resp => resp.json())
+      .then((json) => {
         this.store.storeEnvironments(json);
         this.loading = false;
       });
@@ -114,20 +116,30 @@ $(() => {
       return false;
     },
 
+    methods: {
+      toggleRow(model) {
+        return this.store.toggleFolder(model.name);
+      },
+    },
+
     template: `
-      <div>
+      <div class="container-fluid container-limited">
         <div class="top-area">
           <ul v-if="!isLoading" class="nav-links">
             <li v-bind:class="{ 'active': scope === undefined}">
               <a :href="projectEnvironmentsPath">
                 Available
-                <span class="badge js-available-environments-count" v-html="state.availableCounter"></span>
+                <span
+                  class="badge js-available-environments-count"
+                  v-html="state.availableCounter"></span>
               </a>
             </li>
-            <li v-bind:class="{ 'active': scope === 'stopped'}">
+            <li v-bind:class="{ 'active' : scope === 'stopped'}">
               <a :href="projectStoppedEnvironmentsPath">
                 Stopped
-                <span class="badge js-stopped-environments-count" v-html="state.stoppedCounter"></span>
+                <span
+                  class="badge js-stopped-environments-count"
+                  v-html="state.stoppedCounter"></span>
               </a>
             </li>
           </ul>
@@ -143,7 +155,9 @@ $(() => {
             <i class="fa fa-spinner spin"></i>
           </div>
 
-          <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0">
+          <div
+            class="blank-state blank-state-no-icon"
+            v-if="!loading && state.environments.length === 0">
             <h2 class="blank-state-title">
               You don't have any environments right now.
             </h2>
@@ -155,28 +169,48 @@ $(() => {
               <a :href="helpPagePath">
                 Read more about environments
               </a>
-              <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create">
+              <a
+                v-if="canCreateEnvironment"
+                :href="newEnvironmentPath"
+                class="btn btn-create">
                 New Environment
               </a>
             </p>
           </div>
 
-          <div class="table-holder" v-if="!loading && state.environments.length > 0">
+          <div
+            class="table-holder"
+            v-if="!loading && state.environments.length > 0">
             <table class="table ci-table environments">
               <thead>
-                <th>Environment</th>
-                <th>Last deployment</th>
-                <th>Build</th>
-                <th>Commit</th>
-                <th></th>
-                <th class="hidden-xs"></th>
+                <tr>
+                  <th>Environment</th>
+                  <th>Last deployment</th>
+                  <th>Build</th>
+                  <th>Commit</th>
+                  <th></th>
+                  <th class="hidden-xs"></th>
+                </tr>
               </thead>
               <tbody>
-                <tr is="environment-item"
-                  v-for="model in filteredEnvironments"
-                  :model="model"
-                  :can-create-deployment="canCreateDeploymentParsed"
-                  :can-read-environment="canReadEnvironmentParsed"></tr>
+                <template v-for="model in filteredEnvironments"
+                  v-bind:model="model">
+
+                  <tr
+                    is="environment-item"
+                    :model="model"
+                    :toggleRow="toggleRow.bind(model)"
+                    :can-create-deployment="canCreateDeploymentParsed"
+                    :can-read-environment="canReadEnvironmentParsed"></tr>
+
+                  <tr v-if="model.isOpen && model.children && model.children.length > 0"
+                    is="environment-item"
+                    v-for="children in model.children"
+                    :model="children"
+                    :toggleRow="toggleRow.bind(children)">
+                    </tr>
+
+                </template>
               </tbody>
             </table>
           </div>

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

@@ -31,11 +31,10 @@
       'rollback-component': window.gl.environmentsList.RollbackComponent,
     },
 
-    props: ['model', 'can-create-deployment', 'can-read-environment'],
+    props: ['model', 'toggleRow', 'can-create-deployment', 'can-read-environment'],
 
     data() {
       return {
-        open: false,
         rowClass: {
           'children-row': this.model['vue-isChildren'],
         },
@@ -282,30 +281,19 @@
       return {}.hasOwnProperty.call(obj, key);
     },
 
-    methods: {
-      /**
-       * Toggles the visibility of a folders' children.
-       */
-      toggle() {
-        if (this.isFolder) {
-          this.open = !this.open;
-        }
-      },
-    },
-
     template: `
       <tr>
-        <td v-bind:class="{ 'children-row': isChildren}" class="col-sm-2">
+        <td v-bind:class="{ 'children-row': isChildren}">
           <a
             v-if="!isFolder"
             class="environment-name"
             :href="model.environment_url"
             v-html="model.name">
           </a>
-          <span v-else v-on:click="toggle" class="folder-name">
+          <span v-else v-on:click="toggleRow(model)" class="folder-name">
             <span class="folder-icon">
-              <i v-show="open" class="fa fa-caret-down"></i>
-              <i v-show="!open" class="fa fa-caret-right"></i>
+              <i v-show="model.isOpen" class="fa fa-caret-down"></i>
+              <i v-show="!model.isOpen" class="fa fa-caret-right"></i>
             </span>
 
             <span v-html="model.name"></span>
@@ -314,7 +302,7 @@
           </span>
         </td>
 
-        <td class="deployment-column col-sm-2">
+        <td class="deployment-column">
           <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid" v-html="deploymentInternalId">
 
             <span v-if="model.last_deployment.user">
@@ -329,7 +317,7 @@
           </span>
         </td>
 
-        <td class="col-sm-2">
+        <td>
           <a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable"
             class="build-link"
             :href="model.last_deployment.deployable.build_url"
@@ -337,7 +325,7 @@
           </a>
         </td>
 
-        <td class="col-sm-2">
+        <td>
           <div v-if="!isFolder && model.last_deployment">
             <commit-component
               :tag="commitTag"
@@ -353,7 +341,7 @@
           </p>
         </td>
 
-        <td class="col-sm-1">
+        <td>
           <span
             v-if="!isFolder && model.last_deployment"
             class="environment-created-date-timeago"
@@ -361,7 +349,7 @@
           </span>
         </td>
 
-        <td class="hidden-xs col-sm-3">
+        <td class="hidden-xs">
           <div v-if="!isFolder">
             <div v-if="hasManualActions && canCreateDeployment" class="inline">
               <actions-component
@@ -390,12 +378,6 @@
           </div>
         </td>
       </tr>
-
-      <tr v-if="open && isFolder"
-        is="environment-item"
-        v-for="model in model.children"
-        :model="model">
-      </tr>
     `,
   });
 })();

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

@@ -64,6 +64,8 @@
             acc.push({
               name: environment.environment_type,
               children: [environment],
+              isOpen: false,
+              'vue-isChildren': environment['vue-isChildren'],
             });
           }
         } else {
@@ -78,6 +80,28 @@
       return environmentsTree;
     },
 
+    /**
+     * Toggles folder open property given the environment type.
+     *
+     * @param  {String} envType
+     * @return {Array}
+     */
+    toggleFolder(envType) {
+      const environments = this.state.environments;
+
+      const environmnetsCopy = environments.map((env) => {
+        if (env['vue-isChildren'] === true && env.name === envType) {
+          env.isOpen = !env.isOpen;
+        }
+
+        return env;
+      });
+
+      this.state.environments = environmnetsCopy;
+
+      return environmnetsCopy;
+    },
+
     /**
      * Given an array of environments, returns the number of environments
      * that have the given state.