Merge branch 'add-vue-loader' into 'master'
Add vue loader Closes #29519 See merge request !10517
This commit is contained in:
Filipa Lacerda
commit
d38eae3bf4
17 changed files with 938 additions and 112 deletions
|
|
@ -13,9 +13,11 @@
|
|||
},
|
||||
"plugins": [
|
||||
"filenames",
|
||||
"import"
|
||||
"import",
|
||||
"html"
|
||||
],
|
||||
"settings": {
|
||||
"html/html-extensions": [".html", ".html.raw", ".vue"],
|
||||
"import/resolver": {
|
||||
"webpack": {
|
||||
"config": "./config/webpack.config.js"
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
|
|||
import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
|
||||
import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
|
||||
import eventHub from '../../vue_pipelines_index/event_hub';
|
||||
import EmptyState from '../../vue_pipelines_index/components/empty_state';
|
||||
import ErrorState from '../../vue_pipelines_index/components/error_state';
|
||||
import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
|
||||
import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
|
||||
import '../../lib/utils/common_utils';
|
||||
import '../../vue_shared/vue_resource_interceptor';
|
||||
import Poll from '../../lib/utils/poll';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<script>
|
||||
/* eslint-disable no-new, no-alert */
|
||||
/* global Flash */
|
||||
import '~/flash';
|
||||
|
|
@ -65,29 +66,31 @@ export default {
|
|||
this.isLoading = true;
|
||||
|
||||
this.service.postAction(this.endpoint)
|
||||
.then(() => {
|
||||
this.isLoading = false;
|
||||
eventHub.$emit('refreshPipelines');
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoading = false;
|
||||
new Flash('An error occured while making the request.');
|
||||
});
|
||||
.then(() => {
|
||||
this.isLoading = false;
|
||||
eventHub.$emit('refreshPipelines');
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoading = false;
|
||||
new Flash('An error occured while making the request.');
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
template: `
|
||||
<button
|
||||
type="button"
|
||||
@click="onClick"
|
||||
:class="buttonClass"
|
||||
:title="title"
|
||||
:aria-label="title"
|
||||
data-container="body"
|
||||
data-placement="top"
|
||||
:disabled="isLoading">
|
||||
<i :class="iconClass" aria-hidden="true"/>
|
||||
<i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
|
||||
</button>
|
||||
`,
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
@click="onClick"
|
||||
:class="buttonClass"
|
||||
:title="title"
|
||||
:aria-label="title"
|
||||
data-container="body"
|
||||
data-placement="top"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<i :class="iconClass" aria-hidden="true"></i>
|
||||
<i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
helpPagePath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
template: `
|
||||
<div class="row empty-state">
|
||||
<div class="col-xs-12">
|
||||
<div class="svg-content">
|
||||
${pipelinesEmptyStateSVG}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
<div class="text-content">
|
||||
<h4>Build with confidence</h4>
|
||||
<p>
|
||||
Continous Integration can help catch bugs by running your tests automatically,
|
||||
while Continuous Deployment can help you deliver code to your product environment.
|
||||
</p>
|
||||
<a :href="helpPagePath" class="btn btn-info">
|
||||
Get started with Pipelines
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
helpPagePath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => ({ pipelinesEmptyStateSVG }),
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row empty-state">
|
||||
<div class="col-xs-12">
|
||||
<div class="svg-content" v-html="pipelinesEmptyStateSVG" />
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
<div class="text-content">
|
||||
<h4>Build with confidence</h4>
|
||||
<p>
|
||||
Continous Integration can help catch bugs by running your tests automatically,
|
||||
while Continuous Deployment can help you deliver code to your product environment.
|
||||
</p>
|
||||
<a :href="helpPagePath" class="btn btn-info">
|
||||
Get started with Pipelines
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="row empty-state js-pipelines-error-state">
|
||||
<div class="col-xs-12">
|
||||
<div class="svg-content">
|
||||
${pipelinesErrorStateSVG}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
<div class="text-content">
|
||||
<h4>The API failed to fetch the pipelines.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
|
||||
|
||||
export default {
|
||||
data: () => ({ pipelinesErrorStateSVG }),
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row empty-state js-pipelines-error-state">
|
||||
<div class="col-xs-12">
|
||||
<div class="svg-content" v-html="pipelinesErrorStateSVG" />
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
<div class="text-content">
|
||||
<h4>The API failed to fetch the pipelines.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,8 +4,8 @@ import PipelinesService from './services/pipelines_service';
|
|||
import eventHub from './event_hub';
|
||||
import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
|
||||
import TablePaginationComponent from '../vue_shared/components/table_pagination';
|
||||
import EmptyState from './components/empty_state';
|
||||
import ErrorState from './components/error_state';
|
||||
import EmptyState from './components/empty_state.vue';
|
||||
import ErrorState from './components/error_state.vue';
|
||||
import NavigationTabs from './components/navigation_tabs';
|
||||
import NavigationControls from './components/nav_controls';
|
||||
import Poll from '../lib/utils/poll';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
|
||||
import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
|
||||
import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
|
||||
import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
|
||||
import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
|
||||
import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';
|
||||
|
|
|
|||
4
changelogs/unreleased/add-vue-loader.yml
Normal file
4
changelogs/unreleased/add-vue-loader.yml
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: add support for .vue templates
|
||||
merge_request: 10517
|
||||
author:
|
||||
|
|
@ -344,3 +344,33 @@
|
|||
:why: https://github.com/nodeca/pako/blob/master/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-04-05 10:43:45.897720000 Z
|
||||
- - :approve
|
||||
- caniuse-db
|
||||
- :who: Mike Greiling
|
||||
:why: https://github.com/Fyrd/caniuse/blob/master/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-04-07 16:05:14.185549000 Z
|
||||
- - :approve
|
||||
- domelementtype
|
||||
- :who: Mike Greiling
|
||||
:why: https://github.com/fb55/domelementtype/blob/master/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-04-07 16:19:17.992640000 Z
|
||||
- - :approve
|
||||
- domhandler
|
||||
- :who: Mike Greiling
|
||||
:why: https://github.com/fb55/domhandler/blob/master/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-04-07 16:19:19.628953000 Z
|
||||
- - :approve
|
||||
- domutils
|
||||
- :who: Mike Greiling
|
||||
:why: https://github.com/fb55/domutils/blob/master/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-04-07 16:19:21.159356000 Z
|
||||
- - :approve
|
||||
- entities
|
||||
- :who: Mike Greiling
|
||||
:why: https://github.com/fb55/entities/blob/master/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-04-07 16:19:23.900571000 Z
|
||||
|
|
|
|||
|
|
@ -65,13 +65,18 @@ var config = {
|
|||
{
|
||||
test: /\.js$/,
|
||||
exclude: /(node_modules|vendor\/assets)/,
|
||||
loader: 'babel-loader'
|
||||
loader: 'babel-loader',
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: 'raw-loader'
|
||||
}, {
|
||||
test: /\.(worker.js|pdf)$/,
|
||||
loader: 'raw-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(worker\.js|pdf)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'file-loader',
|
||||
},
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -2,9 +2,9 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev-server": "webpack-dev-server --config config/webpack.config.js",
|
||||
"eslint": "eslint --max-warnings 0 --ext .js .",
|
||||
"eslint-fix": "eslint --max-warnings 0 --ext .js --fix .",
|
||||
"eslint-report": "eslint --max-warnings 0 --ext .js --format html --output-file ./eslint-report.html .",
|
||||
"eslint": "eslint --max-warnings 0 --ext .js,.vue .",
|
||||
"eslint-fix": "eslint --max-warnings 0 --ext .js,.vue --fix .",
|
||||
"eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html .",
|
||||
"karma": "karma start config/karma.config.js --single-run",
|
||||
"karma-coverage": "BABEL_ENV=coverage karma start config/karma.config.js --single-run",
|
||||
"karma-start": "karma start config/karma.config.js",
|
||||
|
|
@ -20,10 +20,12 @@
|
|||
"bootstrap-sass": "^3.3.6",
|
||||
"compression-webpack-plugin": "^0.3.2",
|
||||
"core-js": "^2.4.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"d3": "^3.5.11",
|
||||
"document-register-element": "^1.3.0",
|
||||
"dropzone": "^4.2.0",
|
||||
"emoji-unicode-version": "^0.2.1",
|
||||
"eslint-plugin-html": "^2.0.1",
|
||||
"file-loader": "^0.11.1",
|
||||
"jquery": "^2.2.1",
|
||||
"jquery-ujs": "^1.2.1",
|
||||
|
|
@ -42,8 +44,10 @@
|
|||
"timeago.js": "^2.0.5",
|
||||
"underscore": "^1.8.3",
|
||||
"visibilityjs": "^1.2.4",
|
||||
"vue": "^2.2.4",
|
||||
"vue": "^2.2.6",
|
||||
"vue-loader": "^11.3.4",
|
||||
"vue-resource": "^0.9.3",
|
||||
"vue-template-compiler": "^2.2.6",
|
||||
"webpack": "^2.3.3",
|
||||
"webpack-bundle-analyzer": "^2.3.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import asyncButtonComp from '~/vue_pipelines_index/components/async_button';
|
||||
import asyncButtonComp from '~/vue_pipelines_index/components/async_button.vue';
|
||||
|
||||
describe('Pipelines Async Button', () => {
|
||||
let component;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import emptyStateComp from '~/vue_pipelines_index/components/empty_state';
|
||||
import emptyStateComp from '~/vue_pipelines_index/components/empty_state.vue';
|
||||
|
||||
describe('Pipelines Empty State', () => {
|
||||
let component;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import errorStateComp from '~/vue_pipelines_index/components/error_state';
|
||||
import errorStateComp from '~/vue_pipelines_index/components/error_state.vue';
|
||||
|
||||
describe('Pipelines Error State', () => {
|
||||
let component;
|
||||
|
|
|
|||
Loading…
Reference in a new issue