Commit e09446bb authored by Kev's avatar Kev

Hide issue header dropdown button if there are no actions

Changelog: changed
parent a315b4a3
......@@ -135,6 +135,14 @@ export default {
const canReopen = this.isClosed && this.canReopenIssue;
return canClose || canReopen;
},
hasDesktopDropdown() {
return (
this.canCreateIssue || this.canPromoteToEpic || !this.isIssueAuthor || this.canReportSpam
);
},
hasMobileDropdown() {
return this.hasDesktopDropdown || this.showToggleIssueStateButton;
},
},
created() {
eventHub.$on('toggle.issuable.state', this.toggleIssueState);
......@@ -223,10 +231,12 @@ export default {
<template>
<div class="detail-page-header-actions gl-display-flex">
<gl-dropdown
v-if="hasMobileDropdown"
class="gl-sm-display-none! w-100"
block
:text="dropdownText"
data-qa-selector="issue_actions_dropdown"
data-testid="mobile-dropdown"
:loading="isToggleStateButtonLoading"
>
<gl-dropdown-item
......@@ -276,11 +286,13 @@ export default {
</gl-button>
<gl-dropdown
v-if="hasDesktopDropdown"
class="gl-display-none gl-sm-display-inline-flex! gl-ml-3"
icon="ellipsis_v"
category="tertiary"
:text="dropdownText"
:text-sr-only="true"
data-testid="desktop-dropdown"
no-caret
right
>
......
......@@ -40,10 +40,8 @@ RSpec.describe "User views incident" do
visit(project_issues_incident_path(project, incident))
end
it 'does not show the incident action', :js, :aggregate_failures do
click_button 'Incident actions'
expect(page).not_to have_link('New incident')
it 'does not show the incident actions', :js, :aggregate_failures do
expect(page).not_to have_button('Incident actions')
end
end
end
......
import { GlButton, GlDropdown, GlDropdownItem, GlLink, GlModal } from '@gitlab/ui';
import Vue, { nextTick } from 'vue';
import { GlButton, GlDropdownItem, GlLink, GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import { mockTracking } from 'helpers/tracking_helper';
......@@ -65,12 +65,17 @@ describe('HeaderActions component', () => {
},
};
const findToggleIssueStateButton = () => wrapper.findComponent(GlButton);
const findDropdownAt = (index) => wrapper.findAllComponents(GlDropdown).at(index);
const findMobileDropdownItems = () => findDropdownAt(0).findAllComponents(GlDropdownItem);
const findDesktopDropdownItems = () => findDropdownAt(1).findAllComponents(GlDropdownItem);
const findModal = () => wrapper.findComponent(GlModal);
const findModalLinkAt = (index) => findModal().findAllComponents(GlLink).at(index);
const findToggleIssueStateButton = () => wrapper.find(GlButton);
const findDropdownBy = (dataTestId) => wrapper.find(`[data-testid="${dataTestId}"]`);
const findMobileDropdown = () => findDropdownBy('mobile-dropdown');
const findDesktopDropdown = () => findDropdownBy('desktop-dropdown');
const findMobileDropdownItems = () => findMobileDropdown().findAll(GlDropdownItem);
const findDesktopDropdownItems = () => findDesktopDropdown().findAll(GlDropdownItem);
const findModal = () => wrapper.find(GlModal);
const findModalLinkAt = (index) => findModal().findAll(GlLink).at(index);
const mountComponent = ({
props = {},
......@@ -161,10 +166,10 @@ describe('HeaderActions component', () => {
});
describe.each`
description | isCloseIssueItemVisible | findDropdownItems
${'mobile dropdown'} | ${true} | ${findMobileDropdownItems}
${'desktop dropdown'} | ${false} | ${findDesktopDropdownItems}
`('$description', ({ isCloseIssueItemVisible, findDropdownItems }) => {
description | isCloseIssueItemVisible | findDropdownItems | findDropdown
${'mobile dropdown'} | ${true} | ${findMobileDropdownItems} | ${findMobileDropdown}
${'desktop dropdown'} | ${false} | ${findDesktopDropdownItems} | ${findDesktopDropdown}
`('$description', ({ isCloseIssueItemVisible, findDropdownItems, findDropdown }) => {
describe.each`
description | itemText | isItemVisible | canUpdateIssue | canCreateIssue | isIssueAuthor | canReportSpam | canPromoteToEpic | canDestroyIssue
${`when user can update ${issueType}`} | ${`Close ${issueType}`} | ${isCloseIssueItemVisible} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
......@@ -214,6 +219,24 @@ describe('HeaderActions component', () => {
});
},
);
describe(`when user can update but not create ${issueType}`, () => {
beforeEach(() => {
wrapper = mountComponent({
props: {
canUpdateIssue: true,
canCreateIssue: false,
isIssueAuthor: true,
issueType,
canReportSpam: false,
canPromoteToEpic: false,
},
});
});
it(`${isCloseIssueItemVisible ? 'shows' : 'hides'} the dropdown button`, () => {
expect(findDropdown().exists()).toBe(isCloseIssueItemVisible);
});
});
});
});
......
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