Hide issue header dropdown button if there are no actions

Changelog: changed

app/assets/javascripts/issues/show/components/header_actions.vue

@@ -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
     >

spec/features/incidents/user_views_incident_spec.rb

@@ -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

spec/frontend/issues/show/components/header_actions_spec.js

-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);
+        });
+      });
     });
   });