Resolve "Drop down filter for project snippets"

1 files changed, 38 insertions, 2 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 73b2cd0b2c7..95636a9ccdd 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -15,6 +15,7 @@ export const defaultAutocompleteConfig = {
   epics: true,
   milestones: true,
   labels: true,
+  snippets: true,
 };
 
 class GfmAutoComplete {
@@ -50,6 +51,7 @@ class GfmAutoComplete {
     if (this.enableMap.milestones) this.setupMilestones($input);
     if (this.enableMap.mergeRequests) this.setupMergeRequests($input);
     if (this.enableMap.labels) this.setupLabels($input);
+    if (this.enableMap.snippets) this.setupSnippets($input);
 
     // We don't instantiate the quick actions autocomplete for note and issue/MR edit forms
     $input.filter('[data-supports-quick-actions="true"]').atwho({
@@ -360,6 +362,39 @@ class GfmAutoComplete {
     });
   }
 
+  setupSnippets($input) {
+    $input.atwho({
+      at: '$',
+      alias: 'snippets',
+      searchKey: 'search',
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.template;
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      // eslint-disable-next-line no-template-curly-in-string
+      insertTpl: '${atwho-at}${id}',
+      callbacks: {
+        ...this.getDefaultCallbacks(),
+        beforeSave(snippets) {
+          return $.map(snippets, (m) => {
+            if (m.title == null) {
+              return m;
+            }
+            return {
+              id: m.id,
+              title: sanitize(m.title),
+              search: `${m.id} ${m.title}`,
+            };
+          });
+        },
+      },
+    });
+  }
+
   getDefaultCallbacks() {
     const fetchData = this.fetchData.bind(this);
 
@@ -470,7 +505,7 @@ class GfmAutoComplete {
     // The below is taken from At.js source
     // Tweaked to commands to start without a space only if char before is a non-word character
     // https://github.com/ichord/At.js
-    const atSymbolsWithBar = Object.keys(controllers).join('|');
+    const atSymbolsWithBar = Object.keys(controllers).join('|').replace(/[$]/, '\\$&');
     const atSymbolsWithoutBar = Object.keys(controllers).join('');
     const targetSubtext = subtext.split(GfmAutoComplete.regexSubtext).pop();
     const resultantFlag = flag.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
@@ -497,6 +532,7 @@ GfmAutoComplete.atTypeMap = {
   '~': 'labels',
   '%': 'milestones',
   '/': 'commands',
+  $: 'snippets',
 };
 
 // Emoji
@@ -519,7 +555,7 @@ GfmAutoComplete.Labels = {
   // eslint-disable-next-line no-template-curly-in-string
   template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>',
 };
-// Issues and MergeRequests
+// Issues, MergeRequests and Snippets
 GfmAutoComplete.Issues = {
   // eslint-disable-next-line no-template-curly-in-string
   template: '<li><small>${id}</small> ${title}</li>',