Add latest changes from gitlab-org/gitlab@master

2 files changed, 52 insertions, 126 deletions

diff --git a/app/assets/javascripts/issues/index.js b/app/assets/javascripts/issues/index.js
index 8552a5a93fc..3bd28c50800 100644
--- a/app/assets/javascripts/issues/index.js
+++ b/app/assets/javascripts/issues/index.js
@@ -4,20 +4,19 @@ import IssuableLabelSelector from '~/issuable/issuable_label_selector';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import { initIssuableSidebar } from '~/issuable';
-import { TYPE_INCIDENT } from '~/issues/constants';
 import Issue from '~/issues/issue';
 import { initTitleSuggestions, initTypePopover, initTypeSelect } from '~/issues/new';
 import { initRelatedMergeRequests } from '~/issues/related_merge_requests';
 import { initRelatedIssues } from '~/related_issues';
-import { initIncidentApp, initIssueApp, initSentryErrorStackTrace } from '~/issues/show';
-import { parseIssuableData } from '~/issues/show/utils/parse_data';
+import { initIssuableApp, initSentryErrorStackTrace } from '~/issues/show';
 import LabelsSelect from '~/labels/labels_select';
 import initNotesApp from '~/notes';
 import { store } from '~/notes/stores';
 import { mountMilestoneDropdown } from '~/sidebar/mount_sidebar';
+import initSidebarBundle from '~/sidebar/sidebar_bundle';
+import initWorkItemLinks from '~/work_items/components/work_item_links';
 import ZenMode from '~/zen_mode';
 import initAwardsApp from '~/emoji/awards_app';
