diff --git a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts new file mode 100644 index 0000000000..c0c1ddba86 --- /dev/null +++ b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts @@ -0,0 +1,20 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import type React from "react"; +import { getInjectionToken } from "@ogre-tools/injectable"; +import type { IComputedValue } from "mobx"; + +export interface TopBarItem { + id: string; + isShown: IComputedValue; + orderNumber: number; + Component: React.ComponentType; +} + +const topBarItemInjectionToken = getInjectionToken({ + id: "top-bar-item-injection-token", +}); + +export default topBarItemInjectionToken; 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 new file mode 100644 index 0000000000..0701174f78 --- /dev/null +++ b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items2.injectable.ts @@ -0,0 +1,30 @@ +/** + * 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.tsx b/src/renderer/components/layout/top-bar/top-bar.tsx index 0af1cf83a7..6d8b3846a7 100644 --- a/src/renderer/components/layout/top-bar/top-bar.tsx +++ b/src/renderer/components/layout/top-bar/top-bar.tsx @@ -25,6 +25,8 @@ 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 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"; @@ -32,6 +34,7 @@ interface Dependencies { navigateToWelcomePage: () => void; welcomeRouteIsActive: IComputedValue; items: IComputedValue; + items2: IComputedValue; isWindows: boolean; isLinux: boolean; prevEnabled: IComputedValue; @@ -47,6 +50,9 @@ interface Dependencies { const NonInjectedTopBar = observer(({ items, + items2, + navigateToCatalog, + catalogRouteIsActive, navigateToWelcomePage, welcomeRouteIsActive, isWindows, @@ -79,9 +85,14 @@ const NonInjectedTopBar = observer(({
+ ref={elem}>
+ {items2.get().map((item) => { + const Component = item.Component; + + return ; + })} + {(isWindows || isLinux) && (
@@ -183,6 +194,7 @@ export const TopBar = withInjectables(NonInjectedTopBar, { getProps: (di) => ({ navigateToWelcomePage: di.inject(navigateToWelcomeInjectable), items: di.inject(topBarItemsInjectable), + items2: di.inject(topBarItems2Injectable), isLinux: di.inject(isLinuxInjectable), isWindows: di.inject(isWindowsInjectable), prevEnabled: di.inject(topBarPrevEnabledInjectable),