Skip to content
Snippets Groups Projects
Verified Commit cbee01ed authored by Phil Hughes's avatar Phil Hughes
Browse files

Updated approvals widget collapse button

Changed the approvals widget collapse button to match
the same styling as the rest of the widget. Doing this removes
the suggested approvers user avatar list.

#387070
parent 42a8054a
No related branches found
No related tags found
No related merge requests found
Showing with 37 additions and 138 deletions
......@@ -24,7 +24,12 @@ export default {
</script>
<template>
<state-container :mr="mr" status="failed">
<state-container
status="failed"
is-collapsible
:is-collapsed="mr.mergeDetailsCollapsed"
@toggle="() => mr.toggleMergeDetails()"
>
<bold-text :message="$options.message" />
</state-container>
</template>
......@@ -24,7 +24,12 @@ export default {
</script>
<template>
<state-container :mr="mr" status="failed">
<state-container
status="failed"
is-collapsible
:is-collapsed="mr.mergeDetailsCollapsed"
@toggle="() => mr.toggleMergeDetails()"
>
<bold-text :message="$options.message" />
</state-container>
</template>
......@@ -28,7 +28,12 @@ export default {
</script>
<template>
<state-container :mr="mr" status="failed">
<state-container
status="failed"
is-collapsible
:is-collapsed="mr.mergeDetailsCollapsed"
@toggle="() => mr.toggleMergeDetails()"
>
<bold-text :message="$options.message" />
<a
v-gl-tooltip
......
......@@ -68,7 +68,7 @@
wait_for_requests
expect(page).to have_content("Requires 1 approval from #{rule.name}")
click_on 'View eligible approvers'
find('[data-testid="widget-toggle"]').click
wait_for_requests
within('.mr-widget-workflow table') do
......@@ -96,7 +96,7 @@
wait_for_requests
expect(page).to have_content("Requires 1 approval from #{rule.name}.")
click_on 'View eligible approvers'
find('[data-testid="widget-toggle"]').click
wait_for_requests
within('.mr-widget-workflow table .gl-font-monospace') do
......@@ -120,7 +120,7 @@
expect(page).to have_content("Requires 2 approvals from #{rule.name} and Code Owners")
click_on 'View eligible approvers'
find('[data-testid="widget-toggle"]').click
wait_for_requests
within('.mr-widget-workflow table .gl-font-monospace') do
......
......@@ -69,7 +69,7 @@ def page_rule_names
click_on("Create merge request")
wait_for_requests
click_on("View eligible approvers")
find('[data-testid="widget-toggle"]').click
wait_for_requests
tr = page.find(:css, 'tr', text: private_rule.name)
......
......@@ -96,7 +96,6 @@
wait_for_all_requests
expect(page).to have_content("Requires 1 approval from eligible users.")
expect(page).to have_selector("img[alt='#{other_user.name}']")
end
it 'allows delete approvers group when it is set in project', :sidekiq_inline do
......@@ -117,10 +116,9 @@
click_button 'Update approval rule'
click_on("Create merge request")
wait_for_all_requests
click_on("View eligible approvers") if page.has_button?("View eligible approvers")
find('[data-testid="widget-toggle"]').click
wait_for_requests
expect(page).not_to have_selector(".js-approvers img[alt='#{other_user.name}']")
expect(page).to have_selector(".js-approvers img[alt='#{approver.name}']")
end
end
......@@ -158,8 +156,6 @@
wait_for_all_requests
expect(page).to have_content("Requires 1 approval from eligible users.")
expect(page).to have_selector("img[alt='#{user.name}']")
expect(page).to have_selector("img[alt='#{other_user.name}']")
end
it 'allows delete approvers group when it`s set in project' do
......@@ -184,7 +180,7 @@
click_on("Save changes")
wait_for_all_requests
click_on("View eligible approvers")
find('[data-testid="widget-toggle"]').click
wait_for_requests
expect(page).not_to have_selector(".js-approvers img[alt='#{other_user.name}']")
......
import { GlButton, GlIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
import stubChildren from 'helpers/stub_children';
......@@ -30,122 +28,22 @@ describe('EE MRWidget approvals footer', () => {
});
};
const findToggle = () => wrapper.findComponent(GlButton);
const findToggleIcon = () => findToggle().findComponent(GlIcon);
const findCollapseButton = () => wrapper.find('[data-testid="approvers-collapse-button"]');
const findList = () => wrapper.findComponent(ApprovalsList);
const findAvatars = () => wrapper.findComponent(UserAvatarList);
describe('when expanded', () => {
describe('and has rules', () => {
beforeEach(async () => {
createComponent();
const button = findToggle();
button.vm.$emit('click');
await nextTick();
});
it('renders approvals list', () => {
const list = findList();
expect(list.exists()).toBe(true);
});
it('does not render user avatar list', () => {
expect(findAvatars().exists()).toBe(false);
});
describe('toggle button', () => {
it('renders', () => {
const button = findToggle();
expect(button.exists()).toBe(true);
expect(button.attributes('aria-label')).toEqual('Collapse approvers');
});
});
describe('collapse button', () => {
it('renders', () => {
const button = findCollapseButton();
expect(button.exists()).toBe(true);
expect(button.text()).toEqual('Collapse');
});
it('when clicked, collapses the view', async () => {
findCollapseButton().trigger('click');
await nextTick();
expect(findList().exists()).toBe(false);
});
});
});
describe('and rules empty', () => {
beforeEach(() => {
createComponent({ approvalRules: [] });
});
it('does not render approvals list', () => {
expect(findList().exists()).toBe(false);
});
});
});
describe('when collapsed', () => {
describe('and has rules', () => {
beforeEach(() => {
createComponent();
});
describe('toggle button', () => {
it('renders', () => {
const button = findToggle();
expect(button.exists()).toBe(true);
expect(button.attributes('aria-label')).toEqual('Expand approvers');
});
it('renders icon', () => {
const icon = findToggleIcon();
expect(icon.exists()).toBe(true);
expect(icon.props('name')).toEqual('chevron-right');
});
it('expands when clicked', async () => {
const button = findToggle();
button.vm.$emit('click');
await nextTick();
expect(findList().exists()).toBe(true);
});
});
it('renders avatar list', () => {
const avatars = findAvatars();
expect(avatars.exists()).toBe(true);
expect(avatars.props()).toEqual(
expect.objectContaining({
items: testSuggestedApprovers().filter((x, idx) => idx < 5),
breakpoint: 0,
emptyText: '',
}),
);
});
it('renders approvals list', () => {
const list = findList();
it('does not render collapsed text', () => {
expect(wrapper.text()).not.toContain('Collapse');
expect(list.exists()).toBe(true);
});
it('does not render approvals list', () => {
expect(findList().exists()).toBe(false);
it('does not render user avatar list', () => {
expect(findAvatars().exists()).toBe(false);
});
});
});
......@@ -9,7 +9,6 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { createAlert } from '~/alert';
import Approvals from 'ee/vue_merge_request_widget/components/approvals/approvals.vue';
import ApprovalsAuth from 'ee/vue_merge_request_widget/components/approvals/approvals_auth.vue';
import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
import ApprovalsFoss from '~/vue_merge_request_widget/components/approvals/approvals.vue';
import { APPROVE_ERROR } from '~/vue_merge_request_widget/components/approvals/messages';
import eventHub from '~/vue_merge_request_widget/event_hub';
......@@ -75,7 +74,6 @@ describe('MRWidget approvals', () => {
text: action.text(),
};
};
const findFooter = () => wrapper.findComponent(ApprovalsFooter);
const findInvalidRules = () => wrapper.findByTestId('invalid-rules');
beforeEach(() => {
......@@ -193,23 +191,18 @@ describe('MRWidget approvals', () => {
});
describe('footer', () => {
let footer;
beforeEach(async () => {
createComponent();
await waitForPromises();
});
beforeEach(() => {
footer = findFooter();
});
it('opens footer when toggle is clicked', async () => {
wrapper.findByTestId('widget-toggle').vm.$emit('click');
it('is rendered with props', () => {
expect(footer.exists()).toBe(true);
expect(footer.props()).toMatchObject({
suggestedApprovers: [],
});
await nextTick();
expect(wrapper.findByTestId('approvals-footer').exists()).toBe(true);
});
});
......
......@@ -10356,7 +10356,7 @@ msgstr ""
msgid "Collapse all threads"
msgstr ""
 
msgid "Collapse approvers"
msgid "Collapse eligible approvers"
msgstr ""
 
msgid "Collapse issues"
......@@ -17187,7 +17187,7 @@ msgstr ""
msgid "Expand all threads"
msgstr ""
 
msgid "Expand approvers"
msgid "Expand eligible approvers"
msgstr ""
 
msgid "Expand file"
......@@ -47928,9 +47928,6 @@ msgstr ""
msgid "View documentation"
msgstr ""
 
msgid "View eligible approvers"
msgstr ""
msgid "View exposed artifact"
msgid_plural "View %d exposed artifacts"
msgstr[0] ""
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment