hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Introduce feature for assigning keyboard shortcuts

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2023-03-30 09:35:51 +03:00
parent b5a085b55c
commit e3a6162448
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
16 changed files with 478 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -4606,6 +4606,10 @@
"resolved": "packages/infrastructure/jest",
"link": true
},
"node_modules/@k8slens/keyboard-shortcuts": {
"resolved": "packages/business-features/keyboard-shortcuts",
"link": true
},
"node_modules/@k8slens/legacy-extension-example": {
"resolved": "packages/legacy-extension-example",
"link": true
@ -37831,7 +37835,6 @@
"packages/business-features/keyboard-shortcuts": {
"name": "@k8slens/keyboard-shortcuts",
"version": "1.0.0-alpha.0",
"extraneous": true,
"license": "MIT",
"devDependencies": {
"@async-fn/jest": "^1.6.4",

6
packages/business-features/keyboard-shortcuts/.eslintrc.json Normal file
View File

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

1
packages/business-features/keyboard-shortcuts/.prettierrc Normal file
View File

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

21
packages/business-features/keyboard-shortcuts/README.md Normal file
View File

@ -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

10
packages/business-features/keyboard-shortcuts/index.ts Normal file
View File

@ -0,0 +1,10 @@
export { KeyboardShortcutListener } from "./src/keyboard-shortcut-listener";
export type { KeyboardShortcutListenerProps } from "./src/keyboard-shortcut-listener";
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";

1
packages/business-features/keyboard-shortcuts/jest.config.js Normal file
View File

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

46
packages/business-features/keyboard-shortcuts/package.json Normal file
View File

@ -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",
"dev": "webpack --mode=development --watch",
"test:unit": "jest --coverage --runInBand",
"lint": "lens-lint",
"lint:fix": "lens-lint --fix"
},
"peerDependencies": {
"@k8slens/feature-core": "^6.5.0-alpha.0",
"@k8slens/application": "6.5.0-alpha.2",
"@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"
}
}

19
packages/business-features/keyboard-shortcuts/src/__snapshots__/keyboard-shortcuts.test.tsx.snap Normal file
View File

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

17
packages/business-features/keyboard-shortcuts/src/feature.ts Normal file
View File

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

71
packages/business-features/keyboard-shortcuts/src/invoke-shortcut.injectable.ts Normal file
View File

@ -0,0 +1,71 @@
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";
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 }
: { ctrl: false, shift: false, altOrOption: false, meta: false, ...binding };
const toShortcutsWithMatchingBinding = (event: KeyboardEvent) => (shortcut: KeyboardShortcut) => {
const binding = toBindingWithDefaults(shortcut.binding);
const shiftModifierMatches = binding.shift === event.shiftKey;
const ctrlModifierMatches = binding.ctrl === event.ctrlKey;
const altModifierMatches = binding.altOrOption === event.altKey;
const metaModifierMatches = binding.meta === 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);
return (event) => {
const shortcutsToInvoke = pipeline(
getShortcuts(),
filter(toShortcutsWithMatchingBinding(event)),
filter(toShortcutsWithMatchingScope),
);
if (shortcutsToInvoke.length) {
shortcutsToInvoke.forEach((shortcut) => shortcut.invoke());
}
};
},
});
export default invokeShortcutInjectable;

15
packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-injection-token.ts Normal file
View File

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

41
packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-listener.tsx Normal file
View File

@ -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,
}),
},
);

12
packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-scope.tsx Normal file
View File

@ -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>
);

209
packages/business-features/keyboard-shortcuts/src/keyboard-shortcuts.test.tsx Normal file
View File

@ -0,0 +1,209 @@
import userEvent from "@testing-library/user-event";
import type { RenderResult } from "@testing-library/react";
import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable";
import { registerInjectableReact } from "@ogre-tools/injectable-react";
import { keyboardShortcutInjectionToken } from "./keyboard-shortcut-injection-token";
import { registerFeature } from "@k8slens/feature-core";
import { keyboardShortcutsFeature } from "./feature";
import { renderFor } from "@k8slens/test-utils";
import React from "react";
import { KeyboardShortcutScope } from "./keyboard-shortcut-scope";
import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery";
import { KeyboardShortcutListener } from "./keyboard-shortcut-listener";
const TestComponent = () => (
<KeyboardShortcutListener>
<div>
<div>
<KeyboardShortcutScope id="some-scope">
<div />
</KeyboardShortcutScope>
</div>
</div>
</KeyboardShortcutListener>
);
describe("keyboard-shortcuts", () => {
let di: DiContainer;
let invokeMock: jest.Mock;
beforeEach(() => {
di = createContainer("irrelevant");
registerInjectableReact(di);
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,
});
di.register(
someKeyboardShortcutInjectable,
someScopedKeyboardShortcutInjectable,
someOtherKeyboardShortcutInjectable,
);
});
describe("when rendered", () => {
let rendered: RenderResult;
let discover: Discover;
beforeEach(async () => {
const render = renderFor(di);
rendered = render(<TestComponent />);
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,
});
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 shortcutInjectable = getInjectable({
id: "shortcut",
instantiate: () => ({
binding,
invoke: invokeMock,
}),
injectionToken: keyboardShortcutInjectionToken,
});
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();
}
});
});
});
});

4
packages/business-features/keyboard-shortcuts/tsconfig.json Normal file
View File

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

1
packages/business-features/keyboard-shortcuts/webpack.config.js Normal file
View File

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