diff options
6 files changed, 133 insertions, 127 deletions
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.js b/app/assets/javascripts/pipelines/components/nav_controls.js deleted file mode 100644 index 6aa10531034..00000000000 --- a/app/assets/javascripts/pipelines/components/nav_controls.js +++ /dev/null @@ -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> - `, -}; diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue new file mode 100644 index 00000000000..632fc167f2b --- /dev/null +++ b/app/assets/javascripts/pipelines/components/nav_controls.vue @@ -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> diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.js b/app/assets/javascripts/pipelines/components/navigation_tabs.js deleted file mode 100644 index 1626ae17a30..00000000000 --- a/app/assets/javascripts/pipelines/components/navigation_tabs.js +++ /dev/null @@ -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> - `, -}; diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.vue b/app/assets/javascripts/pipelines/components/navigation_tabs.vue new file mode 100644 index 00000000000..d2f6d47f043 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/navigation_tabs.vue @@ -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> diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js index 23b967b4b32..b530461837c 100644 --- a/app/assets/javascripts/pipelines/pipelines.js +++ b/app/assets/javascripts/pipelines/pipelines.js @@ -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'; diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js index 601eebce38a..f1697840fcd 100644 --- a/spec/javascripts/pipelines/nav_controls_spec.js +++ b/spec/javascripts/pipelines/nav_controls_spec.js @@ -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; |