From aadde87f42e4b705b652f009a9681c48de2b9c61 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 19 Apr 2018 12:04:49 +0100
Subject: [PATCH] moved keycodes constants to common lib file updated markup to
 use buttons instead of links

---
 .../javascripts/ide/components/file_finder/index.vue | 12 +++++++-----
 .../javascripts/ide/components/file_finder/item.vue  |  6 +++---
 app/assets/javascripts/ide/constants.js              |  4 ----
 app/assets/javascripts/lib/utils/keycodes.js         |  4 ++++
 app/assets/stylesheets/framework/common.scss         |  1 +
 .../ide/components/file_finder/index_spec.js         |  2 +-
 6 files changed, 16 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/lib/utils/keycodes.js

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index deddc38c970..ea2b13a8b21 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -8,11 +8,13 @@ import {
   MAX_FILE_FINDER_RESULTS,
   FILE_FINDER_ROW_HEIGHT,
   FILE_FINDER_EMPTY_ROW_HEIGHT,
+} from '../../constants';
+import {
   UP_KEY_CODE,
   DOWN_KEY_CODE,
   ENTER_KEY_CODE,
   ESC_KEY_CODE,
-} from '../../constants';
+} from '../../../lib/utils/keycodes';
 
 export default {
   components: {
@@ -191,7 +193,7 @@ export default {
         ></i>
         <i
           role="button"
-          aria-hidden="true"
+          :aria-label="__('Clear search input')"
           class="fa fa-times dropdown-input-clear"
           :class="{
             show: showClearInputButton
@@ -225,16 +227,16 @@ export default {
           </template>
           <li
             v-else
-            class="dropdown-menu-empty-itemhidden"
+            class="dropdown-menu-empty-item"
           >
-            <a href="#">
+            <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>
               <template v-else>
                 {{ __('No files found.') }}
               </template>
-            </a>
+            </div>
           </li>
         </virtual-list>
       </div>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index fc29ef01f6a..d4427420207 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -58,8 +58,8 @@ export default {
 </script>
 
 <template>
-  <a
-    href="#"
+  <button
+    type="button"
     class="diff-changed-file"
     :class="{
       'is-focused': focused,
@@ -109,5 +109,5 @@ export default {
         :file="file"
       />
     </span>
-  </a>
+  </button>
 </template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 09ee9d39d43..b06da9f95d1 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -2,10 +2,6 @@
 export const MAX_FILE_FINDER_RESULTS = 40;
 export const FILE_FINDER_ROW_HEIGHT = 55;
 export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
-export const UP_KEY_CODE = 38;
-export const DOWN_KEY_CODE = 40;
-export const ENTER_KEY_CODE = 13;
-export const ESC_KEY_CODE = 27;
 
 // Commit message textarea
 export const MAX_TITLE_LENGTH = 50;
diff --git a/app/assets/javascripts/lib/utils/keycodes.js b/app/assets/javascripts/lib/utils/keycodes.js
new file mode 100644
index 00000000000..5e0f9b612a2
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/keycodes.js
@@ -0,0 +1,4 @@
+export const UP_KEY_CODE = 38;
+export const DOWN_KEY_CODE = 40;
+export const ENTER_KEY_CODE = 13;
+export const ESC_KEY_CODE = 27;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index d0dda50a835..e058a0b35b7 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -472,6 +472,7 @@ img.emoji {
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-8 { margin-bottom: $grid-size; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }
diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
index 594427ba14e..4f208e946d2 100644
--- a/spec/javascripts/ide/components/file_finder/index_spec.js
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
 import FindFileComponent from '~/ide/components/file_finder/index.vue';
-import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/ide/constants';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import router from '~/ide/ide_router';
 import { file, resetStore } from '../../helpers';
 import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';