Fix conflict

public/controllers/dev-tools/dev-tools.js

@@ -15,9 +15,10 @@ import queryString from 'querystring-browser';
 import $ from 'jquery';
 
 export class DevToolsController {
-  constructor($scope, apiReq, $window, appState, errorHandler, $document) {
+  constructor($scope, apiReq, genericReq, $window, appState, errorHandler, $document) {
     this.$scope = $scope;
     this.apiReq = apiReq;
+    this.genericReq = genericReq;
     this.$window = $window;
     this.appState = appState;
     this.errorHandler = errorHandler;
@@ -40,6 +41,11 @@ export class DevToolsController {
         gutters: ['CodeMirror-foldgutter']
       }
     );
+    CodeMirror.commands.autocomplete = function (cm) {
+      CodeMirror.showHint(cm, CodeMirror.hint.dictionaryHint, {
+        completeSingle: false
+      });
+    };
 
     this.apiInputBox.on('change', () => {
       this.groups = this.analyzeGroups();
@@ -232,8 +238,33 @@ export class DevToolsController {
     return affectedGroups;
   }
 
+  async getAvailableMethods() {
+    try {
+      const response = await this.genericReq.request('GET', '/api/routes', {});
+      this.apiInputBox.model = !response.error ? response.data : [];
+    } catch (error) {
+      this.apiInputBox.model = [];
+    }
+  }
+
   init() {
     this.apiInputBox.setSize('auto', '100%');
+    const ExcludedIntelliSenseTriggerKeys = {
+      '9': 'tab', '13': 'enter', '16': 'shift', '17': 'ctrl', '18': 'alt', '19': 'pause', '20': 'capslock',
+      '27': 'escape', '33': 'pageup', '34': 'pagedown', '35': 'end', '36': 'home', '37': 'left', '38': 'up',
+      '39': 'right', '40': 'down', '45': 'insert', '91': 'left window key', '92': 'right window key', '93': 'select',
+      '112': 'f1', '113': 'f2', '114': 'f3', '115': 'f4', '116': 'f5', '117': 'f6', '118': 'f7', '119': 'f8',
+      '120': 'f9', '121': 'f10', '122': 'f11', '123': 'f12', '144': 'numlock', '145': 'scrolllock'
+    };
+    this.apiInputBox.model = [];
+    this.getAvailableMethods();
+    this.apiInputBox.on('keyup', function (cm, e) {
+      if (!ExcludedIntelliSenseTriggerKeys[(e.keyCode || e.which).toString()]) {
+        cm.execCommand('autocomplete', null, {
+          completeSingle: false
+        });
+      }
+    });
     this.apiOutputBox.setSize('auto', '100%');
     const currentState = this.appState.getCurrentDevTools();
     if (!currentState) {
@@ -248,6 +279,69 @@ export class DevToolsController {
     this.groups = this.analyzeGroups();
     const currentGroup = this.calculateWhichGroup();
     this.highlightGroup(currentGroup);
+
+    // Register our custom Codemirror hint plugin.
+    CodeMirror.registerHelper('hint', 'dictionaryHint', function (editor) {
+      const model = editor.model;
+      function getDictionary(line, word) {
+        let hints = {};
+        const exp = line.split(/\s+/g);
+        if (exp[0] && exp[0].match(/^(?:GET|PUT|POST|DELETE).*$/)) {
+          let method = model.find(function (item) {
+            return item.method === exp[0]
+          });
+          if (method) {
+            method.endpoints.forEach(function (endpoint) {
+              endpoint.path = endpoint.name;
+              if (endpoint.args && endpoint.args.length > 0) {
+                let argSubs = [];
+                endpoint.args.forEach(function (arg) {
+                  const pathSplitted = endpoint.name.split('/');
+                  const arrayIdx = pathSplitted.indexOf(arg.name);
+                  const wordSplitted = word.split('/');
+                  if (wordSplitted[arrayIdx] && wordSplitted[arrayIdx] != '') {
+                    argSubs.push({
+                      'id': arg.name,
+                      'value': wordSplitted[arrayIdx]
+                    });
+                  }
+                });
+                let auxPath = endpoint.name;
+                argSubs.forEach(function (arg) {
+                  auxPath = auxPath.replace(arg.id, arg.value);
+                });
+                endpoint.path = auxPath;
+              }
+            });
+            hints = method.endpoints.map(a => a.path);
+          } else {
+            hints = [];
+          }
+          if (exp[2]) {
+            hints = [];
+          }
+        } else {
+          hints = model.map(a => a.method);
+        }
+        return hints.map(a => a);
+      }
+
+      const cur = editor.getCursor();
+      const curLine = editor.getLine(cur.line);
+      let start = cur.ch;
+      let end = start;
+      const whiteSpace = /\s/;
+      while (end < curLine.length && !whiteSpace.test(curLine.charAt(end)))++end;
+      while (start && !whiteSpace.test(curLine.charAt(start - 1)))--start;
+      const curWord = start !== end && curLine.slice(start, end);
+      return {
+        list: (!curWord ? [] : getDictionary(curLine, curWord).filter(function (item) {
+          return item.toUpperCase().includes(curWord.toUpperCase());
+        })).sort(),
+        from: CodeMirror.Pos(cur.line, start),
+        to: CodeMirror.Pos(cur.line, end)
+      }
+    });
   }
 
   calculateWhichGroup(firstTime) {
@@ -257,10 +351,10 @@ export class DevToolsController {
       const desiredGroup = firstTime
         ? this.groups.filter(item => item.requestText)
         : this.groups.filter(
-            item =>
-              item.requestText &&
-              (item.end >= selection.line && item.start <= selection.line)
-          );
+          item =>
+            item.requestText &&
+            (item.end >= selection.line && item.start <= selection.line)
+        );
 
       // Place play button at first line from the selected group
       const cords = this.apiInputBox.cursorCoords({