Introduce Feature for Keyboard Shortcuts (#7442)

* Introduce feature for assigning keyboard shortcuts

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Enable keyboard shortcuts automatically instead of requiring explicit listener to be used in the application

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Start using keyboard shortcuts feature

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Update package-lock after rebase

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Tweak scripts for a package

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Introduce modifier for ctrl or command based on platform in use

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

---------

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

packages/business-features/keyboard-shortcuts/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/business-features/keyboard-shortcuts/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/business-features/keyboard-shortcuts/README.md

@@ -0,0 +1,21 @@
+# @k8slens/keyboard-shortcuts
+
+This Feature enables keyboard shortcuts in Lens
+
+# Usage
+
+```bash
+$ npm install @k8slens/keyboard-shortcuts
+```
+
+```typescript
+import { keyboardShortcutsFeature } from "@k8slens/keyboard-shortcuts";
+import { registerFeature } from "@k8slens/feature-core";
+import { createContainer } from "@ogre-tools/injectable";
+
+const di = createContainer("some-container");
+
+registerFeature(di, keyboardShortcutsFeature);
+```
+
+## Extendability

packages/business-features/keyboard-shortcuts/index.ts

@@ -0,0 +1,7 @@
+export { KeyboardShortcutScope } from "./src/keyboard-shortcut-scope";
+export type { KeyboardShortcutScopeProps } from "./src/keyboard-shortcut-scope";
+
+export { keyboardShortcutInjectionToken } from "./src/keyboard-shortcut-injection-token";
+export type { Binding, KeyboardShortcut } from "./src/keyboard-shortcut-injection-token";
+
+export { keyboardShortcutsFeature } from "./src/feature";

packages/business-features/keyboard-shortcuts/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

packages/business-features/keyboard-shortcuts/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@k8slens/keyboard-shortcuts",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Keyboard shortcuts for Lens",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "clean": "rimraf dist/",
+    "test:unit": "jest --coverage --runInBand",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/feature-core": "^6.5.0-alpha.0",
+    "@k8slens/react-application": "^1.0.0-alpha.0",
+    "@ogre-tools/injectable": "^15.1.2",
+    "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
+    "@ogre-tools/fp": "^15.1.2",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
+  }
+}

packages/business-features/keyboard-shortcuts/src/__snapshots__/keyboard-shortcuts.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`keyboard-shortcuts when application is started renders 1`] = `
+<body>
+  <div>
+    <div
+      data-keyboard-shortcut-scope="some-scope"
+      data-keyboard-shortcut-scope-test="some-scope"
+      tabindex="-1"
+    >
+      <div />
+    </div>
+  </div>
+</body>
+`;

packages/business-features/keyboard-shortcuts/src/feature.ts

@@ -0,0 +1,17 @@
+import { getFeature } from "@k8slens/feature-core";
+import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
+import { reactApplicationFeature } from "@k8slens/react-application";
+
+export const keyboardShortcutsFeature = getFeature({
+  id: "keyboard-shortcuts",
+
+  register: (di) => {
+    autoRegister({
+      di,
+      targetModule: module,
+      getRequireContexts: () => [require.context("./", true, /\.injectable\.(ts|tsx)$/)],
+    });
+  },
+
+  dependencies: [reactApplicationFeature],
+});

packages/business-features/keyboard-shortcuts/src/invoke-shortcut.injectable.ts

