Skip to content

G
gitlab-ce
Commit 9cb4384e authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch '230727-yet-another-requiremnets-tab-migration' into 'master' 

Migrate requirements tabs to gltab

See merge request gitlab-org/gitlab!45736
parents 0b0dcc59 2bb1c2a7
Show whitespace changes
Inline Side-by-side
Showing with 76 additions and 88 deletions
ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
View file @ 9cb4384e
<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: {
......@@ -48,42 +49,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.')"
<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 })"
>
{{ __('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.')"
<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 })"
>
{{ __('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.')"
<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 })"
>
{{ __('All') }}
<gl-badge>{{ requirementsCount.ALL }}</gl-badge>
</gl-link>
</li>
</ul>
<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
v-if="showUploadCsv"
......
ee/changelogs/unreleased/230727-yet-another-requiremnets-tab-migration.yml 0 → 100644
View file @ 9cb4384e
---
title: Migrate requirements tabs to gltab
merge_request: 45736
author:
type: changed
ee/spec/features/projects/requirements_management/requirements_list_spec.rb
View file @ 9cb4384e
......@@ -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')
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#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[data-testid="state-archived"]')
expect(find('li > a[data-testid="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')
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
......
ee/spec/frontend/requirements/components/requirements_tabs_spec.js
View file @ 9cb4384e
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';
......@@ -21,6 +21,10 @@ const createComponent = ({
canCreateRequirement,
showUploadCsv,
},
stubs: {
GlTabs,
GlTab,
},
});
describe('RequirementsTabs', () => {
......@@ -36,39 +40,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', () => {
......
locale/gitlab.pot
View file @ 9cb4384e
......@@ -12224,12 +12224,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 ""
......@@ -25450,9 +25444,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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7