Add latest changes from gitlab-org/gitlab@master

5 files changed, 39 insertions, 6 deletions

diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue
index 9421ae1d9da..86311b99f7c 100644
--- a/app/assets/javascripts/issues/show/components/app.vue
+++ b/app/assets/javascripts/issues/show/components/app.vue
@@ -489,6 +489,7 @@ export default {
         :project-namespace="projectNamespace"
         :can-attach-file="canAttachFile"
         :enable-autocomplete="enableAutocomplete"
+        :issue-id="issueId"
         :issuable-type="issuableType"
         @updateForm="setFormState"
       />
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 98f92c97f77..380b676cbbb 100644
--- a/app/assets/javascripts/issues/show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description_template.vue
@@ -60,7 +60,7 @@ export default {
       :data-project-path="projectPath"
       :data-project-id="projectId"
       :data-data="issuableTemplatesJson"
-      class="dropdown-menu-toggle js-issuable-selector gl-button"
+      class="dropdown-menu-toggle js-issuable-selector gl-button gl-py-3!"
       type="button"
       data-field-name="issuable_template"
       data-selected="null"
diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index bcea9cf57a7..2e99c03d250 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/app/assets/javascripts/issues/show/components/form.vue
@@ -1,7 +1,11 @@
 <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';
 import { 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';
 import DescriptionField from './fields/description.vue';
@@ -12,6 +16,7 @@ import LockedWarning from './locked_warning.vue';
 
 export default {
   components: {
+    ConvertDescriptionModal,
     DescriptionField,
     DescriptionTemplateField,
     EditActions,
@@ -20,6 +25,7 @@ export default {
     IssuableTypeField,
     LockedWarning,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     endpoint: {
       type: String,
@@ -73,6 +79,11 @@ export default {
       required: false,
       default: '',
     },
+    issueId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
   },
   data() {
     const autosaveKey = [document.location.pathname, document.location.search];
@@ -100,6 +111,12 @@ export default {
     isIssueType() {
       return this.issuableType === TYPE_ISSUE;
     },
+    resourceId() {
+      return this.issueId && convertToGraphQLId(TYPENAME_ISSUE, this.issueId);
+    },
+    userId() {
+      return convertToGraphQLId(TYPENAME_USER, gon.current_user_id);
+    },
   },
   watch: {
     formData: {
@@ -158,6 +175,9 @@ export default {
         updateDraft(this.descriptionAutosaveKey, description, this.formState.lock_version);
       }
     },
+    setDescription(desc) {
+      this.formData.description = desc;
+    },
   },
 };
 </script>
@@ -185,12 +205,12 @@ export default {
         <issuable-title-field ref="title" v-model="formData.title" @input="updateTitleDraft" />
       </div>
     </div>
-    <div class="row">
+    <div class="row gl-gap-3">
       <div v-if="isIssueType" class="col-12 col-md-4 pr-md-0">
         <issuable-type-field ref="issue-type" />
       </div>
 
-      <div v-if="hasIssuableTemplates" class="col-12 col-md-4 pl-md-2">
+      <div v-if="hasIssuableTemplates" class="col-12 col-md-4 gl-md-pl-0 gl-md-pr-0">
         <description-template-field
           v-model="formData.description"
           :issuable-templates="issuableTemplates"
@@ -199,6 +219,14 @@ export default {
           :project-namespace="projectNamespace"
         />
       </div>
+
+      <convert-description-modal
+        v-if="issueId && glFeatures.generateDescriptionAi"
+        class="gl-pl-5 gl-sm-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 b929c4dbae0..4d9b69ddf99 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -100,6 +100,9 @@ export default {
     iid: {
       default: '',
     },
+    issuableId: {
+      default: '',
+    },
     isIssueAuthor: {
       default: false,
     },
@@ -323,7 +326,7 @@ export default {
 </script>
 
 <template>
-  <div class="detail-page-header-actions gl-display-flex gl-align-self-start">
+  <div class="detail-page-header-actions gl-display-flex gl-align-self-start gl-gap-3">
     <gl-dropdown
       v-if="hasMobileDropdown"
       class="gl-sm-display-none! w-100"
@@ -420,7 +423,7 @@ export default {
 
     <gl-button
       v-if="showToggleIssueStateButton"
-      class="gl-display-none gl-sm-display-inline-flex! gl-sm-ml-3"
+      class="gl-display-none gl-sm-display-inline-flex!"
       :data-qa-selector="qaSelector"
       :loading="isToggleStateButtonLoading"
       data-testid="toggle-button"
@@ -433,7 +436,7 @@ export default {
       v-if="hasDesktopDropdown"
       id="new-actions-header-dropdown"
       v-gl-tooltip.hover
-      class="gl-display-none gl-sm-display-inline-flex! gl-sm-ml-3"
+      class="gl-display-none gl-sm-display-inline-flex!"
       icon="ellipsis_v"
       category="tertiary"
       data-qa-selector="issue_actions_ellipsis_dropdown"
diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index 100abcbe1e5..5a51ac18446 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/app/assets/javascripts/issues/show/index.js
@@ -164,6 +164,7 @@ export function initHeaderActions(store, type = '') {
       canReportSpam: parseBoolean(el.dataset.canReportSpam),
       canUpdateIssue: parseBoolean(el.dataset.canUpdateIssue),
       iid: el.dataset.iid,
+      issuableId: el.dataset.issuableId,
       isIssueAuthor: parseBoolean(el.dataset.isIssueAuthor),
       issuePath: el.dataset.issuePath,
       issueType: el.dataset.issueType,