feat: Introduce API for changing the status bar colour

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<StatusBarStatus>("default"),
+});
+
+export default statusBarCurrentStatusInjectable;

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;

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<boolean> | 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,

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<StatusBarItemProps>;
 }
@@ -20,50 +18,38 @@ export interface StatusBarItems {
   left: StatusItem[];
 }
 
-interface Dependencies {
-  registrations: IComputedValue<StatusBarItem[]>;
-}
-
-function getStatusBarItems({ registrations }: Dependencies): IComputedValue<StatusBarItems> {
-  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 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 getStatusBarItems({
-      registrations: computedInjectMany(statusBarItemInjectionToken),
+      return res;
     });
   },
-
 });
 
 export default statusBarItemsInjectable;

packages/core/src/renderer/components/status-bar/status-bar.module.scss

@@ -8,12 +8,20 @@
   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;
+  background-color: var(--colorInfo);
+
+  &.status-warning {
+    background-color: var(--colorWarning);
+  }
+
+  &.status-error {
+    background-color: var(--colorError);
+  }
 }
 
 .leftSide {