Merge branch '31349-navs-vue' into 'master'
Use vue files for navigation tabs and buttons See merge request !12040
This commit is contained in:
commit
18675f32fe
6 changed files with 133 additions and 127 deletions
|
@ -1,52 +0,0 @@
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
newPipelinePath: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
hasCiEnabled: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
helpPagePath: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
ciLintPath: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
canCreatePipeline: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
template: `
|
|
||||||
<div class="nav-controls">
|
|
||||||
<a
|
|
||||||
v-if="canCreatePipeline"
|
|
||||||
:href="newPipelinePath"
|
|
||||||
class="btn btn-create">
|
|
||||||
Run Pipeline
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
v-if="!hasCiEnabled"
|
|
||||||
:href="helpPagePath"
|
|
||||||
class="btn btn-info">
|
|
||||||
Get started with Pipelines
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
:href="ciLintPath"
|
|
||||||
class="btn btn-default">
|
|
||||||
CI Lint
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
};
|
|
54
app/assets/javascripts/pipelines/components/nav_controls.vue
Normal file
54
app/assets/javascripts/pipelines/components/nav_controls.vue
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'PipelineNavControls',
|
||||||
|
props: {
|
||||||
|
newPipelinePath: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
hasCiEnabled: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
helpPagePath: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
ciLintPath: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
canCreatePipeline: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="nav-controls">
|
||||||
|
<a
|
||||||
|
v-if="canCreatePipeline"
|
||||||
|
:href="newPipelinePath"
|
||||||
|
class="btn btn-create">
|
||||||
|
Run Pipeline
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
v-if="!hasCiEnabled"
|
||||||
|
:href="helpPagePath"
|
||||||
|
class="btn btn-info">
|
||||||
|
Get started with Pipelines
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
:href="ciLintPath"
|
||||||
|
class="btn btn-default">
|
||||||
|
CI Lint
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -1,72 +0,0 @@
|
||||||
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>
|
|
||||||
`,
|
|
||||||
};
|
|
|
@ -0,0 +1,76 @@
|
||||||
|
<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';
|
||||||
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';
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
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;
|
||||||
|
|
Loading…
Reference in a new issue