diff --git a/packages/core/src/extensions/renderer-api/theming.ts b/packages/core/src/extensions/renderer-api/theming.ts index 3e4c9fe97b..269c8ca92e 100644 --- a/packages/core/src/extensions/renderer-api/theming.ts +++ b/packages/core/src/extensions/renderer-api/theming.ts @@ -3,8 +3,12 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ +import type { StatusBarStatus } from "../../renderer/components/status-bar/current-status.injectable"; +import type { SetStatusBarStatus } from "../../renderer/components/status-bar/set-status-bar-status.injectable"; +import setStatusBarStatusInjectable from "../../renderer/components/status-bar/set-status-bar-status.injectable"; import activeThemeInjectable from "../../renderer/themes/active.injectable"; import type { LensTheme } from "../../renderer/themes/lens-theme"; +import { asLegacyGlobalFunctionForExtensionApi } from "../as-legacy-globals-for-extension-api/as-legacy-global-function-for-extension-api"; import { asLegacyGlobalForExtensionApi } from "../as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api"; export const activeTheme = asLegacyGlobalForExtensionApi(activeThemeInjectable); @@ -16,4 +20,10 @@ export function getActiveTheme() { return activeTheme.get(); } -export type { LensTheme }; +export const setStatusBarStatus = asLegacyGlobalFunctionForExtensionApi(setStatusBarStatusInjectable); + +export type { + LensTheme, + StatusBarStatus, + SetStatusBarStatus, +}; diff --git a/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap b/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap new file mode 100644 index 0000000000..8931fed442 --- /dev/null +++ b/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap @@ -0,0 +1,3189 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` when StatusBar's status is set to "error" renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when StatusBar's status is set to "warning" renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled specifying the side the elements should be on renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+ left1 +
+
+
+
+ left2 +
+
+
+
+
+
+ right2 +
+
+
+
+ right1 +
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, ("hello") renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, ([[Object]]) renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, ([]) renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, ({}) renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, (6) renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, (null) renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with an invalid data type, (undefined) renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[` when an extension is enabled with no status items renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+ +
+
+

+ Welcome to some-product-name! +

+

+ To get you started we have auto-detected your clusters in your + + kubeconfig file and added them to the catalog, your centralized + + view for managing all your cloud-native resources. +
+
+ If you have any questions or feedback, please join our + + Lens Forums + + . +

+ +
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; diff --git a/packages/core/src/renderer/components/status-bar/current-status.injectable.ts b/packages/core/src/renderer/components/status-bar/current-status.injectable.ts new file mode 100644 index 0000000000..f5a5426b7e --- /dev/null +++ b/packages/core/src/renderer/components/status-bar/current-status.injectable.ts @@ -0,0 +1,15 @@ +/** + * 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 { observable } from "mobx"; + +export type StatusBarStatus = "default" | "warning" | "error"; + +const statusBarCurrentStatusInjectable = getInjectable({ + id: "status-bar-current-status", + instantiate: () => observable.box("default"), +}); + +export default statusBarCurrentStatusInjectable; diff --git a/packages/core/src/renderer/components/status-bar/set-status-bar-status.injectable.ts b/packages/core/src/renderer/components/status-bar/set-status-bar-status.injectable.ts new file mode 100644 index 0000000000..041fca9fd5 --- /dev/null +++ b/packages/core/src/renderer/components/status-bar/set-status-bar-status.injectable.ts @@ -0,0 +1,21 @@ +/** + * 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 { action } from "mobx"; +import type { StatusBarStatus } from "./current-status.injectable"; +import statusBarCurrentStatusInjectable from "./current-status.injectable"; + +export type SetStatusBarStatus = (newStatus: StatusBarStatus) => void; + +const setStatusBarStatusInjectable = getInjectable({ + id: "set-status-bar-status", + instantiate: (di): SetStatusBarStatus => { + const status = di.inject(statusBarCurrentStatusInjectable); + + return action((newStatus) => status.set(newStatus)); + }, +}); + +export default setStatusBarStatusInjectable; diff --git a/packages/core/src/renderer/components/status-bar/status-bar-item-registrator.injectable.tsx b/packages/core/src/renderer/components/status-bar/status-bar-item-registrator.injectable.tsx index ed909a8284..dd7def1626 100644 --- a/packages/core/src/renderer/components/status-bar/status-bar-item-registrator.injectable.tsx +++ b/packages/core/src/renderer/components/status-bar/status-bar-item-registrator.injectable.tsx @@ -4,7 +4,6 @@ */ import type { Injectable } from "@ogre-tools/injectable"; import { getInjectable } from "@ogre-tools/injectable"; -import type { IComputedValue } from "mobx"; import { computed } from "mobx"; import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token"; import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension"; @@ -39,7 +38,6 @@ const toItemInjectableFor = (extension: LensRendererExtension, getRandomId: () = const id = `${getRandomId()}-status-bar-item-for-extension-${extension.sanitizedExtensionId}`; let component: React.ComponentType; let position: "left" | "right"; - const visible: IComputedValue | undefined = registration?.visible; if (registration?.item) { const { item } = registration; @@ -77,7 +75,7 @@ const toItemInjectableFor = (extension: LensRendererExtension, getRandomId: () = origin: extension.sanitizedExtensionId, component, position, - visible: visible ?? computed(() => true), + visible: registration?.visible ?? computed(() => true), }), injectionToken: statusBarItemInjectionToken, diff --git a/packages/core/src/renderer/components/status-bar/status-bar-items.injectable.tsx b/packages/core/src/renderer/components/status-bar/status-bar-items.injectable.tsx index 2b5be6fdb3..d689078bec 100644 --- a/packages/core/src/renderer/components/status-bar/status-bar-items.injectable.tsx +++ b/packages/core/src/renderer/components/status-bar/status-bar-items.injectable.tsx @@ -3,14 +3,12 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import type { IComputedValue } from "mobx"; import { computed } from "mobx"; import type { StatusBarItemProps } from "./status-bar-registration"; -import type { StatusBarItem } from "./status-bar-item-injection-token"; import { statusBarItemInjectionToken } from "./status-bar-item-injection-token"; import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; -interface StatusItem { +export interface StatusItem { origin?: string; component: React.ComponentType; } @@ -20,50 +18,38 @@ export interface StatusBarItems { left: StatusItem[]; } -interface Dependencies { - registrations: IComputedValue; -} - -function getStatusBarItems({ registrations }: Dependencies): IComputedValue { - return computed(() => { - const res: StatusBarItems = { - left: [], - right: [], - }; - - for (const registration of registrations.get()) { - const { position = "right", component, visible, origin } = registration; - - if (!visible.get()) { - continue; - } - - res[position].push({ - origin, - component, - }); - } - - // This is done so that the first ones registered are closest to the corner - res.right.reverse(); - - return res; - }); -} - const statusBarItemsInjectable = getInjectable({ id: "status-bar-items", instantiate: (di) => { - const computedInjectMany = di.inject( - computedInjectManyInjectable, - ); + const computedInjectMany = di.inject(computedInjectManyInjectable); + const registrations = computedInjectMany(statusBarItemInjectionToken); - return getStatusBarItems({ - registrations: computedInjectMany(statusBarItemInjectionToken), + return computed(() => { + const res: StatusBarItems = { + left: [], + right: [], + }; + + for (const registration of registrations.get()) { + const { position = "right", component, visible, origin } = registration; + + if (!visible.get()) { + continue; + } + + res[position].push({ + origin, + component, + }); + } + + // This is done so that the first ones registered are closest to the corner + res.right.reverse(); + + return res; }); }, - }); export default statusBarItemsInjectable; diff --git a/packages/core/src/renderer/components/status-bar/status-bar.module.scss b/packages/core/src/renderer/components/status-bar/status-bar.module.scss index 3d878c920c..b1558726c7 100644 --- a/packages/core/src/renderer/components/status-bar/status-bar.module.scss +++ b/packages/core/src/renderer/components/status-bar/status-bar.module.scss @@ -8,12 +8,23 @@ color: white; grid-area: status-bar; - background-color: var(--blue); height: var(--status-bar-height); font-size: var(--font-size-small); display: inline-grid; grid-template-columns: 1fr 1fr; + + &.status-default { + background-color: var(--colorInfo); + } + + &.status-warning { + background-color: var(--colorWarning); + } + + &.status-error { + background-color: var(--colorError); + } } .leftSide { diff --git a/packages/core/src/renderer/components/status-bar/status-bar.test.tsx b/packages/core/src/renderer/components/status-bar/status-bar.test.tsx index 5d16ff277c..b6b9bbf21e 100644 --- a/packages/core/src/renderer/components/status-bar/status-bar.test.tsx +++ b/packages/core/src/renderer/components/status-bar/status-bar.test.tsx @@ -5,47 +5,45 @@ import React from "react"; import "@testing-library/jest-dom/extend-expect"; -import type { IObservableArray } from "mobx"; -import { computed, observable } from "mobx"; -import type { StatusBarItems } from "./status-bar-items.injectable"; -import statusBarItemsInjectable from "./status-bar-items.injectable"; -import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable"; import type { ApplicationBuilder } from "../test-utils/get-application-builder"; import { getApplicationBuilder } from "../test-utils/get-application-builder"; +import setStatusBarStatusInjectable from "./set-status-bar-status.injectable"; +import type { RenderResult } from "@testing-library/react"; import getRandomIdInjectable from "../../../common/utils/get-random-id.injectable"; describe("", () => { - let statusBarItems: IObservableArray; let builder: ApplicationBuilder; + let result: RenderResult; beforeEach(async () => { - statusBarItems = observable.array([]); - builder = getApplicationBuilder(); builder.beforeWindowStart(({ windowDi }) => { - windowDi.unoverride(getRandomIdInjectable); windowDi.permitSideEffects(getRandomIdInjectable); - windowDi.override(directoryForUserDataInjectable, () => "some-directory-for-user-data"); + windowDi.unoverride(getRandomIdInjectable); }); - builder.extensions.enable({ - id: "some-id", - name: "some-name", + result = await builder.render(); + }); - rendererOptions: { - statusBarItems, - }, + describe("when an extension is enabled with no status items", () => { + beforeEach(() => { + builder.extensions.enable({ + id: "some-id", + name: "some-name", + + rendererOptions: { + statusBarItems: [], + }, + }); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); }); }); - it("renders w/o errors", async () => { - const { container } = await builder.render(); - - expect(container).toBeInstanceOf(HTMLElement); - }); - - it.each([ + describe.each([ undefined, "hello", 6, @@ -53,73 +51,130 @@ describe("", () => { [], [{}], {}, - ])("renders w/o errors when registrations are not type compliant (%p)", async val => { - statusBarItems.replace([val]); + ])("when an extension is enabled with an invalid data type, (%p)", (value) => { + beforeEach(() => { + builder.extensions.enable({ + id: "some-id", + name: "some-name", - await expect(builder.render()).resolves.toBeTruthy(); - }); - - it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", async () => { - const testId = "testId"; - const text = "heee"; - - builder.beforeWindowStart(({ windowDi }) => { - windowDi.override(statusBarItemsInjectable, () => computed(() => ({ - right: [ { origin: testId, component: () => {text} }], - left: [], - }) as StatusBarItems)); + rendererOptions: { + statusBarItems: [value as any], + }, + }); }); - const { getByTestId } = await builder.render(); - - expect(getByTestId(testId)).toHaveTextContent(text); + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); }); - it("renders items [{item: () => React.ReactNode}] (4.0.0-rc.1+)", async () => { - const testId = "testId"; - const text = "heee"; + describe("when an extension is enabled using a deprecated registration of a plain ReactNode", () => { + beforeEach(() => { + builder.extensions.enable({ + id: "some-id", + name: "some-name", - statusBarItems.replace([{ - item: () => {text}, - }]); + rendererOptions: { + statusBarItems: [{ + item: "heeeeeeee", + }], + }, + }); + }); - const { getByTestId } = await builder.render(); - - expect(getByTestId(testId)).toHaveTextContent(text); + it("renders the provided ReactNode", () => { + expect(result.baseElement).toHaveTextContent("heeeeeeee"); + }); }); + describe("when an extension is enabled using a deprecated registration of a function returning a ReactNode", () => { + beforeEach(() => { + builder.extensions.enable({ + id: "some-id", + name: "some-name", - it("sort positioned items properly", async () => { - statusBarItems.replace([ - { - components: { - Item: () =>
right1
, + rendererOptions: { + statusBarItems: [{ + item: () => "heeeeeeee", + }], }, - }, - { - components: { - Item: () =>
right2
, - position: "right", - }, - }, - { - components: { - Item: () =>
left1
, - position: "left", - }, - }, - { - components: { - Item: () =>
left2
, - position: "left", - }, - }, - ]); + }); + }); - const { getAllByTestId } = await builder.render(); - const elems = getAllByTestId("sortedElem"); - const positions = elems.map(elem => elem.textContent); + it("renders the provided ReactNode", () => { + expect(result.baseElement).toHaveTextContent("heeeeeeee"); + }); + }); - expect(positions).toEqual(["left1", "left2", "right2", "right1"]); + describe("when an extension is enabled specifying the side the elements should be on", () => { + beforeEach(() => { + builder.extensions.enable({ + id: "some-id", + name: "some-name", + + rendererOptions: { + statusBarItems: [ + { + components: { + Item: () =>
right1
, + }, + }, + { + components: { + Item: () =>
right2
, + position: "right", + }, + }, + { + components: { + Item: () =>
left1
, + position: "left", + }, + }, + { + components: { + Item: () =>
left2
, + position: "left", + }, + }, + ], + }, + }); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("sort positioned items properly", async () => { + const elems = result.getAllByTestId("sortedElem"); + const positions = elems.map(elem => elem.textContent); + + expect(positions).toEqual(["left1", "left2", "right2", "right1"]); + }); + }); + + it("has the default status by default", () => { + expect([...result.getByTestId("status-bar").classList]).toContain("status-default"); + }); + + describe.each([ + "warning" as const, + "error" as const, + ])("when StatusBar's status is set to %p", (value) => { + beforeEach(() => { + const di = builder.applicationWindow.only.di; + const setStatusBarStatus = di.inject(setStatusBarStatusInjectable); + + setStatusBarStatus(value); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it(`has the ${value} status by default`, () => { + expect([...result.getByTestId("status-bar").classList]).toContain(`status-${value}`); + }); }); }); diff --git a/packages/core/src/renderer/components/status-bar/status-bar.tsx b/packages/core/src/renderer/components/status-bar/status-bar.tsx index dabad3bf17..f926c83d2e 100644 --- a/packages/core/src/renderer/components/status-bar/status-bar.tsx +++ b/packages/core/src/renderer/components/status-bar/status-bar.tsx @@ -10,19 +10,26 @@ import { observer } from "mobx-react"; import { withInjectables } from "@ogre-tools/injectable-react"; import type { StatusBarItems } from "./status-bar-items.injectable"; import statusBarItemsInjectable from "./status-bar-items.injectable"; -import type { IComputedValue } from "mobx"; +import type { IComputedValue, IObservableValue } from "mobx"; +import type { StatusBarStatus } from "./current-status.injectable"; +import statusBarCurrentStatusInjectable from "./current-status.injectable"; +import { cssNames } from "@k8slens/utilities"; export interface StatusBarProps {} interface Dependencies { items: IComputedValue; + status: IObservableValue; } -const NonInjectedStatusBar = observer(({ items }: Dependencies & StatusBarProps) => { +const NonInjectedStatusBar = observer(({ + items, + status, +}: Dependencies & StatusBarProps) => { const { left, right } = items.get(); return ( -
+
{left.map((Item, index) => (
(NonInjectedStatusBar, { getProps: (di, props) => ({ - items: di.inject(statusBarItemsInjectable), ...props, + items: di.inject(statusBarItemsInjectable), + status: di.inject(statusBarCurrentStatusInjectable), }), });