Allow extensions to control status bar item visibility (#6178)

* Allow extensions to control status bar item visibility.

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

* Move visible to StatusBarRegistration

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/features/status-bar/status-bar-items-originating-from-extensions.test.tsx

@@ -8,6 +8,7 @@ import type { ApplicationBuilder } from "../../renderer/components/test-utils/ge
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import getRandomIdInjectable from "../../common/utils/get-random-id.injectable";
 import type { FakeExtensionOptions } from "../../renderer/components/test-utils/get-extension-fake";
+import { computed } from "mobx";
 
 describe("status-bar-items-originating-from-extensions", () => {
   let applicationBuilder: ApplicationBuilder;
@@ -65,7 +66,7 @@ describe("status-bar-items-originating-from-extensions", () => {
 
       const rightSide = rendered.getByTestId("status-bar-right");
 
-      const actual = getTestStatusBarTexts(rightSide, [
+      const actual = getExpectedTestStatusBarTexts(rightSide, [
         "extension1",
         "extension2",
       ]);
@@ -95,6 +96,13 @@ describe("status-bar-items-originating-from-extensions", () => {
                   position: "right" as const,
                 },
               },
+              {
+                components: {
+                  Item: () => <div data-testid="some-testId">right4</div>,
+                  position: "right" as const,
+                },
+                visible: computed(() => false),
+              },
               {
                 components: {
                   Item: () => <div data-testid="some-testId">left1</div>,
@@ -121,7 +129,7 @@ describe("status-bar-items-originating-from-extensions", () => {
       it("shows right side status bar items in the correct order", () => {
         const rightSide = rendered.getByTestId("status-bar-right");
 
-        const actual = getTestStatusBarTexts(rightSide, [
+        const actual = getExpectedTestStatusBarTexts(rightSide, [
           "right1",
           "right2",
           "right3",
@@ -130,10 +138,16 @@ describe("status-bar-items-originating-from-extensions", () => {
         expect(actual).toEqual(["right3", "right2", "right1"]);
       });
 
+      it("doesn't show invisible status bar item", () => {
+        const rightSide = rendered.getByTestId("status-bar-right");
+
+        expect(getTestStatusBarTexts(rightSide)).not.toContain("right4");
+      });
+
       it("shows left side status bar items in the correct order", () => {
         const leftSide = rendered.getByTestId("status-bar-left");
 
-        const actual = getTestStatusBarTexts(leftSide, ["left2", "left1"]);
+        const actual = getExpectedTestStatusBarTexts(leftSide, ["left2", "left1"]);
 
         expect(actual).toEqual(["left1", "left2"]);
       });
@@ -149,7 +163,9 @@ describe("status-bar-items-originating-from-extensions", () => {
   });
 });
 
-const getTestStatusBarTexts = (actual: HTMLElement, expectedTexts: string[]) =>
+const getTestStatusBarTexts = (actual: HTMLElement) =>
   Array.from(actual.children)
-    .map((elem) => elem.textContent)
+    .map((elem) => String(elem.textContent));
-    .filter((elem) => elem && expectedTexts.includes(elem));
+
+const getExpectedTestStatusBarTexts = (actual: HTMLElement, expectedTexts: string[]) =>
+  getTestStatusBarTexts(actual).filter((textContent) => textContent && expectedTexts.includes(textContent));

src/renderer/components/status-bar/status-bar-item-registrator.injectable.tsx

@@ -4,6 +4,7 @@
  */
 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";
@@ -38,6 +39,7 @@ 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<boolean> | undefined = registration?.visible;
 
     if (registration?.item) {
       const { item } = registration;
@@ -74,7 +76,7 @@ const toItemInjectableFor = (extension: LensRendererExtension, getRandomId: () =
       instantiate: () => ({
         component,
         position,
-        visible: computed(() => true),
+        visible: visible ?? computed(() => true),
       }),
 
       injectionToken: statusBarItemInjectionToken,

src/renderer/components/status-bar/status-bar-registration.ts

@@ -3,6 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import type { IComputedValue } from "mobx";
+
 /**
  * The props for StatusBar item component
  */
@@ -38,4 +40,9 @@ export interface StatusBarRegistration {
    * The newer API, allows for registering a component instead of a ReactNode
    */
   components?: StatusBarComponents;
+
+  /**
+   * If specified, controls item visibility
+   */
+  visible?: IComputedValue<boolean>;
 }