diff --git a/src/extensions/registries/status-bar-registry.ts b/src/extensions/registries/status-bar-registry.ts index 2afdee76a6..59162ab742 100644 --- a/src/extensions/registries/status-bar-registry.ts +++ b/src/extensions/registries/status-bar-registry.ts @@ -26,6 +26,7 @@ import { BaseRegistry } from "./base-registry"; interface StatusBarComponents { Item?: React.ComponentType; + position?: "left" | "right"; } interface StatusBarRegistrationV2 { diff --git a/src/renderer/bootstrap.tsx b/src/renderer/bootstrap.tsx index edc4ff90f7..f42a671de6 100644 --- a/src/renderer/bootstrap.tsx +++ b/src/renderer/bootstrap.tsx @@ -104,13 +104,13 @@ export async function bootstrap(comp: () => Promise, di: Dependenc logger.info(`${logPrefix} initializing WelcomeMenuRegistry`); initializers.initWelcomeMenuRegistry(); - logger.info(`${logPrefix} initializing WorkloadsOverviewDetailRegist`); + logger.info(`${logPrefix} initializing WorkloadsOverviewDetailRegistry`); initializers.initWorkloadsOverviewDetailRegistry(); logger.info(`${logPrefix} initializing CatalogEntityDetailRegistry`); initializers.initCatalogEntityDetailRegistry(); - logger.info(`${logPrefix} initializing CatalogCategoryRegistryEntrie`); + logger.info(`${logPrefix} initializing CatalogCategoryRegistryEntries`); initializers.initCatalogCategoryRegistryEntries(); logger.info(`${logPrefix} initializing Catalog`); @@ -119,6 +119,9 @@ export async function bootstrap(comp: () => Promise, di: Dependenc logger.info(`${logPrefix} initializing IpcRendererListeners`); initializers.initIpcRendererListeners(); + logger.info(`${logPrefix} initializing StatusBarRegistry`); + initializers.initStatusBarRegistry(); + ExtensionLoader.createInstance().init(); ExtensionDiscovery.createInstance().init(); diff --git a/src/renderer/components/cluster-manager/bottom-bar.module.css b/src/renderer/components/cluster-manager/bottom-bar.module.css index 16098f5262..7eeb1c5ef4 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.module.css +++ b/src/renderer/components/cluster-manager/bottom-bar.module.css @@ -19,7 +19,7 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ - .BottomBar { +.BottomBar { @apply flex px-2 text-white; grid-area: bottom-bar; @@ -38,6 +38,8 @@ } } -.extensions { - @apply flex flex-1 justify-end; -} \ No newline at end of file +.onLeft + .onRight { + @apply ml-auto; +} + +.onRight {} \ No newline at end of file diff --git a/src/renderer/components/cluster-manager/bottom-bar.test.tsx b/src/renderer/components/cluster-manager/bottom-bar.test.tsx index 3e26e2a7d6..4390175889 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.test.tsx +++ b/src/renderer/components/cluster-manager/bottom-bar.test.tsx @@ -29,6 +29,7 @@ import { HotbarStore } from "../../../common/hotbar-store"; import { AppPaths } from "../../../common/app-paths"; import { CommandOverlay } from "../command-palette"; import { HotbarSwitchCommand } from "../hotbar/hotbar-switch-command"; +import { ActiveHotbarName } from "./active-hotbar-name"; jest.mock("../command-palette", () => ({ CommandOverlay: { @@ -121,12 +122,18 @@ describe("", () => { }); it("show default hotbar name", () => { + StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [ + { item: () => }, + ]); const { getByTestId } = render(); expect(getByTestId("current-hotbar-name")).toHaveTextContent("default"); }); it("show active hotbar name", () => { + StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [ + { item: () => }, + ]); const { getByTestId } = render(); HotbarStore.getInstance().add({ @@ -138,6 +145,9 @@ describe("", () => { }); it("opens command palette on click", () => { + StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [ + { item: () => }, + ]); const { getByTestId } = render(); const activeHotbar = getByTestId("current-hotbar-name"); @@ -145,4 +155,38 @@ describe("", () => { expect(CommandOverlay.open).toHaveBeenCalledWith(); }); + + it("sort positioned items properly", () => { + StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [ + { + components: { + Item: () =>
right
, + }, + }, + { + components: { + Item: () =>
right
, + position: "right", + }, + }, + { + components: { + Item: () =>
left
, + position: "left", + }, + }, + { + components: { + Item: () =>
left
, + position: "left", + }, + }, + ]); + + const { getAllByTestId } = render(); + const elems = getAllByTestId("sortedElem"); + const positions = elems.map(elem => elem.textContent); + + expect(positions).toEqual(["left", "left", "right", "right"]); + }); }); diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx index c0fda15afe..27b5a10f3f 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.tsx +++ b/src/renderer/components/cluster-manager/bottom-bar.tsx @@ -24,7 +24,7 @@ import styles from "./bottom-bar.module.css"; import React from "react"; import { observer } from "mobx-react"; import { StatusBarRegistration, StatusBarRegistry } from "../../../extensions/registries"; -import { ActiveHotbarName } from "./active-hotbar-name"; +import { cssNames } from "../../utils"; @observer export class BottomBar extends React.Component { @@ -45,29 +45,36 @@ export class BottomBar extends React.Component { return null; } + items.sort(function sortLeftPositionFirst(a, b) { + return a.components?.position?.localeCompare(b.components?.position); + }); + return ( -
+ <> {items.map((registration, index) => { if (!registration?.item && !registration?.components?.Item) { return null; } return ( -
+
{this.renderRegisteredItem(registration)}
); })} -
+ ); } render() { return (
-
- -
{this.renderRegisteredItems()}
); diff --git a/src/renderer/initializers/index.ts b/src/renderer/initializers/index.ts index 27e6ffef9c..55d1bbbb1b 100644 --- a/src/renderer/initializers/index.ts +++ b/src/renderer/initializers/index.ts @@ -30,3 +30,4 @@ export * from "./registries"; export * from "./welcome-menu-registry"; export * from "./workloads-overview-detail-registry"; export * from "./catalog-category-registry"; +export * from "./status-bar-registry"; diff --git a/src/renderer/initializers/status-bar-registry.tsx b/src/renderer/initializers/status-bar-registry.tsx new file mode 100644 index 0000000000..e2c7bc561e --- /dev/null +++ b/src/renderer/initializers/status-bar-registry.tsx @@ -0,0 +1,35 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import React from "react"; +import { StatusBarRegistry } from "../../extensions/registries"; +import { ActiveHotbarName } from "../components/cluster-manager/active-hotbar-name"; + +export function initStatusBarRegistry() { + StatusBarRegistry.getInstance().add([ + { + components: { + Item: () => , + position: "left", + }, + }, + ]); +}