Commit 17a09e91 authored by Phil Hughes's avatar Phil Hughes

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

Port of environments-vue-5 to EE

See merge request !1722
parents 0ddb9e74 18e4b510
<script>
/* eslint-disable no-new */
/* global Flash */
import Vue from 'vue';
import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from './environments_table.vue';
import EnvironmentsStore from '../stores/environments_store';
......@@ -8,7 +9,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati
import '../../lib/utils/common_utils';
import eventHub from '../event_hub';
export default Vue.component('environment-component', {
export default {
components: {
'environment-table': EnvironmentTable,
......@@ -162,12 +163,15 @@ export default Vue.component('environment-component', {
});
},
},
template: `
};
</script>
<template>
<div :class="cssContainerClass">
<div class="top-area">
<ul v-if="!isLoading" class="nav-links">
<li v-bind:class="{ 'active': scope === null || scope === 'available' }">
<ul
v-if="!isLoading"
class="nav-links">
<li :class="{ active: scope === null || scope === 'available' }">
<a :href="projectEnvironmentsPath">
Available
<span class="badge js-available-environments-count">
......@@ -175,7 +179,7 @@ export default Vue.component('environment-component', {
</span>
</a>
</li>
<li v-bind:class="{ 'active' : scope === 'stopped' }">
<li :class="{ 'active' : scope === 'stopped' }">
<a :href="projectStoppedEnvironmentsPath">
Stopped
<span class="badge js-stopped-environments-count">
......@@ -184,19 +188,29 @@ export default Vue.component('environment-component', {
</a>
</li>
</ul>
<div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-create">
<div
v-if="canCreateEnvironmentParsed && !isLoading"
class="nav-controls">
<a
:href="newEnvironmentPath"
class="btn btn-create">
New environment
</a>
</div>
</div>
<div class="content-list environments-container">
<div class="environments-list-loading text-center" v-if="isLoading">
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
<div
class="environments-list-loading text-center"
v-if="isLoading">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
</div>
<div class="blank-state blank-state-no-icon"
<div
class="blank-state blank-state-no-icon"
v-if="!isLoading && state.environments.length === 0">
<h2 class="blank-state-title js-blank-state-title">
You don't have any environments right now.
......@@ -209,14 +223,16 @@ export default Vue.component('environment-component', {
</a>
</p>
<a v-if="canCreateEnvironmentParsed"
<a
v-if="canCreateEnvironmentParsed"
:href="newEnvironmentPath"
class="btn btn-create js-new-environment-button">
New Environment
</a>
</div>
<div class="table-holder"
<div
class="table-holder"
v-if="!isLoading && state.environments.length > 0">
<environment-table
......@@ -231,9 +247,7 @@ export default Vue.component('environment-component', {
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:change="changePage"
:pageInfo="state.paginationInformation">
</table-pagination>
:pageInfo="state.paginationInformation" />
</div>
</div>
`,
});
</template>
import EnvironmentsComponent from './components/environment';
import Vue from 'vue';
import EnvironmentsComponent from './components/environment.vue';
$(() => {
window.gl = window.gl || {};
if (gl.EnvironmentsListApp) {
gl.EnvironmentsListApp.$destroy(true);
}
gl.EnvironmentsListApp = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
});
document.addEventListener('DOMContentLoaded', () => new Vue({
el: '#environments-list-view',
components: {
'environments-table-app': EnvironmentsComponent,
},
render: createElement => createElement('environments-table-app'),
}));
import EnvironmentsFolderComponent from './environments_folder_view';
import Vue from 'vue';
import EnvironmentsFolderComponent from './environments_folder_view.vue';
$(() => {
window.gl = window.gl || {};
if (gl.EnvironmentsListFolderApp) {
gl.EnvironmentsListFolderApp.$destroy(true);
}
gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
el: document.querySelector('#environments-folder-list-view'),
document.addEventListener('DOMContentLoaded', () => {
// eslint-disable-next-line no-new
new Vue({
el: '#environments-folder-list-view',
components: {
'environments-folder-app': EnvironmentsFolderComponent,
},
render: createElement => createElement('environments-folder-app'),
});
});
<script>
/* eslint-disable no-new */
/* global Flash */
import Vue from 'vue';
import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from '../components/environments_table.vue';
import EnvironmentsStore from '../stores/environments_store';
......@@ -8,7 +8,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati
import '../../lib/utils/common_utils';
import '../../vue_shared/vue_resource_interceptor';
export default Vue.component('environment-folder-view', {
export default {
components: {
'environment-table': EnvironmentTable,
'table-pagination': TablePaginationComponent,
......@@ -128,26 +128,33 @@ export default Vue.component('environment-folder-view', {
return param;
},
},
template: `
};
</script>
<template>
<div :class="cssContainerClass">
<div class="top-area" v-if="!isLoading">
<div
class="top-area"
v-if="!isLoading">
<h4 class="js-folder-name environments-folder-name">
Environments / <b>{{folderName}}</b>
</h4>
<ul class="nav-links">
<li v-bind:class="{ 'active': scope === null || scope === 'available' }">
<a :href="availablePath" class="js-available-environments-folder-tab">
<li :class="{ 'active': scope === null || scope === 'available' }">
<a
:href="availablePath"
class="js-available-environments-folder-tab">
Available
<span class="badge js-available-environments-count">
{{state.availableCounter}}
</span>
</a>
</li>
<li v-bind:class="{ 'active' : scope === 'stopped' }">
<a :href="stoppedPath" class="js-stopped-environments-folder-tab">
<li :class="{ 'active' : scope === 'stopped' }">
<a
:href="stoppedPath"
class="js-stopped-environments-folder-tab">
Stopped
<span class="badge js-stopped-environments-count">
{{state.stoppedCounter}}
......@@ -158,11 +165,16 @@ export default Vue.component('environment-folder-view', {
</div>
<div class="environments-container">
<div class="environments-list-loading text-center" v-if="isLoading">
<i class="fa fa-spinner fa-spin"></i>
<div
class="environments-list-loading text-center"
v-if="isLoading">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true"/>
</div>
<div class="table-holder"
<div
class="table-holder"
v-if="!isLoading && state.environments.length > 0">
<environment-table
......@@ -173,11 +185,11 @@ export default Vue.component('environment-folder-view', {
:store="store"
:service="service"/>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
<table-pagination
v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:change="changePage"
:pageInfo="state.paginationInformation"/>
</div>
</div>
</div>
`,
});
</template>
import Vue from 'vue';
import '~/flash';
import EnvironmentsComponent from '~/environments/components/environment';
import environmentsComponent from '~/environments/components/environment.vue';
import { environment, folder } from './mock_data';
describe('Environment', () => {
preloadFixtures('static/environments/environments.html.raw');
let EnvironmentsComponent;
let component;
beforeEach(() => {
loadFixtures('static/environments/environments.html.raw');
EnvironmentsComponent = Vue.extend(environmentsComponent);
});
describe('successfull request', () => {
......
import Vue from 'vue';
import '~/flash';
import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
import { environmentsList } from '../mock_data';
describe('Environments Folder View', () => {
preloadFixtures('static/environments/environments_folder_view.html.raw');
let EnvironmentsFolderViewComponent;
beforeEach(() => {
loadFixtures('static/environments/environments_folder_view.html.raw');
EnvironmentsFolderViewComponent = Vue.extend(environmentsFolderViewComponent);
window.history.pushState({}, null, 'environments/folders/build');
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment