From d73df7fe0d2c12454e9870dea6cea0ec630ec05d Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 3 Dec 2021 17:41:08 +0300 Subject: [PATCH] Show active hotbar on bottom (#4476) - Extends extension API to support choosing sides for bottom bar entries --- .../registries/status-bar-registry.ts | 6 + src/renderer/bootstrap.tsx | 7 +- .../cluster-manager/active-hotbar-name.tsx | 40 ++++++ ...{bottom-bar.scss => bottom-bar.module.css} | 30 +++-- .../cluster-manager/bottom-bar.test.tsx | 114 +++++++++++++++++- .../components/cluster-manager/bottom-bar.tsx | 21 +++- .../cluster-manager/cluster-manager.scss | 2 +- .../components/hotbar/hotbar-selector.scss | 3 +- src/renderer/initializers/index.ts | 1 + .../initializers/status-bar-registry.tsx | 35 ++++++ 10 files changed, 231 insertions(+), 28 deletions(-) create mode 100644 src/renderer/components/cluster-manager/active-hotbar-name.tsx rename src/renderer/components/cluster-manager/{bottom-bar.scss => bottom-bar.module.css} (80%) create mode 100644 src/renderer/initializers/status-bar-registry.tsx diff --git a/src/extensions/registries/status-bar-registry.ts b/src/extensions/registries/status-bar-registry.ts index 2afdee76a6..e4864b5173 100644 --- a/src/extensions/registries/status-bar-registry.ts +++ b/src/extensions/registries/status-bar-registry.ts @@ -26,6 +26,12 @@ import { BaseRegistry } from "./base-registry"; interface StatusBarComponents { Item?: React.ComponentType; + /** + * The side of the bottom bar to place this component. + * + * @default "right" + */ + 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/active-hotbar-name.tsx b/src/renderer/components/cluster-manager/active-hotbar-name.tsx new file mode 100644 index 0000000000..63f8b583b9 --- /dev/null +++ b/src/renderer/components/cluster-manager/active-hotbar-name.tsx @@ -0,0 +1,40 @@ +/** + * 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 { observer } from "mobx-react"; +import { Icon } from "../icon"; +import { HotbarStore } from "../../../common/hotbar-store"; +import { CommandOverlay } from "../command-palette"; +import { HotbarSwitchCommand } from "../hotbar/hotbar-switch-command"; + +export const ActiveHotbarName = observer(() => { + return ( +
CommandOverlay.open()} + > + + {HotbarStore.getInstance().getActive()?.name} +
+ ); +}); diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.module.css similarity index 80% rename from src/renderer/components/cluster-manager/bottom-bar.scss rename to src/renderer/components/cluster-manager/bottom-bar.module.css index aca8272489..7eeb1c5ef4 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.scss +++ b/src/renderer/components/cluster-manager/bottom-bar.module.css @@ -20,22 +20,26 @@ */ .BottomBar { - $spacing: $padding * 0.5; - --flex-gap: #{$spacing}; + @apply flex px-2 text-white; + grid-area: bottom-bar; background-color: var(--blue); - padding: 0 2px; height: var(--bottom-bar-height); + font-size: var(--font-size-small); +} - .extensions { - font-size: var(--font-size-small); - color: white; - .item { - padding: $padding * 0.25 $padding * 0.5; - &:hover { - background-color: #ffffff33; - cursor: pointer; - } - } +.item { + @apply flex items-center mr-2 h-full px-2 last:mr-0; + + &:hover { + @apply cursor-pointer; + + background-color: #ffffff33; } } + +.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 d9f683fe66..4390175889 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.test.tsx +++ b/src/renderer/components/cluster-manager/bottom-bar.test.tsx @@ -20,25 +20,58 @@ */ import React from "react"; -import { render } from "@testing-library/react"; +import mockFs from "mock-fs"; +import { render, fireEvent } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; +import { BottomBar } from "./bottom-bar"; +import { StatusBarRegistry } from "../../../extensions/registries"; +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("electron", () => ({ - app: { - getPath: () => "/foo", +jest.mock("../command-palette", () => ({ + CommandOverlay: { + open: jest.fn(), }, })); -import { BottomBar } from "./bottom-bar"; -import { StatusBarRegistry } from "../../../extensions/registries"; +AppPaths.init(); + +jest.mock("electron", () => ({ + app: { + getName: () => "lens", + setName: jest.fn(), + setPath: jest.fn(), + getPath: () => "tmp", + }, + ipcMain: { + handle: jest.fn(), + on: jest.fn(), + removeAllListeners: jest.fn(), + off: jest.fn(), + send: jest.fn(), + }, +})); describe("", () => { beforeEach(() => { + const mockOpts = { + "tmp": { + "test-store.json": JSON.stringify({}), + }, + }; + + mockFs(mockOpts); StatusBarRegistry.createInstance(); + HotbarStore.createInstance(); }); afterEach(() => { StatusBarRegistry.resetInstance(); + HotbarStore.resetInstance(); + mockFs.restore(); }); it("renders w/o errors", () => { @@ -87,4 +120,73 @@ describe("", () => { expect(await getByTestId(testId)).toHaveTextContent(text); }); + + 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({ + id: "new", + name: "new", + }, { setActive: true }); + + expect(getByTestId("current-hotbar-name")).toHaveTextContent("new"); + }); + + it("opens command palette on click", () => { + StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [ + { item: () => }, + ]); + const { getByTestId } = render(); + const activeHotbar = getByTestId("current-hotbar-name"); + + fireEvent.click(activeHotbar); + + 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 0f61a03833..27b5a10f3f 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.tsx +++ b/src/renderer/components/cluster-manager/bottom-bar.tsx @@ -19,11 +19,12 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import "./bottom-bar.scss"; +import styles from "./bottom-bar.module.css"; import React from "react"; import { observer } from "mobx-react"; import { StatusBarRegistration, StatusBarRegistry } from "../../../extensions/registries"; +import { cssNames } from "../../utils"; @observer export class BottomBar extends React.Component { @@ -44,26 +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/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index 3b9e74c1ac..8cdce19d82 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -20,7 +20,7 @@ */ .ClusterManager { - --bottom-bar-height: 22px; + --bottom-bar-height: 21px; --hotbar-width: 75px; display: grid; diff --git a/src/renderer/components/hotbar/hotbar-selector.scss b/src/renderer/components/hotbar/hotbar-selector.scss index d0fe3fa57c..5eaeb33692 100644 --- a/src/renderer/components/hotbar/hotbar-selector.scss +++ b/src/renderer/components/hotbar/hotbar-selector.scss @@ -43,7 +43,8 @@ .Icon { --size: 16px; - padding: 0 4px; + padding: 0 4px 0 0px; + margin: 0px 4px; &:hover { box-shadow: none; 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", + }, + }, + ]); +}