Merge branch '233974-update-incident-to-use-issue-header-ellipsis-dropdown' into 'master'

Update incidents to use issue header ellipsis dropdown

See merge request gitlab-org/gitlab!46977

app/assets/javascripts/issue_show/components/header_actions.vue

@@ -2,8 +2,10 @@
 import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlLink, GlModal } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import createFlash from '~/flash';
+import { IssuableType } from '~/issuable_show/constants';
 import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
-import { __ } from '~/locale';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+import { __, sprintf } from '~/locale';
 import updateIssueMutation from '../queries/update_issue.mutation.graphql';
 
 export default {
@@ -22,18 +24,41 @@ export default {
     text: __('Yes, close issue'),
     attributes: [{ variant: 'warning' }],
   },
-  inject: [
-    'canCreateIssue',
-    'canReopenIssue',
-    'canReportSpam',
-    'canUpdateIssue',
-    'iid',
-    'isIssueAuthor',
-    'newIssuePath',
-    'projectPath',
-    'reportAbusePath',
-    'submitAsSpamPath',
-  ],
+  inject: {
+    canCreateIssue: {
+      default: false,
+    },
+    canReopenIssue: {
+      default: false,
+    },
+    canReportSpam: {
+      default: false,
+    },
+    canUpdateIssue: {
+      default: false,
+    },
+    iid: {
+      default: '',
+    },
+    isIssueAuthor: {
+      default: false,
+    },
+    issueType: {
+      default: IssuableType.Issue,
+    },
+    newIssuePath: {
+      default: '',
+    },
+    projectPath: {
+      default: '',
+    },
+    reportAbusePath: {
+      default: '',
+    },
+    submitAsSpamPath: {
+      default: '',
+    },
+  },
   data() {
     return {
       isUpdatingState: false,
@@ -45,12 +70,22 @@ export default {
       return this.getNoteableData.state === IssuableStatus.Closed;
     },
     buttonText() {
-      return this.isClosed ? __('Reopen issue') : __('Close issue');
+      return this.isClosed
+        ? sprintf(__('Reopen %{issueType}'), { issueType: this.issueType })
+        : sprintf(__('Close %{issueType}'), { issueType: this.issueType });
     },
     buttonVariant() {
       return this.isClosed ? 'default' : 'warning';
     },
-    showToggleIssueButton() {
+    dropdownText() {
+      return sprintf(__('%{issueType} actions'), {
+        issueType: capitalizeFirstCharacter(this.issueType),
+      });
+    },
+    newIssueTypeText() {
+      return sprintf(__('New %{issueType}'), { issueType: this.issueType });
+    },
+    showToggleIssueStateButton() {
       const canClose = !this.isClosed && this.canUpdateIssue;
       const canReopen = this.isClosed && this.canReopenIssue;
       return canClose || canReopen;
@@ -106,16 +141,16 @@ export default {
 
 <template>
   <div class="detail-page-header-actions">
-    <gl-dropdown class="gl-display-block gl-display-sm-none!" block :text="__('Issue actions')">
+    <gl-dropdown class="gl-display-block gl-display-sm-none!" block :text="dropdownText">
       <gl-dropdown-item
-        v-if="showToggleIssueButton"
+        v-if="showToggleIssueStateButton"
         :disabled="isUpdatingState"
         @click="toggleIssueState"
       >
         {{ buttonText }}
       </gl-dropdown-item>
       <gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
-        {{ __('New issue') }}
+        {{ newIssueTypeText }}
       </gl-dropdown-item>
       <gl-dropdown-item v-if="!isIssueAuthor" :href="reportAbusePath">
         {{ __('Report abuse') }}
@@ -131,7 +166,7 @@ export default {
     </gl-dropdown>
 
     <gl-button
-      v-if="showToggleIssueButton"
+      v-if="showToggleIssueStateButton"
       class="gl-display-none gl-display-sm-inline-flex!"
       category="secondary"
       :loading="isUpdatingState"
@@ -149,11 +184,11 @@ export default {
     >
       <template #button-content>
         <gl-icon name="ellipsis_v" aria-hidden="true" />
-        <span class="gl-sr-only">{{ __('Actions') }}</span>
+        <span class="gl-sr-only">{{ dropdownText }}</span>
       </template>
 
       <gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
-        {{ __('New issue') }}
+        {{ newIssueTypeText }}
       </gl-dropdown-item>
       <gl-dropdown-item v-if="!isIssueAuthor" :href="reportAbusePath">
         {{ __('Report abuse') }}

app/assets/javascripts/issue_show/issue.js

@@ -50,6 +50,7 @@ export function initIssueHeaderActions(store) {
       canUpdateIssue: parseBoolean(el.dataset.canUpdateIssue),
       iid: el.dataset.iid,
       isIssueAuthor: parseBoolean(el.dataset.isIssueAuthor),
+      issueType: el.dataset.issueType,
       newIssuePath: el.dataset.newIssuePath,
       projectPath: el.dataset.projectPath,
       reportAbusePath: el.dataset.reportAbusePath,

app/helpers/issues_helper.rb

@@ -153,18 +153,21 @@ module IssuesHelper
     }
   end
 
-  def issue_header_actions_data(project, issue, current_user)
+  def issue_header_actions_data(project, issuable, current_user)
+    new_issuable_params = ({ issuable_template: 'incident', issue: { issue_type: 'incident' } } if issuable.incident?)
+
     {
       can_create_issue: show_new_issue_link?(project).to_s,
-      can_reopen_issue: can?(current_user, :reopen_issue, issue).to_s,
-      can_report_spam: issue.submittable_as_spam_by?(current_user).to_s,
-      can_update_issue: can?(current_user, :update_issue, issue).to_s,
-      iid: issue.iid,
-      is_issue_author: (issue.author == current_user).to_s,
-      new_issue_path: new_project_issue_path(project),
+      can_reopen_issue: can?(current_user, :reopen_issue, issuable).to_s,
+      can_report_spam: issuable.submittable_as_spam_by?(current_user).to_s,
+      can_update_issue: can?(current_user, :update_issue, issuable).to_s,
+      iid: issuable.iid,
+      is_issue_author: (issuable.author == current_user).to_s,
+      issue_type: issuable_display_type(issuable),
+      new_issue_path: new_project_issue_path(project, new_issuable_params),
       project_path: project.full_path,
-      report_abuse_path: new_abuse_report_path(user_id: issue.author.id, ref_url: issue_url(issue)),
-      submit_as_spam_path: mark_as_spam_project_issue_path(project, issue)
+      report_abuse_path: new_abuse_report_path(user_id: issuable.author.id, ref_url: issue_url(issuable)),
+      submit_as_spam_path: mark_as_spam_project_issue_path(project, issuable)
     }
   end
 end

app/views/shared/issue_type/_details_header.html.haml

@@ -23,8 +23,8 @@
     %a.btn.gl-button.btn-default.float-right.gl-display-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = sprite_icon('chevron-double-lg-left')
 
-  - if Feature.enabled?(:vue_issue_header, @project) && display_issuable_type == 'issue'
-    .js-issue-header-actions{ data: issue_header_actions_data(@project, @issue, current_user) }
+  - if Feature.enabled?(:vue_issue_header, @project)
+    .js-issue-header-actions{ data: issue_header_actions_data(@project, issuable, current_user) }
   - else
     .detail-page-header-actions.js-issuable-actions.js-issuable-buttons{ data: { "action": "close-reopen" } }
       .clearfix.issue-btn-group.dropdown

locale/gitlab.pot

@@ -526,6 +526,9 @@ msgstr ""
 msgid "%{issuableType} will be removed! Are you sure?"
 msgstr ""
 
+msgid "%{issueType} actions"
+msgstr ""
+
 msgid "%{issuesCount} issues with a limit of %{maxIssueCount}"
 msgstr ""
 
@@ -5585,13 +5588,13 @@ msgstr ""
 msgid "Close %{display_issuable_type}"
 msgstr ""
 
-msgid "Close %{tabname}"
+msgid "Close %{issueType}"
 msgstr ""
 
-msgid "Close epic"
+msgid "Close %{tabname}"
 msgstr ""
 
-msgid "Close issue"
+msgid "Close epic"
 msgstr ""
 
 msgid "Close milestone"
@@ -14947,9 +14950,6 @@ msgstr ""
 msgid "Issue Boards"
 msgstr ""
 
-msgid "Issue actions"
-msgstr ""
-
 msgid "Issue already promoted to epic."
 msgstr ""
 
@@ -18055,6 +18055,9 @@ msgstr ""
 msgid "New %{display_issuable_type}"
 msgstr ""
 
+msgid "New %{issueType}"
+msgstr ""
+
 msgid "New Application"
 msgstr ""
 
@@ -22563,10 +22566,10 @@ msgstr ""
 msgid "Reopen %{display_issuable_type}"
 msgstr ""
 
-msgid "Reopen epic"
+msgid "Reopen %{issueType}"
 msgstr ""
 
-msgid "Reopen issue"
+msgid "Reopen epic"
 msgstr ""
 
 msgid "Reopen milestone"

spec/frontend/issue_show/components/header_actions_spec.js

 import { GlButton, GlDropdown, GlDropdownItem, GlLink, GlModal } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { IssuableType } from '~/issuable_show/constants';
 import HeaderActions from '~/issue_show/components/header_actions.vue';
 import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
 import createStore from '~/notes/stores';
@@ -20,6 +21,7 @@ describe('HeaderActions component', () => {
     canUpdateIssue: true,
     iid: '32',
     isIssueAuthor: true,
+    issueType: IssuableType.Issue,
     newIssuePath: 'gitlab-org/gitlab-test/-/issues/new',
     projectPath: 'gitlab-org/gitlab-test',
     reportAbusePath:
@@ -74,16 +76,21 @@ describe('HeaderActions component', () => {
     wrapper.destroy();
   });
 
+  describe.each`
+    issueType
+    ${IssuableType.Issue}
+    ${IssuableType.Incident}
+  `('when issue type is $issueType', ({ issueType }) => {
     describe('close/reopen button', () => {
       describe.each`
         description                          | issueState               | buttonText               | newIssueState
-      ${'when the issue is open'}   | ${IssuableStatus.Open}   | ${'Close issue'}  | ${IssueStateEvent.Close}
-      ${'when the issue is closed'} | ${IssuableStatus.Closed} | ${'Reopen issue'} | ${IssueStateEvent.Reopen}
+        ${`when the ${issueType} is open`}   | ${IssuableStatus.Open}   | ${`Close ${issueType}`}  | ${IssueStateEvent.Close}
+        ${`when the ${issueType} is closed`} | ${IssuableStatus.Closed} | ${`Reopen ${issueType}`} | ${IssueStateEvent.Reopen}
       `('$description', ({ issueState, buttonText, newIssueState }) => {
         beforeEach(() => {
           dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
 
-        wrapper = mountComponent({ issueState });
+          wrapper = mountComponent({ props: { issueType }, issueState });
         });
 
         it(`has text "${buttonText}"`, () => {
@@ -123,10 +130,10 @@ describe('HeaderActions component', () => {
     `('$description', ({ isCloseIssueItemVisible, findDropdownItems }) => {
       describe.each`
         description                               | itemText                | isItemVisible              | canUpdateIssue | canCreateIssue | isIssueAuthor | canReportSpam
-      ${'when user can update issue'}      | ${'Close issue'}    | ${isCloseIssueItemVisible} | ${true}        | ${true}        | ${true}       | ${true}
-      ${'when user cannot update issue'}   | ${'Close issue'}    | ${false}                   | ${false}       | ${true}        | ${true}       | ${true}
-      ${'when user can create issue'}      | ${'New issue'}      | ${true}                    | ${true}        | ${true}        | ${true}       | ${true}
-      ${'when user cannot create issue'}   | ${'New issue'}      | ${false}                   | ${true}        | ${false}       | ${true}       | ${true}
+        ${`when user can update ${issueType}`}    | ${`Close ${issueType}`} | ${isCloseIssueItemVisible} | ${true}        | ${true}        | ${true}       | ${true}
+        ${`when user cannot update ${issueType}`} | ${`Close ${issueType}`} | ${false}                   | ${false}       | ${true}        | ${true}       | ${true}
+        ${`when user can create ${issueType}`}    | ${`New ${issueType}`}   | ${true}                    | ${true}        | ${true}        | ${true}       | ${true}
+        ${`when user cannot create ${issueType}`} | ${`New ${issueType}`}   | ${false}                   | ${true}        | ${false}       | ${true}       | ${true}
         ${'when user can report abuse'}           | ${'Report abuse'}       | ${true}                    | ${true}        | ${true}        | ${false}      | ${true}
         ${'when user cannot report abuse'}        | ${'Report abuse'}       | ${false}                   | ${true}        | ${true}        | ${true}       | ${true}
         ${'when user can submit as spam'}         | ${'Submit as spam'}     | ${true}                    | ${true}        | ${true}        | ${true}       | ${true}
@@ -147,6 +154,7 @@ describe('HeaderActions component', () => {
                 canUpdateIssue,
                 canCreateIssue,
                 isIssueAuthor,
+                issueType,
                 canReportSpam,
               },
             });
@@ -162,6 +170,7 @@ describe('HeaderActions component', () => {
         },
       );
     });
+  });
 
   describe('modal', () => {
     const blockedByIssues = [