Commit b5c9af39 authored by Matej Latin's avatar Matej Latin Committed by Miguel Rincon

Replace tabs with new component on IDE pipelines panel

parent 5e7565eb
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { escape } from 'lodash';
import { GlLoadingIcon, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import {
GlLoadingIcon,
GlIcon,
GlSafeHtmlDirective as SafeHtml,
GlTabs,
GlTab,
GlBadge,
} from '@gitlab/ui';
import { sprintf, __ } from '../../../locale';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import Tabs from '../../../vue_shared/components/tabs/tabs';
import Tab from '../../../vue_shared/components/tabs/tab.vue';
import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue';
import JobsList from '../jobs/list.vue';
......@@ -15,11 +20,12 @@ export default {
components: {
GlIcon,
CiIcon,
Tabs,
Tab,
JobsList,
EmptyState,
GlLoadingIcon,
GlTabs,
GlTab,
GlBadge,
},
directives: {
SafeHtml,
......@@ -88,22 +94,26 @@ export default {
<p class="gl-mb-0 break-word">{{ latestPipeline.yamlError }}</p>
<p v-safe-html="ciLintText" class="gl-mb-0"></p>
</div>
<tabs v-else class="ide-pipeline-list">
<tab :active="!pipelineFailed">
<gl-tabs v-else>
<gl-tab :active="!pipelineFailed">
<template #title>
{{ __('Jobs') }}
<span v-if="jobsCount" class="badge badge-pill"> {{ jobsCount }} </span>
<gl-badge v-if="jobsCount" size="sm" class="gl-tab-counter-badge">{{
jobsCount
}}</gl-badge>
</template>
<jobs-list :loading="isLoadingJobs" :stages="stages" />
</tab>
<tab :active="pipelineFailed">
</gl-tab>
<gl-tab :active="pipelineFailed">
<template #title>
{{ __('Failed Jobs') }}
<span v-if="failedJobsCount" class="badge badge-pill"> {{ failedJobsCount }} </span>
<gl-badge v-if="failedJobsCount" size="sm" class="gl-tab-counter-badge">{{
failedJobsCount
}}</gl-badge>
</template>
<jobs-list :loading="isLoadingJobs" :stages="failedStages" />
</tab>
</tabs>
</gl-tab>
</gl-tabs>
</template>
</div>
</template>
......@@ -5,7 +5,7 @@
$bs-input-focus-border: #80bdff;
$bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
a:not(.btn),
a:not(.btn):not(.gl-tab-nav-item),
.gl-button.btn-link,
.gl-button.btn-link:hover,
.gl-button.btn-link:focus,
......
......@@ -915,12 +915,6 @@ $ide-commit-header-height: 48px;
}
}
.ide-pipeline-list {
flex: 1;
overflow: auto;
padding: 0 $gl-padding;
}
.ide-pipeline-header {
min-height: 55px;
padding-left: $gl-padding;
......
---
title: Update Web IDE pipelines panel to use our design system component
merge_request: 45007
author: matejlatin
type: other
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlTab } from '@gitlab/ui';
import { TEST_HOST } from 'helpers/test_constants';
import { pipelines } from 'jest/ide/mock_data';
import List from '~/ide/components/pipelines/list.vue';
import JobsList from '~/ide/components/jobs/list.vue';
import Tab from '~/vue_shared/components/tabs/tab.vue';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import IDEServices from '~/ide/services';
......@@ -167,7 +166,7 @@ describe('IDE pipelines list', () => {
createComponent({}, { ...withLatestPipelineState, stages, isLoadingJobs });
const jobProps = wrapper
.findAll(Tab)
.findAll(GlTab)
.at(0)
.find(JobsList)
.props();
......@@ -182,7 +181,7 @@ describe('IDE pipelines list', () => {
createComponent({}, { ...withLatestPipelineState, isLoadingJobs });
const jobProps = wrapper
.findAll(Tab)
.findAll(GlTab)
.at(1)
.find(JobsList)
.props();
......
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