Add latest changes from gitlab-org/gitlab@master

3 files changed, 19 insertions, 11 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 4fdf7f45643..46cd35aa0b7 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -156,6 +156,14 @@ export default {
         })
         .catch(() => {});
     },
+    handleAttachFile(e) {
+      e.preventDefault();
+      const $gfmForm = $(this.$el).closest('.gfm-form');
+      const $gfmTextarea = $gfmForm.find('.js-gfm-input');
+
+      $gfmForm.find('.div-dropzone').click();
+      $gfmTextarea.focus();
+    },
   },
   shortcuts: {
     bold: keysFor(BOLD_TEXT),
@@ -325,6 +333,14 @@ export default {
             icon="table"
           />
           <toolbar-button
+            v-if="!restrictedToolBarItems.includes('attach-file')"
+            data-testid="button-attach-file"
+            :prepend="true"
+            :button-title="__('Attach a file or image')"
+            icon="paperclip"
+            @click="handleAttachFile"
+          />
+          <toolbar-button
             v-if="!restrictedToolBarItems.includes('full-screen')"
             class="js-zen-enter"
             :prepend="true"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 6c99a749edc..aa325862f06 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -74,7 +74,7 @@ export default {
     </div>
     <span v-if="canAttachFile" class="uploading-container">
       <span class="uploading-progress-container hide">
-        <gl-icon name="media" />
+        <gl-icon name="paperclip" />
         <span class="attaching-file-message"></span>
         <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
         <span class="uploading-progress">0%</span>
@@ -82,7 +82,7 @@ export default {
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
-          <gl-icon name="media" />
+          <gl-icon name="paperclip" />
         </span>
         <span class="uploading-error-message"></span>
 
@@ -114,14 +114,6 @@ export default {
         </gl-sprintf>
       </span>
       <gl-button
-        icon="media"
-        variant="link"
-        category="primary"
-        class="markdown-selector button-attach-file gl-vertical-align-text-bottom"
-      >
-        {{ __('Attach a file') }}
-      </gl-button>
-      <gl-button
         variant="link"
         category="primary"
         class="button-cancel-uploading-files gl-vertical-align-baseline hide"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 6a83939795c..49217e38a1b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -88,6 +88,6 @@ export default {
     category="tertiary"
     class="js-md"
     data-container="body"
-    @click="() => $emit('click')"
+    @click="$emit('click', $event)"
   />
 </template>