Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.projections.json.example

@@ -1,5 +1,7 @@
 {
   "ee/*": { "type": "ee" },
+  "app/*": { "type": "ce" },
+  "lib/*": { "type": "ce" },
   "config/initializers/*.rb": {
     "alternate": "spec/initializers/{}_spec.rb",
     "type": "source"
@@ -57,37 +59,40 @@
     "type": "source"
   },
   "app/presenters/*.rb": {
+    "alternate": "spec/app/presenters/{}_spec.rb",
     "related": "ee/app/presenters/ee/{}.rb",
     "type": "source"
   },
   "app/serializers/*.rb": {
+    "alternate": "spec/app/serializers/{}_spec.rb",
     "related": "ee/app/serializers/ee/{}.rb",
     "type": "source"
   },
   "app/services/*.rb": {
+    "alternate": "spec/app/services/{}_spec.rb",
     "related": "ee/app/services/ee/{}.rb",
     "type": "source"
   },
   "app/uploaders/*.rb": {
+    "alternate": "spec/app/uploaders/{}_spec.rb",
     "related": "ee/app/uploaders/ee/{}.rb",
     "type": "source"
   },
   "app/validators/*.rb": {
+    "alternate": "spec/app/validators/{}_spec.rb",
     "related": "ee/app/validators/ee/{}.rb",
     "type": "source"
   },
   "app/views/*.rb": {
+    "alternate": "spec/app/views/{}_spec.rb",
     "related": "ee/app/views/ee/{}.rb",
     "type": "source"
   },
   "app/workers/*.rb": {
+    "alternate": "spec/app/workers/{}_spec.rb",
     "related": "ee/app/workers/ee/{}.rb",
     "type": "source"
   },
-  "app/*.rb": {
-    "alternate": "spec/{}_spec.rb",
-    "type": "source"
-  },
   "spec/*_spec.rb": {
     "alternate": "app/{}.rb",
     "type": "test"
@@ -124,8 +129,79 @@
     "alternate": "ee/lib/api/{}.rb",
     "type": "test"
   },
+  "ee/app/controllers/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/controllers/{}.rb",
+    "type": "source"
+  },
+  "ee/app/finders/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/finders/{}.rb",
+    "type": "source"
+  },
+  "ee/app/graphql/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/graphql/{}.rb",
+    "type": "source"
+  },
+  "ee/app/helpers/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/helpers/{}.rb",
+    "type": "source"
+  },
+  "ee/app/mailers/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/mailers/{}.rb",
+    "type": "source"
+  },
+  "ee/app/models/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/models/{}.rb",
+    "type": "source"
+  },
+  "ee/app/policies/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/policies/{}.rb",
+    "type": "source"
+  },
+  "ee/app/presenters/ee/*.rb": {
+    "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/presenters/{}.rb",
+    "type": "source"
+  },
+  "ee/app/serializers/ee/*.rb": {
+    "alternate": "spec/app/serializers/{}_spec.rb",
+    "related": "app/serializers/{}.rb",
+    "type": "source"
+  },
+  "ee/app/services/ee/*.rb": {
+    "alternate": "spec/app/services/{}_spec.rb",
+    "related": "app/services/{}.rb",
+    "type": "source"
+  },
+  "ee/app/uploaders/ee/*.rb": {
+    "alternate": "spec/app/uploaders/{}_spec.rb",
+    "related": "app/uploaders/{}.rb",
+    "type": "source"
+  },
+  "ee/app/validators/ee/*.rb": {
+    "alternate": "spec/app/validators/{}_spec.rb",
+    "related": "app/validators/{}.rb",
+    "type": "source"
+  },
+  "ee/app/views/ee/*.rb": {
+    "alternate": "spec/app/views/{}_spec.rb",
+    "related": "app/views/{}.rb",
+    "type": "source"
+  },
+  "ee/app/workers/ee/*.rb": {
+    "alternate": "spec/app/workers/{}_spec.rb",
+    "related": "app/workers/{}.rb",
+    "type": "source"
+  },
   "ee/app/*.rb": {
     "alternate": "ee/spec/{}_spec.rb",
+    "related": "app/{}.rb",
     "type": "source"
   },
   "ee/spec/*_spec.rb": {
@@ -136,6 +212,11 @@
     "alternate": "ee/spec/lib/{}_spec.rb",
     "type": "source"
   },
