[KeyComboTag] Fix arrow key icon rendering (#7493)

Author: ggdouglas

packages/core/src/components/hotkeys/keyComboTag.tsx

@@ -51,10 +51,10 @@ const KEY_ICONS: Record<string, { icon: React.JSX.Element; iconTitle: string; is
 
 /** Reverse table of some CONFIG_ALIASES fields, for display by KeyComboTag */
 export const DISPLAY_ALIASES: Record<string, string> = {
-    ArrowDown: "down",
-    ArrowLeft: "left",
-    ArrowRight: "right",
-    ArrowUp: "up",
+    arrowdown: "down",
+    arrowleft: "left",
+    arrowright: "right",
+    arrowup: "up",
 };
 
 export interface KeyComboTagProps extends Props {
@@ -93,7 +93,7 @@ export class KeyComboTagInternal extends AbstractPureComponent<KeyComboTagIntern
     }
 
     private renderKey = (key: string, index: number) => {
-        const keyString = DISPLAY_ALIASES[key] ?? key;
+        const keyString = DISPLAY_ALIASES[key.toLowerCase()] ?? key;
         const icon = this.getKeyIcon(key);
         const reactKey = `key-${index}`;
         return (
@@ -114,7 +114,7 @@ export class KeyComboTagInternal extends AbstractPureComponent<KeyComboTagIntern
 
     private getKeyIcon(key: string) {
         const { platformOverride } = this.props;
-        const icon = KEY_ICONS[key];
+        const icon = KEY_ICONS[key.toLowerCase()];
         if (icon?.isMacOnly && !isMac(platformOverride)) {
             return undefined;
         }

packages/core/test/hotkeys/keyComboTagTests.tsx

@@ -22,20 +22,32 @@ import { KeyComboTagInternal } from "../../src/components/hotkeys/keyComboTag";
 
 describe("KeyCombo", () => {
     it("renders key combo", () => {
-        render(<KeyComboTagInternal combo="cmd+C" platformOverride="Mac" />);
-        expect(screen.getByText("C")).not.to.be.undefined;
+        const { container } = render(<KeyComboTagInternal combo="cmd+C" platformOverride="Mac" />);
+        const icon = container.querySelector('[data-icon="key-command"]');
+
+        expect(icon).to.exist;
+        expect(screen.getByText("cmd")).to.exist;
+        expect(screen.getByText("C")).to.exist;
     });
 
     it("should render minimal key combos on Mac using icons", () => {
         render(<KeyComboTagInternal combo="mod+C" minimal={true} platformOverride="Mac" />);
-        expect(() => screen.getByText("cmd + C", { exact: false })).to.throw;
+
+        expect(screen.getByText("C")).to.exist;
+        expect(screen.queryByText("ctrl")).to.not.exist;
     });
 
     it("should render minimal key combos on non-Macs using text", () => {
         render(<KeyComboTagInternal combo="mod+C" minimal={true} platformOverride="Win32" />);
-        const text = screen.getByText("ctrl + C", { exact: false }).innerText;
-        expect(text).to.contain("ctrl");
-        expect(text).to.contain("+");
-        expect(text).to.contain("C");
+
+        expect(screen.getByText("ctrl + C")).to.exist;
+    });
+
+    it("should render aliased keys with correct icon and text", () => {
+        const { container } = render(<KeyComboTagInternal combo="arrowleft" />);
+        const icon = container.querySelector('[data-icon="arrow-left"]');
+
+        expect(icon).to.exist;
+        expect(screen.getByText("left")).to.exist;
     });
 });