added keymap to editor to open file finder

clear file finder on close
esc closes the file finder

app/assets/javascripts/ide/components/file_finder/index.vue

@@ -45,7 +45,14 @@ export default {
   },
   watch: {
     fileFindVisible() {
-      this.$nextTick(() => this.$refs.searchInput.focus());
+      this.$nextTick(() => {
+        if (!this.fileFindVisible) {
+          this.searchText = '';
+          this.focusedIndex = 0;
+        } else {
+          this.$refs.searchInput.focus();
+        }
+      });
     },
     searchText() {
       if (this.searchText.trim() !== '') {
@@ -77,6 +84,10 @@ export default {
           // ENTER
           this.openFile(this.filteredBlobs[this.focusedIndex]);
           break;
+        case 27:
+          // ESC
+          this.toggleFileFinder(false);
+          break;
         default:
           break;
       }

app/assets/javascripts/ide/components/ide.vue

@@ -52,7 +52,7 @@ export default {
       return returnValue;
     };
 
-    Mousetrap.bind('t', e => {
+    Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
       e.preventDefault();
       this.toggleFileFinder(true);
     });

app/assets/javascripts/ide/lib/editor.js

 import _ from 'underscore';
+import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
 import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
 import editorOptions, { defaultEditorOptions } from './editor_options';
 import gitlabTheme from './themes/gl_theme';
+import keymap from './keymap.json';
 
 export const clearDomElement = el => {
   if (!el || !el.firstChild) return;
@@ -53,6 +55,8 @@ export default class Editor {
         )),
       );
 
+      this.addCommands();
+
       window.addEventListener('resize', this.debouncedUpdate, false);
     }
   }
@@ -73,6 +77,8 @@ export default class Editor {
         })),
       );
 
+      this.addCommands();
+
       window.addEventListener('resize', this.debouncedUpdate, false);
     }
   }
@@ -189,4 +195,30 @@ export default class Editor {
   static renderSideBySide(domElement) {
     return domElement.offsetWidth >= 700;
   }
+
+  addCommands() {
+    const getKeyCode = key => {
+      const monacoKeyMod = key.indexOf('KEY_') === 0;
+
+      return monacoKeyMod ? monaco.KeyCode[key] : monaco.KeyMod[key];
+    };
+
+    keymap.forEach(command => {
+      const keybindings = command.bindings.map(binding => {
+        const keys = binding.split('+');
+
+        return keys.length > 1 ? getKeyCode(keys[0]) | getKeyCode(keys[1]) : getKeyCode(keys[0]);
+      });
+
+      this.instance.addAction({
+        id: command.id,
+        label: command.label,
+        keybindings,
+        run() {
+          store.dispatch(command.action.name, command.action.params);
+          return null;
+        },
+      });
+    });
+  }
 }

app/assets/javascripts/ide/lib/keymap.json

+[
+  {
+    "id": "file-finder",
+    "label": "File finder",
+    "bindings": ["CtrlCmd+KEY_P"],
+    "action": {
+      "name": "toggleFileFinder",
+      "params": true
+    }
+  }
+]