+  "ee/lib/ee/*.rb": {
+    "alternate": "ee/spec/lib/{}_spec.rb",
+    "related": "lib/{}.rb",
+    "type": "source"
+  },
   "ee/spec/lib/*_spec.rb": {
     "alternate": "ee/lib/{}.rb",
     "type": "test"
@@ -154,16 +235,18 @@
   },
   "ee/app/assets/javascripts/*.js": {
     "alternate": "ee/spec/frontend/{}_spec.js",
+    "related": "app/assets/javascripts/{}.js",
     "type": "source"
   },
   "ee/app/assets/javascripts/*.vue": {
     "alternate": "ee/spec/frontend/{}_spec.js",
+    "related": "app/assets/javascripts/{}.vue",
     "type": "source"
   },
   "ee/spec/frontend/*_spec.js": {
     "alternate": ["ee/app/assets/javascripts/{}.vue", "ee/app/assets/javascripts/{}.js"],
     "type": "test"
   },
-  "*.rb": {"dispatch": "bundle exec rubocop {file}"},
-  "*_spec.rb": {"dispatch": "bundle exec rspec {file}"}
+  "*.rb": { "dispatch": "bundle exec rubocop {file}" },
+  "*_spec.rb": { "dispatch": "bundle exec rspec {file}" }
 }

app/assets/javascripts/content_editor/components/suggestions_dropdown.vue

