Merge branch 'environments-vue-3-ee' into 'master'

Port of environments-vue-3 to EE

See merge request !1693

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 */
 
@@ -15,7 +16,6 @@ export default {
     service: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
 
@@ -57,45 +57,47 @@ export default {
       return !action.playable;
     },
   },
+};
+</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"
+      data-container="body"
+      data-toggle="dropdown"
+      ref="tooltip"
+      :title="title"
+      :aria-label="title"
+      :disabled="isLoading">
+      <span>
+        <span v-html="playIconSvg"></span>
+        <i
+          class="fa fa-caret-down"
+          aria-hidden="true"/>
+        <i
+          v-if="isLoading"
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true"/>
+      </span>
+    </button>
 
-  template: `
-    <div class="btn-group" role="group">
-      <button
-        type="button"
-        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
-        data-container="body"
-        data-toggle="dropdown"
-        ref="tooltip"
-        :title="title"
-        :aria-label="title"
-        :disabled="isLoading">
-        <span>
+    <ul class="dropdown-menu dropdown-menu-align-right">
+      <li v-for="action in actions">
+        <button
+          type="button"
+          class="js-manual-action-link no-btn btn"
+          @click="onClickAction(action.play_path)"
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)">
           <span v-html="playIconSvg"></span>
-          <i
-            class="fa fa-caret-down"
-            aria-hidden="true"/>
-          <i
-            v-if="isLoading"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true"/>
-        </span>
-      </button>
-
-      <ul class="dropdown-menu dropdown-menu-align-right">
-        <li v-for="action in actions">
-          <button
-            type="button"
-            class="js-manual-action-link no-btn btn"
-            @click="onClickAction(action.play_path)"
-            :class="{ 'disabled': isActionDisabled(action) }"
-            :disabled="isActionDisabled(action)">
-            ${playIconSvg}
-            <span>
-              {{action.name}}
-            </span>
-          </button>
-        </li>
-      </ul>
+          <span>
+            {{action.name}}
+          </span>
+        </button>
+      </li>
+    </ul>
   </div>
-  `,
-};
+</template>

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

-/**
- * Environment Item Component
- *
- * Renders a table row for each environment.
- */
-
+<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';
@@ -441,133 +436,156 @@ export default {
       eventHub.$emit('toggleFolder', this.model, this.folderUrl);
     },
   },
-
-  template: `
-    <tr :class="{ 'js-child-row': model.isChildren }">
-      <td>
-        <span class="deploy-board-icon"
-          v-if="model.hasDeployBoard"
-          @click="toggleDeployBoard(model)">
-
-          <i v-show="!model.isDeployBoardVisible"
-            class="fa fa-caret-right"
-            aria-hidden="true" />
-
-
-          <i v-show="model.isDeployBoardVisible"
+};
+</script>
+<template>
+  <tr :class="{ 'js-child-row': model.isChildren }">
+    <td>
+      <span
+        class="deploy-board-icon"
+        v-if="model.hasDeployBoard"
+        @click="toggleDeployBoard(model)">
+
+        <i
+          v-show="!model.isDeployBoardVisible"
+          class="fa fa-caret-right"
+          aria-hidden="true" />
+
+        <i
+          v-show="model.isDeployBoardVisible"
+          class="fa fa-caret-down"
+          aria-hidden="true" />
+      </span>
+
+      <a
+        v-if="!model.isFolder"
+        class="environment-name"
+        :class="{ 'prepend-left-default': model.isChildren }"
+        :href="environmentPath">
+        {{model.name}}
+      </a>
+      <span
+        v-else
+        class="folder-name"
+        @click="onClickFolder"
+        role="button">
+
+        <span class="folder-icon">
+          <i
+            v-show="model.isOpen"
             class="fa fa-caret-down"
             aria-hidden="true" />
-
+          <i
+            v-show="!model.isOpen"
+            class="fa fa-caret-right"
+            aria-hidden="true"/>
         </span>
 
-        <a v-if="!model.isFolder"
-          class="environment-name"
-          :class="{ 'prepend-left-default': model.isChildren }"
-          :href="environmentPath">
-          {{model.name}}
-        </a>
-
-        <span v-if="model.isFolder"
-          class="folder-name"
-          @click="onClickFolder"
-          role="button">
-
-          <span class="folder-icon">
-            <i
-              v-show="model.isOpen"
-              class="fa fa-caret-down"
-              aria-hidden="true" />
-            <i
-              v-show="!model.isOpen"
-              class="fa fa-caret-right"
-              aria-hidden="true"/>
-          </span>
-
-          <span class="folder-icon">
-            <i class="fa fa-folder" aria-hidden="true"></i>
-          </span>
-
-          <span>
-            {{model.folderName}}
-          </span>
-
-          <span class="badge">
-            {{model.size}}
-          </span>
+        <span class="folder-icon">
+          <i
+            class="fa fa-folder"
+            aria-hidden="true" />
         </span>
-      </td>
 
-      <td class="deployment-column">
-        <span v-if="shouldRenderDeploymentID">
-          {{deploymentInternalId}}
+        <span>
+          {{model.folderName}}
         </span>
 
-        <span v-if="!model.isFolder && deploymentHasUser">
-          by
-          <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" />
-          </a>
+        <span class="badge">
+          {{model.size}}
         </span>
-      </td>
-
-      <td class="environments-build-cell">
-        <a v-if="shouldRenderBuildName"
-          class="build-link"
-          :href="buildPath">
-          {{buildName}}
+      </span>
+    </td>
+
+    <td class="deployment-column">
+      <span v-if="shouldRenderDeploymentID">
+        {{deploymentInternalId}}
+      </span>
+
+      <span v-if="!model.isFolder && deploymentHasUser">
+        by
+        <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" />
         </a>
-      </td>
-
-      <td>
-        <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component">
-          <commit-component
-            :tag="commitTag"
-            :commit-ref="commitRef"
-            :commit-url="commitUrl"
-            :short-sha="commitShortSha"
-            :title="commitTitle"
-            :author="commitAuthor"/>
-        </div>
-        <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
-          No deployments yet
-        </p>
-      </td>
-
-      <td>
-        <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"
-            :service="service"
-            :actions="manualActions"/>
-
-          <external-url-component v-if="externalURL && canReadEnvironment"
-            :external-url="externalURL"/>
-
-          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
-            :monitoring-url="monitoringUrl"/>
-
-          <terminal-button-component v-if="model && model.terminal_path"
-            :terminal-path="model.terminal_path"/>
-
-          <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path"
-            :service="service"/>
-
-          <rollback-component v-if="canRetry && canCreateDeployment"
-            :is-last-deployment="isLastDeployment"
-            :retry-url="retryUrl"
-            :service="service"/>
-        </div>
-      </td>
-    </tr>
-  `,
-};
+      </span>
+    </td>
+
+    <td class="environments-build-cell">
+      <a
+        v-if="shouldRenderBuildName"
+        class="build-link"
+        :href="buildPath">
+        {{buildName}}
+      </a>
+    </td>
+
+    <td>
+      <div
+        v-if="!model.isFolder && hasLastDeploymentKey"
+        class="js-commit-component">
+        <commit-component
+          :tag="commitTag"
+          :commit-ref="commitRef"
+          :commit-url="commitUrl"
+          :short-sha="commitShortSha"
+          :title="commitTitle"
+          :author="commitAuthor"/>
+      </div>
+      <p
+        v-if="!model.isFolder && !hasLastDeploymentKey"
+        class="commit-title">
+        No deployments yet
+      </p>
+    </td>
+
+    <td>
+      <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"
+          :service="service"
+          :actions="manualActions"/>
+
+        <external-url-component
+          v-if="externalURL && canReadEnvironment"
+          :external-url="externalURL"/>
+
+        <monitoring-button-component
+          v-if="monitoringUrl && canReadEnvironment"
+          :monitoring-url="monitoringUrl"/>
+
+        <terminal-button-component
+          v-if="model && model.terminal_path"
+          :terminal-path="model.terminal_path"/>
+
+        <stop-component
+          v-if="hasStopAction && canCreateDeployment"
+          :stop-url="model.stop_path"
+          :service="service"/>
+
+        <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.
- *
- * Dumb component used to render top level environments and
- * the folder view.
  */
