Refactor environments components into vue files - part 3

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

@@ -2,7 +2,7 @@
 /* global Flash */
 import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table';
+import EnvironmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
 import TablePaginationComponent from '../../vue_shared/components/table_pagination';
 import '../../lib/utils/common_utils';

app/assets/javascripts/environments/components/environment_actions.js → app/assets/javascripts/environments/components/environment_actions.vue

+<script>
 /* global Flash */
 /* eslint-disable no-new */
 
@@ -56,9 +57,12 @@ export default {
       return !action.playable;
     },
   },
-
-  template: `
-    <div class="btn-group" role="group">
+};
+</script>
+<template>
+  <div
+    class="btn-group"
+    role="group">
     <button
       type="button"
       class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
@@ -86,9 +90,9 @@ export default {
           type="button"
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
-            :class="{ 'disabled': isActionDisabled(action) }"
+          :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)">
-            ${playIconSvg}
+          <span v-html="playIconSvg"></span>
           <span>
             {{action.name}}
           </span>
@@ -96,5 +100,4 @@ export default {
       </li>
     </ul>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_item.js → app/assets/javascripts/environments/components/environment_item.vue

+<script>
 import Timeago from 'timeago.js';
 import '../../lib/utils/text_utility';
-import ActionsComponent from './environment_actions';
+import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
 import RollbackComponent from './environment_rollback.vue';
@@ -434,17 +435,20 @@ export default {
       eventHub.$emit('toggleFolder', this.model, this.folderUrl);
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <tr :class="{ 'js-child-row': model.isChildren }">
     <td>
-        <a v-if="!model.isFolder"
+      <a
+        v-if="!model.isFolder"
         class="environment-name"
         :class="{ 'prepend-left-default': model.isChildren }"
         :href="environmentPath">
         {{model.name}}
       </a>
-        <span v-else
+      <span
+        v-else
         class="folder-name"
         @click="onClickFolder"
         role="button">
@@ -461,7 +465,9 @@ export default {
         </span>
 
         <span class="folder-icon">
-            <i class="fa fa-folder" aria-hidden="true"></i>
+          <i
+            class="fa fa-folder"
+            aria-hidden="true" />
         </span>
 
         <span>
@@ -481,8 +487,11 @@ export default {
 
       <span v-if="!model.isFolder && deploymentHasUser">
         by
-          <a :href="deploymentUser.web_url" class="js-deploy-user-container">
-            <img class="avatar has-tooltip s20"
+        <a
+          :href="deploymentUser.web_url"
+          class="js-deploy-user-container">
+          <img
+            class="avatar has-tooltip s20"
             :src="deploymentUser.avatar_url"
             :alt="userImageAltDescription"
             :title="deploymentUser.username" />
@@ -491,7 +500,8 @@ export default {
     </td>
 
     <td class="environments-build-cell">
-        <a v-if="shouldRenderBuildName"
+      <a
+        v-if="shouldRenderBuildName"
         class="build-link"
         :href="buildPath">
         {{buildName}}
@@ -499,7 +509,9 @@ export default {
     </td>
 
     <td>
-        <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component">
+      <div
+        v-if="!model.isFolder && hasLastDeploymentKey"
+        class="js-commit-component">
         <commit-component
           :tag="commitTag"
           :commit-ref="commitRef"
@@ -508,43 +520,55 @@ export default {
           :title="commitTitle"
           :author="commitAuthor"/>
       </div>
-        <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
+      <p
+        v-if="!model.isFolder && !hasLastDeploymentKey"
+        class="commit-title">
         No deployments yet
       </p>
     </td>
 
     <td>
-        <span v-if="!model.isFolder && canShowDate"
+      <span
+        v-if="!model.isFolder && canShowDate"
         class="environment-created-date-timeago">
         {{createdDate}}
       </span>
     </td>
 
     <td class="environments-actions">
-        <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
-          <actions-component v-if="hasManualActions && canCreateDeployment"
+      <div
+        v-if="!model.isFolder"
+        class="btn-group pull-right"
+        role="group">
+
+        <actions-component
+          v-if="hasManualActions && canCreateDeployment"
           :service="service"
           :actions="manualActions"/>
 
-          <external-url-component v-if="externalURL && canReadEnvironment"
+        <external-url-component
+          v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"/>
 
-          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
+        <monitoring-button-component
+          v-if="monitoringUrl && canReadEnvironment"
           :monitoring-url="monitoringUrl"/>
 
-          <terminal-button-component v-if="model && model.terminal_path"
+        <terminal-button-component
+          v-if="model && model.terminal_path"
           :terminal-path="model.terminal_path"/>
 
-          <stop-component v-if="hasStopAction && canCreateDeployment"
+        <stop-component
+          v-if="hasStopAction && canCreateDeployment"
           :stop-url="model.stop_path"
           :service="service"/>
 
-          <rollback-component v-if="canRetry && canCreateDeployment"
+        <rollback-component
+          v-if="canRetry && canCreateDeployment"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
           :service="service"/>
       </div>
     </td>
   </tr>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environments_table.js → app/assets/javascripts/environments/components/environments_table.vue

+<script>
 /**
  * Render environments table.
  */
-import EnvironmentTableRowComponent from './environment_item';
+import EnvironmentTableRowComponent from './environment_item.vue';
 
 export default {
   components: {
@@ -44,46 +45,66 @@ export default {
       return `${window.location.pathname}/folders/${model.folderName}`;
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <table class="table ci-table">
     <thead>
       <tr>
-          <th class="environments-name">Environment</th>
-          <th class="environments-deploy">Last deployment</th>
-          <th class="environments-build">Job</th>
-          <th class="environments-commit">Commit</th>
-          <th class="environments-date">Updated</th>
+        <th class="environments-name">
+          Environment
+        </th>
+        <th class="environments-deploy">
+          Last deployment
+        </th>
+        <th class="environments-build">
+          Job
+        </th>
+        <th class="environments-commit">
+          Commit
+        </th>
+        <th class="environments-date">
+          Updated
+        </th>
         <th class="environments-actions"></th>
       </tr>
     </thead>
     <tbody>
-        <template v-for="model in environments"
+      <template
+        v-for="model in environments"
         v-bind:model="model">
-          <tr is="environment-item"
+        <tr
+          is="environment-item"
           :model="model"
           :can-create-deployment="canCreateDeployment"
           :can-read-environment="canReadEnvironment"
-            :service="service"></tr>
+          :service="service" />
 
         <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
           <tr v-if="isLoadingFolderContent">
             <td colspan="6" class="text-center">
-                <i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/>
+              <i
+                class="fa fa-spin fa-spinner fa-2x"
+                aria-hidden="true" />
             </td>
           </tr>
 
           <template v-else>
-              <tr is="environment-item"
+            <tr
+              is="environment-item"
               v-for="children in model.children"
               :model="children"
               :can-create-deployment="canCreateDeployment"
               :can-read-environment="canReadEnvironment"
-                :service="service"></tr>
+              :service="service" />
 
             <tr>
-                <td colspan="6" class="text-center">
-                  <a :href="folderUrl(model)" class="btn btn-default">
+              <td
+                colspan="6"
+                class="text-center">
+                <a
+                  :href="folderUrl(model)"
+                  class="btn btn-default">
                   Show all
                 </a>
               </td>
@@ -93,5 +114,4 @@ export default {
       </template>
     </tbody>
   </table>
-  `,
-};
+</template>

app/assets/javascripts/environments/folder/environments_folder_view.js

@@ -2,7 +2,7 @@
 /* global Flash */
 import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table';
+import EnvironmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
 import TablePaginationComponent from '../../vue_shared/components/table_pagination';
 import '../../lib/utils/common_utils';

spec/javascripts/environments/environment_actions_spec.js

 import Vue from 'vue';
-import actionsComp from '~/environments/components/environment_actions';
+import actionsComp from '~/environments/components/environment_actions.vue';
 
 describe('Actions Component', () => {
   let ActionsComponent;

spec/javascripts/environments/environment_item_spec.js

 import 'timeago.js';
 import Vue from 'vue';
-import environmentItemComp from '~/environments/components/environment_item';
+import environmentItemComp from '~/environments/components/environment_item.vue';
 
 describe('Environment item', () => {
   let EnvironmentItem;

spec/javascripts/environments/environment_table_spec.js

 import Vue from 'vue';
-import environmentTableComp from '~/environments/components/environments_table';
+import environmentTableComp from '~/environments/components/environments_table.vue';
 
 describe('Environment item', () => {
   preloadFixtures('static/environments/element.html.raw');