Improve Table typing and remove annotations on callbacks (#2981)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+custom-resources/crd-list.tsx

@@ -32,6 +32,7 @@ import type { CustomResourceDefinition } from "../../api/endpoints/crd.api";
 import { Select, SelectOption } from "../select";
 import { createPageParam } from "../../navigation";
 import { Icon } from "../icon";
+import type { TableSortCallbacks } from "../table";
 
 export const crdGroupsUrlParam = createPageParam<string[]>({
   name: "groups",
@@ -78,11 +79,11 @@ export class CrdList extends React.Component {
 
   render() {
     const { items, selectedGroups } = this;
-    const sortingCallbacks = {
-      [columnId.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
-      [columnId.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
-      [columnId.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
-      [columnId.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
+    const sortingCallbacks: TableSortCallbacks<CustomResourceDefinition> = {
+      [columnId.kind]: crd => crd.getResourceKind(),
+      [columnId.group]: crd => crd.getGroup(),
+      [columnId.version]: crd => crd.getVersion(),
+      [columnId.scope]: crd => crd.getScope(),
     };
 
     return (
@@ -137,7 +138,7 @@ export class CrdList extends React.Component {
           { title: "Scope", className: "scope", sortBy: columnId.scope, id: columnId.scope },
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
-        renderTableContents={(crd: CustomResourceDefinition) => [
+        renderTableContents={crd => [
           <Link key="link" to={crd.getResourceUrl()} onClick={stopPropagation}>
             {crd.getResourceKind()}
           </Link>,

src/renderer/components/+custom-resources/crd-resource.store.ts

@@ -23,10 +23,10 @@ import type { KubeApi } from "../../api/kube-api";
 import { KubeObjectStore } from "../../kube-object.store";
 import type { KubeObject } from "../../api/kube-object";
 
-export class CRDResourceStore<T extends KubeObject = any> extends KubeObjectStore<T> {
-  api: KubeApi;
+export class CRDResourceStore<K extends KubeObject> extends KubeObjectStore<K> {
+  api: KubeApi<K>;
 
-  constructor(api: KubeApi<T>) {
+  constructor(api: KubeApi<K>) {
     super();
     this.api = api;
   }

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -29,7 +29,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import type { KubeObject } from "../../api/kube-object";
 import { autorun, computed, makeObservable } from "mobx";
 import { crdStore } from "./crd.store";
-import type { TableSortCallback } from "../table";
+import type { TableSortCallbacks } from "../table";
 import { apiManager } from "../../api/api-manager";
 import { parseJsonPath } from "../../utils/jsonPath";
 import type { CRDRouteParams } from "../../../common/routes";
@@ -80,14 +80,14 @@ export class CrdResources extends React.Component<Props> {
     if (!crd) return null;
     const isNamespaced = crd.isNamespaced();
     const extraColumns = crd.getPrinterColumns(false);  // Cols with priority bigger than 0 are shown in details
-    const sortingCallbacks: { [sortBy: string]: TableSortCallback } = {
-      [columnId.name]: (item: KubeObject) => item.getName(),
-      [columnId.namespace]: (item: KubeObject) => item.getNs(),
-      [columnId.age]: (item: KubeObject) => item.getTimeDiffFromNow(),
+    const sortingCallbacks: TableSortCallbacks<KubeObject> = {
+      [columnId.name]: item => item.getName(),
+      [columnId.namespace]: item => item.getNs(),
+      [columnId.age]: item => item.getTimeDiffFromNow(),
     };
 
     extraColumns.forEach(column => {
-      sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.value(item, parseJsonPath(column.jsonPath.slice(1)));
+      sortingCallbacks[column.name] = item => jsonPath.value(item, parseJsonPath(column.jsonPath.slice(1)));
     });
 
     return (
@@ -98,7 +98,7 @@ export class CrdResources extends React.Component<Props> {
         store={store}
         sortingCallbacks={sortingCallbacks}
         searchFilters={[
-          (item: KubeObject) => item.getSearchFields(),
+          item => item.getSearchFields(),
         ]}
         renderHeaderTitle={crd.getResourceTitle()}
         customizeHeader={({ searchProps, ...headerPlaceholders }) => ({
@@ -123,7 +123,7 @@ export class CrdResources extends React.Component<Props> {
           }),
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
-        renderTableContents={(crdInstance: KubeObject) => [
+        renderTableContents={crdInstance => [
           crdInstance.getName(),
           isNamespaced && crdInstance.getNs(),
           ...extraColumns.map((column) => {

src/renderer/components/+custom-resources/crd.store.ts

@@ -26,13 +26,18 @@ import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
 import { apiManager } from "../../api/api-manager";
 import { KubeApi } from "../../api/kube-api";
 import { CRDResourceStore } from "./crd-resource.store";
-import type { KubeObject } from "../../api/kube-object";
+import { KubeObject } from "../../api/kube-object";
 
 function initStore(crd: CustomResourceDefinition) {
   const apiBase = crd.getResourceApiBase();
   const kind = crd.getResourceKind();
   const isNamespaced = crd.isNamespaced();
-  const api = apiManager.getApi(apiBase) || new KubeApi({ apiBase, kind, isNamespaced });
+  const api = apiManager.getApi(apiBase) ?? new KubeApi({
+    objectConstructor: KubeObject,
+    apiBase,
+    kind,
+    isNamespaced,
+  });
 
   if (!apiManager.getStore(api)) {
     apiManager.registerStore(new CRDResourceStore(api));