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

Replace implementation for old top-bar items for losing competition

Browse Source 
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso 2022-08-16 14:03:13 +03:00 committed by Janne Savolainen
parent ba6c349b5e
commit 23aeb96679
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
6 changed files with 68 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap
View File

@ -248,16 +248,15 @@ exports[`extendability-using-extension-api given an extension with top-bar items
arrow_forward
</span>
</i>
</div>
<div
class="items"
>
<div
data-testid="some-top-bar-item"
>
Some-content
</div>
</div>
<div
class="items"
/>
</div>
<main>
<div

48
src/features/top-bar/extension-api/renderer/legacy-extension-api-registrator-for-top-bar-items.injectable.ts Normal file
View File

@ -0,0 +1,48 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import { reject } from "lodash/fp";
import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
import { pipeline } from "@ogre-tools/fp";
import topBarItemInjectionToken from "../../../../renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token";
import { computed } from "mobx";
const legacyExtensionApiRegistratorForTopBarItemsInjectable = getInjectable({
id: "legacy-extension-api-registrator-for-top-bar-items",
instantiate: () => (ext) => {
const extension = ext as LensRendererExtension;
return pipeline(
extension.topBarItems,
reject((registration) => !registration?.components?.Item),
(validTopBarRegistrations) =>
validTopBarRegistrations.map((registration, index) => {
const id = `extension-top-bar-item-for-${extension.sanitizedExtensionId}-${index}`;
return getInjectable({
id,
injectionToken: topBarItemInjectionToken,
instantiate: () => ({
id,
isShown: computed(() => true),
// Note: legacy extension-API does not specify order of top-bar items, and therefore an arbitrary number is used. This makes items originating from extension appear in volatile order between each other.
orderNumber: 100,
Component: registration.components.Item,
}),
});
}),
);
},
injectionToken: extensionRegistratorInjectionToken,
});
export default legacyExtensionApiRegistratorForTopBarItemsInjectable;

15
src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts
View File

@ -2,18 +2,27 @@
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { pipeline } from "@ogre-tools/fp";
import { getInjectable } from "@ogre-tools/injectable";
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
import { filter, sortBy } from "lodash/fp";
import { computed } from "mobx";
import rendererExtensionsInjectable from "../../../../../extensions/renderer-extensions.injectable";
import topBarItemInjectionToken from "./top-bar-item-injection-token";
const topBarItemsInjectable = getInjectable({
id: "top-bar-items",
instantiate: (di) => {
const extensions = di.inject(rendererExtensionsInjectable);
const computedInjectMany = di.inject(computedInjectManyInjectable);
const items = computedInjectMany(topBarItemInjectionToken);
return computed(() =>
extensions.get().flatMap((extension) => extension.topBarItems),
pipeline(
items.get(),
filter((item) => item.isShown.get()),
sortBy(item => item.orderNumber),
),
);
},
});

30
src/renderer/components/layout/top-bar/top-bar-items/top-bar-items2.injectable.ts
View File

@ -1,30 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { pipeline } from "@ogre-tools/fp";
import { getInjectable } from "@ogre-tools/injectable";
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
import { filter, sortBy } from "lodash/fp";
import { computed } from "mobx";
import topBarItemInjectionToken from "./top-bar-item-injection-token";
const topBarItemsInjectable = getInjectable({
id: "top-bar-items-2",
instantiate: (di) => {
const computedInjectMany = di.inject(computedInjectManyInjectable);
const items = computedInjectMany(topBarItemInjectionToken);
return computed(() =>
pipeline(
items.get(),
filter((item) => item.isShown.get()),
sortBy(item => item.orderNumber),
),
);
},
});
export default topBarItemsInjectable;

22
src/renderer/components/layout/top-bar/top-bar.test.tsx
View File

@ -11,7 +11,6 @@ import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
import type { DiContainer } from "@ogre-tools/injectable";
import type { DiRender } from "../../test-utils/renderFor";
import { renderFor } from "../../test-utils/renderFor";
import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
import { computed, observable } from "mobx";
import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
import closeWindowInjectable from "./close-window.injectable";
@ -21,8 +20,7 @@ import openAppContextMenuInjectable from "./top-bar-items/context-menu/open-app-
import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
import topBarStateInjectable from "./state.injectable";
import platformInjectable from "../../../../common/vars/platform.injectable";
import goForwardInjectable
from "./top-bar-items/navigation-to-forward/go-forward/go-forward.injectable";
import goForwardInjectable from "./top-bar-items/navigation-to-forward/go-forward/go-forward.injectable";
describe("<TopBar/>", () => {
let di: DiContainer;
@ -55,6 +53,7 @@ describe("<TopBar/>", () => {
nextEnabled: true,
}));
});
it("renders w/o errors", () => {
const { container } = render(<TopBar/>);
@ -96,23 +95,6 @@ describe("<TopBar/>", () => {
expect(goForward).toBeCalled();
});
it("renders items", async () => {
const testId = "testId";
const text = "an item";
di.override(topBarItemsInjectable, () => computed(() => [
{
components: {
Item: () => <span data-testid={testId}>{text}</span>,
},
},
]));
const { findByTestId } = render(<TopBar/>);
expect(await findByTestId(testId)).toHaveTextContent(text);
});
describe("on macos", () => {
beforeEach(() => {
di.override(platformInjectable, () => "darwin");

22
src/renderer/components/layout/top-bar/top-bar.tsx
View File

@ -8,23 +8,20 @@ import React, { useEffect, useRef } from "react";
import { observer } from "mobx-react";
import type { IComputedValue } from "mobx";
import { cssNames } from "../../../utils";
import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { TopBarRegistration } from "./top-bar-registration";
import isLinuxInjectable from "../../../../common/vars/is-linux.injectable";
import isWindowsInjectable from "../../../../common/vars/is-windows.injectable";
import closeWindowInjectable from "./close-window.injectable";
import maximizeWindowInjectable from "./maximize-window.injectable";
import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
import watchHistoryStateInjectable from "../../../remote-helpers/watch-history-state.injectable";
import topBarItems2Injectable from "./top-bar-items/top-bar-items2.injectable";
import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
import type { TopBarItem } from "./top-bar-items/top-bar-item-injection-token";
import welcomeRouteInjectable from "../../../../common/front-end-routing/routes/welcome/welcome-route.injectable";
import navigateToWelcomeInjectable from "../../../../common/front-end-routing/routes/welcome/navigate-to-welcome.injectable";
interface Dependencies {
items: IComputedValue<TopBarRegistration[]>;
items2: IComputedValue<TopBarItem[]>;
items: IComputedValue<TopBarItem[]>;
isWindows: boolean;
isLinux: boolean;
minimizeWindow: () => void;
@ -36,7 +33,6 @@ interface Dependencies {
const NonInjectedTopBar = observer(
({
items,
items2,
isWindows,
isLinux,
closeWindow,
@ -61,7 +57,7 @@ const NonInjectedTopBar = observer(
ref={elem}
>
<div className={styles.items}>
{items2.get().map((item) => {
{items.get().map((item) => {
const Component = item.Component;
return <Component key={item.id} />;
@ -69,8 +65,6 @@ const NonInjectedTopBar = observer(
</div>
<div className={styles.items}>
{renderRegisteredItems(items.get())}
{(isWindows || isLinux) && (
<div
className={cssNames(styles.windowButtons, {
@ -129,19 +123,9 @@ const NonInjectedTopBar = observer(
},
);
const renderRegisteredItems = (items: TopBarRegistration[]) =>
items.map((registration, index) => {
if (!registration?.components?.Item) {
return null;
}
return <registration.components.Item key={index} />;
});
export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
getProps: (di) => ({
items: di.inject(topBarItemsInjectable),
items2: di.inject(topBarItems2Injectable),
isLinux: di.inject(isLinuxInjectable),
isWindows: di.inject(isWindowsInjectable),
closeWindow: di.inject(closeWindowInjectable),