Add latest changes from gitlab-org/gitlab@master

4 files changed, 73 insertions, 126 deletions

diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index 30914611047..5b01d15a099 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -2,7 +2,7 @@
 import { GlTabs, GlTab } from '@gitlab/ui';
 import trackUIControl from '../services/track_ui_control';
 import ToolbarButton from './toolbar_button.vue';
-import ToolbarImageButton from './toolbar_image_button.vue';
+import ToolbarAttachmentButton from './toolbar_attachment_button.vue';
 import ToolbarLinkButton from './toolbar_link_button.vue';
 import ToolbarTableButton from './toolbar_table_button.vue';
 import ToolbarTextStyleDropdown from './toolbar_text_style_dropdown.vue';
@@ -16,7 +16,7 @@ export default {
     ToolbarTextStyleDropdown,
     ToolbarLinkButton,
     ToolbarTableButton,
-    ToolbarImageButton,
+    ToolbarAttachmentButton,
     ToolbarMoreDropdown,
   },
   methods: {
@@ -95,12 +95,11 @@ export default {
           :label="__('Add a checklist')"
           @execute="trackToolbarControlExecution"
         />
-        <toolbar-image-button
-          ref="imageButton"
-          data-testid="image"
+        <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
+        <toolbar-attachment-button
+          data-testid="attachment"
           @execute="trackToolbarControlExecution"
         />
-        <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
         <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
       </div>
     </template>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue b/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
new file mode 100644
index 00000000000..efb9a5b07b5
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import Link from '../extensions/link';
+
+export default {
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip,
+  },
+  inject: ['tiptapEditor'],
+  data() {
+    return {
+      linkHref: '',
+    };
+  },
+  methods: {
+    emitExecute(source = 'url') {
+      this.$emit('execute', { contentType: Link.name, value: source });
+    },
+    openFileUpload() {
+      this.$refs.fileSelector.click();
+    },
+    onFileSelect(e) {
+      this.tiptapEditor
+        .chain()
+        .focus()
+        .uploadAttachment({
+          file: e.target.files[0],
+        })
+        .run();
+
+      // Reset the file input so that the same file can be uploaded again
+      this.$refs.fileSelector.value = '';
+      this.emitExecute('upload');
+    },
+  },
+};
+</script>
+<template>
+  <span class="gl-display-inline-flex">
+    <gl-button
+      v-gl-tooltip
+      :text="__('Attach a file or image')"
+      :title="__('Attach a file or image')"
+      category="tertiary"
+      icon="paperclip"
+      lazy
+      @click="openFileUpload"
+    />
+    <input
+      ref="fileSelector"
+      type="file"
+      name="content_editor_image"
+      class="gl-display-none"
+      data-qa-selector="file_upload_field"
+      @change="onFileSelect"
+    />
+  </span>
+</template>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_image_button.vue b/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
deleted file mode 100644
index 972b03eeeeb..00000000000
--- a/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-import {
-  GlDropdown,
-  GlDropdownForm,
-  GlButton,
-  GlFormInputGroup,
-  GlDropdownDivider,
-  GlDropdownItem,
-  GlTooltipDirective as GlTooltip,
-} from '@gitlab/ui';
-import { acceptedMimes } from '../services/upload_helpers';
-import { extractFilename } from '../services/utils';
-
-export default {
-  components: {
-    GlDropdown,
-    GlDropdownForm,
-    GlFormInputGroup,
-    GlDropdownDivider,
-    GlDropdownItem,
-    GlButton,
-  },
-  directives: {
-    GlTooltip,
-  },
-  inject: ['tiptapEditor'],
-  data() {
-    return {
-      imgSrc: '',
-    };
-  },
-  methods: {
-    resetFields() {
-      this.imgSrc = '';
-      this.$refs.fileSelector.value = '';
-    },
-    insertImage() {
-      this.tiptapEditor
-        .chain()
-        .focus()
-        .setImage({
-          src: this.imgSrc,
-          canonicalSrc: this.imgSrc,
-          alt: extractFilename(this.imgSrc),
-        })
-        .run();
-
-      this.resetFields();
-      this.emitExecute();
-    },
-    emitExecute(source = 'url') {
-      this.$emit('execute', { contentType: 'image', value: source });
-    },
-    openFileUpload() {
-      this.$refs.fileSelector.click();
-    },
-    onFileSelect(e) {
-      this.tiptapEditor
-        .chain()
-        .focus()
-        .uploadAttachment({
-          file: e.target.files[0],
-        })
-        .run();
-
-      this.resetFields();
-      this.emitExecute('upload');
-    },
-  },
-  acceptedMimes: acceptedMimes.image,
-};
-</script>
-<template>
-  <span class="gl-display-inline-flex">
-    <gl-dropdown
-      v-gl-tooltip
-      :text="__('Insert image')"
-      :title="__('Insert image')"
-      size="small"
-      category="tertiary"
-      icon="media"
-      lazy
-      text-sr-only
-      data-testid="insert-image-toolbar-button"
-      @hidden="resetFields()"
-    >
-      <gl-dropdown-form class="gl-px-3! gl-pb-2!">
-        <gl-form-input-group v-model="imgSrc" :placeholder="__('Image URL')">
-          <template #append>
-            <gl-button variant="confirm" @click="insertImage">{{ __('Insert') }}</gl-button>
-          </template>
-        </gl-form-input-group>
-      </gl-dropdown-form>
-      <gl-dropdown-divider />
-      <gl-dropdown-item @click="openFileUpload">
-        {{ __('Upload image') }}
-      </gl-dropdown-item>
-    </gl-dropdown>
-    <input
-      ref="fileSelector"
-      type="file"
-      name="content_editor_image"
-      :accept="$options.acceptedMimes"
-      class="gl-display-none"
-      data-qa-selector="file_upload_field"
-      @change="onFileSelect"
-    />
-  </span>
-</template>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_link_button.vue b/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
index b505b120f00..ff1a52264f0 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
@@ -37,9 +37,6 @@ export default {
       this.imgSrc = '';
       this.$refs.fileSelector.value = '';
     },
-    openFileUpload() {
-      this.$refs.fileSelector.click();
-    },
     updateLinkState({ editor }) {
       const { canonicalSrc, href } = editor.getAttributes(Link.name);
 
@@ -102,20 +99,19 @@ export default {
         lazy
         @show="selectLink()"
       >
-        <gl-dropdown-form class="gl-px-3! gl-pb-2!">
+        <gl-dropdown-form class="gl-px-3!" :class="{ 'gl-pb-2!': isActive }">
           <gl-form-input-group v-model="linkHref" :placeholder="__('Link URL')">
             <template #append>
               <gl-button variant="confirm" @click="updateLink">{{ __('Apply') }}</gl-button>
             </template>
           </gl-form-input-group>
         </gl-dropdown-form>
-        <gl-dropdown-divider />
-        <gl-dropdown-item v-if="isActive" @click="removeLink">
-          {{ __('Remove link') }}
-        </gl-dropdown-item>
-        <gl-dropdown-item v-else @click="openFileUpload">
-          {{ __('Upload file') }}
-        </gl-dropdown-item>
+        <div v-if="isActive">
+          <gl-dropdown-divider />
+          <gl-dropdown-item @click="removeLink">
+            {{ __('Remove link') }}
+          </gl-dropdown-item>
+        </div>
       </gl-dropdown>
       <input
         ref="fileSelector"