Add latest changes from gitlab-org/gitlab@master

9 files changed, 104 insertions, 37 deletions

diff --git a/app/assets/javascripts/content_editor/extensions/paste_markdown.js b/app/assets/javascripts/content_editor/extensions/copy_paste.js
index db13438de5e..45a89cc08cf 100644
--- a/app/assets/javascripts/content_editor/extensions/paste_markdown.js
+++ b/app/assets/javascripts/content_editor/extensions/copy_paste.js
@@ -2,6 +2,7 @@ import OrderedMap from 'orderedmap';
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { Schema, DOMParser as ProseMirrorDOMParser, DOMSerializer } from '@tiptap/pm/model';
+import { uniqueId } from 'lodash';
 import { __ } from '~/locale';
 import { VARIANT_DANGER } from '~/alert';
 import createMarkdownDeserializer from '../services/gl_api_markdown_deserializer';
@@ -24,8 +25,23 @@ function parseHTML(schema, html) {
   return { document: ProseMirrorDOMParser.fromSchema(schema).parse(body) };
 }
 
+const findLoader = (editor, loaderId) => {
+  let position;
+
+  editor.view.state.doc.descendants((descendant, pos) => {
+    if (descendant.type.name === 'loading' && descendant.attrs.id === loaderId) {
+      position = pos;
+      return false;
+    }
+
+    return true;
+  });
+
+  return position;
+};
+
 export default Extension.create({
-  name: 'pasteMarkdown',
+  name: 'copyPaste',
   priority: EXTENSION_PRIORITY_HIGHEST,
   addOptions() {
     return {
@@ -35,7 +51,7 @@ export default Extension.create({
   },
   addCommands() {
     return {
-      pasteContent: (content = '', processMarkdown = true) => async () => {
+      pasteContent: (content = '', processMarkdown = true) => () => {
         const { editor, options } = this;
         const { renderMarkdown, eventHub } = options;
         const deserializer = createMarkdownDeserializer({ render: renderMarkdown });
@@ -43,23 +59,37 @@ export default Extension.create({
         const pasteSchemaSpec = { ...editor.schema.spec };
         pasteSchemaSpec.marks = OrderedMap.from(pasteSchemaSpec.marks).remove('span');
         pasteSchemaSpec.nodes = OrderedMap.from(pasteSchemaSpec.nodes).remove('div').remove('pre');
-        const schema = new Schema(pasteSchemaSpec);
+        const pasteSchema = new Schema(pasteSchemaSpec);
 
         const promise = processMarkdown
-          ? deserializer.deserialize({ schema, markdown: content })
-          : Promise.resolve(parseHTML(schema, content));
-
-        promise
-          .then(({ document }) => {
+          ? deserializer.deserialize({ schema: pasteSchema, markdown: content })
+          : Promise.resolve(parseHTML(pasteSchema, content));
+        const loaderId = uniqueId('loading');
+
+        Promise.resolve()
+          .then(() => {
+            editor.commands.insertContent({ type: 'loading', attrs: { id: loaderId } });
+            return promise;
+          })
+          .then(async ({ document }) => {
             if (!document) return;
 
-            const { firstChild } = document.content;
+            const pos = findLoader(editor, loaderId);
+            if (!pos) return;
+
+            const { firstChild, childCount } = document.content;
             const toPaste =
-              document.content.childCount === 1 && firstChild.type.name === 'paragraph'
+              childCount === 1 && firstChild.type.name === 'paragraph'
                 ? firstChild.content
                 : document.content;
 
-            editor.commands.insertContent(toPaste.toJSON());
+            editor
+              .chain()
+              .deleteRange({ from: pos, to: pos + 1 })
+              .insertContentAt(pos, toPaste.toJSON(), {
+                updateSelection: false,
+              })
+              .run();
           })
           .catch(() => {
             eventHub.$emit(ALERT_EVENT, {
@@ -94,7 +124,7 @@ export default Extension.create({
 
     return [
       new Plugin({
-        key: new PluginKey('pasteMarkdown'),
+        key: new PluginKey('copyPaste'),
         props: {
           handleDOMEvents: {
             copy: handleCutAndCopy,
diff --git a/app/assets/javascripts/content_editor/extensions/loading.js b/app/assets/javascripts/content_editor/extensions/loading.js
new file mode 100644
index 00000000000..0115fb10d5d
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/loading.js
@@ -0,0 +1,23 @@
+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'loading',
+  inline: true,
+  group: 'inline',
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+      },
+    };
+  },
+
+  renderHTML() {
+    return [
+      'span',
+      { class: 'gl-display-inline-flex gl-align-items-center' },
+      ['span', { class: 'gl-dots-loader gl-mx-2' }, ['span']],
+    ];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js
index a0dc059b909..f7d189e443f 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -11,6 +11,7 @@ import Code from '../extensions/code';
 import CodeBlockHighlight from '../extensions/code_block_highlight';
 import CodeSuggestion from '../extensions/code_suggestion';
 import ColorChip from '../extensions/color_chip';
+import CopyPaste from '../extensions/copy_paste';
 import DescriptionItem from '../extensions/description_item';
 import DescriptionList from '../extensions/description_list';
 import Details from '../extensions/details';
@@ -40,10 +41,10 @@ import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
 import Link from '../extensions/link';
 import ListItem from '../extensions/list_item';
+import Loading from '../extensions/loading';
 import MathInline from '../extensions/math_inline';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
-import PasteMarkdown from '../extensions/paste_markdown';
 import Reference from '../extensions/reference';
 import ReferenceLabel from '../extensions/reference_label';
 import ReferenceDefinition from '../extensions/reference_definition';
@@ -143,10 +144,11 @@ export const createContentEditor = ({
     ExternalKeydownHandler.configure({ eventHub }),
     Link,
     ListItem,
+    Loading,
     MathInline,
     OrderedList,
     Paragraph,
-    PasteMarkdown.configure({ eventHub, renderMarkdown, serializer }),
+    CopyPaste.configure({ eventHub, renderMarkdown, serializer }),
     Reference.configure({ assetResolver }),
     ReferenceLabel,
     ReferenceDefinition,
diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js
index bc738073e15..972b4acf523 100644
--- a/app/assets/javascripts/content_editor/services/markdown_serializer.js
+++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js
@@ -32,6 +32,7 @@ import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
 import Link from '../extensions/link';
 import ListItem from '../extensions/list_item';
+import Loading from '../extensions/loading';
 import MathInline from '../extensions/math_inline';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
@@ -194,6 +195,7 @@ const defaultSerializerConfig = {
       inline: true,
     }),
     [ListItem.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.list_item),
+    [Loading.name]: () => {},
     [OrderedList.name]: preserveUnchanged(renderOrderedList),
     [Paragraph.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.paragraph),
     [Reference.name]: renderReference,
diff --git a/app/assets/javascripts/super_sidebar/components/brand_logo.vue b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
index c017fa8afa2..66381e4da4d 100644
--- a/app/assets/javascripts/super_sidebar/components/brand_logo.vue
+++ b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
@@ -27,7 +27,7 @@ export default {
 <template>
   <a
     v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.homepage"
-    class="tanuki-logo-container"
+    class="brand-logo"
     :href="rootPath"
     :title="$options.i18n.homepage"
     data-track-action="click_link"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index d26dc7d7ba0..47589c132a7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -556,7 +556,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="!loading" id="widget-state" class="mr-state-widget gl-mt-3">
+  <div v-if="!loading" id="widget-state" class="mr-state-widget gl-mt-5">
     <header
       v-if="shouldRenderCollaborationStatus"
       class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100 gl-overflow-hidden mr-widget-workflow gl-mt-0!"
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 3957f82f658..4d4144fe9dd 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -39,6 +39,7 @@
 @import 'framework/contextual_sidebar_header';
 @import 'framework/contextual_sidebar';
 @import 'framework/super_sidebar';
+@import 'framework/brand_logo';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';
diff --git a/app/assets/stylesheets/framework/brand_logo.scss b/app/assets/stylesheets/framework/brand_logo.scss
new file mode 100644
index 00000000000..1bc1ef797a7
--- /dev/null
+++ b/app/assets/stylesheets/framework/brand_logo.scss
@@ -0,0 +1,29 @@
+$brand-logo-light-background: #e0dfe5;
+$brand-logo-dark-background: #53515b;
+
+.brand-logo {
+  display: inline-block;
+  @include gl-rounded-base;
+  @include gl-p-2;
+  @include gl-bg-transparent;
+  @include gl-border-none;
+
+  .tanuki-logo {
+    @include gl-vertical-align-middle;
+  }
+
+  &:focus,
+  &:active {
+    @include gl-focus;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $brand-logo-light-background;
+
+    .gl-dark & {
+      background-color: $brand-logo-dark-background;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 9ad3bcba266..823825ca406 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -57,12 +57,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   .user-bar {
     background-color: $t-gray-a-04;
 
-    .tanuki-logo {
-      @include gl-vertical-align-middle;
-    }
-
-    .user-bar-item,
-    .tanuki-logo-container {
+    .user-bar-item {
       @include gl-rounded-base;
       @include gl-p-2;
       @include gl-bg-transparent;
@@ -81,21 +76,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
         @include active-toggle;
       }
     }
-
-    $light-mode-btn-bg: #e0dfe5;
-    $dark-mode-btn-bg: #53515b;
-
-    .tanuki-logo-container {
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: $light-mode-btn-bg;
-
-        .gl-dark & {
-          background-color: $dark-mode-btn-bg;
-        }
-      }
-    }
   }
 
   .counter .gl-icon,