Fix KubeObjectDetails drawer not working for Cluster scoped resources (#5954)

- Fix not displaying spinner while object is not defined

- Fix not displaying loading error if object is not defined

Signed-off-by: Sebastian Malton <sebastian@malton.name>
(cherry picked from commit 07568839f6)

src/common/k8s-api/kube-object.store.ts

@@ -355,7 +355,7 @@ export abstract class KubeObjectStore<
   async loadFromPath(resourcePath: string) {
     const { namespace, name } = parseKubeApi(resourcePath);
 
-    assert(name && namespace, "Both name and namesapce must be part of resourcePath");
+    assert(name, "name must be part of resourcePath");
 
     return this.load({ name, namespace });
   }

src/renderer/components/kube-object-details/kube-object-details.tsx

@@ -8,7 +8,7 @@ import "./kube-object-details.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { IComputedValue } from "mobx";
-import { computed, observable, reaction, makeObservable } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { Drawer } from "../drawer";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { Spinner } from "../spinner";
@@ -51,11 +51,11 @@ class NonInjectedKubeObjectDetails extends React.Component<Dependencies> {
     makeObservable(this);
   }
 
-  @computed get path() {
+  get path() {
     return this.props.kubeDetailsUrlParam.get();
   }
 
-  @computed get object() {
+  get object() {
     return this.props.kubeObject.get();
   }
 
@@ -102,43 +102,32 @@ class NonInjectedKubeObjectDetails extends React.Component<Dependencies> {
   }
 
   renderContents(object: KubeObject) {
-    const { isLoading, loadingError } = this;
     const details = this.props.detailComponents.get();
 
-    const getContents = () => {
+    if (details.length === 0) {
-      if (details.length === 0) {
+      const crd = this.props.customResourceDefinitionStore.getByObject(object);
-        const crd = this.props.customResourceDefinitionStore.getByObject(object);
 
-        /**
+      /**
        * This is a fallback so that if a custom resource object doesn't have
        * any defined details we should try and display at least some details
        */
-        if (crd) {
+      if (crd) {
-          return (
+        return (
-            <CustomResourceDetails
+          <CustomResourceDetails
-              key={object.getId()}
+            key={object.getId()}
-              object={object}
+            object={object}
-              crd={crd}
+            crd={crd}
-            />
+          />
-          );
+        );
-        } else {
+      } else {
-          // if we still don't have any details to show, just show the standard object metadata
+        // if we still don't have any details to show, just show the standard object metadata
-          return <KubeObjectMeta key={object.getId()} object={object} />;
+        return <KubeObjectMeta key={object.getId()} object={object} />;
-        }
       }
+    }
 
-      return details.map((DetailComponent, index) => (
+    return details.map((DetailComponent, index) => (
-        <DetailComponent key={index} object={object} />
+      <DetailComponent key={index} object={object} />
-      ));
+    ));
-    };
-
-    return (
-      <>
-        {isLoading && <Spinner center/>}
-        {loadingError && <div className="box center">{loadingError}</div>}
-        {getContents()}
-      </>
-    );
   }
 
   render() {
@@ -152,6 +141,8 @@ class NonInjectedKubeObjectDetails extends React.Component<Dependencies> {
         toolbar={object && <KubeObjectMenu object={object} toolbar={true}/>}
         onClose={this.props.hideDetails}
       >
+        {isLoading && <Spinner center/>}
+        {loadingError && <div className="box center">{loadingError}</div>}
         {object && this.renderContents(object)}
       </Drawer>
     );