From dc60517e48dbd4a32305a89de5ba3fbe8fd6e6fe Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 30 Jul 2021 10:46:13 -0400
Subject: [PATCH] Fix custom resources not having a fallback details component

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/api/kube-object.ts               | 10 +++++++
 .../crd-resource-details.tsx                  | 26 ++++++-------------
 .../kube-object/kube-object-details.tsx       | 17 +++++++++---
 .../kube-object-detail-registry.tsx           |  9 +------
 4 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/renderer/api/kube-object.ts b/src/renderer/api/kube-object.ts
index 2548cac3aa..37deac617c 100644
--- a/src/renderer/api/kube-object.ts
+++ b/src/renderer/api/kube-object.ts
@@ -86,6 +86,16 @@ export class KubeStatus {
   }
 }
 
+export interface KubeObjectStatus {
+  conditions: {
+    lastTransitionTime: string;
+    message: string;
+    reason: string;
+    status: string;
+    type?: string;
+  }[];
+}
+
 export type KubeMetaField = keyof KubeObjectMetadata;
 
 export class KubeObject<Metadata extends KubeObjectMetadata = KubeObjectMetadata, Status = any, Spec = any> implements ItemObject {
diff --git a/src/renderer/components/+custom-resources/crd-resource-details.tsx b/src/renderer/components/+custom-resources/crd-resource-details.tsx
index dc6181c63c..0d1e44f79b 100644
--- a/src/renderer/components/+custom-resources/crd-resource-details.tsx
+++ b/src/renderer/components/+custom-resources/crd-resource-details.tsx
@@ -24,18 +24,18 @@ import "./crd-resource-details.scss";
 import React from "react";
 import jsonPath from "jsonpath";
 import { observer } from "mobx-react";
-import { computed, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Badge } from "../badge";
 import { DrawerItem } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object";
-import { crdStore } from "./crd.store";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { Input } from "../input";
 import type { AdditionalPrinterColumnsV1, CustomResourceDefinition } from "../../api/endpoints/crd.api";
 import { parseJsonPath } from "../../utils/jsonPath";
+import type { KubeObject, KubeObjectMetadata, KubeObjectStatus } from "../../api/kube-object";
 
-interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
+interface Props extends KubeObjectDetailsProps<KubeObject> {
+  crd: CustomResourceDefinition;
 }
 
 function convertSpecValue(value: any): any {
@@ -60,24 +60,15 @@ function convertSpecValue(value: any): any {
 
 @observer
 export class CrdResourceDetails extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
-  @computed get crd() {
-    return crdStore.getByObject(this.props.object);
-  }
-
-  renderAdditionalColumns(crd: CustomResourceDefinition, columns: AdditionalPrinterColumnsV1[]) {
+  renderAdditionalColumns(resource: KubeObject, columns: AdditionalPrinterColumnsV1[]) {
     return columns.map(({ name, jsonPath: jp }) => (
       <DrawerItem key={name} name={name} renderBoolean>
-        {convertSpecValue(jsonPath.value(crd, parseJsonPath(jp.slice(1))))}
+        {convertSpecValue(jsonPath.value(resource, parseJsonPath(jp.slice(1))))}
       </DrawerItem>
     ));
   }
 
-  renderStatus(crd: CustomResourceDefinition, columns: AdditionalPrinterColumnsV1[]) {
+  renderStatus(crd: KubeObject<KubeObjectMetadata, KubeObjectStatus, any>, columns: AdditionalPrinterColumnsV1[]) {
     const showStatus = !columns.find(column => column.name == "Status") && crd.status?.conditions;
 
     if (!showStatus) {
@@ -104,17 +95,16 @@ export class CrdResourceDetails extends React.Component<Props> {
   }
 
   render() {
-    const { props: { object }, crd } = this;
+    const { props: { object, crd } } = this;
 
     if (!object || !crd) {
       return null;
     }
 
-    const className = cssNames("CrdResourceDetails", crd.getResourceKind());
     const extraColumns = crd.getPrinterColumns();
 
     return (
-      <div className={className}>
+      <div className={cssNames("CrdResourceDetails", crd.getResourceKind())}>
         <KubeObjectMeta object={object} />
         {this.renderAdditionalColumns(object, extraColumns)}
         {this.renderStatus(object, extraColumns)}
diff --git a/src/renderer/components/kube-object/kube-object-details.tsx b/src/renderer/components/kube-object/kube-object-details.tsx
index b7a178c3ab..3a4261d5a8 100644
--- a/src/renderer/components/kube-object/kube-object-details.tsx
+++ b/src/renderer/components/kube-object/kube-object-details.tsx
@@ -33,6 +33,7 @@ import { crdStore } from "../+custom-resources/crd.store";
 import { KubeObjectMenu } from "./kube-object-menu";
 import { KubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 import logger from "../../../main/logger";
+import { CrdResourceDetails } from "../+custom-resources";
 
 /**
  * Used to store `object.selfLink` to show more info about resource in the details panel.
@@ -111,10 +112,6 @@ export class KubeObjectDetails extends React.Component {
     }
   }
 
-  @computed get isCrdInstance() {
-    return !!crdStore.getByObject(this.object);
-  }
-
   @disposeOnUnmount
   loader = reaction(() => [
     this.path,
@@ -169,6 +166,18 @@ export class KubeObjectDetails extends React.Component {
         <item.components.Details object={object} key={`object-details-${index}`} />
       ));
 
+    if (details.length === 0) {
+      const crd = crdStore.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) {
+        details.push(<CrdResourceDetails key={object.getId()} object={object} crd={crd} />);
+      }
+    }
+
     return (
       <Drawer
         className="KubeObjectDetails flex column"
diff --git a/src/renderer/initializers/kube-object-detail-registry.tsx b/src/renderer/initializers/kube-object-detail-registry.tsx
index 2ad06552b4..e922b897e9 100644
--- a/src/renderer/initializers/kube-object-detail-registry.tsx
+++ b/src/renderer/initializers/kube-object-detail-registry.tsx
@@ -27,7 +27,7 @@ import { ConfigMapDetails } from "../components/+config-maps";
 import { PodDisruptionBudgetDetails } from "../components/+config-pod-disruption-budgets";
 import { ResourceQuotaDetails } from "../components/+config-resource-quotas";
 import { SecretDetails } from "../components/+config-secrets";
-import { CRDDetails, CrdResourceDetails } from "../components/+custom-resources";
+import { CRDDetails } from "../components/+custom-resources";
 import { EventDetails } from "../components/+events";
 import { KubeEventDetails } from "../components/+events/kube-event-details";
 import { NamespaceDetails } from "../components/+namespaces";
@@ -445,12 +445,5 @@ export function intiKubeObjectDetailRegistry() {
           Details: KubeEventDetails,
         }
       },
-      {
-        kind: "CustomResourceDefinition",
-        apiVersions: ["apiextensions.k8s.io/v1"],
-        components: {
-          Details: CrdResourceDetails,
-        }
-      }
     ]);
 }