Add latest changes from gitlab-org/gitlab@master

4 files changed, 62 insertions, 20 deletions

diff --git a/app/assets/javascripts/vue_shared/components/integrations_help_text.vue b/app/assets/javascripts/vue_shared/components/integrations_help_text.vue
new file mode 100644
index 00000000000..4939b5aa98c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/integrations_help_text.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+
+export default {
+  name: 'IntegrationsHelpText',
+  components: {
+    GlIcon,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    messageUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <gl-sprintf :message="message">
+      <template #link="{ content }">
+        <gl-link :href="messageUrl" target="_blank">
+          {{ content }}
+          <gl-icon name="external-link" class="gl-vertical-align-middle" :size="12" />
+        </gl-link>
+      </template>
+    </gl-sprintf>
+  </span>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue
index 558d361615b..82060d2e4ad 100644
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue
@@ -2,7 +2,6 @@
 import { GlModal, GlFormGroup, GlFormInput, GlTabs, GlTab } from '@gitlab/ui';
 import { isSafeURL, joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { IMAGE_TABS } from '../../constants';
 import UploadImageTab from './upload_image_tab.vue';
 
@@ -15,7 +14,6 @@ export default {
     GlTabs,
     GlTab,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     imageRoot: {
       type: String,
@@ -34,10 +32,10 @@ export default {
   },
   modalTitle: __('Image details'),
   okTitle: __('Insert image'),
-  urlTabTitle: __('By URL'),
+  urlTabTitle: __('Link to an image'),
   urlLabel: __('Image URL'),
   descriptionLabel: __('Description'),
-  uploadTabTitle: __('Upload file'),
+  uploadTabTitle: __('Upload an image'),
   computed: {
     altText() {
       return this.description;
@@ -54,7 +52,7 @@ export default {
       this.$refs.modal.show();
     },
     onOk(event) {
-      if (this.glFeatures.sseImageUploads && this.tabIndex === IMAGE_TABS.UPLOAD_TAB) {
+      if (this.tabIndex === IMAGE_TABS.UPLOAD_TAB) {
         this.submitFile(event);
         return;
       }
@@ -108,7 +106,7 @@ export default {
     :ok-title="$options.okTitle"
     @ok="onOk"
   >
-    <gl-tabs v-if="glFeatures.sseImageUploads" v-model="tabIndex">
+    <gl-tabs v-model="tabIndex">
       <!-- Upload file Tab -->
       <gl-tab :title="$options.uploadTabTitle">
         <upload-image-tab ref="uploadImageTab" @input="setFile" />
@@ -128,17 +126,6 @@ export default {
       </gl-tab>
     </gl-tabs>
 
-    <gl-form-group
-      v-else
-      class="gl-mt-5 gl-mb-3"
-      :label="$options.urlLabel"
-      label-for="url-input"
-      :state="!Boolean(urlError)"
-      :invalid-feedback="urlError"
-    >
-      <gl-form-input id="url-input" ref="urlInput" v-model="imageUrl" />
-    </gl-form-group>
-
     <!-- Description Input -->
     <gl-form-group :label="$options.descriptionLabel" label-for="description-input">
       <gl-form-input id="description-input" ref="descriptionInput" v-model="description" />
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
index dbd05685b55..9eacf74bba8 100644
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
@@ -114,10 +114,9 @@ export default {
 
       if (file) {
         this.$emit('uploadImage', { file, imageUrl });
-        // TODO - ensure that the actual repo URL for the image is used in Markdown mode
       }
 
-      addImage(this.editorInstance, image);
+      addImage(this.editorInstance, image, file);
     },
     onOpenInsertVideoModal() {
       this.$refs.insertVideoModal.show();
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
index 8b3fbcabcfa..463e64b4936 100644
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
@@ -34,6 +34,20 @@ const buildVideoIframe = src => {
   return wrapper;
 };
 
+const buildImg = (alt, originalSrc, file) => {
+  const img = document.createElement('img');
+  const src = file ? URL.createObjectURL(file) : originalSrc;
+  const attributes = { alt, src };
+
+  if (file) {
+    img.dataset.originalSrc = originalSrc;
+  }
+
+  Object.assign(img, attributes);
+
+  return img;
+};
+
 export const generateToolbarItem = config => {
   const { icon, classes, event, command, tooltip, isDivider } = config;
 
@@ -59,7 +73,14 @@ export const addCustomEventListener = (editorApi, event, handler) => {
 export const removeCustomEventListener = (editorApi, event, handler) =>
   editorApi.eventManager.removeEventHandler(event, handler);
 
-export const addImage = ({ editor }, image) => editor.exec('AddImage', image);
+export const addImage = ({ editor }, { altText, imageUrl }, file) => {
+  if (editor.isWysiwygMode()) {
+    const img = buildImg(altText, imageUrl, file);
+    editor.getSquire().insertElement(img);
+  } else {
+    editor.insertText(`![${altText}](${imageUrl})`);
+  }
+};
 
 export const insertVideo = ({ editor }, url) => {
   const videoIframe = buildVideoIframe(url);