Add support for custom highlighting slash commands via warning flags

1 files changed, 15 insertions, 3 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 6f8b73564d0..c14eb936930 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/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,
             };
           });