From 1150bc2c87410f52bc658d1b060ad4a2d9f72bc3 Mon Sep 17 00:00:00 2001 From: Jaired Jawed Date: Mon, 5 May 2025 12:06:52 -0500 Subject: [PATCH] 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 | 3 +++ ui/app/components/console/command-input.js | 7 +++---- ui/app/components/console/ui-panel.js | 4 ++-- ui/app/components/role-edit.js | 5 +++-- ui/app/components/secret-create-or-update.js | 5 +++-- ui/app/components/transit-edit.js | 5 +++-- ui/app/lib/console-helpers.ts | 6 +++--- ui/app/services/console.js | 4 ++-- ui/lib/core/addon/components/navigate-input.js | 9 ++++----- ui/lib/core/addon/utils/key-codes.js | 17 ----------------- ui/lib/core/addon/utils/keys.js | 18 ++++++++++++++++++ .../kubernetes/addon/components/page/roles.js | 5 +++-- ui/lib/kv/addon/components/kv-list-filter.js | 5 +++-- ui/tests/pages/components/console/ui-panel.js | 9 ++++----- 14 files changed, 54 insertions(+), 48 deletions(-) create mode 100644 changelog/30493.txt delete mode 100644 ui/lib/core/addon/utils/key-codes.js create mode 100644 ui/lib/core/addon/utils/keys.js diff --git a/changelog/30493.txt b/changelog/30493.txt new file mode 100644 index 0000000000..49b399e9db --- /dev/null +++ b/changelog/30493.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Replaces all instances of the deprecated event.keyCode with event.key +``` diff --git a/ui/app/components/console/command-input.js b/ui/app/components/console/command-input.js index bdeb404fa4..cd8ba78579 100644 --- a/ui/app/components/console/command-input.js +++ b/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); diff --git a/ui/app/components/console/ui-panel.js b/ui/app/components/console/ui-panel.js index 91f7285426..5dd61fec8e 100644 --- a/ui/app/components/console/ui-panel.js +++ b/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); }); }, diff --git a/ui/app/components/role-edit.js b/ui/app/components/role-edit.js index d6c1af20cf..a53601ecf8 100644 --- a/ui/app/components/role-edit.js +++ b/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); diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js index 8bf517624d..1bc1e02acb 100644 --- a/ui/app/components/secret-create-or-update.js +++ b/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; diff --git a/ui/app/components/transit-edit.js b/ui/app/components/transit-edit.js index 49cea68c04..2604c50036 100644 --- a/ui/app/components/transit-edit.js +++ b/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); diff --git a/ui/app/lib/console-helpers.ts b/ui/app/lib/console-helpers.ts index 4c51f3484f..9ca86c53f4 100644 --- a/ui/app/lib/console-helpers.ts +++ b/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; diff --git a/ui/app/services/console.js b/ui/app/services/console.js index 47f653e1e5..292ec83ede 100644 --- a/ui/app/services/console.js +++ b/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); diff --git a/ui/lib/core/addon/components/navigate-input.js b/ui/lib/core/addon/components/navigate-input.js index 12f2d0ca14..b4d85d3276 100644 --- a/ui/lib/core/addon/components/navigate-input.js +++ b/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); } } diff --git a/ui/lib/core/addon/utils/key-codes.js b/ui/lib/core/addon/utils/key-codes.js deleted file mode 100644 index 4c0d933d0d..0000000000 --- a/ui/lib/core/addon/utils/key-codes.js +++ /dev/null @@ -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, -}; diff --git a/ui/lib/core/addon/utils/keys.js b/ui/lib/core/addon/utils/keys.js new file mode 100644 index 0000000000..229cc0ec85 --- /dev/null +++ b/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', +}; diff --git a/ui/lib/kubernetes/addon/components/page/roles.js b/ui/lib/kubernetes/addon/components/page/roles.js index 8735d597e4..f60b08f6a7 100644 --- a/ui/lib/kubernetes/addon/components/page/roles.js +++ b/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(); } diff --git a/ui/lib/kv/addon/components/kv-list-filter.js b/ui/lib/kv/addon/components/kv-list-filter.js index 384f74c6e7..49bad80571 100644 --- a/ui/lib/kv/addon/components/kv-list-filter.js +++ b/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; diff --git a/ui/tests/pages/components/console/ui-panel.js b/ui/tests/pages/components/console/ui-panel.js index 6556a5e77f..1e430b2fd8 100644 --- a/ui/tests/pages/components/console/ui-panel.js +++ b/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) {