From 544d9e2686b925c88093b619ee8667b9a47268c6 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 1 Jun 2023 10:33:18 -0400
Subject: [PATCH] chore: Fix type errors from CustomResources

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../custom-resources-route.injectable.ts      |   5 +-
 .../components/custom-resources/view.tsx      | 177 +++++++++---------
 2 files changed, 87 insertions(+), 95 deletions(-)

diff --git a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts
index c0395ffa1d..f4d30a3849 100644
--- a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts
+++ b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts
@@ -2,11 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getFrontEndRouteInjectable } from "../../../../front-end-route-injection-token";
+
+import { getFrontEndRouteInjectable } from "../../../front-end-route-injection-token";
 
 const customResourcesRouteInjectable = getFrontEndRouteInjectable({
   id: "custom-resources-route",
-  path: "/crd/:group?/:name?",
+  path: "/crd/:group/:name",
   clusterFrame: true,
 });
 
diff --git a/packages/core/src/renderer/components/custom-resources/view.tsx b/packages/core/src/renderer/components/custom-resources/view.tsx
index 5ed326cd9b..26d1d10d03 100644
--- a/packages/core/src/renderer/components/custom-resources/view.tsx
+++ b/packages/core/src/renderer/components/custom-resources/view.tsx
@@ -8,7 +8,6 @@ import "./view.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import { computed } from "mobx";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { formatJSONValue, safeJSONPathValue } from "@k8slens/utilities";
 import { TabLayout } from "../layout/tab-layout-2";
@@ -37,100 +36,92 @@ export interface CustomResourcesProps {
   params: ParametersFromRouteInjectable<typeof customResourcesRouteInjectable>;
 }
 
