Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

7 files changed, 72 insertions, 11 deletions

diff --git a/app/assets/javascripts/issues/show/components/delete_issue_modal.vue b/app/assets/javascripts/issues/show/components/delete_issue_modal.vue
index 26862346b86..47b09bd6aa0 100644
--- a/app/assets/javascripts/issues/show/components/delete_issue_modal.vue
+++ b/app/assets/javascripts/issues/show/components/delete_issue_modal.vue
@@ -31,7 +31,10 @@ export default {
   computed: {
     actionPrimary() {
       return {
-        attributes: { variant: 'danger' },
+        attributes: {
+          variant: 'danger',
+          'data-qa-selector': 'confirm_delete_issue_button',
+        },
         text: this.title,
       };
     },
diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index eeccf886b65..68ed7bb4062 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -10,7 +10,9 @@ import $ from 'jquery';
 import createFlash from '~/flash';
 import { __, sprintf } from '~/locale';
 import TaskList from '~/task_list';
+import Tracking from '~/tracking';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
 import animateMixin from '../mixins/animate';
 
@@ -24,8 +26,9 @@ export default {
     GlPopover,
     CreateWorkItem,
     GlButton,
+    WorkItemDetailModal,
   },
-  mixins: [animateMixin, glFeatureFlagMixin()],
+  mixins: [animateMixin, glFeatureFlagMixin(), Tracking.mixin()],
   props: {
     canUpdate: {
       type: Boolean,
@@ -68,9 +71,13 @@ export default {
       initialUpdate: true,
       taskButtons: [],
       activeTask: {},
+      workItemId: null,
     };
   },
   computed: {
+    showWorkItemDetailModal() {
+      return Boolean(this.workItemId);
+    },
     workItemsEnabled() {
       return this.glFeatures.workItems;
     },
@@ -194,7 +201,13 @@ export default {
     closeCreateTaskModal() {
       this.$refs.modal.hide();
     },
-    handleCreateTask(title) {
+    closeWorkItemDetailModal() {
+      this.workItemId = null;
+    },
+    handleWorkItemDetailModalError(message) {
+      createFlash({ message });
+    },
+    handleCreateTask({ id, title, type }) {
       const listItem = this.$el.querySelector(`#${this.activeTask.id}`).parentElement;
       const taskBadge = document.createElement('span');
       taskBadge.innerHTML = `
@@ -204,12 +217,28 @@ export default {
         <span class="badge badge-info badge-pill gl-badge sm gl-mr-1">
           ${__('Task')}
         </span>
-        <a href="#">${title}</a>
       `;
+      const button = this.createWorkItemDetailButton(id, title, type);
+      taskBadge.append(button);
+
       listItem.insertBefore(taskBadge, listItem.lastChild);
       listItem.removeChild(listItem.lastChild);
       this.closeCreateTaskModal();
     },
+    createWorkItemDetailButton(id, title, type) {
+      const button = document.createElement('button');
+      button.addEventListener('click', () => {
+        this.workItemId = id;
+        this.track('viewed_work_item_from_modal', {
+          category: 'workItems:show',
+          label: 'work_item_view',
+          property: `type_${type}`,
+        });
+      });
+      button.classList.add('btn-link');
+      button.innerText = title;
+      return button;
+    },
     focusButton() {
       this.$refs.convertButton[0].$el.focus();
     },
@@ -262,6 +291,12 @@ export default {
         @onCreate="handleCreateTask"
       />
     </gl-modal>
+    <work-item-detail-modal
+      :visible="showWorkItemDetailModal"
+      :work-item-id="workItemId"
+      @close="closeWorkItemDetailModal"
+      @error="handleWorkItemDetailModalError"
+    />
     <template v-if="workItemsEnabled">
       <gl-popover
         v-for="item in taskButtons"
diff --git a/app/assets/javascripts/issues/show/components/fields/description_template.vue b/app/assets/javascripts/issues/show/components/fields/description_template.vue
index 9ce49b65a1a..d528641dcb6 100644
--- a/app/assets/javascripts/issues/show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description_template.vue
@@ -68,7 +68,10 @@ export default {
       data-toggle="dropdown"
     >
       <span class="dropdown-toggle-text">{{ __('Choose a template') }}</span>
-      <gl-icon name="chevron-down" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" />
+      <gl-icon
+        name="chevron-down"
+        class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500 dropdown-menu-toggle-icon"
+      />
     </button>
     <div class="dropdown-menu dropdown-select">
       <div class="dropdown-title gl-display-flex gl-justify-content-center">
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
index 8ba08472ea0..adf449aca7b 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -128,13 +128,21 @@ export default {
       });
     },
     newIssueTypeText() {
-      return sprintf(__('New %{issueType}'), { issueType: this.issueType });
+      return sprintf(__('New related %{issueType}'), { issueType: this.issueType });
     },
     showToggleIssueStateButton() {
       const canClose = !this.isClosed && this.canUpdateIssue;
       const canReopen = this.isClosed && this.canReopenIssue;
       return canClose || canReopen;
     },
+    hasDesktopDropdown() {
+      return (
+        this.canCreateIssue || this.canPromoteToEpic || !this.isIssueAuthor || this.canReportSpam
+      );
+    },
+    hasMobileDropdown() {
+      return this.hasDesktopDropdown || this.showToggleIssueStateButton;
+    },
   },
   created() {
     eventHub.$on('toggle.issuable.state', this.toggleIssueState);
@@ -223,10 +231,12 @@ export default {
 <template>
   <div class="detail-page-header-actions gl-display-flex">
     <gl-dropdown
+      v-if="hasMobileDropdown"
       class="gl-sm-display-none! w-100"
       block
       :text="dropdownText"
       data-qa-selector="issue_actions_dropdown"
+      data-testid="mobile-dropdown"
       :loading="isToggleStateButtonLoading"
     >
       <gl-dropdown-item
@@ -276,11 +286,14 @@ export default {
     </gl-button>
 
     <gl-dropdown
+      v-if="hasDesktopDropdown"
       class="gl-display-none gl-sm-display-inline-flex! gl-ml-3"
       icon="ellipsis_v"
       category="tertiary"
+      data-qa-selector="issue_actions_ellipsis_dropdown"
       :text="dropdownText"
       :text-sr-only="true"
+      data-testid="desktop-dropdown"
       no-caret
       right
     >
@@ -311,6 +324,7 @@ export default {
         <gl-dropdown-item
           v-gl-modal="$options.deleteModalId"
           variant="danger"
+          data-qa-selector="delete_issue_button"
           @click="track('click_dropdown')"
         >
           {{ deleteButtonText }}
diff --git a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
index 4790062ab7d..04ddc7f3501 100644
--- a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
@@ -5,6 +5,7 @@ import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DescriptionComponent from '../description.vue';
 import getAlert from './graphql/queries/get_alert.graphql';
 import HighlightBar from './highlight_bar.vue';
@@ -17,7 +18,10 @@ export default {
     GlTabs,
     HighlightBar,
     MetricsTab: () => import('ee_component/issues/show/components/incidents/metrics_tab.vue'),
+    TimelineTab: () =>
+      import('ee_component/issues/show/components/incidents/timeline_events_tab.vue'),
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['fullPath', 'iid', 'uploadMetricsFeatureAvailable'],
   apollo: {
     alert: {
@@ -47,6 +51,9 @@ export default {
     loading() {
       return this.$apollo.queries.alert.loading;
     },
+    incidentTabEnabled() {
+      return this.glFeatures.incidentTimelineEvents && this.glFeatures.incidentTimelineEventTab;
+    },
   },
   mounted() {
     this.trackPageViews();
@@ -76,6 +83,7 @@ export default {
       >
         <alert-details-table :alert="alert" :loading="loading" />
       </gl-tab>
+      <timeline-tab v-if="incidentTabEnabled" data-testid="timeline-events-tab" />
     </gl-tabs>
   </div>
 </template>
diff --git a/app/assets/javascripts/issues/show/components/title.vue b/app/assets/javascripts/issues/show/components/title.vue
index 5e92211685a..1982147e454 100644
--- a/app/assets/javascripts/issues/show/components/title.vue
+++ b/app/assets/javascripts/issues/show/components/title.vue
@@ -68,7 +68,7 @@ export default {
 
 <template>
   <div class="title-container">
-    <h2
+    <h1
       v-safe-html="titleHtml"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
@@ -76,7 +76,7 @@ export default {
       }"
       class="title qa-title"
       dir="auto"
-    ></h2>
+    ></h1>
     <gl-button
       v-if="showInlineEditButton && canUpdate"
       v-gl-tooltip.bottom
diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index f5c71f9691f..c9af5d9b4a7 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/app/assets/javascripts/issues/show/index.js
@@ -77,9 +77,7 @@ export function initIssueApp(issueData, store) {
 
   const { fullPath } = el.dataset;
 
-  if (gon?.features?.fixCommentScroll) {
-    scrollToTargetOnResize();
-  }
+  scrollToTargetOnResize();
 
   bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });