Add latest changes from gitlab-org/gitlab@16-2-stable-eev16.2.0-rc42

5 files changed, 64 insertions, 84 deletions

diff --git a/app/assets/javascripts/issues/show/components/fields/description.vue b/app/assets/javascripts/issues/show/components/fields/description.vue
index c8ea8fb7ab2..a1463d0e911 100644
--- a/app/assets/javascripts/issues/show/components/fields/description.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description.vue
@@ -1,14 +1,13 @@
 <script>
 import { __ } from '~/locale';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import glFeaturesFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { trackSavedUsingEditor } from '~/vue_shared/components/markdown/tracking';
+import { ISSUE_NOTEABLE_TYPE } from '~/notes/constants';
 import updateMixin from '../../mixins/update';
 
 export default {
   components: {
-    MarkdownField,
     MarkdownEditor,
   },
   mixins: [updateMixin, glFeaturesFlagMixin()],
@@ -47,8 +46,8 @@ export default {
     };
   },
   computed: {
-    quickActionsDocsPath() {
-      return helpPagePath('user/project/quick_actions');
+    autocompleteDataSources() {
+      return gl.GfmAutoComplete?.dataSources;
     },
   },
   mounted() {
@@ -58,6 +57,10 @@ export default {
     focus() {
       this.$refs.textarea?.focus();
     },
+    saveIssuable() {
+      trackSavedUsingEditor(this.$refs.markdownEditor.isContentEditorActive, ISSUE_NOTEABLE_TYPE);
+      this.updateIssuable();
+    },
   },
 };
 </script>
@@ -66,45 +69,21 @@ export default {
   <div class="common-note-form">
     <label class="sr-only" for="issue-description">{{ __('Description') }}</label>
     <markdown-editor
-      v-if="glFeatures.contentEditorOnIssues"
+      ref="markdownEditor"
+      :enable-content-editor="Boolean(glFeatures.contentEditorOnIssues)"
       class="gl-mt-3"
       :value="value"
       :render-markdown-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
       :form-field-props="formFieldProps"
-      :quick-actions-docs-path="quickActionsDocsPath"
       :enable-autocomplete="enableAutocomplete"
+      :autocomplete-data-sources="autocompleteDataSources"
       supports-quick-actions
       autofocus
+      data-qa-selector="description_field"
       @input="$emit('input', $event)"
-      @keydown.meta.enter="updateIssuable"
-      @keydown.ctrl.enter="updateIssuable"
+      @keydown.meta.enter="saveIssuable"
+      @keydown.ctrl.enter="saveIssuable"
     />
-    <markdown-field
-      v-else
-      class="gl-mt-3"
-      :markdown-preview-path="markdownPreviewPath"
-      :markdown-docs-path="markdownDocsPath"
-      :quick-actions-docs-path="quickActionsDocsPath"
-      :can-attach-file="canAttachFile"
-      :enable-autocomplete="enableAutocomplete"
-      :textarea-value="value"
-    >
-      <template #textarea>
-        <textarea
-          v-bind="formFieldProps"
-          ref="textarea"
-          :value="value"
-          class="note-textarea js-gfm-input js-autosize markdown-area"
-          data-qa-selector="description_field"
-          dir="auto"
-          data-supports-quick-actions="true"
-          @input="$emit('input', $event.target.value)"
-          @keydown.meta.enter="updateIssuable"
-          @keydown.ctrl.enter="updateIssuable"
-        >
-        </textarea>
-      </template>
-    </markdown-field>
   </div>
 </template>
diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index c9e21b296e4..831248d9603 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/app/assets/javascripts/issues/show/components/form.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import ConvertDescriptionModal from 'ee_component/issues/show/components/convert_description_modal.vue';
 import { getDraft, updateDraft, getLockVersion, clearDraft } from '~/lib/utils/autosave';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_ISSUE, TYPENAME_USER } from '~/graphql_shared/constants';
@@ -16,7 +15,6 @@ import LockedWarning from './locked_warning.vue';
 
 export default {
   components: {
-    ConvertDescriptionModal,
     DescriptionField,
     DescriptionTemplateField,
     EditActions,
@@ -175,9 +173,6 @@ export default {
         updateDraft(this.descriptionAutosaveKey, description, this.formState.lock_version);
       }
     },
-    setDescription(desc) {
-      this.formData.description = desc;
-    },
   },
 };
 </script>
