BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit d6ae01da by Filipa Lacerda
Options

Use CJS in all environments components

parent 8f3678f1
Showing with 149 additions and 170 deletions
app/assets/javascripts/environments/components/environment_actions.js.es6
/* global Vue */
window.Vue = require('vue');
(() => {
window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {};
gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
props: {
actions: {
type: Array,
required: false,
default: () => [],
},
playIconSvg: {
type: String,
required: false,
},
const Vue = require('vue');
module.exports = Vue.component('actions-component', {
props: {
actions: {
type: Array,
required: false,
default: () => [],
},
template: `
<div class="inline">
<div class="dropdown">
<a class="dropdown-new btn btn-default" data-toggle="dropdown">
<span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions">
<a :href="action.play_path"
data-method="post"
rel="nofollow"
class="js-manual-action-link">
<span class="js-action-play-icon-container" v-html="playIconSvg"></span>
<span>
{{action.name}}
</span>
</a>
</li>
</ul>
</div>
playIconSvg: {
type: String,
required: false,
},
},
template: `
<div class="inline">
<div class="dropdown">
<a class="dropdown-new btn btn-default" data-toggle="dropdown">
<span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions">
<a :href="action.play_path"
data-method="post"
rel="nofollow"
class="js-manual-action-link">
<span class="js-action-play-icon-container" v-html="playIconSvg"></span>
<span>
{{action.name}}
</span>
</a>
</li>
</ul>
</div>
`,
});
})();
</div>
`,
});
app/assets/javascripts/environments/components/environment_external_url.js.es6
/* global Vue */
/**
* Renders the external url link in environments table.
*/
const Vue = require('vue');
window.Vue = require('vue');
(() => {
window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {};
gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
props: {
externalUrl: {
type: String,
default: '',
},
module.exports = Vue.component('external-url-component', {
props: {
externalUrl: {
type: String,
default: '',
},
},
template: `
<a class="btn external_url" :href="externalUrl" target="_blank">
<i class="fa fa-external-link"></i>
</a>
`,
});
})();
template: `
<a class="btn external_url" :href="externalUrl" target="_blank">
<i class="fa fa-external-link"></i>
</a>
`,
});
app/assets/javascripts/environments/components/environment_rollback.js.es6
/* global Vue */
/**
* Renders Rollback or Re deploy button in environments table depending
* of the provided property `isLastDeployment`
*/
const Vue = require('vue');
window.Vue = require('vue');
(() => {
window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {};
gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
props: {
retryUrl: {
type: String,
default: '',
},
module.exports = Vue.component('rollback-component', {
props: {
retryUrl: {
type: String,
default: '',
},
isLastDeployment: {
type: Boolean,
default: true,
},
isLastDeployment: {
type: Boolean,
default: true,
},
},
template: `
<a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
<span v-if="isLastDeployment">
Re-deploy
</span>
<span v-else>
Rollback
</span>
</a>
`,
});
})();
template: `
<a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
<span v-if="isLastDeployment">
Re-deploy
</span>
<span v-else>
Rollback
</span>
</a>
`,
});
app/assets/javascripts/environments/components/environment_stop.js.es6
/* global Vue */
/**
* Renders the stop "button" that allows stop an environment.
* Used in environments table.
*/
const Vue = require('vue');
window.Vue = require('vue');
(() => {
window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {};
gl.environmentsList.StopComponent = Vue.component('stop-component', {
props: {
stopUrl: {
type: String,
default: '',
},
module.exports = Vue.component('stop-component', {
props: {
stopUrl: {
type: String,
default: '',
},
},
template: `
<a class="btn stop-env-link"
:href="stopUrl"
data-confirm="Are you sure you want to stop this environment?"
data-method="post"
rel="nofollow">
<i class="fa fa-stop stop-env-icon"></i>
</a>
`,
});
})();
template: `
<a class="btn stop-env-link"
:href="stopUrl"
data-confirm="Are you sure you want to stop this environment?"
data-method="post"
rel="nofollow">
<i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
</a>
`,
});
app/assets/javascripts/environments/components/environment_terminal_button.js.es6
/* global Vue */
/**
* Renders a terminal button to open a web terminal.
* Used in environments table.
*/
const Vue = require('vue');
window.Vue = require('vue');
(() => {
window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {};
gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', {
props: {
terminalPath: {
type: String,
default: '',
},
terminalIconSvg: {
type: String,
default: '',
},
module.exports = Vue.component('terminal-button-component', {
props: {
terminalPath: {
type: String,
default: '',
},
terminalIconSvg: {
type: String,
default: '',
},
},
template: `
<a class="btn terminal-button"
:href="terminalPath">
<span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
</a>
`,
});
})();
template: `
<a class="btn terminal-button"
:href="terminalPath">
<span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
</a>
`,
});
app/assets/javascripts/environments/environments_bundle.js.es6
window.Vue = require('vue');
require('./components/environment');
const EnvironmentsComponent = require('./components/environment');
require('../vue_shared/vue_resource_interceptor');
$(() => {
......@@ -9,7 +8,7 @@ $(() => {
gl.EnvironmentsListApp.$destroy(true);
}
gl.EnvironmentsListApp = new gl.environmentsList.EnvironmentsComponent({
gl.EnvironmentsListApp = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
});
app/assets/javascripts/environments/services/environments_service.js.es6
const Vue = window.Vue = require('vue');
const Vue = require('vue');
class EnvironmentsService {
constructor(endpoint) {
......
app/assets/javascripts/vue_shared/components/commit.js.es6
/* global Vue */
window.Vue = require('vue');
(() => {
window.gl = window.gl || {};
......
spec/javascripts/environments/environment_actions_spec.js.es6
require('~/environments/components/environment_actions');
const ActionsComponent = require('~/environments/components/environment_actions');
describe('Actions Component', () => {
preloadFixtures('static/environments/element.html.raw');
......@@ -19,7 +19,7 @@ describe('Actions Component', () => {
},
];
const component = new window.gl.environmentsList.ActionsComponent({
const component = new ActionsComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
actions: actionsMock,
......@@ -47,7 +47,7 @@ describe('Actions Component', () => {
},
];
const component = new window.gl.environmentsList.ActionsComponent({
const component = new ActionsComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
actions: actionsMock,
......
spec/javascripts/environments/environment_external_url_spec.js.es6
require('~/environments/components/environment_external_url');
const ExternalUrlComponent = require('~/environments/components/environment_external_url');
describe('External URL Component', () => {
preloadFixtures('static/environments/element.html.raw');
......@@ -8,7 +8,7 @@ describe('External URL Component', () => {
it('should link to the provided externalUrl prop', () => {
const externalURL = 'https://gitlab.com';
const component = new window.gl.environmentsList.ExternalUrlComponent({
const component = new ExternalUrlComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
externalUrl: externalURL,
......
spec/javascripts/environments/environment_item_spec.js.es6
window.timeago = require('vendor/timeago');
require('~/environments/components/environment_item');
const EnvironmentItem = require('~/environments/components/environment_item');
fdescribe('Environment item', () => {
describe('Environment item', () => {
preloadFixtures('static/environments/table.html.raw');
beforeEach(() => {
loadFixtures('static/environments/table.html.raw');
......@@ -21,7 +21,7 @@ fdescribe('Environment item', () => {
},
};
component = new window.gl.environmentsList.EnvironmentItem({
component = new EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: mockItem,
......@@ -111,7 +111,7 @@ fdescribe('Environment item', () => {
},
};
component = new window.gl.environmentsList.EnvironmentItem({
component = new EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: environment,
......
spec/javascripts/environments/environment_rollback_spec.js.es6
require('~/environments/components/environment_rollback');
const RollbackComponent = require('~/environments/components/environment_rollback');
describe('Rollback Component', () => {
preloadFixtures('static/environments/element.html.raw');
......@@ -10,7 +10,7 @@ describe('Rollback Component', () => {
});
it('Should link to the provided retryUrl', () => {
const component = new window.gl.environmentsList.RollbackComponent({
const component = new RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
retryUrl: retryURL,
......@@ -22,7 +22,7 @@ describe('Rollback Component', () => {
});
it('Should render Re-deploy label when isLastDeployment is true', () => {
const component = new window.gl.environmentsList.RollbackComponent({
const component = new RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
retryUrl: retryURL,
......@@ -34,7 +34,7 @@ describe('Rollback Component', () => {
});
it('Should render Rollback label when isLastDeployment is false', () => {
const component = new window.gl.environmentsList.RollbackComponent({
const component = new RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
retryUrl: retryURL,
......
spec/javascripts/environments/environment_spec.js.es6
/* global Vue, environment */
const Vue = require('vue');
require('~/flash');
require('~/environments/components/environment');
const EnvironmentsComponent = require('~/environments/components/environment');
const { environment } = require('./mock_data');
describe('Environment', () => {
......@@ -32,7 +31,7 @@ describe('Environment', () => {
});
it('should render the empty state', (done) => {
component = new gl.environmentsList.EnvironmentsComponent({
component = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
......@@ -72,7 +71,7 @@ describe('Environment', () => {
});
it('should render a table with environments', (done) => {
component = new gl.environmentsList.EnvironmentsComponent({
component = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
......@@ -104,7 +103,7 @@ describe('Environment', () => {
});
it('should render empty state', (done) => {
component = new gl.environmentsList.EnvironmentsComponent({
component = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
......
spec/javascripts/environments/environment_stop_spec.js.es6
require('~/environments/components/environment_stop');
const StopComponent = require('~/environments/components/environment_stop');
describe('Stop Component', () => {
preloadFixtures('static/environments/element.html.raw');
......@@ -10,7 +10,7 @@ describe('Stop Component', () => {
loadFixtures('static/environments/element.html.raw');
stopURL = '/stop';
component = new window.gl.environmentsList.StopComponent({
component = new StopComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
stopUrl: stopURL,
......
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