@@ -0,0 +1,94 @@
+import { pipeline } from "@ogre-tools/fp";
+import { filter, isString } from "lodash/fp";
+import { getInjectable } from "@ogre-tools/injectable";
+import {
+  Binding,
+  KeyboardShortcut,
+  keyboardShortcutInjectionToken,
+} from "./keyboard-shortcut-injection-token";
+import platformInjectable from "./platform.injectable";
+
+export type InvokeShortcut = (event: KeyboardEvent) => void;
+
+const toShortcutsWithMatchingScope = (shortcut: KeyboardShortcut) => {
+  const activeScopeElement = document.activeElement?.closest("[data-keyboard-shortcut-scope]");
+
+  if (!activeScopeElement) {
+    const shortcutIsRootLevel = !shortcut.scope;
+
+    return shortcutIsRootLevel;
+  }
+
+  const castedActiveScopeElementHtml = activeScopeElement as HTMLDivElement;
+
+  // eslint-disable-next-line xss/no-mixed-html
+  const activeScope = castedActiveScopeElementHtml.dataset.keyboardShortcutScope;
+
+  return shortcut.scope === activeScope;
+};
+
+const toBindingWithDefaults = (binding: Binding) =>
+  isString(binding)
+    ? {
+        code: binding,
+        shift: false,
+        ctrl: false,
+        altOrOption: false,
+        meta: false,
+        ctrlOrCommand: false,
+      }
+    : {
+        ctrl: false,
+        shift: false,
+        altOrOption: false,
+        meta: false,
+        ctrlOrCommand: false,
+        ...binding,
+      };
+
+const toShortcutsWithMatchingBinding =
+  (event: KeyboardEvent, platform: string) => (shortcut: KeyboardShortcut) => {
+    const binding = toBindingWithDefaults(shortcut.binding);
+
+    const shiftModifierMatches = binding.shift === event.shiftKey;
+    const altModifierMatches = binding.altOrOption === event.altKey;
+
+    const isMac = platform === "darwin";
+
+    const ctrlModifierMatches =
+      binding.ctrl === event.ctrlKey || (!isMac && binding.ctrlOrCommand === event.ctrlKey);
+
+    const metaModifierMatches =
+      binding.meta === event.metaKey || (isMac && binding.ctrlOrCommand === event.metaKey);
+
+    return (
+      event.code === binding.code &&
+      shiftModifierMatches &&
+      ctrlModifierMatches &&
+      altModifierMatches &&
+      metaModifierMatches
+    );
+  };
+
+const invokeShortcutInjectable = getInjectable({
+  id: "invoke-shortcut",
+
+  instantiate: (di): InvokeShortcut => {
+    const getShortcuts = () => di.injectMany(keyboardShortcutInjectionToken);
+    const platform = di.inject(platformInjectable);
+
+    return (event) => {
+      const shortcutsToInvoke = pipeline(
+        getShortcuts(),
+        filter(toShortcutsWithMatchingBinding(event, platform)),
+        filter(toShortcutsWithMatchingScope),
+      );
+
+      if (shortcutsToInvoke.length) {
+        shortcutsToInvoke.forEach((shortcut) => shortcut.invoke());
+      }
+    };
+  },
+});
+
+export default invokeShortcutInjectable;

packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-injection-token.ts

@@ -0,0 +1,22 @@
+import { getInjectionToken } from "@ogre-tools/injectable";
+
+export type Binding =
+  | string
+  | {
+      code: string;
+      shift?: boolean;
+      ctrl?: boolean;
+      altOrOption?: boolean;
+      meta?: boolean;
+      ctrlOrCommand?: boolean;
+    };
+
+export type KeyboardShortcut = {
+  binding: Binding;
+  invoke: () => void;
+  scope?: string;
+};
+
+export const keyboardShortcutInjectionToken = getInjectionToken<KeyboardShortcut>({
+  id: "keyboard-shortcut-injection-token",
+});

packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-listener-react-application-hoc.injectable.tsx

@@ -0,0 +1,10 @@
+import { getInjectable } from "@ogre-tools/injectable";
+import { KeyboardShortcutListener } from "./keyboard-shortcut-listener";
+import { reactApplicationHigherOrderComponentInjectionToken } from "@k8slens/react-application";
+
+export const keyboardShortcutListenerReactApplicationHocInjectable = getInjectable({
+  id: "keyboard-shortcut-listener-react-application-hoc",
+  instantiate: () => KeyboardShortcutListener,
+
+  injectionToken: reactApplicationHigherOrderComponentInjectionToken,
+});

packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-listener.tsx

@@ -0,0 +1,41 @@
+import { withInjectables } from "@ogre-tools/injectable-react";
+import React, { useEffect } from "react";
+
+import invokeShortcutInjectable, { InvokeShortcut } from "./invoke-shortcut.injectable";
+
+export interface KeyboardShortcutListenerProps {
+  children: React.ReactNode;
+}
+
+interface Dependencies {
+  invokeShortcut: InvokeShortcut;
+}
+
+const NonInjectedKeyboardShortcutListener = ({
+  children,
+  invokeShortcut,
+}: KeyboardShortcutListenerProps & Dependencies) => {
+  useEffect(() => {
+    document.addEventListener("keydown", invokeShortcut);
+
+    return () => {
+      document.removeEventListener("keydown", invokeShortcut);
+    };
+  });
+
+  return <>{children}</>;
+};
+
+export const KeyboardShortcutListener = withInjectables<
+  Dependencies,
+  KeyboardShortcutListenerProps
+>(
+  NonInjectedKeyboardShortcutListener,
+
+  {
+    getProps: (di, props) => ({
+      invokeShortcut: di.inject(invokeShortcutInjectable),
+      ...props,
+    }),
+  },
+);

packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-scope.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export interface KeyboardShortcutScopeProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const KeyboardShortcutScope = ({ id, children }: KeyboardShortcutScopeProps) => (
+  <div data-keyboard-shortcut-scope={id} data-keyboard-shortcut-scope-test={id} tabIndex={-1}>
+    {children}
+  </div>
+);

packages/business-features/keyboard-shortcuts/src/keyboard-shortcuts.test.tsx

@@ -0,0 +1,353 @@
+import userEvent from "@testing-library/user-event";
+import type { RenderResult } from "@testing-library/react";
+import { render } from "@testing-library/react";
+import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable";
+import { registerInjectableReact } from "@ogre-tools/injectable-react";
+import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
+import { keyboardShortcutInjectionToken } from "./keyboard-shortcut-injection-token";
+import { registerFeature } from "@k8slens/feature-core";
+import { keyboardShortcutsFeature } from "./feature";
+import React from "react";
+import { computed, runInAction } from "mobx";
+import { KeyboardShortcutScope } from "./keyboard-shortcut-scope";
+import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery";
+import { startApplicationInjectionToken } from "@k8slens/application";
+import { renderInjectionToken } from "@k8slens/react-application";
+import { reactApplicationChildrenInjectionToken } from "@k8slens/react-application";
+import platformInjectable from "./platform.injectable";
+
+describe("keyboard-shortcuts", () => {
+  let di: DiContainer;
+  let invokeMock: jest.Mock;
+  let rendered: RenderResult;
+
+  beforeEach(() => {
+    di = createContainer("irrelevant");
+
+    registerInjectableReact(di);
+    registerMobX(di);
+
+    runInAction(() => {
+      registerFeature(di, keyboardShortcutsFeature);
+    });
+
+    invokeMock = jest.fn();
+
+    const someKeyboardShortcutInjectable = getInjectable({
+      id: "some-keyboard-shortcut",
+
+      instantiate: () => ({
+        binding: "Escape",
+        invoke: () => invokeMock("esc-in-root"),
+      }),
+
+      injectionToken: keyboardShortcutInjectionToken,
+    });
+
+    const someScopedKeyboardShortcutInjectable = getInjectable({
+      id: "some-scoped-keyboard-shortcut",
+
+      instantiate: () => ({
+        binding: "Escape",
+        invoke: () => invokeMock("esc-in-scope"),
+        scope: "some-scope",
+      }),
+
+      injectionToken: keyboardShortcutInjectionToken,
+    });
+
+    const someOtherKeyboardShortcutInjectable = getInjectable({
+      id: "some-other-keyboard-shortcut",
+
+      instantiate: () => ({
+        binding: "something-else-than-esc",
+        invoke: () => invokeMock("something-else-than-esc"),
+      }),
+
+      injectionToken: keyboardShortcutInjectionToken,
+    });
+
+    const childComponentForScopeInjectable = getInjectable({
+      id: "some-child-component-for-scope",
+
+      instantiate: () => ({
+        id: "some-child-component-for-scope",
+
+        enabled: computed(() => true),
+
+        Component: () => (
+          <KeyboardShortcutScope id="some-scope">
+            <div />
+          </KeyboardShortcutScope>
+        ),
+      }),
+
+      injectionToken: reactApplicationChildrenInjectionToken,
+    });
+
+    runInAction(() => {
+      di.register(
+        someKeyboardShortcutInjectable,
+        someScopedKeyboardShortcutInjectable,
+        someOtherKeyboardShortcutInjectable,
+        childComponentForScopeInjectable,
+      );
+    });
+
+    di.override(renderInjectionToken, () => (application) => {
+      rendered = render(application);
+    });
+  });
+
+  describe("when application is started", () => {
+    let discover: Discover;
+
+    beforeEach(async () => {
+      const startApplication = di.inject(startApplicationInjectionToken);
+
+      await startApplication();
+
+      discover = discoverFor(() => rendered);
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("given focus is in the body, when pressing the shortcut, calls shortcut in global scope", () => {
+      userEvent.keyboard("{Escape}");
+
+      expect(invokeMock.mock.calls).toEqual([["esc-in-root"]]);
+    });
+
+    it("given focus inside a nested scope, when pressing the shortcut, calls only the callback for the scope", () => {
+      const result = discover.getSingleElement("keyboard-shortcut-scope", "some-scope");
+
+      const discoveredHtml = result.discovered as HTMLDivElement;
+
+      discoveredHtml.focus();
+
+      userEvent.keyboard("{Escape}");
+
+      expect(invokeMock.mock.calls).toEqual([["esc-in-scope"]]);
+    });
+
+    it("given conflicting shortcut, when pressing the shortcut, calls both callbacks", () => {
+      const conflictingShortcutInjectable = getInjectable({
+        id: "some-conflicting-keyboard-shortcut",
+
+        instantiate: () => ({
+          binding: "Escape",
+          invoke: () => invokeMock("conflicting-esc-in-root"),
+        }),
+
+        injectionToken: keyboardShortcutInjectionToken,
+      });
+
+      runInAction(() => {
+        di.register(conflictingShortcutInjectable);
+      });
+
+      userEvent.keyboard("{Escape}");
+
+      expect(invokeMock.mock.calls).toEqual([["esc-in-root"], ["conflicting-esc-in-root"]]);
+    });
+
+    [
+      {
+        scenario: "given shortcut without modifiers, when shortcut is pressed, calls the callback",
+        binding: { code: "Escape" },
+        keyboard: "{Escape}",
+        shouldCallCallback: true,
+      },
+      {
+        scenario:
+          "given shortcut without modifiers, when shortcut is pressed but with modifier, does not call the callback",
+        binding: { code: "F1" },
+        keyboard: "{Meta>}[F1]",
+        shouldCallCallback: false,
+      },
+      {
+        scenario: "given shortcut with meta modifier, when shortcut is pressed, calls the callback",
+
+        binding: { meta: true, code: "F1" },
+        keyboard: "{Meta>}[F1]",
+        shouldCallCallback: true,
+      },
+      {
+        scenario:
+          "given shortcut with shift modifier, when shortcut is pressed, calls the callback",
+
+        binding: { shift: true, code: "F1" },
+        keyboard: "{Shift>}[F1]",
+        shouldCallCallback: true,
+      },
+      {
+        scenario: "given shortcut with alt modifier, when shortcut is pressed, calls the callback",
+        binding: { altOrOption: true, code: "F1" },
+        keyboard: "{Alt>}[F1]",
+        shouldCallCallback: true,
+      },
+      {
+        scenario: "given shortcut with ctrl modifier, when shortcut is pressed, calls the callback",
+        binding: { ctrl: true, code: "F1" },
+        keyboard: "{Control>}[F1]",
+        shouldCallCallback: true,
+      },
+      {
+        scenario: "given shortcut with all modifiers, when shortcut is pressed, calls the callback",
+
+        binding: { ctrl: true, altOrOption: true, shift: true, meta: true, code: "F1" },
+        keyboard: "{Meta>}{Shift>}{Alt>}{Control>}[F1]",
+        shouldCallCallback: true,
+      },
+    ].forEach(({ binding, keyboard, scenario, shouldCallCallback }) => {
+      // eslint-disable-next-line jest/valid-title
+      it(scenario, () => {
+        const invokeMock = jest.fn();
+
+        const shortcutInjectable = getInjectable({
+          id: "shortcut",
+
+          instantiate: () => ({
+            binding,
+            invoke: invokeMock,
+          }),
+
+          injectionToken: keyboardShortcutInjectionToken,
+        });
+
+        runInAction(() => {
+          di.register(shortcutInjectable);
+        });
+
+        userEvent.keyboard(keyboard);
+
+        if (shouldCallCallback) {
+          // eslint-disable-next-line jest/no-conditional-expect
+          expect(invokeMock).toHaveBeenCalled();
+        } else {
+          // eslint-disable-next-line jest/no-conditional-expect
+          expect(invokeMock).not.toHaveBeenCalled();
+        }
+      });
+    });
+  });
+
+  describe("given in mac and keyboard shortcut with modifier for ctrl or command", () => {
+    beforeEach(async () => {
+      di.override(platformInjectable, () => "darwin");
+
+      invokeMock = jest.fn();
+
+      const shortcutInjectable = getInjectable({
+        id: "shortcut",
+
+        instantiate: () => ({
+          binding: { code: "KeyK", ctrlOrCommand: true },
+          invoke: invokeMock,
+        }),
+
+        injectionToken: keyboardShortcutInjectionToken,
+      });
+
+      runInAction(() => {
+        di.register(shortcutInjectable);
+      });
+
+      const startApplication = di.inject(startApplicationInjectionToken);
+
+      await startApplication();
+    });
+
+    it("when pressing the keyboard shortcut with command, calls the callback", () => {
+      userEvent.keyboard("{Meta>}[KeyK]");
+
+      expect(invokeMock).toHaveBeenCalled();
+    });
+
+    it("when pressing the keyboard shortcut with ctrl, does not call the callback", () => {
+      userEvent.keyboard("{Control>}[KeyK]");
+
+      expect(invokeMock).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("given in windows and keyboard shortcut with modifier for ctrl or command", () => {
+    beforeEach(async () => {
+      di.override(platformInjectable, () => "win32");
+
+      invokeMock = jest.fn();
+
+      const shortcutInjectable = getInjectable({
+        id: "shortcut",
+
+        instantiate: () => ({
+          binding: { code: "KeyK", ctrlOrCommand: true },
+          invoke: invokeMock,
+        }),
+
+        injectionToken: keyboardShortcutInjectionToken,
+      });
+
+      runInAction(() => {
+        di.register(shortcutInjectable);
+      });
+
+      const startApplication = di.inject(startApplicationInjectionToken);
+
+      await startApplication();
+    });
+
+    it("when pressing the keyboard shortcut with windows, does not call the callback", () => {
+      userEvent.keyboard("{Meta>}[KeyK]");
+
+      expect(invokeMock).not.toHaveBeenCalled();
+    });
+
+    it("when pressing the keyboard shortcut with ctrl, calls the callback", () => {
+      userEvent.keyboard("{Control>}[KeyK]");
+
+      expect(invokeMock).toHaveBeenCalled();
+    });
+  });
+
+  describe("given in any other platform and keyboard shortcut with modifier for ctrl or command", () => {
+    beforeEach(async () => {
+      di.override(platformInjectable, () => "some-other-platform");
+
+      invokeMock = jest.fn();
+
+      const shortcutInjectable = getInjectable({
+        id: "shortcut",
+
+        instantiate: () => ({
+          binding: { code: "KeyK", ctrlOrCommand: true },
+          invoke: invokeMock,
+        }),
+
+        injectionToken: keyboardShortcutInjectionToken,
+      });
+
+      runInAction(() => {
+        di.register(shortcutInjectable);
+      });
+
+      const startApplication = di.inject(startApplicationInjectionToken);
+
+      await startApplication();
+    });
+
+    it("when pressing the keyboard shortcut with meta, does not call the callback", () => {
+      userEvent.keyboard("{Meta>}[KeyK]");
+
+      expect(invokeMock).not.toHaveBeenCalled();
+    });
+
+    it("when pressing the keyboard shortcut with ctrl, calls the callback", () => {
+      userEvent.keyboard("{Control>}[KeyK]");
+
+      expect(invokeMock).toHaveBeenCalled();
+    });
+  });
+});

packages/business-features/keyboard-shortcuts/src/platform.injectable.ts

@@ -0,0 +1,11 @@
+import { getInjectable } from "@ogre-tools/injectable";
+
+export const allPlatforms = ["win32", "darwin", "linux"] as const;
+
+const platformInjectable = getInjectable({
+  id: "platform",
+  instantiate: () => process.platform as (typeof allPlatforms)[number],
+  causesSideEffects: true,
+});
+
+export default platformInjectable;

packages/business-features/keyboard-shortcuts/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}

packages/business-features/keyboard-shortcuts/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;

packages/open-lens/package.json

@@ -190,6 +190,7 @@
     "@k8slens/core": "^6.5.0-alpha.3",
     "@k8slens/ensure-binaries": "^6.5.0-alpha.1",
     "@k8slens/feature-core": "^6.5.0-alpha.1",
+    "@k8slens/keyboard-shortcuts": "^1.0.0-alpha.0",
     "@k8slens/legacy-extension-example": "^1.0.0-alpha.1",
     "@k8slens/legacy-extensions": "^1.0.0-alpha.1",
     "@k8slens/messaging": "^1.0.0-alpha.1",

packages/open-lens/src/renderer/index.ts

@@ -15,6 +15,7 @@ import { createContainer } from "@ogre-tools/injectable";
 import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
 import { registerInjectableReact } from "@ogre-tools/injectable-react";
 import { messagingFeatureForRenderer } from "@k8slens/messaging-for-renderer";
+import { keyboardShortcutsFeature } from "@k8slens/keyboard-shortcuts";
 import { reactApplicationFeature } from "@k8slens/react-application";
 
 const environment = "renderer";
@@ -30,6 +31,7 @@ runInAction(() => {
     di,
     applicationFeature,
     messagingFeatureForRenderer,
+    keyboardShortcutsFeature,
     reactApplicationFeature
   );