-@observer
-class NonInjectedCustomResources extends React.Component<Dependencies & CustomResourcesProps> {
-  readonly crd = computed(() => {
-    if (this.props.params.group && this.props.params.name) {
-      return this.props.customResourceDefinitionStore.getByGroup(this.props.params.group, this.props.params.name);
-    }
+const NonInjectedCustomResources = observer((props: Dependencies & CustomResourcesProps) => {
+  const {
+    apiManager,
+    customResourceDefinitionStore,
+    params,
+  } = props;
+  const crd = customResourceDefinitionStore.getByGroup(params.group, params.name);
+  const store = apiManager.getStore(crd?.getResourceApiBase());
 
-    return undefined;
-  });
-
-  readonly store = computed(() => this.props.apiManager.getStore(this.crd.get()?.getResourceApiBase()));
-
-  render() {
-    const crd = this.crd.get();
-    const store = this.store.get();
-
-    if (!crd || !store) {
-      return null;
-    }
-
-    const isNamespaced = crd.isNamespaced();
-    const extraColumns = crd.getPrinterColumns(false);  // Cols with priority bigger than 0 are shown in details
-    const version = crd.getPreferredVersion();
-
-    return (
-      <TabLayout>
-        <KubeObjectListLayout
-          isConfigurable
-          key={`crd_resources_${crd.getResourceApiBase()}`}
-          tableId="crd_resources"
-          className="CustomResources"
-          store={store}
-          sortingCallbacks={{
-            [columnId.name]: customResource => customResource.getName(),
-            [columnId.namespace]: customResource => customResource.getNs(),
-            [columnId.age]: customResource => -customResource.getCreationTimestamp(),
-            ...Object.fromEntries(extraColumns.map(({ name, jsonPath }) => [
-              name,
-              customResource => formatJSONValue(safeJSONPathValue(customResource, jsonPath)),
-            ])),
-          }}
-          searchFilters={[
-            customResource => customResource.getSearchFields(),
-          ]}
-          renderHeaderTitle={crd.getResourceKind()}
-          customizeHeader={({ searchProps, ...headerPlaceholders }) => ({
-            searchProps: {
-              ...searchProps,
-              placeholder: `${crd.getResourceKind()} search ...`,
-            },
-            ...headerPlaceholders,
-          })}
-          renderTableHeader={[
-            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-            isNamespaced
-              ? { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }
-              : undefined,
-            ...extraColumns.map(({ name }) => ({
-              title: name,
-              className: name.toLowerCase().replace(/\s+/g, "-"),
-              sortBy: name,
-              id: name,
-              "data-testid": `custom-resource-column-title-${name.toLowerCase().replace(/\s+/g, "-")}`,
-            })),
-            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          ]}
-          renderTableContents={customResource => [
-            customResource.getName(),
-            isNamespaced && (
-              <NamespaceSelectBadge namespace={customResource.getNs() as string} />
-            ),
-            ...extraColumns.map((column): TableCellProps => ({
-              "data-testid": `custom-resource-column-cell-${column.name.toLowerCase().replace(/\s+/g, "-")}-for-${customResource.getScopedName()}`,
-              title: formatJSONValue(safeJSONPathValue(customResource, column.jsonPath)),
-            })),
-            <KubeObjectAge key="age" object={customResource} />,
-          ]}
-          failedToLoadMessage={(
-            <>
-              <p>
-                {`Failed to load ${crd.getPluralName()}`}
-              </p>
-              {!version.served && (
-                <p>
-                  {`Preferred version (${crd.getGroup()}/${version.name}) is not served`}
-                </p>
-              )}
-            </>
-          )}
-        />
-      </TabLayout>
-    );
+  if (!crd || !store) {
+    return null;
   }
-}
+
+  const isNamespaced = crd.isNamespaced();
+  const extraColumns = crd.getPrinterColumns(false);  // Cols with priority bigger than 0 are shown in details
+  const version = crd.getPreferredVersion();
+
+  return (
+    <TabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        key={`crd_resources_${crd.getResourceApiBase()}`}
+        tableId="crd_resources"
+        className="CustomResources"
+        store={store}
+        sortingCallbacks={{
+          [columnId.name]: customResource => customResource.getName(),
+          [columnId.namespace]: customResource => customResource.getNs(),
+          [columnId.age]: customResource => -customResource.getCreationTimestamp(),
+          ...Object.fromEntries(extraColumns.map(({ name, jsonPath }) => [
+            name,
+            customResource => formatJSONValue(safeJSONPathValue(customResource, jsonPath)),
+          ])),
+        }}
+        searchFilters={[
+          customResource => customResource.getSearchFields(),
+        ]}
+        renderHeaderTitle={crd.getResourceKind()}
+        customizeHeader={({ searchProps, ...headerPlaceholders }) => ({
+          searchProps: {
+            ...searchProps,
+            placeholder: `${crd.getResourceKind()} search ...`,
+          },
+          ...headerPlaceholders,
+        })}
+        renderTableHeader={[
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          isNamespaced
+            ? { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }
+            : undefined,
+          ...extraColumns.map(({ name }) => ({
+            title: name,
+            className: name.toLowerCase().replace(/\s+/g, "-"),
+            sortBy: name,
+            id: name,
+            "data-testid": `custom-resource-column-title-${name.toLowerCase().replace(/\s+/g, "-")}`,
+          })),
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+        ]}
+        renderTableContents={customResource => [
+          customResource.getName(),
+          isNamespaced && (
+            <NamespaceSelectBadge namespace={customResource.getNs() as string} />
+          ),
+          ...extraColumns.map((column): TableCellProps => ({
+            "data-testid": `custom-resource-column-cell-${column.name.toLowerCase().replace(/\s+/g, "-")}-for-${customResource.getScopedName()}`,
+            title: formatJSONValue(safeJSONPathValue(customResource, column.jsonPath)),
+          })),
+          <KubeObjectAge key="age" object={customResource} />,
+        ]}
+        failedToLoadMessage={(
+          <>
+            <p>
+              {`Failed to load ${crd.getPluralName()}`}
+            </p>
+            {!version.served && (
+              <p>
+                {`Preferred version (${crd.getGroup()}/${version.name}) is not served`}
+              </p>
+            )}
+          </>
+        )}
+      />
+    </TabLayout>
+  );
+});
 
 export const CustomResources = withInjectables<Dependencies, CustomResourcesProps>(NonInjectedCustomResources, {
   getProps: (di, props) => ({