1 files changed, 65 insertions, 6 deletions

diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index bc4284457f6..a27f86bd9c3 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/app/assets/javascripts/issues/show/index.js
@@ -1,9 +1,10 @@
 import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
 import errorTrackingStore from '~/error_tracking/store';
 import { apolloProvider } from '~/graphql_shared/issuable_client';
-import { TYPE_INCIDENT } from '~/issues/constants';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants';
+import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import { scrollToTargetOnResize } from '~/lib/utils/resize_observer';
 import IssueApp from './components/app.vue';
 import HeaderActions from './components/header_actions.vue';
@@ -29,9 +30,13 @@ export function initIncidentApp(issueData = {}, store) {
     return undefined;
   }
 
-  bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });
+  bootstrapApollo({ ...issueState, issueType: TYPE_INCIDENT });
 
   const {
+    authorId,
+    authorName,
+    authorUsername,
+    authorWebUrl,
     canCreateIncident,
     canUpdate,
     canUpdateTimelineEvent,
@@ -45,8 +50,8 @@ export function initIncidentApp(issueData = {}, store) {
     hasLinkedAlerts,
     slaFeatureAvailable,
     uploadMetricsFeatureAvailable,
-    state,
   } = issueData;
+  const headerActionsData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.headerActionsData));
 
   const fullPath = `${projectNamespace}/${projectPath}`;
   const router = createRouter(currentPath, currentTab);
@@ -70,6 +75,22 @@ export function initIncidentApp(issueData = {}, store) {
       slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
       uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable),
       contentEditorOnIssues: gon.features.contentEditorOnIssues,
+      // for HeaderActions component
+      canCreateIssue: parseBoolean(headerActionsData.canCreateIncident),
+      canDestroyIssue: parseBoolean(headerActionsData.canDestroyIssue),
+      canPromoteToEpic: parseBoolean(headerActionsData.canPromoteToEpic),
+      canReopenIssue: parseBoolean(headerActionsData.canReopenIssue),
+      canReportSpam: parseBoolean(headerActionsData.canReportSpam),
+      canUpdateIssue: parseBoolean(headerActionsData.canUpdateIssue),
+      isIssueAuthor: parseBoolean(headerActionsData.isIssueAuthor),
+      issuePath: headerActionsData.issuePath,
+      newIssuePath: headerActionsData.newIssuePath,
+      projectPath: headerActionsData.projectPath,
+      reportAbusePath: headerActionsData.reportAbusePath,
+      reportedUserId: headerActionsData.reportedUserId,
+      reportedFromUrl: headerActionsData.reportedFromUrl,
+      submitAsSpamPath: headerActionsData.submitAsSpamPath,
+      issuableEmailAddress: headerActionsData.issuableEmailAddress,
     },
     computed: {
       ...mapGetters(['getNoteableData']),
@@ -78,8 +99,15 @@ export function initIncidentApp(issueData = {}, store) {
       return createElement(IssueApp, {
         props: {
           ...issueData,
+          author: {
+            id: authorId,
+            name: authorName,
+            username: authorUsername,
+            webUrl: authorWebUrl,
+          },
           issueId: Number(issuableId),
-          issuableStatus: state,
+          issuableStatus: this.getNoteableData?.state,
+          issuableType: TYPE_INCIDENT,
           descriptionComponent: IncidentTabs,
           showTitleBorder: false,
           isConfidential: this.getNoteableData?.confidential,
@@ -97,12 +125,17 @@ export function initIssueApp(issueData, store) {
   }
 
   const { fullPath, registerPath, signInPath } = el.dataset;
+  const headerActionsData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.headerActionsData));
 
   scrollToTargetOnResize();
 
-  bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });
+  bootstrapApollo({ ...issueState, issueType: TYPE_ISSUE });
 
   const {
+    authorId,
+    authorName,
+    authorUsername,
+    authorWebUrl,
     canCreateIncident,
     hasIssueWeightsFeature,
     hasIterationsFeature,
@@ -121,6 +154,26 @@ export function initIssueApp(issueData, store) {
       signInPath,
       hasIssueWeightsFeature,
       hasIterationsFeature,
+      // for HeaderActions component
+      canCreateIssue: parseBoolean(headerActionsData.canCreateIssue),
+      canDestroyIssue: parseBoolean(headerActionsData.canDestroyIssue),
+      canPromoteToEpic: parseBoolean(headerActionsData.canPromoteToEpic),
+      canReopenIssue: parseBoolean(headerActionsData.canReopenIssue),
+      canReportSpam: parseBoolean(headerActionsData.canReportSpam),
+      canUpdateIssue: parseBoolean(headerActionsData.canUpdateIssue),
+      iid: headerActionsData.iid,
+      issuableId: headerActionsData.issuableId,
+      isIssueAuthor: parseBoolean(headerActionsData.isIssueAuthor),
+      issuePath: headerActionsData.issuePath,
+      issueType: headerActionsData.issueType,
+      newIssuePath: headerActionsData.newIssuePath,
+      projectPath: headerActionsData.projectPath,
+      projectId: headerActionsData.projectId,
+      reportAbusePath: headerActionsData.reportAbusePath,
+      reportedUserId: headerActionsData.reportedUserId,
+      reportedFromUrl: headerActionsData.reportedFromUrl,
+      submitAsSpamPath: headerActionsData.submitAsSpamPath,
+      issuableEmailAddress: headerActionsData.issuableEmailAddress,
     },
     computed: {
       ...mapGetters(['getNoteableData']),
@@ -129,6 +182,12 @@ export function initIssueApp(issueData, store) {
       return createElement(IssueApp, {
         props: {
           ...issueProps,
+          author: {
+            id: authorId,
+            name: authorName,
+            username: authorUsername,
+            webUrl: authorWebUrl,
+          },
           isConfidential: this.getNoteableData?.confidential,
           isLocked: this.getNoteableData?.discussion_locked,
           issuableStatus: this.getNoteableData?.state,