Commit 2bb1c2a7 authored by Alexis Ginsberg's avatar Alexis Ginsberg Committed by Natalia Tepluhina

Migrate requirements tabs to gl-tabs

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/45736
parent 604e8d44
<script>
import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
import { GlBadge, GlButton, GlTabs, GlTab } from '@gitlab/ui';
import { FilterState } from '../constants';
export default {
FilterState,
components: {
GlLink,
GlBadge,
GlButton,
GlTabs,
GlTab,
},
props: {
filterBy: {
......@@ -43,42 +44,41 @@ export default {
</script>
<template>
<div class="top-area">
<ul class="nav-links mobile-separator requirements-state-filters js-requirements-state-filters">
<li :class="{ active: isOpenTab }">
<gl-link
id="state-opened"
data-state="opened"
:title="__('Filter by requirements that are currently opened.')"
@click="$emit('click-tab', { filterBy: $options.FilterState.opened })"
>
{{ __('Open') }}
<gl-badge>{{ requirementsCount.OPENED }}</gl-badge>
</gl-link>
</li>
<li :class="{ active: isArchivedTab }">
<gl-link
id="state-archived"
data-state="archived"
:title="__('Filter by requirements that are currently archived.')"
@click="$emit('click-tab', { filterBy: $options.FilterState.archived })"
>
{{ __('Archived') }}
<gl-badge>{{ requirementsCount.ARCHIVED }}</gl-badge>
</gl-link>
</li>
<li :class="{ active: isAllTab }">
<gl-link
id="state-all"
data-state="all"
:title="__('Show all requirements.')"
@click="$emit('click-tab', { filterBy: $options.FilterState.all })"
>
{{ __('All') }}
<gl-badge>{{ requirementsCount.ALL }}</gl-badge>
</gl-link>
</li>
</ul>
<div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
<gl-tabs content-class="gl-p-0">
<gl-tab
:title-link-attributes="{ 'data-testid': 'state-opened' }"
:active="isOpenTab"
@click="$emit('click-tab', { filterBy: $options.FilterState.opened })"
>
<template #title>
<span>{{ __('Open') }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ requirementsCount.OPENED }}</gl-badge>
</template>
</gl-tab>
<gl-tab
:title-link-attributes="{ 'data-testid': 'state-archived' }"
:active="isArchivedTab"
@click="$emit('click-tab', { filterBy: $options.FilterState.archived })"
>
<template #title>
<span>{{ __('Archived') }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{
requirementsCount.ARCHIVED
}}</gl-badge>
</template>
</gl-tab>
<gl-tab
:title-link-attributes="{ 'data-testid': 'state-all' }"
:active="isAllTab"
@click="$emit('click-tab', { filterBy: $options.FilterState.all })"
>
<template #title>
<span>{{ __('All') }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ requirementsCount.ALL }}</gl-badge>
</template>
</gl-tab>
</gl-tabs>
<div v-if="isOpenTab && canCreateRequirement" class="nav-controls">
<gl-button
category="primary"
......
---
title: Migrate requirements tabs to gltab
merge_request: 45736
author:
type: changed
......@@ -44,18 +44,15 @@ RSpec.describe 'Requirements list', :js do
end
it 'shows requirements tabs for each status type' do
page.within('.requirements-state-filters') do
expect(page).to have_selector('li > a#state-opened')
expect(find('li > a#state-opened')[:title]).to eq('Filter by requirements that are currently opened.')
expect(find('li > a#state-opened .badge')).to have_content('3')
expect(page).to have_selector('li > a#state-archived')
expect(find('li > a#state-archived')[:title]).to eq('Filter by requirements that are currently archived.')
expect(find('li > a#state-archived .badge')).to have_content('1')
expect(page).to have_selector('li > a#state-all')
expect(find('li > a#state-all')[:title]).to eq('Show all requirements.')
expect(find('li > a#state-all .badge')).to have_content('4')
page.within('.gl-tabs') do
expect(page).to have_selector('li > a[data-testid="state-opened"]')
expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('3')
expect(page).to have_selector('li > a[data-testid="state-archived"]')
expect(find('li > a[data-testid="state-archived"] .badge')).to have_content('1')
expect(page).to have_selector('li > a[data-testid="state-all"]')
expect(find('li > a[data-testid="state-all"] .badge')).to have_content('4')
end
end
......@@ -91,16 +88,16 @@ RSpec.describe 'Requirements list', :js do
end
it 'updates requirements count in nav sidebar and opened and all tab badges' do
page.within('.requirements-state-filters') do
expect(find('li > a#state-opened .badge')).to have_content('3')
expect(find('li > a#state-all .badge')).to have_content('4')
page.within('.gl-tabs') do
expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('3')
expect(find('li > a[data-testid="state-all"] .badge')).to have_content('4')
end
create_requirement('Foobar')
page.within('.requirements-state-filters') do
expect(find('li > a#state-opened .badge')).to have_content('4')
expect(find('li > a#state-all .badge')).to have_content('5')
page.within('.gl-tabs') do
expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('4')
expect(find('li > a[data-testid="state-all"] .badge')).to have_content('5')
end
end
end
......@@ -187,16 +184,16 @@ RSpec.describe 'Requirements list', :js do
end
expect(page.find('.requirements-list-container')).to have_selector('li.requirement', count: 2)
page.within('.requirements-state-filters') do
expect(find('li > a#state-opened .badge')).to have_content('2')
expect(find('li > a#state-archived .badge')).to have_content('2')
page.within('.gl-tabs') do
expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('2')
expect(find('li > a[data-testid="state-archived"] .badge')).to have_content('2')
end
end
end
context 'archived tab' do
before do
find('li > a#state-archived').click
find('li > a[data-testid="state-archived"]').click
wait_for_requests
end
......@@ -230,16 +227,16 @@ RSpec.describe 'Requirements list', :js do
end
expect(page.find('.requirements-list-container')).to have_selector('li.requirement', count: 0)
page.within('.requirements-state-filters') do
expect(find('li > a#state-opened .badge')).to have_content('4')
expect(find('li > a#state-archived .badge')).to have_content('0')
page.within('.gl-tabs') do
expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('4')
expect(find('li > a[data-testid="state-archived"] .badge')).to have_content('0')
end
end
end
context 'all tab' do
before do
find('li > a#state-all').click
find('li > a[data-testid="state-all"]').click
wait_for_requests
end
......
import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
import { GlTab, GlBadge, GlButton, GlTabs } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
......@@ -19,6 +19,10 @@ const createComponent = ({
showCreateForm,
canCreateRequirement,
},
stubs: {
GlTabs,
GlTab,
},
});
describe('RequirementsTabs', () => {
......@@ -34,39 +38,30 @@ describe('RequirementsTabs', () => {
describe('template', () => {
it('renders "Open" tab', () => {
const tabEl = wrapper.findAll(GlLink).at(0);
const tabEl = wrapper.findAll(GlTab).at(0);
expect(tabEl.attributes('id')).toBe('state-opened');
expect(tabEl.attributes('data-state')).toBe('opened');
expect(tabEl.attributes('title')).toBe('Filter by requirements that are currently opened.');
expect(tabEl.text()).toContain('Open');
expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.OPENED}`);
});
it('renders "Archived" tab', () => {
const tabEl = wrapper.findAll(GlLink).at(1);
const tabEl = wrapper.findAll(GlTab).at(1);
expect(tabEl.attributes('id')).toBe('state-archived');
expect(tabEl.attributes('data-state')).toBe('archived');
expect(tabEl.attributes('title')).toBe('Filter by requirements that are currently archived.');
expect(tabEl.text()).toContain('Archived');
expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.ARCHIVED}`);
});
it('renders "All" tab', () => {
const tabEl = wrapper.findAll(GlLink).at(2);
const tabEl = wrapper.findAll(GlTab).at(2);
expect(tabEl.attributes('id')).toBe('state-all');
expect(tabEl.attributes('data-state')).toBe('all');
expect(tabEl.attributes('title')).toBe('Show all requirements.');
expect(tabEl.text()).toContain('All');
expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.ALL}`);
});
it('renders class `active` on currently selected tab', () => {
const tabEl = wrapper.findAll('li').at(0);
const tabEl = wrapper.findAll(GlTab).at(0);
expect(tabEl.classes()).toContain('active');
expect(tabEl.attributes('active')).toBeDefined();
});
it('renders "New requirement" button when current tab is "Open" tab', () => {
......
......@@ -12182,12 +12182,6 @@ msgstr ""
msgid "Filter by name"
msgstr ""
msgid "Filter by requirements that are currently archived."
msgstr ""
msgid "Filter by requirements that are currently opened."
msgstr ""
msgid "Filter by status"
msgstr ""
......@@ -25405,9 +25399,6 @@ msgstr ""
msgid "Show all members"
msgstr ""
msgid "Show all requirements."
msgstr ""
msgid "Show all test cases."
msgstr ""
......
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