Add data-origin to status bar items for better observability (#6400)

* Passing id to status-bar-items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add data-origin prop for status bar items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing status bar tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix linter

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Rename id -> origin because it is not unique

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/status-bar/status-bar-item-injection-token.ts

@@ -7,6 +7,7 @@ import type { IComputedValue } from "mobx";
 import type React from "react";
 
 export interface StatusBarItem {
+  origin?: string;
   component: React.ComponentType<any>;
   position: "left" | "right";
   visible: IComputedValue<boolean>;

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

@@ -74,6 +74,7 @@ const toItemInjectableFor = (extension: LensRendererExtension, getRandomId: () =
       id,
 
       instantiate: () => ({
+        origin: extension.sanitizedExtensionId,
         component,
         position,
         visible: visible ?? computed(() => true),

src/renderer/components/status-bar/status-bar-items.injectable.tsx

@@ -10,9 +10,14 @@ 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 {
+  origin?: string;
+  component: React.ComponentType<StatusBarItemProps>;
+}
+
 export interface StatusBarItems {
-  right: React.ComponentType<StatusBarItemProps>[];
-  left: React.ComponentType<StatusBarItemProps>[];
+  right: StatusItem[];
+  left: StatusItem[];
 }
 
 interface Dependencies {
@@ -27,13 +32,16 @@ function getStatusBarItems({ registrations }: Dependencies): IComputedValue<Stat
     };
 
     for (const registration of registrations.get()) {
-      const { position = "right", component, visible } = registration;
+      const { position = "right", component, visible, origin } = registration;
 
       if (!visible.get()) {
         continue;
       }
 
-      res[position].push(component);
+      res[position].push({
+        origin,
+        component,
+      });
     }
 
     // This is done so that the first ones registered are closest to the corner

src/renderer/components/status-bar/status-bar.test.tsx

@@ -65,7 +65,7 @@ describe("<StatusBar />", () => {
 
     builder.beforeWindowStart((windowDi) => {
       windowDi.override(statusBarItemsInjectable, () => computed(() => ({
-        right: [ () => <span data-testid={testId} >{text}</span> ],
+        right: [ { origin: testId, component: () => <span data-testid={testId} >{text}</span> }],
         left: [],
       }) as StatusBarItems));
     });

src/renderer/components/status-bar/status-bar.tsx

@@ -22,18 +22,24 @@ const NonInjectedStatusBar = observer(({ items }: Dependencies & StatusBarProps)
   const { left, right } = items.get();
 
   return (
-    <div className={styles.StatusBar}>
+    <div className={styles.StatusBar} data-testid="status-bar">
       <div className={styles.leftSide} data-testid="status-bar-left">
         {left.map((Item, index) => (
-          <div className={styles.item} key={index}>
-            <Item />
+          <div
+            className={styles.item}
+            key={index}
+            data-origin={Item.origin}>
+            {<Item.component/>}
           </div>
         ))}
       </div>
       <div className={styles.rightSide} data-testid="status-bar-right">
         {right.map((Item, index) => (
-          <div className={styles.item} key={index}>
-            <Item />
+          <div
+            className={styles.item}
+            key={index}
+            data-origin={Item.origin}>
+            {<Item.component/>}
           </div>
         ))}
       </div>