Merge branch 'ce-backport-3777-promote-to-epic' into 'master'

Add support for custom highlighting slash commands via warning flags

See merge request gitlab-org/gitlab-ce!23277

app/assets/javascripts/gfm_auto_complete.js

@@ -62,9 +62,11 @@ class GfmAutoComplete {
       skipMarkdownCharacterTest: true,
       data: GfmAutoComplete.defaultLoadingData,
       displayTpl(value) {
+        const cssClasses = [];
+
         if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
         // eslint-disable-next-line no-template-curly-in-string
-        let tpl = '<li><span class="name">/${name}</span>';
+        let tpl = '<li class="<%- className %>"><span class="name">/${name}</span>';
         if (value.aliases.length > 0) {
           tpl += ' <small class="aliases">(or /<%- aliases.join(", /") %>)</small>';
         }
@@ -72,10 +74,19 @@ class GfmAutoComplete {
           tpl += ' <small class="params"><%- params.join(" ") %></small>';
         }
         if (value.description !== '') {
-          tpl += '<small class="description"><i><%- description %></i></small>';
+          tpl += '<small class="description"><i><%- description %> <%- warningText %></i></small>';
         }
         tpl += '</li>';
-        return _.template(tpl)(value);
+
+        if (value.warning) {
+          cssClasses.push('has-warning');
+        }
+
+        return _.template(tpl)({
+          ...value,
+          className: cssClasses.join(' '),
+          warningText: value.warning ? `(${value.warning})` : '',
+        });
       },
       insertTpl(value) {
         // eslint-disable-next-line no-template-curly-in-string
@@ -104,6 +115,7 @@ class GfmAutoComplete {
               aliases: c.aliases,
               params: c.params,
               description: c.description,
+              warning: c.warning,
               search,
             };
           });

app/assets/stylesheets/framework/markdown_area.scss

@@ -219,6 +219,13 @@
     margin-bottom: 0;
   }
 
+  .has-warning {
+    .name,
+    .description {
+      color: $orange-700;
+    }
+  }
+
   .cur {
     .avatar {
       @include disableAllAnimation;
@@ -246,6 +253,11 @@
         small {
           color: inherit;
         }
+
+        &.has-warning {
+          color: $orange-700;
+          background-color: $orange-100;
+        }
       }
 
       div.avatar {