Fix rerendering of KubeObject views every 30s (#4801)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/+storage/index.ts

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-export * from "./storage";

src/renderer/components/+storage/route-tabs.injectable.ts

@@ -2,21 +2,22 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-
-import "./storage.scss";
-
-import React from "react";
-import { observer } from "mobx-react";
-import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import type { TabLayoutRoute } from "../layout/tab-layout";
 import { PersistentVolumes } from "../+storage-volumes";
 import { StorageClasses } from "../+storage-classes";
 import { PersistentVolumeClaims } from "../+storage-volume-claims";
-import { isAllowedResource } from "../../../common/utils/allowed-resource";
+import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
+import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
 import * as routes from "../../../common/routes";
 
-@observer
-export class Storage extends React.Component {
-  static get tabRoutes() {
+interface Dependencies {
+  isAllowedResource: IsAllowedResource;
+}
+
+function getRouteTabs({ isAllowedResource }: Dependencies) {
+  return computed(() => {
     const tabs: TabLayoutRoute[] = [];
 
     if (isAllowedResource("persistentvolumeclaims")) {
@@ -47,11 +48,14 @@ export class Storage extends React.Component {
     }
 
     return tabs;
-  }
-
-  render() {
-    return (
-      <TabLayout className="Storage" tabs={Storage.tabRoutes}/>
-    );
-  }
+  });
 }
+
+const storageRouteTabsInjectable = getInjectable({
+  instantiate: (di) => getRouteTabs({
+    isAllowedResource: di.inject(isAllowedResourceInjectable),
+  }),
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default storageRouteTabsInjectable;

src/renderer/components/+storage/route.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./storage.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
+import type { IComputedValue } from "mobx";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import storageRouteTabsInjectable from "./route-tabs.injectable";
+
+export interface StorageRouteProps {}
+
+interface Dependencies {
+  routes: IComputedValue<TabLayoutRoute[]>;
+}
+
+const NonInjectedStorageRoute = observer(({ routes }: Dependencies & StorageRouteProps) => (
+  <TabLayout
+    className="Storage"
+    tabs={routes.get()}
+  />
+));
+
+export const StorageRoute = withInjectables<Dependencies, StorageRouteProps>(NonInjectedStorageRoute, {
+  getProps: (di, props) => ({
+    routes: di.inject(storageRouteTabsInjectable),
+    ...props,
+  }),
+});
+

src/renderer/components/+storage/sidebar-item.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { IComputedValue } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+import { storageRoute, storageURL } from "../../../common/routes";
+import { isActiveRoute } from "../../navigation";
+import { Icon } from "../icon";
+import { SidebarItem } from "../layout/sidebar-item";
+import type { TabLayoutRoute } from "../layout/tab-layout";
+import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import storageRouteTabsInjectable from "./route-tabs.injectable";
+
+export interface StorageSidebarItemProps {}
+
+interface Dependencies {
+  routes: IComputedValue<TabLayoutRoute[]>;
+}
+
+const NonInjectedStorageSidebarItem = observer(({ routes }: Dependencies & StorageSidebarItemProps) => {
+  const tabRoutes = routes.get();
+
+  return (
+    <SidebarItem
+      id="storage"
+      text="Storage"
+      isActive={isActiveRoute(storageRoute)}
+      isHidden={tabRoutes.length == 0}
+      url={storageURL()}
+      icon={<Icon svg="storage"/>}
+    >
+      <TabRoutesSidebarItems routes={tabRoutes} />
+    </SidebarItem>
+  );
+});
+
+export const StorageSidebarItem = withInjectables<Dependencies, StorageSidebarItemProps>(NonInjectedStorageSidebarItem, {
+  getProps: (di, props) => ({
+    routes: di.inject(storageRouteTabsInjectable),
+    ...props,
+  }),
+});