@@ -42,7 +42,7 @@ export default {
 
   computed: {
     isReference() {
-      return this.nodeType === 'reference';
+      return this.nodeType.startsWith('reference');
     },
 
     isCommand() {
@@ -96,7 +96,7 @@ export default {
     getText(item) {
       if (this.isEmoji) return item.e;
 
-      switch (this.nodeType === 'reference' && this.nodeProps.referenceType) {
+      switch (this.isReference && this.nodeProps.referenceType) {
         case 'user':
           return `${this.char}${item.username}`;
         case 'issue':
@@ -105,12 +105,13 @@ export default {
         case 'snippet':
           return `${this.char}${item.id}`;
         case 'milestone':
-        case 'label':
           return `${this.char}${item.title}`;
+        case 'label':
+          return item.title;
         case 'command':
-          return `${this.char}${item.name} `;
+          return `${this.char}${item.name}`;
         case 'epic':
-          return `${item.reference}`;
+          return item.reference;
         case 'vulnerability':
           return `[vulnerability:${item.id}]`;
         default:
@@ -119,17 +120,35 @@ export default {
     },
 
     getProps(item) {
+      const props = {};
+
       if (this.isEmoji) {
-        return {
+        Object.assign(props, {
           name: item.name,
           unicodeVersion: item.u,
           title: item.d,
           moji: item.e,
-          ...this.nodeProps,
-        };
+        });
       }
 
-      return this.nodeProps;
+      if (this.isLabel || this.isMilestone) {
+        Object.assign(props, {
+          originalText: `${this.char}${
+            /\W/.test(item.title) ? JSON.stringify(item.title) : item.title
+          }`,
+        });
+      }
+
+      if (this.isLabel) {
+        Object.assign(props, {
+          text: item.title,
+          color: item.color,
+        });
+      }
+
+      Object.assign(props, this.nodeProps);
+
+      return props;
     },
 
     onKeyDown({ event }) {

app/assets/javascripts/content_editor/components/wrappers/label.vue

@@ -0,0 +1,34 @@
+<script>
+import { NodeViewWrapper } from '@tiptap/vue-2';
+import { GlLabel } from '@gitlab/ui';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  name: 'DetailsWrapper',
+  components: {
+    NodeViewWrapper,
+    GlLabel,
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    isScopedLabel() {
+      return isScopedLabel({ title: this.node.attrs.originalText });
+    },
+  },
+};
+</script>
+<template>
+  <node-view-wrapper class="gl-display-inline-block">
+    <gl-label
+      size="sm"
+      :scoped="isScopedLabel"
+      :background-color="node.attrs.color"
+      :title="node.attrs.text"
+    />
+  </node-view-wrapper>
+</template>

app/assets/javascripts/content_editor/extensions/reference.js

@@ -46,22 +46,10 @@ export default Node.create({
         tag: 'a.gfm:not([data-link=true])',
         priority: PARSE_HTML_PRIORITY_HIGHEST,
       },
-      {
-        tag: 'span.gl-label',
-      },
     ];
   },
 
   renderHTML({ node }) {
-    return [
-      'a',
-      {
-        class: node.attrs.className,
-        href: '#',
-        'data-reference-type': node.attrs.referenceType,
-        'data-original': node.attrs.originalText,
-      },
-      node.attrs.text,
-    ];
+    return ['a', { href: '#' }, node.attrs.text];
   },
 });

app/assets/javascripts/content_editor/extensions/reference_label.js

@@ -0,0 +1,35 @@
+import { VueNodeViewRenderer } from '@tiptap/vue-2';
+import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
+import LabelWrapper from '../components/wrappers/label.vue';
+import Reference from './reference';
+
+export default Reference.extend({
+  name: 'reference_label',
+
+  addAttributes() {
+    return {
+      ...this.parent(),
+      text: {
+        default: null,
+        parseHTML: (element) => {
+          const text = element.querySelector('.gl-label-text').textContent;
+          const scopedText = element.querySelector('.gl-label-text-scoped')?.textContent;
+          if (!scopedText) return text;
+          return `${text}${SCOPED_LABEL_DELIMITER}${scopedText}`;
+        },
+      },
+      color: {
+        default: null,
+        parseHTML: (element) => element.querySelector('.gl-label-text').style.backgroundColor,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'span.gl-label' }];
+  },
+
+  addNodeView() {
+    return new VueNodeViewRenderer(LabelWrapper);
+  },
+});

app/assets/javascripts/content_editor/extensions/suggestions.js

@@ -34,7 +34,10 @@ function createSuggestionPlugin({
       tiptapEditor
         .chain()
         .focus()
-        .insertContentAt(range, [{ type: nodeType, attrs: props }])
+        .insertContentAt(range, [
+          { type: nodeType, attrs: props },
+          { type: 'text', text: ' ' },
+        ])
         .run();
     },
 
@@ -82,7 +85,7 @@ function createSuggestionPlugin({
         },
 
         onUpdate(props) {
-          component.updateProps(props);
+          component?.updateProps(props);
 
           if (!props.clientRect) {
             return;
@@ -100,12 +103,12 @@ function createSuggestionPlugin({
             return true;
           }
 
-          return component.ref?.onKeyDown(props);
+          return component?.ref?.onKeyDown(props);
         },
 
         onExit() {
           popup?.[0].destroy();
-          component.destroy();
+          component?.destroy();
         },
       };
     },
@@ -151,7 +154,7 @@ export default Node.create({
         editor: this.editor,
         char: '~',
         dataSource: gl.GfmAutoComplete?.dataSources.labels,
-        nodeType: 'reference',
+        nodeType: 'reference_label',
         nodeProps: {
           referenceType: 'label',
         },

app/assets/javascripts/content_editor/services/create_content_editor.js

@@ -43,6 +43,7 @@ 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';
 import Sourcemap from '../extensions/sourcemap';
 import Strike from '../extensions/strike';
@@ -132,6 +133,7 @@ export const createContentEditor = ({
     Paragraph,
     PasteMarkdown.configure({ eventHub, renderMarkdown }),
     Reference,
+    ReferenceLabel,
     ReferenceDefinition,
     Sourcemap,
     Strike,