added keymap to editor to open file finder

clear file finder on close
esc closes the file finder

4 files changed, 56 insertions, 2 deletions

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 3e7cf69dbda..517e0bef4cf 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/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;
       }
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 065edd81d2c..1cf54920d63 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/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);
     });
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 001737d6ee8..b34bab93882 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,10 +1,12 @@
 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;
+        },
+      });
+    });
+  }
 }
diff --git a/app/assets/javascripts/ide/lib/keymap.json b/app/assets/javascripts/ide/lib/keymap.json
new file mode 100644
index 00000000000..131abfebbed
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/keymap.json
@@ -0,0 +1,11 @@
+[
+  {
+    "id": "file-finder",
+    "label": "File finder",
+    "bindings": ["CtrlCmd+KEY_P"],
+    "action": {
+      "name": "toggleFileFinder",
+      "params": true
+    }
+  }
+]