Commit d38eae3b authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'add-vue-loader' into 'master'

Add vue loader

Closes #29519

See merge request !10517
parents 1f0cdabd 02f1599d
...@@ -13,9 +13,11 @@ ...@@ -13,9 +13,11 @@
}, },
"plugins": [ "plugins": [
"filenames", "filenames",
"import" "import",
"html"
], ],
"settings": { "settings": {
"html/html-extensions": [".html", ".html.raw", ".vue"],
"import/resolver": { "import/resolver": {
"webpack": { "webpack": {
"config": "./config/webpack.config.js" "config": "./config/webpack.config.js"
......
...@@ -4,8 +4,8 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table ...@@ -4,8 +4,8 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
import PipelinesService from '../../vue_pipelines_index/services/pipelines_service'; import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store'; import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
import eventHub from '../../vue_pipelines_index/event_hub'; import eventHub from '../../vue_pipelines_index/event_hub';
import EmptyState from '../../vue_pipelines_index/components/empty_state'; import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
import ErrorState from '../../vue_pipelines_index/components/error_state'; import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
import '../../vue_shared/vue_resource_interceptor'; import '../../vue_shared/vue_resource_interceptor';
import Poll from '../../lib/utils/poll'; import Poll from '../../lib/utils/poll';
......
<script>
/* eslint-disable no-new, no-alert */ /* eslint-disable no-new, no-alert */
/* global Flash */ /* global Flash */
import '~/flash'; import '~/flash';
...@@ -75,8 +76,10 @@ export default { ...@@ -75,8 +76,10 @@ export default {
}); });
}, },
}, },
};
</script>
template: ` <template>
<button <button
type="button" type="button"
@click="onClick" @click="onClick"
...@@ -85,9 +88,9 @@ export default { ...@@ -85,9 +88,9 @@ export default {
:aria-label="title" :aria-label="title"
data-container="body" data-container="body"
data-placement="top" data-placement="top"
:disabled="isLoading"> :disabled="isLoading"
<i :class="iconClass" aria-hidden="true"/> >
<i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" /> <i :class="iconClass" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
</button> </button>
`, </template>
};
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>
`,
};
<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>
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>
`,
};
<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'; ...@@ -4,8 +4,8 @@ import PipelinesService from './services/pipelines_service';
import eventHub from './event_hub'; import eventHub from './event_hub';
import PipelinesTableComponent from '../vue_shared/components/pipelines_table'; import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
import TablePaginationComponent from '../vue_shared/components/table_pagination'; import TablePaginationComponent from '../vue_shared/components/table_pagination';
import EmptyState from './components/empty_state'; import EmptyState from './components/empty_state.vue';
import ErrorState from './components/error_state'; import ErrorState from './components/error_state.vue';
import NavigationTabs from './components/navigation_tabs'; import NavigationTabs from './components/navigation_tabs';
import NavigationControls from './components/nav_controls'; import NavigationControls from './components/nav_controls';
import Poll from '../lib/utils/poll'; import Poll from '../lib/utils/poll';
......
/* eslint-disable no-param-reassign */ /* 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 PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts'; import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
import PipelinesStatusComponent from '../../vue_pipelines_index/components/status'; import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';
......
---
title: add support for .vue templates
merge_request: 10517
author:
...@@ -344,3 +344,33 @@ ...@@ -344,3 +344,33 @@
:why: https://github.com/nodeca/pako/blob/master/LICENSE :why: https://github.com/nodeca/pako/blob/master/LICENSE
:versions: [] :versions: []
:when: 2017-04-05 10:43:45.897720000 Z :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 = { ...@@ -65,13 +65,18 @@ var config = {
{ {
test: /\.js$/, test: /\.js$/,
exclude: /(node_modules|vendor\/assets)/, exclude: /(node_modules|vendor\/assets)/,
loader: 'babel-loader' loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
}, },
{ {
test: /\.svg$/, test: /\.svg$/,
use: 'raw-loader' loader: 'raw-loader',
}, { },
test: /\.(worker.js|pdf)$/, {
test: /\.(worker\.js|pdf)$/,
exclude: /node_modules/, exclude: /node_modules/,
loader: 'file-loader', loader: 'file-loader',
}, },
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
"private": true, "private": true,
"scripts": { "scripts": {
"dev-server": "webpack-dev-server --config config/webpack.config.js", "dev-server": "webpack-dev-server --config config/webpack.config.js",
"eslint": "eslint --max-warnings 0 --ext .js .", "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
"eslint-fix": "eslint --max-warnings 0 --ext .js --fix .", "eslint-fix": "eslint --max-warnings 0 --ext .js,.vue --fix .",
"eslint-report": "eslint --max-warnings 0 --ext .js --format html --output-file ./eslint-report.html .", "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": "karma start config/karma.config.js --single-run",
"karma-coverage": "BABEL_ENV=coverage 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", "karma-start": "karma start config/karma.config.js",
...@@ -20,10 +20,12 @@ ...@@ -20,10 +20,12 @@
"bootstrap-sass": "^3.3.6", "bootstrap-sass": "^3.3.6",
"compression-webpack-plugin": "^0.3.2", "compression-webpack-plugin": "^0.3.2",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"css-loader": "^0.28.0",
"d3": "^3.5.11", "d3": "^3.5.11",
"document-register-element": "^1.3.0", "document-register-element": "^1.3.0",
"dropzone": "^4.2.0", "dropzone": "^4.2.0",
"emoji-unicode-version": "^0.2.1", "emoji-unicode-version": "^0.2.1",
"eslint-plugin-html": "^2.0.1",
"file-loader": "^0.11.1", "file-loader": "^0.11.1",
"jquery": "^2.2.1", "jquery": "^2.2.1",
"jquery-ujs": "^1.2.1", "jquery-ujs": "^1.2.1",
...@@ -42,8 +44,10 @@ ...@@ -42,8 +44,10 @@
"timeago.js": "^2.0.5", "timeago.js": "^2.0.5",
"underscore": "^1.8.3", "underscore": "^1.8.3",
"visibilityjs": "^1.2.4", "visibilityjs": "^1.2.4",
"vue": "^2.2.4", "vue": "^2.2.6",
"vue-loader": "^11.3.4",
"vue-resource": "^0.9.3", "vue-resource": "^0.9.3",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.3", "webpack": "^2.3.3",
"webpack-bundle-analyzer": "^2.3.0" "webpack-bundle-analyzer": "^2.3.0"
}, },
......
import Vue from 'vue'; 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', () => { describe('Pipelines Async Button', () => {
let component; let component;
......
import Vue from 'vue'; 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', () => { describe('Pipelines Empty State', () => {
let component; let component;
......
import Vue from 'vue'; 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', () => { describe('Pipelines Error State', () => {
let component; let component;
......
This diff is collapsed.
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