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

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

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2023-03-31 08:36:24 +03:00
parent e3a6162448
commit a0cfeb18c0
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
7 changed files with 356 additions and 5297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5540
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
packages/business-features/keyboard-shortcuts/index.ts
View File

@ -1,6 +1,3 @@
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";

2
packages/business-features/keyboard-shortcuts/package.json
View File

@ -32,7 +32,7 @@
},
"peerDependencies": {
"@k8slens/feature-core": "^6.5.0-alpha.0",
"@k8slens/application": "6.5.0-alpha.2",
"@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",

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

@ -1,18 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`keyboard-shortcuts when rendered renders 1`] = `
exports[`keyboard-shortcuts when application is started 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
data-keyboard-shortcut-scope="some-scope"
data-keyboard-shortcut-scope-test="some-scope"
tabindex="-1"
>
<div />
</div>
</div>
</body>

4
packages/business-features/keyboard-shortcuts/src/feature.ts
View File

@ -1,6 +1,6 @@
import { getFeature } from "@k8slens/feature-core";
import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
import { applicationFeature } from "@k8slens/application";
import { reactApplicationFeature } from "@k8slens/react-application";
export const keyboardShortcutsFeature = getFeature({
id: "keyboard-shortcuts",
@ -13,5 +13,5 @@ export const keyboardShortcutsFeature = getFeature({
});
},
dependencies: [applicationFeature],
dependencies: [reactApplicationFeature],
});

10
packages/business-features/keyboard-shortcuts/src/keyboard-shortcut-listener-react-application-hoc.injectable.tsx Normal file
View File

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

76
packages/business-features/keyboard-shortcuts/src/keyboard-shortcuts.test.tsx
View File

@ -1,38 +1,34 @@
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 { renderFor } from "@k8slens/test-utils";
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 { KeyboardShortcutListener } from "./keyboard-shortcut-listener";
const TestComponent = () => (
<KeyboardShortcutListener>
<div>
<div>
<KeyboardShortcutScope id="some-scope">
<div />
</KeyboardShortcutScope>
</div>
</div>
</KeyboardShortcutListener>
);
import { startApplicationInjectionToken } from "@k8slens/application";
import { renderInjectionToken } from "@k8slens/react-application";
import { reactApplicationChildrenInjectionToken } from "@k8slens/react-application";
describe("keyboard-shortcuts", () => {
let di: DiContainer;
let invokeMock: jest.Mock;
let rendered: RenderResult;
beforeEach(() => {
di = createContainer("irrelevant");
registerInjectableReact(di);
registerMobX(di);
registerFeature(di, keyboardShortcutsFeature);
runInAction(() => {
registerFeature(di, keyboardShortcutsFeature);
});
invokeMock = jest.fn();
@ -70,21 +66,45 @@ describe("keyboard-shortcuts", () => {
injectionToken: keyboardShortcutInjectionToken,
});
di.register(
someKeyboardShortcutInjectable,
someScopedKeyboardShortcutInjectable,
someOtherKeyboardShortcutInjectable,
);
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 rendered", () => {
let rendered: RenderResult;
describe("when application is started", () => {
let discover: Discover;
beforeEach(async () => {
const render = renderFor(di);
const startApplication = di.inject(startApplicationInjectionToken);
rendered = render(<TestComponent />);
await startApplication();
discover = discoverFor(() => rendered);
});
@ -123,7 +143,9 @@ describe("keyboard-shortcuts", () => {
injectionToken: keyboardShortcutInjectionToken,
});
di.register(conflictingShortcutInjectable);
runInAction(() => {
di.register(conflictingShortcutInjectable);
});
userEvent.keyboard("{Escape}");
@ -192,7 +214,9 @@ describe("keyboard-shortcuts", () => {
injectionToken: keyboardShortcutInjectionToken,
});
di.register(shortcutInjectable);
runInAction(() => {
di.register(shortcutInjectable);
});
userEvent.keyboard(keyboard);