Allow reactive tray item labels for extensions (#6036)

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/tray/clicking-tray-menu-item-originating-from-extension.test.ts

@@ -8,6 +8,7 @@ import type { ApplicationBuilder } from "../../renderer/components/test-utils/ge
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import loggerInjectable from "../../common/logger.injectable";
 import type { Logger } from "../../common/logger";
+import getRandomIdInjectable from "../../common/utils/get-random-id.injectable";
 
 describe("clicking tray menu item originating from extension", () => {
   let applicationBuilder: ApplicationBuilder;
@@ -20,6 +21,7 @@ describe("clicking tray menu item originating from extension", () => {
       logErrorMock = jest.fn();
 
       mainDi.override(loggerInjectable, () => ({ error: logErrorMock }) as unknown as Logger);
+      mainDi.override(getRandomIdInjectable, () => () => "some-random-id");
     });
 
     await applicationBuilder.render();
@@ -42,7 +44,7 @@ describe("clicking tray menu item originating from extension", () => {
 
     it("when item is clicked, triggers the click handler", () => {
       applicationBuilder.tray.click(
-        "some-label-tray-menu-item-for-extension-some-extension-id",
+        "some-random-id-tray-menu-item-for-extension-some-extension-id",
       );
 
       expect(clickMock).toHaveBeenCalled();
@@ -55,13 +57,13 @@ describe("clicking tray menu item originating from extension", () => {
         });
 
         applicationBuilder.tray.click(
-          "some-label-tray-menu-item-for-extension-some-extension-id",
+          "some-random-id-tray-menu-item-for-extension-some-extension-id",
         );
       });
 
       it("logs the error", () => {
         expect(logErrorMock).toHaveBeenCalledWith(
-          '[TRAY]: Clicking of tray item "some-label" from extension "some-extension-id" failed.',
+          '[TRAY]: Clicking of tray item "some-random-id" from extension "some-extension-id" failed.',
           expect.any(Error),
         );
       });
@@ -72,13 +74,13 @@ describe("clicking tray menu item originating from extension", () => {
         clickMock.mockImplementation(() => Promise.reject("some-rejection"));
 
         applicationBuilder.tray.click(
-          "some-label-tray-menu-item-for-extension-some-extension-id",
+          "some-random-id-tray-menu-item-for-extension-some-extension-id",
         );
       });
 
       it("logs the error", () => {
         expect(logErrorMock).toHaveBeenCalledWith(
-          '[TRAY]: Clicking of tray item "some-label" from extension "some-extension-id" failed.',
+          '[TRAY]: Clicking of tray item "some-random-id" from extension "some-extension-id" failed.',
           "some-rejection",
         );
       });
@@ -92,7 +94,7 @@ describe("clicking tray menu item originating from extension", () => {
       it("does not have the tray menu item from extension", () => {
         expect(
           applicationBuilder.tray.get(
-            "some-label-tray-menu-item-for-extension-some-extension-id",
+            "some-random-id-tray-menu-item-for-extension-some-extension-id",
           ),
         ).toBeNull();
       });
@@ -103,7 +105,7 @@ describe("clicking tray menu item originating from extension", () => {
 
         expect(
           applicationBuilder.tray.get(
-            "some-label-tray-menu-item-for-extension-some-extension-id",
+            "some-random-id-tray-menu-item-for-extension-some-extension-id",
           ),
         ).not.toBeNull();
       });

src/behaviours/tray/extension-adding-tray-items.test.tsx

@@ -13,6 +13,7 @@ describe("preferences: extension adding tray items", () => {
     let builder: ApplicationBuilder;
     let someObservableForVisibility: IObservableValue<boolean>;
     let someObservableForEnabled: IObservableValue<boolean>;
+    let someObservableLabel: IObservableValue<string>;
 
     beforeEach(async () => {
       builder = getApplicationBuilder();
@@ -25,6 +26,7 @@ describe("preferences: extension adding tray items", () => {
 
       someObservableForVisibility = observable.box(false);
       someObservableForEnabled = observable.box(false);
+      someObservableLabel = observable.box("Some label");
 
       const testExtension = getExtensionFake({
         id: "some-extension-id",
@@ -33,38 +35,51 @@ describe("preferences: extension adding tray items", () => {
         mainOptions: {
           trayMenus: [
             {
+              id: "some-controlled-visibility",
               label: "some-controlled-visibility",
               click: () => {},
               visible: computed(() => someObservableForVisibility.get()),
             },
 
             {
+              id: "some-uncontrolled-visibility",
               label: "some-uncontrolled-visibility",
               click: () => {},
             },
 
             {
+              id: "some-controlled-enabled",
               label: "some-controlled-enabled",
               click: () => {},
               enabled: computed(() => someObservableForEnabled.get()),
             },
 
             {
+              id: "some-uncontrolled-enabled",
               label: "some-uncontrolled-enabled",
               click: () => {},
             },
 
             {
+              id: "some-statically-enabled",
               label: "some-statically-enabled",
               click: () => {},
               enabled: true,
             },
 
             {
+              id: "some-statically-disabled",
               label: "some-statically-disabled",
               click: () => {},
               enabled: false,
             },
+
+            {
+              id: "some-item-with-controlled-label",
+              label: computed(() => someObservableLabel.get()),
+              click: () => {},
+              enabled: true,
+            },
           ],
         },
       });
@@ -72,6 +87,37 @@ describe("preferences: extension adding tray items", () => {
       builder.extensions.enable(testExtension);
     });
 
+    describe("given controlled label", () => {
+      it("has the label", () => {
+        const item = builder.tray.get(
+          "some-item-with-controlled-label-tray-menu-item-for-extension-some-extension",
+        );
+
+        expect(item?.label).toBe("Some label");
+      });
+
+      it("when label changes, updates the label", () => {
+        runInAction(() => {
+          someObservableLabel.set("Some new label");
+        });
+
+        const item = builder.tray.get(
+          "some-item-with-controlled-label-tray-menu-item-for-extension-some-extension",
+        );
+
+        expect(item?.label).toBe("Some new label");
+
+      });
+    });
+
+    it("given item is statically disabled, item is disabled", () => {
+      const item = builder.tray.get(
+        "some-statically-disabled-tray-menu-item-for-extension-some-extension",
+      );
+
+      expect(item?.enabled).toBe(false);
+    });
+
     it("shows item which doesn't control the visibility", () => {
       expect(
         builder.tray.get(