Use vue files for navigation tabs and buttons
This commit is contained in:
parent
c165f39b5c
commit
5279a39e97
|
@ -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>
|
||||
`,
|
||||
};
|
|
@ -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 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 navigationTabs from './components/navigation_tabs.vue';
|
||||
import navigationControls from './components/nav_controls.vue';
|
||||
import loadingIcon from '../vue_shared/components/loading_icon.vue';
|
||||
import Poll from '../lib/utils/poll';
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import navControlsComp from '~/pipelines/components/nav_controls';
|
||||
import navControlsComp from '~/pipelines/components/nav_controls.vue';
|
||||
|
||||
describe('Pipelines Nav Controls', () => {
|
||||
let NavControlsComponent;
|
||||
|
|
Loading…
Reference in New Issue