cleanup Lens repo with tighter linting

Signed-off-by: Sebastian Malton <smalton@mirantis.com>

dashboard/client/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx

@@ -1,7 +1,7 @@
-import "./certificate-details.scss"
+import "./certificate-details.scss";
 
 import React from "react";
-import moment from "moment"
+import moment from "moment";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { Trans } from "@lingui/macro";
@@ -19,9 +19,11 @@ interface Props extends KubeObjectDetailsProps<Certificate> {
 
 @observer
 export class CertificateDetails extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { object: cert, className } = this.props;
-    if (!cert) return;
+    if (!cert) {
+      return;
+    }
     const { spec, status } = cert;
     const { acme, isCA, commonName, secretName, dnsNames, duration, ipAddresses, keyAlgorithm, keySize, organization, renewBefore } = spec;
     const { lastFailureTime, notAfter } = status;
@@ -104,7 +106,7 @@ export class CertificateDetails extends React.Component<Props> {
                 tooltip={tooltip}
                 className={cssNames({ [type.toLowerCase()]: isReady })}
               />
-            )
+            );
           })}
         </DrawerItem>
 
@@ -126,7 +128,7 @@ export class CertificateDetails extends React.Component<Props> {
                     </DrawerItem>
                   )}
                 </div>
-              )
+              );
             })}
           </>
         )}
@@ -139,4 +141,4 @@ export class CertificateDetails extends React.Component<Props> {
 
 apiManager.registerViews(certificatesApi, {
   Details: CertificateDetails
-})
+});

dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.tsx

