Add latest changes from gitlab-org/gitlab@master

8 files changed, 77 insertions, 51 deletions

diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue
index 633f336b0c0..26c3db647a3 100644
--- a/app/assets/javascripts/issues/show/components/app.vue
+++ b/app/assets/javascripts/issues/show/components/app.vue
@@ -15,7 +15,6 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
 import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 import { containsSensitiveToken, confirmSensitiveAction, i18n } from '~/lib/utils/secret_detection';
-import { WORK_ITEM_TYPE_VALUE_ISSUE } from '~/work_items/constants';
 import { ISSUE_TYPE_PATH, INCIDENT_TYPE_PATH, POLLING_DELAY } from '../constants';
 import eventHub from '../event_hub';
 import getIssueStateQuery from '../queries/get_issue_state.query.graphql';
@@ -233,11 +232,6 @@ export default {
       required: false,
       default: '',
     },
-    workItemType: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   data() {
     const store = new Store({
@@ -267,8 +261,8 @@ export default {
     },
   },
   computed: {
-    isIssue() {
-      return this.workItemType === WORK_ITEM_TYPE_VALUE_ISSUE;
+    headerClasses() {
+      return this.issuableType === TYPE_INCIDENT ? 'gl-mb-3' : 'gl-mb-6';
     },
     issuableTemplates() {
       return this.store.formState.issuableTemplates;
@@ -307,10 +301,10 @@ export default {
         : '';
     },
     statusIcon() {
-      if (this.issuableType === TYPE_ISSUE) {
-        return this.isClosed ? 'issue-closed' : 'issues';
+      if (this.issuableType === TYPE_EPIC) {
+        return this.isClosed ? 'epic-closed' : 'epic';
       }
-      return this.isClosed ? 'epic-closed' : 'epic';
+      return this.isClosed ? 'issue-closed' : 'issues';
     },
     statusVariant() {
       return this.isClosed ? 'info' : 'success';
@@ -319,7 +313,7 @@ export default {
       return issuableStatusText[this.issuableStatus];
     },
     shouldShowStickyHeader() {
-      return [TYPE_ISSUE, TYPE_EPIC].includes(this.issuableType);
+      return [TYPE_INCIDENT, TYPE_ISSUE, TYPE_EPIC].includes(this.issuableType);
     },
   },
   created() {
@@ -560,7 +554,7 @@ export default {
       >
         <template #actions>
           <slot name="actions">
-            <header-actions v-if="isIssue" />
+            <header-actions />
           </slot>
         </template>
       </title-component>
@@ -623,7 +617,8 @@ export default {
 
       <slot name="header">
         <issue-header
-          v-if="isIssue"
+          class="gl-p-0 gl-mt-2 gl-sm-mt-0"
+          :class="headerClasses"
           :author="author"
           :confidential="isConfidential"
           :created-at="createdAt"
@@ -632,6 +627,7 @@ export default {
           :is-hidden="isHidden"
           :is-locked="isLocked"
           :issuable-state="issuableStatus"
+          :issuable-type="issuableType"
           :moved-to-issue-url="movedToIssueUrl"
           :promoted-to-epic-url="promotedToEpicUrl"
           :service-desk-reply-to="serviceDeskReplyTo"
diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index 5d601009a17..047bdcdcefc 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/app/assets/javascripts/issues/show/components/form.vue
@@ -4,7 +4,7 @@ import { GlAlert } from '@gitlab/ui';
 import { getDraft, updateDraft, getLockVersion, clearDraft } from '~/lib/utils/autosave';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_ISSUE, TYPENAME_USER } from '~/graphql_shared/constants';
-import { TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
 import EditActions from './edit_actions.vue';
@@ -107,8 +107,8 @@ export default {
     showLockedWarning() {
       return this.formState.lockedWarningVisible && !this.formState.updateLoading;
     },
-    isIssueType() {
-      return this.issuableType === TYPE_ISSUE;
+    showTypeField() {
+      return [TYPE_INCIDENT, TYPE_ISSUE].includes(this.issuableType);
     },
     resourceId() {
       return this.issueId && convertToGraphQLId(TYPENAME_ISSUE, this.issueId);
@@ -202,7 +202,7 @@ export default {
       </div>
     </div>
     <div class="row gl-gap-3">
-      <div v-if="isIssueType" class="col-12 col-md-4 pr-md-0">
+      <div v-if="showTypeField" class="col-12 col-md-4 pr-md-0">
         <issuable-type-field ref="issue-type" />
       </div>
 
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
index 8177720b172..1ade5e654e9 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -10,6 +10,7 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
@@ -419,7 +420,7 @@ export default {
       v-gl-tooltip.bottom
       :title="$options.i18n.editTitleAndDescription"
       :aria-label="$options.i18n.editTitleAndDescription"
-      class="js-issuable-edit gl-display-none gl-sm-display-block"
+      class="js-issuable-edit gl-display-none! gl-sm-display-block!"
       data-testid="edit-button"
       @click="edit"
     >
diff --git a/app/assets/javascripts/issues/show/components/issue_header.vue b/app/assets/javascripts/issues/show/components/issue_header.vue
index 771b438f0da..211f3217ddc 100644
--- a/app/assets/javascripts/issues/show/components/issue_header.vue
+++ b/app/assets/javascripts/issues/show/components/issue_header.vue
@@ -1,11 +1,10 @@
 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { STATUS_OPEN, STATUS_REOPENED, TYPE_ISSUE, WORKSPACE_PROJECT } from '~/issues/constants';
+import { STATUS_OPEN, STATUS_REOPENED, WORKSPACE_PROJECT } from '~/issues/constants';
 import { __, s__ } from '~/locale';
 import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue';
 
 export default {
-  TYPE_ISSUE,
   WORKSPACE_PROJECT,
   components: {
     GlLink,
@@ -45,6 +44,10 @@ export default {
       type: String,
       required: true,
     },
+    issuableType: {
+      type: String,
+      required: true,
+    },
     movedToIssueUrl: {
       type: String,
       required: true,
@@ -96,7 +99,6 @@ export default {
 
 <template>
   <issuable-header
-    class="gl-p-0 gl-mb-6 gl-mt-2 gl-sm-mt-0"
     :author="author"
     :blocked="isLocked"
     :confidential="confidential"
@@ -104,7 +106,7 @@ export default {
     :is-first-contribution="isFirstContribution"
     :is-hidden="isHidden"
     :issuable-state="issuableState"
-    :issuable-type="$options.TYPE_ISSUE"
+    :issuable-type="issuableType"
     :service-desk-reply-to="serviceDeskReplyTo"
     show-work-item-type-icon
     :status-icon="statusIcon"
diff --git a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue
index 8262b3ac0ff..f7a324d9f3f 100644
--- a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue
+++ b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue
@@ -54,29 +54,27 @@ export default {
 </script>
 
 <template>
-  <div>
-    <gl-popover
-      v-if="showPopover"
-      target="new-actions-header-dropdown"
-      container="viewport"
-      placement="left"
-      :show="showPopover"
-      triggers="manual"
-      content="text"
-      :css-classes="['gl-p-2 new-header-popover']"
+  <gl-popover
+    v-if="showPopover"
+    target="new-actions-header-dropdown"
+    container="viewport"
+    placement="left"
+    :show="showPopover"
+    triggers="manual"
+    content="text"
+    :css-classes="['gl-p-2 new-header-popover']"
+  >
+    <template #title>
+      <div class="gl-font-base gl-font-weight-normal">
+        {{ popoverText }}
+      </div>
+    </template>
+    <gl-button
+      data-testid="confirm-button"
+      variant="confirm"
+      type="submit"
+      @click="dismissPopover"
+      >{{ $options.i18n.confirmButtonText }}</gl-button
     >
-      <template #title>
-        <div class="gl-font-base gl-font-weight-normal">
-          {{ popoverText }}
-        </div>
-      </template>
-      <gl-button
-        data-testid="confirm-button"
-        variant="confirm"
-        type="submit"
-        @click="dismissPopover"
-        >{{ $options.i18n.confirmButtonText }}</gl-button
-      >
-    </gl-popover>
-  </div>
+  </gl-popover>
 </template>
diff --git a/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue b/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue
index 1530e9a15b5..08cda8c3cdc 100644
--- a/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue
+++ b/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState, mapGetters } from 'vuex';
 import Stacktrace from '~/error_tracking/components/stacktrace.vue';
 
diff --git a/app/assets/javascripts/issues/show/components/title.vue b/app/assets/javascripts/issues/show/components/title.vue
index 8c9e43b729b..375180446d9 100644
--- a/app/assets/javascripts/issues/show/components/title.vue
+++ b/app/assets/javascripts/issues/show/components/title.vue
@@ -54,7 +54,7 @@ export default {
 
 <template>
   <div
-    class="gl-display-flex gl-align-items-flex-start gl-flex-direction-column gl-sm-flex-direction-row gl-pt-3"
+    class="gl-display-flex gl-align-items-flex-start gl-flex-direction-column gl-sm-flex-direction-row gl-gap-3 gl-pt-3"
   >
     <h1
       v-safe-html="titleHtml"
diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index 41e6daea4c1..a27f86bd9c3 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/app/assets/javascripts/issues/show/index.js
@@ -1,4 +1,5 @@
 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';
@@ -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,