-import initLinkedResources from '~/linked_resources';
 import FilteredSearchServiceDesk from './filtered_search_service_desk';
 
 export function initFilteredSearchServiceDesk() {
@@ -42,32 +41,20 @@ export function initForm() {
   mountMilestoneDropdown();
 }
 
-export function initShow({ notesParams } = {}) {
-  const el = document.getElementById('js-issuable-app');
-
-  if (!el) {
-    return;
-  }
-
-  const issuableData = parseIssuableData(el);
-
-  if (issuableData.issueType === TYPE_INCIDENT) {
-    initIncidentApp(issuableData, store);
-    initLinkedResources();
-    initRelatedIssues(TYPE_INCIDENT);
-  } else {
-    initIssueApp(issuableData, store);
-  }
-
+export function initShow() {
   new Issue(); // eslint-disable-line no-new
   new ShortcutsIssuable(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
+
+  initAwardsApp(document.getElementById('js-vue-awards-block'));
+  initIssuableApp(store);
   initIssuableSidebar();
-  initNotesApp(notesParams);
+  initNotesApp();
+  initRelatedIssues();
   initRelatedMergeRequests();
   initSentryErrorStackTrace();
-
-  initAwardsApp(document.getElementById('js-vue-awards-block'));
+  initSidebarBundle(store);
+  initWorkItemLinks();
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then((module) => module.default())
diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index f7fe8ccf0e9..b94f88f690e 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/app/assets/javascripts/issues/show/index.js
@@ -3,15 +3,18 @@ import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import errorTrackingStore from '~/error_tracking/store';
 import { apolloProvider } from '~/graphql_shared/issuable_client';
-import { TYPE_INCIDENT } from '~/issues/constants';
+import { TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants';
 import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import { scrollToTargetOnResize } from '~/lib/utils/resize_observer';
+import initLinkedResources from '~/linked_resources';
 import IssueApp from './components/app.vue';
+import DescriptionComponent from './components/description.vue';
 import IncidentTabs from './components/incidents/incident_tabs.vue';
 import SentryErrorStackTrace from './components/sentry_error_stack_trace.vue';
 import { issueState } from './constants';
 import getIssueStateQuery from './queries/get_issue_state.query.graphql';
 import createRouter from './components/incidents/router';
+import { parseIssuableData } from './utils/parse_data';
 
 const bootstrapApollo = (state = {}) => {
   return apolloProvider.clients.defaultClient.cache.writeQuery({
@@ -22,146 +25,79 @@ const bootstrapApollo = (state = {}) => {
   });
 };
 
-export function initIncidentApp(issueData = {}, store) {
+export function initIssuableApp(store) {
   const el = document.getElementById('js-issuable-app');
 
   if (!el) {
     return undefined;
   }
 
+  const issuableData = parseIssuableData(el);
+  const headerActionsData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.headerActionsData));
+
   const {
     authorId,
     authorName,
     authorUsername,
     authorWebUrl,
     canCreateIncident,
-    hasIterationsFeature,
-    canUpdate,
-    canUpdateTimelineEvent,
+    fullPath,
     iid,
     issuableId,
     issueType,
-    fullPath,
+    hasIterationsFeature,
+    // for issue
+    registerPath,
+    signInPath,
+    // for incident
+    canUpdate,
+    canUpdateTimelineEvent,
     currentPath,
     currentTab,
-    projectId,
     hasLinkedAlerts,
+    projectId,
     slaFeatureAvailable,
     uploadMetricsFeatureAvailable,
-  } = issueData;
+  } = issuableData;
 
-  const headerActionsData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.headerActionsData));
+  const issueProvideData = { registerPath, signInPath };
+  const incidentProvideData = {
+    canUpdate,
+    canUpdateTimelineEvent,
+    hasLinkedAlerts: parseBoolean(hasLinkedAlerts),
+    projectId,
+    slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
+    uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable),
+  };
 
   bootstrapApollo({ ...issueState, issueType });
 
-  const router = createRouter(currentPath, currentTab);
-
-  return new Vue({
-    el,
-    name: 'DescriptionRoot',
-    apolloProvider,
-    store,
-    router,
-    provide: {
-      issueType,
-      canCreateIncident,
-      canUpdateTimelineEvent,
-      canUpdate,
-      fullPath,
-      iid,
-      issuableId,
-      projectId,
-      hasIterationsFeature,
-      hasLinkedAlerts: parseBoolean(hasLinkedAlerts),
-      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']),
-    },
-    render(createElement) {
-      return createElement(IssueApp, {
-        props: {
-          ...issueData,
-          author: {
-            id: authorId,
-            name: authorName,
-            username: authorUsername,
-            webUrl: authorWebUrl,
-          },
-          issueId: Number(issuableId),
-          issuableStatus: this.getNoteableData?.state,
-          issuableType: TYPE_INCIDENT,
-          descriptionComponent: IncidentTabs,
-          showTitleBorder: false,
-          isConfidential: this.getNoteableData?.confidential,
-        },
-      });
-    },
-  });
-}
-
-export function initIssueApp(issueData, store) {
-  const el = document.getElementById('js-issuable-app');
+  scrollToTargetOnResize();
 
-  if (!el) {
-    return undefined;
+  if (issueType === TYPE_INCIDENT) {
+    initLinkedResources();
   }
 
-  const {
-    authorId,
-    authorName,
-    authorUsername,
-    authorWebUrl,
-    canCreateIncident,
-    hasIterationsFeature,
-    iid,
-    issuableId,
-    issueType,
-    fullPath,
-    registerPath,
-    signInPath,
-  } = issueData;
-
-  const headerActionsData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.headerActionsData));
-
-  bootstrapApollo({ ...issueState, issueType });
-
-  scrollToTargetOnResize();
-
   return new Vue({
     el,
     name: 'DescriptionRoot',
     apolloProvider,
     store,
+    router: issueType === TYPE_INCIDENT ? createRouter(currentPath, currentTab) : undefined,
     provide: {
       canCreateIncident,
       fullPath,
       iid,
       issuableId,
       issueType,
-      registerPath,
-      signInPath,
       hasIterationsFeature,
+      ...(issueType === TYPE_ISSUE && issueProvideData),
+      ...(issueType === TYPE_INCIDENT && incidentProvideData),
       // for HeaderActions component
-      canCreateIssue: parseBoolean(headerActionsData.canCreateIssue),
+      canCreateIssue:
+        issueType === TYPE_INCIDENT
+          ? parseBoolean(headerActionsData.canCreateIncident)
+          : parseBoolean(headerActionsData.canCreateIssue),
       canDestroyIssue: parseBoolean(headerActionsData.canDestroyIssue),
       canPromoteToEpic: parseBoolean(headerActionsData.canPromoteToEpic),
       canReopenIssue: parseBoolean(headerActionsData.canReopenIssue),
@@ -183,18 +119,21 @@ export function initIssueApp(issueData, store) {
     render(createElement) {
       return createElement(IssueApp, {
         props: {
-          ...issueData,
+          ...issuableData,
           author: {
             id: authorId,
             name: authorName,
             username: authorUsername,
             webUrl: authorWebUrl,
           },
+          descriptionComponent: issueType === TYPE_INCIDENT ? IncidentTabs : DescriptionComponent,
           isConfidential: this.getNoteableData?.confidential,
           isLocked: this.getNoteableData?.discussion_locked,
           issuableStatus: this.getNoteableData?.state,
+          issuableType: issueType,
           issueId: this.getNoteableData?.id,
           issueIid: this.getNoteableData?.iid,
+          showTitleBorder: issueType !== TYPE_INCIDENT,
         },
       });
     },