@@ -1,4 +1,4 @@
-import "./certificates.scss"
+import "./certificates.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
@@ -24,10 +24,10 @@ enum sortBy {
 
 @observer
 export class Certificates extends React.Component<KubeObjectListLayoutProps> {
-  render() {
+  render(): JSX.Element {
     const { store = apiManager.getStore(certificatesApi), ...layoutProps } = this.props;
     if (!store) {
-      return <Spinner center/>
+      return <Spinner center/>;
     }
     return (
       <KubeObjectListLayout
@@ -35,19 +35,19 @@ export class Certificates extends React.Component<KubeObjectListLayoutProps> {
         store={store}
         className="Certificates"
         sortingCallbacks={{
-          [sortBy.name]: (item: Certificate) => item.getName(),
-          [sortBy.namespace]: (item: Certificate) => item.getNs(),
-          [sortBy.secretName]: (item: Certificate) => item.getSecretName(),
-          [sortBy.commonName]: (item: Certificate) => item.getCommonName(),
-          [sortBy.issuer]: (item: Certificate) => item.getIssuerName(),
-          [sortBy.type]: (item: Certificate) => item.getType(),
+          [sortBy.name]: (item: Certificate): string => item.getName(),
+          [sortBy.namespace]: (item: Certificate): string => item.getNs(),
+          [sortBy.secretName]: (item: Certificate): string => item.getSecretName(),
+          [sortBy.commonName]: (item: Certificate): string => item.getCommonName(),
+          [sortBy.issuer]: (item: Certificate): string => item.getIssuerName(),
+          [sortBy.type]: (item: Certificate): string => item.getType(),
         }}
         searchFilters={[
-          (item: Certificate) => item.getSearchFields(),
-          (item: Certificate) => item.getSecretName(),
-          (item: Certificate) => item.getCommonName(),
-          (item: Certificate) => item.getIssuerName(),
-          (item: Certificate) => item.getType(),
+          (item: Certificate): string[] => item.getSearchFields(),
+          (item: Certificate): string => item.getSecretName(),
+          (item: Certificate): string => item.getCommonName(),
+          (item: Certificate): string => item.getIssuerName(),
+          (item: Certificate): string => item.getType(),
         ]}
         renderHeaderTitle={<Trans>Certificates</Trans>}
         renderTableHeader={[
@@ -60,16 +60,16 @@ export class Certificates extends React.Component<KubeObjectListLayoutProps> {
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Status</Trans>, className: "status" },
         ]}
-        renderTableContents={(cert: Certificate) => {
+        renderTableContents={(cert: Certificate): (string | JSX.Element | number | JSX.Element[])[] => {
           return [
             cert.getName(),
             cert.getNs(),
             cert.getCommonName(),
             cert.getType(),
-            <Link to={cert.getIssuerDetailsUrl()} onClick={stopPropagation}>
+            <Link key="issuer" to={cert.getIssuerDetailsUrl()} onClick={stopPropagation}>
               {cert.getIssuerName()}
             </Link>,
-            <Link to={cert.getSecretDetailsUrl()} onClick={stopPropagation}>
+            <Link key="secret" to={cert.getSecretDetailsUrl()} onClick={stopPropagation}>
               {cert.getSecretName()}
             </Link>,
             cert.getAge(),
@@ -81,25 +81,25 @@ export class Certificates extends React.Component<KubeObjectListLayoutProps> {
                   tooltip={tooltip}
                   className={cssNames({ [type.toLowerCase()]: isReady })}
                 />
-              )
+              );
             })
-          ]
+          ];
         }}
-        renderItemMenu={(item: Certificate) => {
-          return <CertificateMenu object={item}/>
+        renderItemMenu={(item: Certificate): JSX.Element => {
+          return <CertificateMenu object={item}/>;
         }}
       />
     );
   }
 }
 
-export function CertificateMenu(props: KubeObjectMenuProps<Certificate>) {
+export function CertificateMenu(props: KubeObjectMenuProps<Certificate>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(certificatesApi, {
   List: Certificates,
   Menu: CertificateMenu
-})
+});

dashboard/client/components/+custom-resources/certmanager.k8s.io/index.ts

@@ -1,4 +1,4 @@
-export * from "./certificates"
-export * from "./certificate-details"
-export * from "./issuers"
-export * from "./issuer-details"
+export * from "./certificates";
+export * from "./certificate-details";
+export * from "./issuers";
+export * from "./issuer-details";

dashboard/client/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx

@@ -1,4 +1,4 @@
-import "./issuer-details.scss"
+import "./issuer-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -21,7 +21,7 @@ interface Props extends KubeObjectDetailsProps<Issuer> {
 @observer
 export class IssuerDetails extends React.Component<Props> {
   @autobind()
-  renderSecretLink(secretName: string) {
+  renderSecretLink(secretName: string): JSX.Element | string {
     const namespace = this.props.object.getNs();
     if (!namespace) {
       return secretName;
@@ -34,12 +34,14 @@ export class IssuerDetails extends React.Component<Props> {
       <Link to={secretDetailsUrl}>
         {secretName}
       </Link>
-    )
+    );
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: issuer, className } = this.props;
-    if (!issuer) return;
+    if (!issuer) {
+      return;
+    }
     const { renderSecretLink } = this;
     const { spec: { acme, ca, vault, venafi }, status } = issuer;
     return (
@@ -59,12 +61,12 @@ export class IssuerDetails extends React.Component<Props> {
                 tooltip={tooltip}
                 className={cssNames({ [type.toLowerCase()]: isReady })}
               />
-            )
+            );
           })}
         </DrawerItem>
 
-        {acme && (() => {
-          const { email, server, skipTLSVerify, privateKeySecretRef, solvers } = acme;
+        {acme && ((): JSX.Element => {
+          const { email, server, skipTLSVerify, privateKeySecretRef } = acme;
           return (
             <>
               <DrawerTitle title="ACME"/>
@@ -86,10 +88,10 @@ export class IssuerDetails extends React.Component<Props> {
                 {skipTLSVerify ? <Trans>Yes</Trans> : <Trans>No</Trans>}
               </DrawerItem>
             </>
-          )
+          );
         })()}
 
-        {ca && (() => {
+        {ca && ((): JSX.Element => {
           const { secretName } = ca;
           return (
             <>
@@ -98,10 +100,10 @@ export class IssuerDetails extends React.Component<Props> {
                 {renderSecretLink(secretName)}
               </DrawerItem>
             </>
-          )
+          );
         })()}
 
-        {vault && (() => {
+        {vault && ((): JSX.Element => {
           const { auth, caBundle, path, server } = vault;
           const { path: authPath, roleId, secretRef } = auth.appRole;
           return (
@@ -130,10 +132,10 @@ export class IssuerDetails extends React.Component<Props> {
                 </DrawerItem>
               )}
             </>
-          )
+          );
         })()}
 
-        {venafi && (() => {
+        {venafi && ((): JSX.Element => {
           const { zone, cloud, tpp } = venafi;
           return (
             <>
@@ -161,7 +163,7 @@ export class IssuerDetails extends React.Component<Props> {
                 </>
               )}
             </>
-          )
+          );
         })()}
 
         <KubeEventDetails object={issuer}/>
@@ -172,4 +174,4 @@ export class IssuerDetails extends React.Component<Props> {
 
 apiManager.registerViews([issuersApi, clusterIssuersApi], {
   Details: IssuerDetails
-})
+});

dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.tsx

@@ -1,4 +1,4 @@
-import "./issuers.scss"
+import "./issuers.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
@@ -21,7 +21,7 @@ enum sortBy {
 
 @observer
 export class ClusterIssuers extends React.Component<KubeObjectListLayoutProps> {
-  render() {
+  render(): JSX.Element {
     const store = apiManager.getStore(clusterIssuersApi);
     return (
       <Issuers
@@ -30,16 +30,16 @@ export class ClusterIssuers extends React.Component<KubeObjectListLayoutProps> {
         store={store}
         renderHeaderTitle={<Trans>Cluster Issuers</Trans>}
       />
-    )
+    );
   }
 }
 
 @observer
 export class Issuers extends React.Component<KubeObjectListLayoutProps> {
-  render() {
+  render(): JSX.Element {
     const { store = apiManager.getStore(issuersApi), ...layoutProps } = this.props;
     if (!store) {
-      return <Spinner center/>
+      return <Spinner center/>;
     }
     return (
       <KubeObjectListLayout
@@ -48,15 +48,15 @@ export class Issuers extends React.Component<KubeObjectListLayoutProps> {
         {...layoutProps}
         className="Issuers"
         sortingCallbacks={{
-          [sortBy.name]: (item: Issuer) => item.getName(),
-          [sortBy.namespace]: (item: Issuer) => item.getNs(),
-          [sortBy.type]: (item: Issuer) => item.getType(),
-          [sortBy.labels]: (item: Issuer) => item.getLabels(),
-          [sortBy.age]: (item: Issuer) => item.metadata.creationTimestamp,
+          [sortBy.name]: (item: Issuer): string => item.getName(),
+          [sortBy.namespace]: (item: Issuer): string => item.getNs(),
+          [sortBy.type]: (item: Issuer): string => item.getType(),
+          [sortBy.labels]: (item: Issuer): string[] => item.getLabels(),
+          [sortBy.age]: (item: Issuer): string=> item.metadata.creationTimestamp,
         }}
         searchFilters={[
-          (item: Issuer) => item.getSearchFields(),
-          (item: Issuer) => item.getType(),
+          (item: Issuer): string[] => item.getSearchFields(),
+          (item: Issuer): string => item.getType(),
         ]}
         renderTableHeader={[
           { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
@@ -66,7 +66,7 @@ export class Issuers extends React.Component<KubeObjectListLayoutProps> {
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Status</Trans>, className: "status" },
         ]}
-        renderTableContents={(issuer: Issuer) => [
+        renderTableContents={(issuer: Issuer): (string | JSX.Element[] | number)[] => [
           issuer.getName(),
           issuer.getNs(),
           issuer.getLabels().map(label => <Badge key={label} label={label} title={label}/>),
@@ -80,24 +80,24 @@ export class Issuers extends React.Component<KubeObjectListLayoutProps> {
                 tooltip={tooltip}
                 className={cssNames({ [type.toLowerCase()]: isReady })}
               />
-            )
+            );
           })
         ]}
-        renderItemMenu={(item: Issuer) => {
-          return <IssuerMenu object={item}/>
+        renderItemMenu={(item: Issuer): JSX.Element => {
+          return <IssuerMenu object={item}/>;
         }}
       />
     );
   }
 }
 
-export function IssuerMenu(props: KubeObjectMenuProps<Issuer>) {
+export function IssuerMenu(props: KubeObjectMenuProps<Issuer>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews([issuersApi, clusterIssuersApi], {
   List: Issuers,
   Menu: IssuerMenu,
-})
+});

dashboard/client/components/+custom-resources/crd-details.tsx

@@ -20,9 +20,11 @@ interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
 
 @observer
 export class CRDDetails extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { object: crd } = this.props;
-    if (!crd) return null;
+    if (!crd) {
+      return null;
+    }
     const { plural, singular, kind, listKind } = crd.getNames();
     const printerColumns = crd.getPrinterColumns();
     const validation = crd.getValidation();
@@ -59,7 +61,7 @@ export class CRDDetails extends React.Component<Props> {
         <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
           {
             crd.getConditions().map(condition => {
-              const { type, message, lastTransitionTime, status } = condition
+              const { type, message, lastTransitionTime, status } = condition;
               return (
                 <Badge
                   key={type}
@@ -111,7 +113,7 @@ export class CRDDetails extends React.Component<Props> {
                       <Badge label={JSONPath}/>
                     </TableCell>
                   </TableRow>
-                )
+                );
               })
             }
           </Table>
@@ -129,10 +131,10 @@ export class CRDDetails extends React.Component<Props> {
         </>
         }
       </div>
-    )
+    );
   }
 }
 
 apiManager.registerViews(crdApi, {
   Details: CRDDetails
-})
+});

dashboard/client/components/+custom-resources/crd-list.tsx

@@ -1,4 +1,4 @@
-import "./crd-list.scss"
+import "./crd-list.scss";
 
 import React from "react";
 import { Trans } from "@lingui/macro";
@@ -25,25 +25,28 @@ enum sortBy {
 
 @observer
 export class CrdList extends React.Component {
-  @computed get groups() {
-    return navigation.searchParams.getAsArray("groups")
+  @computed get groups(): string[] {
+    return navigation.searchParams.getAsArray("groups");
   }
 
-  onGroupChange(group: string) {
+  onGroupChange(group: string): void {
     const groups = [...this.groups];
     const index = groups.findIndex(item => item == group);
-    if (index !== -1) groups.splice(index, 1);
-    else groups.push(group);
-    setQueryParams({ groups })
+    if (index !== -1) {
+      groups.splice(index, 1);
+    } else {
+      groups.push(group);
+    }
+    setQueryParams({ groups });
   }
 
-  render() {
+  render(): JSX.Element {
     const selectedGroups = this.groups;
     const sortingCallbacks = {
-      [sortBy.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
-      [sortBy.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
-      [sortBy.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
-      [sortBy.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
+      [sortBy.kind]: (crd: CustomResourceDefinition): string => crd.getResourceKind(),
+      [sortBy.group]: (crd: CustomResourceDefinition): string => crd.getGroup(),
+      [sortBy.version]: (crd: CustomResourceDefinition): string => crd.getVersion(),
+      [sortBy.scope]: (crd: CustomResourceDefinition): string => crd.getScope(),
     };
     return (
       <KubeObjectListLayout
@@ -53,15 +56,19 @@ export class CrdList extends React.Component {
         sortingCallbacks={sortingCallbacks}
         searchFilters={Object.values(sortingCallbacks)}
         filterItems={[
-          (items: CustomResourceDefinition[]) => {
-            return selectedGroups.length ? items.filter(item => selectedGroups.includes(item.getGroup())) : items
+          (items: CustomResourceDefinition[]): CustomResourceDefinition[] => {
+            return selectedGroups.length ? items.filter(item => selectedGroups.includes(item.getGroup())) : items;
           }
         ]}
         renderHeaderTitle={<Trans>Custom Resources</Trans>}
-        customizeHeader={() => {
+        customizeHeader={(): (JSX.Element | {filters: JSX.Element}) => {
           let placeholder = <Trans>All groups</Trans>;
-          if (selectedGroups.length == 1) placeholder = <><Trans>Group</Trans>: {selectedGroups[0]}</>
-          if (selectedGroups.length >= 2) placeholder = <><Trans>Groups</Trans>: {selectedGroups.join(", ")}</>
+          if (selectedGroups.length == 1) {
+            placeholder = <><Trans>Group</Trans>: {selectedGroups[0]}</>;
+          }
+          if (selectedGroups.length >= 2) {
+            placeholder = <><Trans>Groups</Trans>: {selectedGroups.join(", ")}</>;
+          }
           return {
             // fixme: move to global filters
             filters: (
@@ -69,9 +76,9 @@ export class CrdList extends React.Component {
                 className="group-select"
                 placeholder={placeholder}
                 options={Object.keys(crdStore.groups)}
-                onChange={({ value: group }: SelectOption) => this.onGroupChange(group)}
+                onChange={({ value: group }: SelectOption): void => this.onGroupChange(group)}
                 controlShouldRenderValue={false}
-                formatOptionLabel={({ value: group }: SelectOption) => {
+                formatOptionLabel={({ value: group }: SelectOption): JSX.Element => {
                   const isSelected = selectedGroups.includes(group);
                   return (
                     <div className="flex gaps align-center">
@@ -79,11 +86,11 @@ export class CrdList extends React.Component {
                       <span>{group}</span>
                       {isSelected && <Icon small material="check" className="box right"/>}
                     </div>
-                  )
+                  );
                 }}
               />
             )
-          }
+          };
         }}
         renderTableHeader={[
           { title: <Trans>Resource</Trans>, className: "kind", sortBy: sortBy.kind },
@@ -92,29 +99,29 @@ export class CrdList extends React.Component {
           { title: <Trans>Scope</Trans>, className: "scope", sortBy: sortBy.scope },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(crd: CustomResourceDefinition) => {
+        renderTableContents={(crd: CustomResourceDefinition): (JSX.Element | string | number)[] => {
           return [
-            <Link to={crd.getResourceUrl()} onClick={stopPropagation}>
+            <Link key="title" to={crd.getResourceUrl()} onClick={stopPropagation}>
               {crd.getResourceTitle()}
             </Link>,
             crd.getGroup(),
             crd.getVersion(),
             crd.getScope(),
             crd.getAge(),
-          ]
+          ];
         }}
-        renderItemMenu={(item: CustomResourceDefinition) => {
-          return <CRDMenu object={item}/>
+        renderItemMenu={(item: CustomResourceDefinition): JSX.Element => {
+          return <CRDMenu object={item}/>;
         }}
       />
-    )
+    );
   }
 }
 
-export function CRDMenu(props: KubeObjectMenuProps<CustomResourceDefinition>) {
+export function CRDMenu(props: KubeObjectMenuProps<CustomResourceDefinition>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(crdApi, {

dashboard/client/components/+custom-resources/crd-resource-details.tsx

@@ -13,6 +13,7 @@ import { apiManager } from "../../api/api-manager";
 import { crdStore } from "./crd.store";
 import { KubeObject } from "../../api/kube-object";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { CustomResourceDefinition } from "client/api/endpoints/crd.api";
 
 // fixme: provide type-safe check for status
 interface Props extends KubeObjectDetailsProps<KubeObject & { status: any }> {
@@ -20,23 +21,25 @@ interface Props extends KubeObjectDetailsProps<KubeObject & { status: any }> {
 
 @observer
 export class CrdResourceDetails extends React.Component<Props> {
-  @computed get crd() {
+  @computed get crd(): CustomResourceDefinition {
     return crdStore.getByObject(this.props.object);
   }
 
-  @computed get CustomDetailsViews() {
-    return apiManager.getViews(this.props.object.selfLink).Details;
+  @computed get CustomDetailsViews(): React.ComponentType<KubeObjectDetailsProps<KubeObject>> | null {
+    return apiManager.getViews(this.props.object.selfLink).Details || null;
   }
 
-  render() {
+  render(): JSX.Element {
     const { object } = this.props;
     const { crd, CustomDetailsViews } = this;
-    if (!object || !crd) return null;
+    if (!object || !crd) {
+      return null;
+    }
     const className = cssNames("CrdResourceDetails", crd.getResourceKind());
     const extraColumns = crd.getPrinterColumns();
     const showStatus = !extraColumns.find(column => column.name == "Status") && object.status?.conditions;
     if (CustomDetailsViews) {
-      return <CustomDetailsViews className={className} object={object}/>
+      return <CustomDetailsViews className={className} object={object}/>;
     }
     return (
       <div className={className}>
@@ -47,7 +50,7 @@ export class CrdResourceDetails extends React.Component<Props> {
             <DrawerItem key={name} name={name}>
               {jsonPath.query(object, column.JSONPath.slice(1))}
             </DrawerItem>
-          )
+          );
         })}
         {showStatus && (
           <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
@@ -64,6 +67,6 @@ export class CrdResourceDetails extends React.Component<Props> {
           </DrawerItem>
         )}
       </div>
-    )
+    );
   }
 }

dashboard/client/components/+custom-resources/crd-resources.tsx

@@ -8,13 +8,15 @@ import { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObject } from "../../api/kube-object";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
-import { ICRDRouteParams } from "./crd.route";
+import { CRDRouteParams } from "./crd.route";
 import { autorun, computed } from "mobx";
 import { crdStore } from "./crd.store";
 import { SortingCallback } from "../table";
 import { apiManager } from "../../api/api-manager";
+import { CustomResourceDefinition } from "client/api/endpoints/crd.api";
+import { KubeObjectStore } from "client/kube-object.store";
 
-interface Props extends RouteComponentProps<ICRDRouteParams> {
+interface Props extends RouteComponentProps<CRDRouteParams> {
 }
 
 enum sortBy {
@@ -25,7 +27,7 @@ enum sortBy {
 
 @observer
 export class CrdResources extends React.Component<Props> {
-  componentDidMount() {
+  componentDidMount(): void {
     disposeOnUnmount(this, [
       autorun(() => {
         const { store } = this;
@@ -33,32 +35,36 @@ export class CrdResources extends React.Component<Props> {
           store.loadAll();
         }
       })
-    ])
+    ]);
   }
 
-  @computed get crd() {
+  @computed get crd(): CustomResourceDefinition {
     const { group, name } = this.props.match.params;
     return crdStore.getByGroup(group, name);
   }
 
-  @computed get store() {
-    if (!this.crd) return null
+  @computed get store(): KubeObjectStore<any> | null {
+    if (!this.crd) {
+      return null;
+    }
     return apiManager.getStore(this.crd.getResourceApiBase());
   }
 
-  render() {
+  render(): JSX.Element {
     const { crd, store } = this;
-    if (!crd) return null;
+    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]: SortingCallback } = {
       [sortBy.name]: (item: KubeObject) => item.getName(),
       [sortBy.namespace]: (item: KubeObject) => item.getNs(),
       [sortBy.age]: (item: KubeObject) => item.metadata.creationTimestamp,
-    }
+    };
     extraColumns.forEach(column => {
-      sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.query(item, column.JSONPath.slice(1))
-    })
+      sortingCallbacks[column.name] = (item: KubeObject): any[] => jsonPath.query(item, column.JSONPath.slice(1));
+    });
     // todo: merge extra columns and other params to predefined view
     const { List } = apiManager.getViews(crd.getResourceApiBase());
     const ListView = List || KubeObjectListLayout;
@@ -69,7 +75,7 @@ export class CrdResources extends React.Component<Props> {
         store={store}
         sortingCallbacks={sortingCallbacks}
         searchFilters={[
-          (item: KubeObject) => item.getSearchFields(),
+          (item: KubeObject): string[] => item.getSearchFields(),
         ]}
         renderHeaderTitle={crd.getResourceTitle()}
         renderTableHeader={[
@@ -81,11 +87,11 @@ export class CrdResources extends React.Component<Props> {
               title: name,
               className: name.toLowerCase(),
               sortBy: name
-            }
+            };
           }),
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(crdInstance: KubeObject) => [
+        renderTableContents={(crdInstance: KubeObject): any[] => [
           crdInstance.getName(),
           isNamespaced && crdInstance.getNs(),
           ...extraColumns.map(column =>
@@ -93,20 +99,20 @@ export class CrdResources extends React.Component<Props> {
           ),
           crdInstance.getAge(),
         ]}
-        renderItemMenu={(item: KubeObject) => {
-          return <CrdResourceMenu object={item}/>
+        renderItemMenu={(item: KubeObject): JSX.Element => {
+          return <CrdResourceMenu object={item}/>;
         }}
       />
-    )
+    );
   }
 }
 
-export function CrdResourceMenu(props: KubeObjectMenuProps<KubeObject>) {
+export function CrdResourceMenu(props: KubeObjectMenuProps<KubeObject>): JSX.Element {
   const { Menu } = apiManager.getViews(props.object.selfLink);
   if (Menu) {
-    return <Menu {...props}/>
+    return <Menu {...props}/>;
   }
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }

dashboard/client/components/+custom-resources/crd.route.ts

@@ -3,24 +3,24 @@ import { buildURL } from "../../navigation";
 
 export const crdRoute: RouteProps = {
   path: "/crd"
-}
+};
 
 export const crdDefinitionsRoute: RouteProps = {
   path: crdRoute.path + "/definitions"
-}
+};
 
 export const crdResourcesRoute: RouteProps = {
   path: crdRoute.path + "/:group/:name"
-}
+};
 
-export interface ICRDListQuery {
+export interface CRDListQuery {
   groups?: string;
 }
 
-export interface ICRDRouteParams {
+export interface CRDRouteParams {
   group: string;
   name: string;
 }
 
-export const crdURL = buildURL<{}, ICRDListQuery>(crdDefinitionsRoute.path);
-export const crdResourcesURL = buildURL<ICRDRouteParams>(crdResourcesRoute.path);
+export const crdURL = buildURL<{}, CRDListQuery>(crdDefinitionsRoute.path);
+export const crdResourcesURL = buildURL<CRDRouteParams>(crdResourcesRoute.path);

dashboard/client/components/+custom-resources/crd.store.ts

@@ -17,17 +17,17 @@ export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
     // auto-init stores for crd-s
     reaction(() => this.items.toJS(), items => {
       items.forEach(this.initStore);
-    })
+    });
   }
 
-  protected sortItems(items: CustomResourceDefinition[]) {
+  protected sortItems(items: CustomResourceDefinition[]): CustomResourceDefinition[] {
     return super.sortItems(items, [
-      crd => crd.getGroup(),
-      crd => crd.getName(),
-    ])
+      (crd): string => crd.getGroup(),
+      (crd): string => crd.getName(),
+    ]);
   }
 
-  protected initStore(crd: CustomResourceDefinition) {
+  protected initStore(crd: CustomResourceDefinition): void {
     const apiBase = crd.getResourceApiBase();
     let api = apiManager.getApi(apiBase);
     if (!api) {
@@ -44,28 +44,35 @@ export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
     }
   }
 
-  @computed get groups() {
+  @computed get groups(): Record<string, CustomResourceDefinition[]> {
     const groups: Record<string, CustomResourceDefinition[]> = {};
-    return this.items.reduce((groups, crd) => {
-      const group = crd.getGroup();
-      if (!groups[group]) groups[group] = [];
-      groups[group].push(crd);
-      return groups;
-    }, groups)
+    return this.items
+      .reduce((groups, crd) => {
+        const group = crd.getGroup();
+        if (!groups[group]) {
+          groups[group] = [];
+        }
+        groups[group].push(crd);
+        return groups;
+      }, groups);
   }
 
-  getByGroup(group: string, pluralName: string) {
+  getByGroup(group: string, pluralName: string): CustomResourceDefinition {
     const crdInGroup = this.groups[group];
-    if (!crdInGroup) return null;
+    if (!crdInGroup) {
+      return null;
+    }
     return crdInGroup.find(crd => crd.getPluralName() === pluralName);
   }
 
-  getByObject(obj: KubeObject) {
-    if (!obj) return null
+  getByObject(obj: KubeObject): CustomResourceDefinition {
+    if (!obj) {
+      return null;
+    }
     const { kind, apiVersion } = obj;
     return this.items.find(crd => {
-      return kind === crd.getResourceKind() && apiVersion === `${crd.getGroup()}/${crd.getVersion()}`
-    })
+      return kind === crd.getResourceKind() && apiVersion === `${crd.getGroup()}/${crd.getVersion()}`;
+    });
   }
 }
 

dashboard/client/components/+custom-resources/custom-resources.tsx

@@ -20,10 +20,10 @@ export class CustomResources extends React.Component {
         url: crdURL(),
         path: crdRoute.path,
       }
-    ]
+    ];
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <MainLayout>
         <Switch>

dashboard/client/components/+custom-resources/index.ts

@@ -5,4 +5,4 @@ export * from "./crd-resources";
 export * from "./crd-resource-details";
 
 // customized crd-s
-export * from "./certmanager.k8s.io"
+export * from "./certmanager.k8s.io";