Replace e.keyCode with e.key (#30493)

* remove e.keyCode in favor of e.key

* remove key-codes.js

* add changelog

* update to satisfy pr comments

* changes

* changes

changelog/30493.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Replaces all instances of the deprecated event.keyCode with event.key
+```

ui/app/components/console/command-input.js

@@ -4,7 +4,7 @@
  */
 
 import Component from '@ember/component';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 
 export default Component.extend({
   onExecuteCommand() {},
@@ -16,15 +16,14 @@ export default Component.extend({
 
   actions: {
     handleKeyUp(event) {
-      const keyCode = event.keyCode;
       const val = event.target.value;
-      switch (keyCode) {
+      switch (event.key) {
         case keys.ENTER:
           this.onExecuteCommand(val);
           break;
         case keys.UP:
         case keys.DOWN:
-          this.onShiftCommand(keyCode);
+          this.onShiftCommand(event.key);
           break;
         default:
           this.onValueUpdate(val);

ui/app/components/console/ui-panel.js

@@ -146,8 +146,8 @@ export default Component.extend({
     }
   }),
 
-  shiftCommandIndex(keyCode) {
-    this.console.shiftCommandIndex(keyCode, (val) => {
+  shiftCommandIndex(key) {
+    this.console.shiftCommandIndex(key, (val) => {
       this.set('inputValue', val);
     });
   },

ui/app/components/role-edit.js

@@ -10,7 +10,7 @@ import { task, waitForEvent } from 'ember-concurrency';
 import Component from '@ember/component';
 import { set } from '@ember/object';
 import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
@@ -49,7 +49,8 @@ export default Component.extend(FocusOnInsertMixin, {
   },
 
   onEscape(e) {
-    if (e.keyCode !== keys.ESC || this.mode !== 'show') {
+    const isEscKeyPressed = keys.ESC.includes(e.key);
+    if (isEscKeyPressed || this.mode !== 'show') {
       return;
     }
     this.transitionToRoute(LIST_ROOT_ROUTE);

ui/app/components/secret-create-or-update.js

@@ -29,7 +29,7 @@
 import Component from '@glimmer/component';
 import ControlGroupError from 'vault/lib/control-group-error';
 import Ember from 'ember';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 import { action, set } from '@ember/object';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
@@ -89,7 +89,8 @@ export default class SecretCreateOrUpdate extends Component {
     this.validationErrorCount = values.filter(Boolean).length;
   }
   onEscape(e) {
-    if (e.keyCode !== keys.ESC || this.args.mode !== 'show') {
+    const isEscKeyPressed = keys.ESC.includes(e.key);
+    if (isEscKeyPressed || this.args.mode !== 'show') {
       return;
     }
     const parentKey = this.args.model.parentKey;

ui/app/components/transit-edit.js

@@ -11,7 +11,7 @@ import { task, waitForEvent } from 'ember-concurrency';
 import { set } from '@ember/object';
 
 import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
@@ -83,7 +83,8 @@ export default Component.extend(FocusOnInsertMixin, {
   },
 
   onEscape(e) {
-    if (e.keyCode !== keys.ESC || this.mode !== 'show') {
+    const isEscKeyPressed = keys.ESC.includes(e.key);
+    if (isEscKeyPressed || this.mode !== 'show') {
       return;
     }
     this.transitionToRoute(LIST_ROOT_ROUTE);

ui/app/lib/console-helpers.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 import { parse } from 'shell-quote';
 import argTokenizer from './arg-tokenizer';
 
@@ -212,7 +212,7 @@ interface CommandLog {
   type: string;
   content?: string;
 }
-export function shiftCommandIndex(keyCode: number, history: CommandLog[], index: number) {
+export function shiftCommandIndex(key: string, history: CommandLog[], index: number) {
   let newInputValue;
   const commandHistoryLength = history.length;
 
@@ -220,7 +220,7 @@ export function shiftCommandIndex(keyCode: number, history: CommandLog[], index:
     return [];
   }
 
-  if (keyCode === keys.UP) {
+  if (key === keys.UP) {
     index -= 1;
     if (index < 0) {
       index = commandHistoryLength - 1;

ui/app/services/console.js

@@ -34,8 +34,8 @@ export default class ConsoleService extends Service {
     return getOwner(this).lookup('adapter:console');
   }
 
-  shiftCommandIndex(keyCode, setCommandFn = () => {}) {
-    const [newIndex, newCommand] = shiftCommandIndex(keyCode, this.commandHistory, this.commandIndex);
+  shiftCommandIndex(key, setCommandFn = () => {}) {
+    const [newIndex, newCommand] = shiftCommandIndex(key, this.commandHistory, this.commandIndex);
     if (newCommand !== undefined && newIndex !== undefined) {
       this.commandIndex = newIndex;
       setCommandFn(newCommand);

ui/lib/core/addon/components/navigate-input.js

@@ -12,7 +12,7 @@ import Component from '@glimmer/component';
 
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 import { keyIsFolder, parentKeyForKey } from 'core/utils/key-utils';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 
 /**
  * @module NavigateInput
@@ -224,18 +224,17 @@ export default class NavigateInput extends Component {
   }
   @action
   handleKeyPress(event) {
-    if (event.keyCode === keys.TAB) {
+    if (event.key === keys.TAB) {
       this.onTab(event);
     }
   }
   @action
   handleKeyUp(event) {
-    const keyCode = event.keyCode;
     const val = event.target.value;
-    if (keyCode === keys.ENTER) {
+    if (event.key === keys.ENTER) {
       this.onEnter(val);
     }
-    if (keyCode === keys.ESC) {
+    if (keys.ESC.includes(event.key)) {
       this.onEscape(val);
     }
   }

ui/lib/core/addon/utils/key-codes.js

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-// a map of keyCode for use in keyboard event handlers
-export default {
-  ENTER: 13,
-  ESC: 27,
-  TAB: 9,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  T: 116,
-  BACKSPACE: 8,
-};

ui/lib/core/addon/utils/keys.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// a map of keyCode for use in keyboard event handlers
+export default {
+  ENTER: 'Enter',
+  // some older browsers use 'Esc' instead of 'Escape'
+  ESC: ['Escape', 'Esc'],
+  TAB: 'Tab',
+  LEFT: 'ArrowLeft',
+  UP: 'ArrowUp',
+  RIGHT: 'ArrowRight',
+  DOWN: 'ArrowDown',
+  T: 'T',
+  BACKSPACE: 'Backspace',
+};

ui/lib/kubernetes/addon/components/page/roles.js

@@ -9,7 +9,7 @@ import { action } from '@ember/object';
 import { getOwner } from '@ember/owner';
 import errorMessage from 'vault/utils/error-message';
 import { tracked } from '@glimmer/tracking';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 
 /**
  * @module Roles
@@ -44,7 +44,8 @@ export default class RolesPageComponent extends Component {
 
   @action
   handleKeyDown(event) {
-    if (event.keyCode === keys.ESC) {
+    const isEscKeyPressed = keys.ESC.includes(event.key);
+    if (isEscKeyPressed) {
       // On escape, transition to roles index route.
       this.navigate();
     }

ui/lib/kv/addon/components/kv-list-filter.js

@@ -7,7 +7,7 @@ import Ember from 'ember';
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { action } from '@ember/object';
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 import { keyIsFolder, parentKeyForKey, keyWithoutParentKey } from 'core/utils/key-utils';
 import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
@@ -55,7 +55,8 @@ export default class KvListFilterComponent extends Component {
 
   @action
   handleKeyDown(event) {
-    if (event.keyCode === keys.ESC) {
+    const isEscKeyPressed = keys.ESC.includes(event.key);
+    if (isEscKeyPressed) {
       // On escape, transition to the nearest parentDirectory.
       // If no parentDirectory, then to the list route.
       const input = event.target.value;

ui/tests/pages/components/console/ui-panel.js

@@ -6,8 +6,7 @@
 import { text, triggerable, clickable, collection, fillable, value, isPresent } from 'ember-cli-page-object';
 import { getter } from 'ember-cli-page-object/macros';
 import { settled } from '@ember/test-helpers';
-
-import keys from 'core/utils/key-codes';
+import keys from 'core/utils/keys';
 
 export default {
   toggle: clickable('[data-test-console-toggle]'),
@@ -46,13 +45,13 @@ export default {
     return this.logJSONItems.objectAt(count - 1).text;
   }),
   up: triggerable('keyup', '[data-test-component="console/command-input"] input', {
-    eventProperties: { keyCode: keys.UP },
+    eventProperties: { key: keys.UP },
   }),
   down: triggerable('keyup', '[data-test-component="console/command-input"] input', {
-    eventProperties: { keyCode: keys.DOWN },
+    eventProperties: { key: keys.DOWN },
   }),
   enter: triggerable('keyup', '[data-test-component="console/command-input"] input', {
-    eventProperties: { keyCode: keys.ENTER },
+    eventProperties: { key: keys.ENTER },
   }),
   hasInput: isPresent('[data-test-component="console/command-input"] input'),
   runCommands: async function (commands, shouldToggle = true) {