diff --git a/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap b/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap index 05dea48730..c26fb915d3 100644 --- a/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap +++ b/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap @@ -248,16 +248,15 @@ exports[`extendability-using-extension-api given an extension with top-bar items arrow_forward - -
Some-content
+
(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; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts index 851834190f..f5af16a5ec 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts @@ -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), + ), ); }, }); diff --git a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items2.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items2.injectable.ts deleted file mode 100644 index 0701174f78..0000000000 --- a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items2.injectable.ts +++ /dev/null @@ -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; diff --git a/src/renderer/components/layout/top-bar/top-bar.test.tsx b/src/renderer/components/layout/top-bar/top-bar.test.tsx index 9ddfc1d099..8384205a59 100644 --- a/src/renderer/components/layout/top-bar/top-bar.test.tsx +++ b/src/renderer/components/layout/top-bar/top-bar.test.tsx @@ -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("", () => { let di: DiContainer; @@ -55,6 +53,7 @@ describe("", () => { nextEnabled: true, })); }); + it("renders w/o errors", () => { const { container } = render(); @@ -96,23 +95,6 @@ describe("", () => { expect(goForward).toBeCalled(); }); - it("renders items", async () => { - const testId = "testId"; - const text = "an item"; - - di.override(topBarItemsInjectable, () => computed(() => [ - { - components: { - Item: () => {text}, - }, - }, - ])); - - const { findByTestId } = render(); - - expect(await findByTestId(testId)).toHaveTextContent(text); - }); - describe("on macos", () => { beforeEach(() => { di.override(platformInjectable, () => "darwin"); diff --git a/src/renderer/components/layout/top-bar/top-bar.tsx b/src/renderer/components/layout/top-bar/top-bar.tsx index af46c5d7d0..3eed0bc6b9 100644 --- a/src/renderer/components/layout/top-bar/top-bar.tsx +++ b/src/renderer/components/layout/top-bar/top-bar.tsx @@ -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; - items2: IComputedValue; + items: IComputedValue; 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} >
- {items2.get().map((item) => { + {items.get().map((item) => { const Component = item.Component; return ; @@ -69,8 +65,6 @@ const NonInjectedTopBar = observer(
- {renderRegisteredItems(items.get())} - {(isWindows || isLinux) && (
- items.map((registration, index) => { - if (!registration?.components?.Item) { - return null; - } - - return ; - }); - export const TopBar = withInjectables(NonInjectedTopBar, { getProps: (di) => ({ items: di.inject(topBarItemsInjectable), - items2: di.inject(topBarItems2Injectable), isLinux: di.inject(isLinuxInjectable), isWindows: di.inject(isWindowsInjectable), closeWindow: di.inject(closeWindowInjectable),