@@ -219,14 +214,6 @@ export default {
           :project-namespace="projectNamespace"
         />
       </div>
-
-      <convert-description-modal
-        v-if="issueId && glFeatures.generateDescriptionAi"
-        class="gl-pl-5 gl-md-pl-0"
-        :resource-id="resourceId"
-        :user-id="userId"
-        @contentGenerated="setDescription"
-      />
     </div>
 
     <description-field
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
index a36b0c46927..719f252781d 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -13,7 +13,7 @@ import * as Sentry from '@sentry/browser';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
-import { STATUS_CLOSED, TYPE_INCIDENT, TYPE_ISSUE, IssuableTypeText } from '~/issues/constants';
+import { STATUS_CLOSED, TYPE_ISSUE, IssuableTypeText } from '~/issues/constants';
 import {
   ISSUE_STATE_EVENT_CLOSE,
   ISSUE_STATE_EVENT_REOPEN,
@@ -22,7 +22,7 @@ import {
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { getCookie, parseBoolean, setCookie, isLoggedIn } from '~/lib/utils/common_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { s__, __, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import eventHub from '~/notes/event_hub';
 import Tracking from '~/tracking';
 import toast from '~/vue_shared/plugins/global_toast';
@@ -172,12 +172,9 @@ export default {
       return this.openState === STATUS_CLOSED;
     },
     issueTypeText() {
-      const issueTypeTexts = {
-        [TYPE_ISSUE]: s__('HeaderAction|issue'),
-        [TYPE_INCIDENT]: s__('HeaderAction|incident'),
-      };
+      const { issueType } = this;
 
-      return issueTypeTexts[this.issueType] ?? this.issueType;
+      return IssuableTypeText[issueType] ?? issueType;
     },
     buttonText() {
       return this.isClosed
@@ -192,11 +189,11 @@ export default {
     },
     dropdownText() {
       return sprintf(__('%{issueType} actions'), {
-        issueType: capitalizeFirstCharacter(this.issueType),
+        issueType: capitalizeFirstCharacter(this.issueTypeText),
       });
     },
     newIssueTypeText() {
-      return sprintf(__('New related %{issueType}'), { issueType: this.issueType });
+      return sprintf(__('New related %{issueType}'), { issueType: this.issueTypeText });
     },
     showToggleIssueStateButton() {
       const canClose = !this.isClosed && this.canUpdateIssue;
@@ -217,7 +214,7 @@ export default {
     },
     copyMailAddressText() {
       return sprintf(__('Copy %{issueType} email address'), {
-        issueType: IssuableTypeText[this.issueType],
+        issueType: this.issueTypeText,
       });
     },
     isMrSidebarMoved() {
@@ -429,7 +426,7 @@ export default {
     </gl-button>
 
     <gl-button
-      v-if="showToggleIssueStateButton"
+      v-if="showToggleIssueStateButton && !glFeatures.moveCloseIntoDropdown"
       class="gl-display-none gl-sm-display-inline-flex!"
       :data-qa-selector="qaSelector"
       :loading="isToggleStateButtonLoading"
@@ -465,7 +462,12 @@ export default {
 
         <gl-dropdown-divider />
       </template>
-
+      <gl-dropdown-item
+        v-if="showToggleIssueStateButton && glFeatures.moveCloseIntoDropdown"
+        @click="toggleIssueState"
+      >
+        {{ buttonText }}
+      </gl-dropdown-item>
       <gl-dropdown-item v-if="canCreateIssue && isUserSignedIn" :href="newIssuePath">
         {{ newIssueTypeText }}
       </gl-dropdown-item>
@@ -495,6 +497,7 @@ export default {
           >{{ copyMailAddressText }}</gl-dropdown-item
         >
       </template>
+      <gl-dropdown-divider v-if="showToggleIssueStateButton || canDestroyIssue || canReportSpam" />
       <gl-dropdown-item
         v-if="canReportSpam"
         :href="submitAsSpamPath"
@@ -503,8 +506,14 @@ export default {
       >
         {{ __('Submit as spam') }}
       </gl-dropdown-item>
+      <gl-dropdown-item
+        v-if="!isIssueAuthor && isUserSignedIn"
+        data-testid="report-abuse-item"
+        @click="toggleReportAbuseDrawer(true)"
+      >
+        {{ $options.i18n.reportAbuse }}
+      </gl-dropdown-item>
       <template v-if="canDestroyIssue">
-        <gl-dropdown-divider />
         <gl-dropdown-item
           v-gl-modal="$options.deleteModalId"
           variant="danger"
@@ -514,13 +523,6 @@ export default {
           {{ deleteButtonText }}
         </gl-dropdown-item>
       </template>
-      <gl-dropdown-item
-        v-if="!isIssueAuthor && isUserSignedIn"
-        data-testid="report-abuse-item"
-        @click="toggleReportAbuseDrawer(true)"
-      >
-        {{ $options.i18n.reportAbuse }}
-      </gl-dropdown-item>
     </gl-dropdown>
 
     <new-header-actions-popover v-if="isMrSidebarMoved" :issue-type="issueType" />
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 8267c0130a3..2a59b7a2042 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -229,7 +229,7 @@ export default {
           <template #textarea>
             <textarea
               v-model="timelineText"
-              class="note-textarea js-gfm-input js-autosize markdown-area"
+              class="note-textarea note-textarea-rounded-bottom js-gfm-input js-autosize markdown-area gl-bordered"
               data-testid="input-note"
               dir="auto"
               data-supports-quick-actions="false"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
index d33f3146d64..b776822bd9a 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { timelineItemI18n } from './constants';
@@ -9,8 +9,7 @@ export default {
   name: 'IncidentTimelineEventListItem',
   i18n: timelineItemI18n,
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
     GlIcon,
     GlSprintf,
     GlBadge,
@@ -45,6 +44,25 @@ export default {
     canEditEvent() {
       return this.action === 'comment';
     },
+    items() {
+      const items = [];
+
+      if (this.canEditEvent) {
+        items.push({
+          text: this.$options.i18n.edit,
+          action: () => {
+            this.$emit('edit');
+          },
+        });
+      }
+      items.push({
+        text: this.$options.i18n.delete,
+        action: () => {
+          this.$emit('delete');
+        },
+      });
+      return items;
+    },
   },
   methods: {
     getEventIcon,
@@ -76,22 +94,16 @@ export default {
       </div>
       <div v-safe-html="noteHtml" class="md"></div>
     </div>
-    <gl-dropdown
+    <gl-disclosure-dropdown
       v-if="canUpdateTimelineEvent"
-      right
-      class="event-note-actions gl-ml-auto gl-align-self-start"
+      placement="right"
+      class="event-note-actions gl-align-self-start"
       icon="ellipsis_v"
       text-sr-only
-      :text="$options.i18n.moreActions"
+      :toggle-text="$options.i18n.moreActions"
       category="tertiary"
       no-caret
-    >
-      <gl-dropdown-item v-if="canEditEvent" @click="$emit('edit')">
-        {{ $options.i18n.edit }}
-      </gl-dropdown-item>
-      <gl-dropdown-item @click="$emit('delete')">
-        {{ $options.i18n.delete }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      :items="items"
+    />
   </div>
 </template>