Commit 18675f32 authored by Phil Hughes's avatar Phil Hughes

Merge branch '31349-navs-vue' into 'master'

Use vue files for navigation tabs and buttons

See merge request !12040
parents c165f39b 5279a39e
<script>
export default { export default {
name: 'PipelineNavControls',
props: { props: {
newPipelinePath: { newPipelinePath: {
type: String, type: String,
...@@ -25,28 +27,28 @@ export default { ...@@ -25,28 +27,28 @@ export default {
required: true, required: true,
}, },
}, },
};
</script>
<template>
<div class="nav-controls">
<a
v-if="canCreatePipeline"
:href="newPipelinePath"
class="btn btn-create">
Run Pipeline
</a>
template: ` <a
<div class="nav-controls"> v-if="!hasCiEnabled"
<a :href="helpPagePath"
v-if="canCreatePipeline" class="btn btn-info">
:href="newPipelinePath" Get started with Pipelines
class="btn btn-create"> </a>
Run Pipeline
</a>
<a
v-if="!hasCiEnabled"
:href="helpPagePath"
class="btn btn-info">
Get started with Pipelines
</a>
<a <a
:href="ciLintPath" :href="ciLintPath"
class="btn btn-default"> class="btn btn-default">
CI Lint CI Lint
</a> </a>
</div> </div>
`, </template>
};
export default {
props: {
scope: {
type: String,
required: true,
},
count: {
type: Object,
required: true,
},
paths: {
type: Object,
required: true,
},
},
mounted() {
$(document).trigger('init.scrolling-tabs');
},
template: `
<ul class="nav-links scrolling-tabs">
<li
class="js-pipelines-tab-all"
:class="{ 'active': scope === 'all'}">
<a :href="paths.allPath">
All
<span class="badge js-totalbuilds-count">
{{count.all}}
</span>
</a>
</li>
<li class="js-pipelines-tab-pending"
:class="{ 'active': scope === 'pending'}">
<a :href="paths.pendingPath">
Pending
<span class="badge">
{{count.pending}}
</span>
</a>
</li>
<li class="js-pipelines-tab-running"
:class="{ 'active': scope === 'running'}">
<a :href="paths.runningPath">
Running
<span class="badge">
{{count.running}}
</span>
</a>
</li>
<li class="js-pipelines-tab-finished"
:class="{ 'active': scope === 'finished'}">
<a :href="paths.finishedPath">
Finished
<span class="badge">
{{count.finished}}
</span>
</a>
</li>
<li class="js-pipelines-tab-branches"
:class="{ 'active': scope === 'branches'}">
<a :href="paths.branchesPath">Branches</a>
</li>
<li class="js-pipelines-tab-tags"
:class="{ 'active': scope === 'tags'}">
<a :href="paths.tagsPath">Tags</a>
</li>
</ul>
`,
};
<script>
export default {
name: 'PipelineNavigationTabs',
props: {
scope: {
type: String,
required: true,
},
count: {
type: Object,
required: true,
},
paths: {
type: Object,
required: true,
},
},
mounted() {
$(document).trigger('init.scrolling-tabs');
},
};
</script>
<template>
<ul class="nav-links scrolling-tabs">
<li
class="js-pipelines-tab-all"
:class="{ active: scope === 'all'}">
<a :href="paths.allPath">
All
<span class="badge js-totalbuilds-count">
{{count.all}}
</span>
</a>
</li>
<li
class="js-pipelines-tab-pending"
:class="{ active: scope === 'pending'}">
<a :href="paths.pendingPath">
Pending
<span class="badge">
{{count.pending}}
</span>
</a>
</li>
<li
class="js-pipelines-tab-running"
:class="{ active: scope === 'running'}">
<a :href="paths.runningPath">
Running
<span class="badge">
{{count.running}}
</span>
</a>
</li>
<li
class="js-pipelines-tab-finished"
:class="{ active: scope === 'finished'}">
<a :href="paths.finishedPath">
Finished
<span class="badge">
{{count.finished}}
</span>
</a>
</li>
<li
class="js-pipelines-tab-branches"
:class="{ active: scope === 'branches'}">
<a :href="paths.branchesPath">Branches</a>
</li>
<li
class="js-pipelines-tab-tags"
:class="{ active: scope === 'tags'}">
<a :href="paths.tagsPath">Tags</a>
</li>
</ul>
</template>
...@@ -5,8 +5,8 @@ import pipelinesTableComponent from '../vue_shared/components/pipelines_table'; ...@@ -5,8 +5,8 @@ import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
import tablePagination from '../vue_shared/components/table_pagination.vue'; import tablePagination from '../vue_shared/components/table_pagination.vue';
import emptyState from './components/empty_state.vue'; import emptyState from './components/empty_state.vue';
import errorState from './components/error_state.vue'; import errorState from './components/error_state.vue';
import navigationTabs from './components/navigation_tabs'; import navigationTabs from './components/navigation_tabs.vue';
import navigationControls from './components/nav_controls'; import navigationControls from './components/nav_controls.vue';
import loadingIcon from '../vue_shared/components/loading_icon.vue'; import loadingIcon from '../vue_shared/components/loading_icon.vue';
import Poll from '../lib/utils/poll'; import Poll from '../lib/utils/poll';
......
import Vue from 'vue'; import Vue from 'vue';
import navControlsComp from '~/pipelines/components/nav_controls'; import navControlsComp from '~/pipelines/components/nav_controls.vue';
describe('Pipelines Nav Controls', () => { describe('Pipelines Nav Controls', () => {
let NavControlsComponent; let NavControlsComponent;
......
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