Refactor to use helper for header actions change

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

@@ -4,7 +4,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import { IssuableType } from '~/issuable_show/constants';
-import { IssuableStatus, IssueStateEvent, IncidentType } from '~/issue_show/constants';
+import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
@@ -38,9 +38,6 @@ export default {
     canCreateIssue: {
       default: false,
     },
-    canCreateIncident: {
-      default: false,
-    },
     canPromoteToEpic: {
       default: false,
     },
@@ -86,12 +83,6 @@ export default {
         ? sprintf(__('Reopen %{issueType}'), { issueType: this.issueType })
         : sprintf(__('Close %{issueType}'), { issueType: this.issueType });
     },
-    canCreateNewIssueType() {
-      if (this.issueType === IncidentType && !this.canCreateIncident) {
-        return false;
-      }
-      return this.canCreateIssue;
-    },
     qaSelector() {
       return this.isClosed ? 'reopen_issue_button' : 'close_issue_button';
     },
@@ -211,7 +202,7 @@ export default {
       >
         {{ buttonText }}
       </gl-dropdown-item>
-      <gl-dropdown-item v-if="canCreateNewIssueType" :href="newIssuePath">
+      <gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
         {{ newIssueTypeText }}
       </gl-dropdown-item>
       <gl-dropdown-item v-if="canPromoteToEpic" @click="promoteToEpic">
@@ -249,7 +240,7 @@ export default {
       no-caret
       right
     >
-      <gl-dropdown-item v-if="canCreateNewIssueType" :href="newIssuePath">
+      <gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
         {{ newIssueTypeText }}
       </gl-dropdown-item>
       <gl-dropdown-item

app/assets/javascripts/issue_show/incident.js

@@ -5,20 +5,25 @@ import incidentTabs from './components/incidents/incident_tabs.vue';
 import { issueState, IncidentType } from './constants';
 import apolloProvider from './graphql';
 import getIssueStateQuery from './queries/get_issue_state.query.graphql';
+import HeaderActions from './components/header_actions.vue';
 
-export default function initIssuableApp(issuableData = {}) {
+const bootstrapApollo = (state = {}) => {
+  return apolloProvider.clients.defaultClient.cache.writeQuery({
+    query: getIssueStateQuery,
+    data: {
+      issueState: state,
+    },
+  });
+};
+
+export function initIncidentApp(issuableData = {}) {
   const el = document.getElementById('js-issuable-app');
 
   if (!el) {
     return undefined;
   }
 
-  apolloProvider.clients.defaultClient.cache.writeQuery({
-    query: getIssueStateQuery,
-    data: {
-      issueState: { ...issueState, issueType: el.dataset.issueType },
-    },
-  });
+  bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });
 
   const {
     canCreateIncident,
@@ -60,3 +65,35 @@ export default function initIssuableApp(issuableData = {}) {
     },
   });
 }
+
+export function initIncidentHeaderActions(store) {
+  const el = document.querySelector('.js-issue-header-actions');
+
+  if (!el) {
+    return undefined;
+  }
+
+  bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });
+
+  return new Vue({
+    el,
+    apolloProvider,
+    store,
+    provide: {
+      canCreateIssue: parseBoolean(el.dataset.canCreateIncident),
+      canPromoteToEpic: parseBoolean(el.dataset.canPromoteToEpic),
+      canReopenIssue: parseBoolean(el.dataset.canReopenIssue),
+      canReportSpam: parseBoolean(el.dataset.canReportSpam),
+      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,
+      projectId: el.dataset.projectId,
+      reportAbusePath: el.dataset.reportAbusePath,
+      submitAsSpamPath: el.dataset.submitAsSpamPath,
+    },
+    render: (createElement) => createElement(HeaderActions),
+  });
+}

app/assets/javascripts/pages/projects/issues/show.js

@@ -3,7 +3,7 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import initIssuableSidebar from '~/init_issuable_sidebar';
 import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
-import initIncidentApp from '~/issue_show/incident';
+import { initIncidentApp, initIncidentHeaderActions } from '~/issue_show/incident';
 import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
 import { parseIssuableData } from '~/issue_show/utils/parse_data';
 import initNotesApp from '~/notes';
@@ -22,16 +22,18 @@ export default function initShowIssue() {
   switch (issueType) {
     case IssuableType.Incident:
       initIncidentApp(issuableData);
+      initIncidentHeaderActions(store);
       break;
     case IssuableType.Issue:
       initIssuableApp(issuableData, store);
+      initIssueHeaderActions(store);
       break;
     default:
+      initIssueHeaderActions(store);
       break;
   }
 
   initIssuableHeaderWarning(store);
-  initIssueHeaderActions(store);
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
 

app/helpers/issues_helper.rb

@@ -192,6 +192,7 @@ module IssuesHelper
 
     {
       can_create_issue: show_new_issue_link?(project).to_s,
+      can_create_incident: create_issue_type_allowed?(project, :incident).to_s,
       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,

spec/features/incidents/user_views_incident_spec.rb

@@ -22,12 +22,30 @@ RSpec.describe "User views incident" do
 
   it_behaves_like 'page meta description', ' Description header Lorem ipsum dolor sit amet'
 
-  it 'shows the merge request and incident actions', :js, :aggregate_failures do
-    click_button 'Incident actions'
+  describe 'user actions' do
+    it 'shows the merge request and incident actions', :js, :aggregate_failures do
+      click_button 'Incident actions'
 
-    expect(page).to have_link('New incident', href: new_project_issue_path(project, { issuable_template: 'incident', issue: { issue_type: 'incident', description: "Related to \##{incident.iid}.\n\n" } }))
-    expect(page).to have_button('Create merge request')
-    expect(page).to have_button('Close incident')
+      expect(page).to have_link('New incident', href: new_project_issue_path(project, { issuable_template: 'incident', issue: { issue_type: 'incident', description: "Related to \##{incident.iid}.\n\n" } }))
+      expect(page).to have_button('Create merge request')
+      expect(page).to have_button('Close incident')
+    end
+
+    context 'when user is a guest' do
+      before do
+        project.add_guest(user)
+
+        login_as(user)
+
+        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')
+      end
+    end
   end
 
   context 'when the project is archived' do