-import EnvironmentTableRowComponent from './environment_item';
+import EnvironmentTableRowComponent from './environment_item.vue';
 import DeployBoard from './deploy_board_component';
 
 export default {
@@ -32,6 +30,17 @@ export default {
       default: false,
     },
 
+    service: {
+      type: Object,
+      required: true,
+    },
+
+    isLoadingFolderContent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
     toggleDeployBoard: {
       type: Function,
       required: false,
@@ -43,18 +52,6 @@ export default {
       required: false,
       default: () => ({}),
     },
-
-    service: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-
-    isLoadingFolderContent: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
 
   methods: {
@@ -62,68 +59,87 @@ export default {
       return `${window.location.pathname}/folders/${model.folderName}`;
     },
   },
+};
+</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-actions"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <template
+        v-for="model in environments"
+        v-bind:model="model">
+        <tr
+          is="environment-item"
+          :model="model"
+          :can-create-deployment="canCreateDeployment"
+          :can-read-environment="canReadEnvironment"
+          :service="service"
+          :toggleDeployBoard="toggleDeployBoard"
+          />
 
-  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-actions"></th>
+        <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
+          <td colspan="6" class="deploy-board-container">
+            <deploy-board
+              :store="store"
+              :service="service"
+              :environmentID="model.id"
+              :deployBoardData="model.deployBoardData"
+              :endpoint="model.rollout_status_path"
+              />
+          </td>
         </tr>
-      </thead>
-      <tbody>
-        <template v-for="model in environments"
-          v-bind:model="model">
 
-          <tr is="environment-item"
-            :model="model"
-            :can-create-deployment="canCreateDeployment"
-            :can-read-environment="canReadEnvironment"
-            :toggleDeployBoard="toggleDeployBoard"
-            :service="service"></tr>
-
-          <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
-            <td colspan="6" class="deploy-board-container">
-              <deploy-board
-                :store="store"
-                :service="service"
-                :environmentID="model.id"
-                :deployBoardData="model.deployBoardData"
-                :endpoint="model.rollout_status_path">
-              </deploy-board>
+        <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" />
             </td>
           </tr>
 
-          <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"/>
+          <template v-else>
+            <tr
+              is="environment-item"
+              v-for="children in model.children"
+              :model="children"
+              :can-create-deployment="canCreateDeployment"
+              :can-read-environment="canReadEnvironment"
+              :service="service" />
+
+            <tr>
+              <td
+                colspan="6"
+                class="text-center">
+                <a
+                  :href="folderUrl(model)"
+                  class="btn btn-default">
+                  Show all
+                </a>
               </td>
             </tr>
-
-            <template v-else>
-              <tr is="environment-item"
-                v-for="children in model.children"
-                :model="children"
-                :can-create-deployment="canCreateDeployment"
-                :can-read-environment="canReadEnvironment"
-                :service="service"></tr>
-
-              <tr>
-                <td colspan="6" class="text-center">
-                  <a :href="folderUrl(model)" class="btn btn-default">
-                    Show all
-                  </a>
-                </td>
-              </tr>
-            </template>
           </template>
         </template>
-      </tbody>
-    </table>
-  `,
-};
+      </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', () => {
   let EnvironmentTable;