cleanup Lens repo with tighter linting

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

dashboard/client/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -9,7 +9,7 @@ import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Input } from "../input";
 import { systemName } from "../input/input.validators";
-import { IResourceQuotaValues, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { ResourceQuotaValues, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
 import { Select } from "../select";
 import { Icon } from "../icon";
 import { Button } from "../button";
@@ -20,11 +20,16 @@ import { SubTitle } from "../layout/sub-title";
 interface Props extends DialogProps {
 }
 
+export interface QuotaOption { 
+  label: string | JSX.Element;
+  value: string;
+}
+
 @observer
 export class AddQuotaDialog extends React.Component<Props> {
   @observable static isOpen = false;
 
-  static defaultQuotas: IResourceQuotaValues = {
+  static defaultQuotas: ResourceQuotaValues = {
     "limits.cpu": "",
     "limits.memory": "",
     "requests.cpu": "",
@@ -53,43 +58,45 @@ export class AddQuotaDialog extends React.Component<Props> {
   @observable namespace = this.defaultNamespace;
   @observable quotas = AddQuotaDialog.defaultQuotas;
 
-  static open() {
+  static open(): void {
     AddQuotaDialog.isOpen = true;
   }
 
-  static close() {
+  static close(): void {
     AddQuotaDialog.isOpen = false;
   }
 
-  @computed get quotaEntries() {
+  @computed get quotaEntries(): [string, string][] {
     return Object.entries(this.quotas)
-      .filter(([type, value]) => !!value.trim());
+      .filter(([_type, value]) => !!value.trim());
   }
 
-  @computed get quotaOptions() {
-    return Object.keys(this.quotas).map(quota => {
-      const isCompute = quota.endsWith(".cpu") || quota.endsWith(".memory");
-      const isStorage = quota.endsWith(".storage") || quota === "persistentvolumeclaims";
-      const isCount = quota.startsWith("count/");
+  @computed get quotaOptions(): QuotaOption[] {
+    return Object.keys(this.quotas).map(value => {
+      const isCompute = value.endsWith(".cpu") || value.endsWith(".memory");
+      const isStorage = value.endsWith(".storage") || value === "persistentvolumeclaims";
+      const isCount = value.startsWith("count/");
       const icon = isCompute ? "memory" : isStorage ? "storage" : isCount ? "looks_one" : "";
       return {
-        label: icon ? <span className="nobr"><Icon material={icon}/> {quota}</span> : quota,
-        value: quota,
+        label: icon ? <span className="nobr"><Icon material={icon}/> {value}</span> : value,
+        value,
       };
     });
   }
 
-  setQuota = () => {
-    if (!this.quotaSelectValue) return;
+  setQuota = (): void => {
+    if (!this.quotaSelectValue) {
+      return;
+    }
     this.quotas[this.quotaSelectValue] = this.quotaInputValue;
     this.quotaInputValue = "";
   }
 
-  close = () => {
+  close = (): void => {
     AddQuotaDialog.close();
   }
 
-  reset = () => {
+  reset = (): void => {
     this.quotaName = "";
     this.quotaSelectValue = "";
     this.quotaInputValue = "";
@@ -97,10 +104,10 @@ export class AddQuotaDialog extends React.Component<Props> {
     this.quotas = AddQuotaDialog.defaultQuotas;
   }
 
-  addQuota = async () => {
+  addQuota = async (): Promise<void> => {
     try {
       const { quotaName, namespace } = this;
-      const quotas = this.quotaEntries.reduce<IResourceQuotaValues>((quotas, [name, value]) => {
+      const quotas = this.quotaEntries.reduce<ResourceQuotaValues>((quotas, [name, value]) => {
         quotas[name] = value;
         return quotas;
       }, {});
@@ -115,7 +122,7 @@ export class AddQuotaDialog extends React.Component<Props> {
     }
   }
 
-  onInputQuota = (evt: React.KeyboardEvent) => {
+  onInputQuota = (evt: React.KeyboardEvent): void => {
     switch (evt.key) {
     case "Enter":
       this.setQuota();
@@ -124,7 +131,7 @@ export class AddQuotaDialog extends React.Component<Props> {
     }
   }
 
-  render() {
+  render(): JSX.Element {
     const { ...dialogProps } = this.props;
     const header = <h5><Trans>Create ResourceQuota</Trans></h5>;
     return (
@@ -146,7 +153,9 @@ export class AddQuotaDialog extends React.Component<Props> {
                 required autoFocus
                 placeholder={_i18n._(t`ResourceQuota name`)}
                 validators={systemName}
-                value={this.quotaName} onChange={v => this.quotaName = v.toLowerCase()}
+                value={this.quotaName} onChange={(v): void => {
+                  this.quotaName = v.toLowerCase();
+                }}
                 className="box grow"
               />
             </div>
@@ -157,7 +166,7 @@ export class AddQuotaDialog extends React.Component<Props> {
               placeholder={_i18n._(t`Namespace`)}
               themeName="light"
               className="box grow"
-              onChange={({ value }) => this.namespace = value}
+              onChange={({ value }): void => this.namespace = value}
             />
 
             <SubTitle title={<Trans>Values</Trans>}/>
@@ -168,13 +177,15 @@ export class AddQuotaDialog extends React.Component<Props> {
                 placeholder={_i18n._(t`Select a quota..`)}
                 options={this.quotaOptions}
                 value={this.quotaSelectValue}
-                onChange={({ value }) => this.quotaSelectValue = value}
+                onChange={({ value }): void => this.quotaSelectValue = value}
               />
               <Input
                 maxLength={10}
                 placeholder={_i18n._(t`Value`)}
                 value={this.quotaInputValue}
-                onChange={v => this.quotaInputValue = v}
+                onChange={(v): void => {
+                  this.quotaInputValue = v;
+                }}
                 onKeyDown={this.onInputQuota}
                 className="box grow"
               />
@@ -191,14 +202,16 @@ export class AddQuotaDialog extends React.Component<Props> {
                   <div key={quota} className="quota flex gaps inline align-center">
                     <div className="name">{quota}</div>
                     <div className="value">{value}</div>
-                    <Icon material="clear" onClick={() => this.quotas[quota] = ""}/>
+                    <Icon material="clear" onClick={(): void => {
+                      this.quotas[quota] = "";
+                    }}/>
                   </div>
-                )
+                );
               })}
             </div>
           </WizardStep>
         </Wizard>
       </Dialog>
-    )
+    );
   }
 }

dashboard/client/components/+config-resource-quotas/index.ts

@@ -1,3 +1,3 @@
-export * from "./resource-quotas.route"
-export * from "./resource-quotas"
-export * from "./resource-quota-details"
+export * from "./resource-quotas.route";
+export * from "./resource-quotas";
+export * from "./resource-quota-details";

dashboard/client/components/+config-resource-quotas/resource-quota-details.tsx

@@ -17,22 +17,26 @@ interface Props extends KubeObjectDetailsProps<ResourceQuota> {
 
 @observer
 export class ResourceQuotaDetails extends React.Component<Props> {
-  renderQuotas = (quota: ResourceQuota) => {
-    const { hard, used } = quota.status
-    if (!hard || !used) return null
-    const transformUnit = (name: string, value: string) => {
+  renderQuotas = (quota: ResourceQuota): JSX.Element[] => {
+    const { hard, used } = quota.status;
+    if (!hard || !used) {
+      return null;
+    }
+    const transformUnit = (name: string, value: string): number => {
       if (name.includes("memory") || name.includes("storage")) {
-        return unitsToBytes(value)
+        return unitsToBytes(value);
       }
       if (name.includes("cpu")) {
-        return cpuUnitsToNumber(value)
+        return cpuUnitsToNumber(value);
       }
-      return parseInt(value)
-    }
+      return parseInt(value);
+    };
     return Object.entries(hard).map(([name, value]) => {
-      if (!used[name]) return null
-      const current = transformUnit(name, used[name])
-      const max = transformUnit(name, value)
+      if (!used[name]) {
+        return null;
+      }
+      const current = transformUnit(name, used[name]);
+      const max = transformUnit(name, value);
       return (
         <div key={name} className={cssNames("param", kebabCase(name))}>
           <span className="title">{name}</span>
@@ -45,13 +49,15 @@ export class ResourceQuotaDetails extends React.Component<Props> {
             }
           />
         </div>
-      )
-    })
+      );
+    });
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: quota } = this.props;
-    if (!quota) return null;
+    if (!quota) {
+      return null;
+    }
     return (
       <div className="ResourceQuotaDetails">
         <KubeObjectMeta object={quota}/>
@@ -91,4 +97,4 @@ export class ResourceQuotaDetails extends React.Component<Props> {
 
 apiManager.registerViews(resourceQuotaApi, {
   Details: ResourceQuotaDetails
-})
+});

dashboard/client/components/+config-resource-quotas/resource-quotas.route.ts

@@ -3,9 +3,9 @@ import { buildURL } from "../../navigation";
 
 export const resourceQuotaRoute: RouteProps = {
   path: "/resourcequotas"
+};
+
+export interface ResourceQuotaRouteParams {
 }
 
-export interface IResourceQuotaRouteParams {
-}
-
-export const resourceQuotaURL = buildURL<IResourceQuotaRouteParams>(resourceQuotaRoute.path);
+export const resourceQuotaURL = buildURL<ResourceQuotaRouteParams>(resourceQuotaRoute.path);

dashboard/client/components/+config-resource-quotas/resource-quotas.tsx

@@ -9,7 +9,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
 import { AddQuotaDialog } from "./add-quota-dialog";
 import { resourceQuotaStore } from "./resource-quotas.store";
-import { IResourceQuotaRouteParams } from "./resource-quotas.route";
+import { ResourceQuotaRouteParams } from "./resource-quotas.route";
 import { apiManager } from "../../api/api-manager";
 
 enum sortBy {
@@ -18,24 +18,24 @@ enum sortBy {
   age = "age"
 }
 
-interface Props extends RouteComponentProps<IResourceQuotaRouteParams> {
+interface Props extends RouteComponentProps<ResourceQuotaRouteParams> {
 }
 
 @observer
 export class ResourceQuotas extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <>
         <KubeObjectListLayout
           className="ResourceQuotas" store={resourceQuotaStore}
           sortingCallbacks={{
-            [sortBy.name]: (item: ResourceQuota) => item.getName(),
-            [sortBy.namespace]: (item: ResourceQuota) => item.getNs(),
-            [sortBy.age]: (item: ResourceQuota) => item.metadata.creationTimestamp,
+            [sortBy.name]: (item: ResourceQuota): string => item.getName(),
+            [sortBy.namespace]: (item: ResourceQuota): string => item.getNs(),
+            [sortBy.age]: (item: ResourceQuota): string => item.metadata.creationTimestamp,
           }}
           searchFilters={[
-            (item: ResourceQuota) => item.getSearchFields(),
-            (item: ResourceQuota) => item.getName(),
+            (item: ResourceQuota): string[] => item.getSearchFields(),
+            (item: ResourceQuota): string => item.getName(),
           ]}
           renderHeaderTitle={<Trans>Resource Quotas</Trans>}
           renderTableHeader={[
@@ -43,16 +43,14 @@ export class ResourceQuotas extends React.Component<Props> {
             { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
             { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           ]}
-          renderTableContents={(resourceQuota: ResourceQuota) => [
+          renderTableContents={(resourceQuota: ResourceQuota): (string | number)[] => [
             resourceQuota.getName(),
             resourceQuota.getNs(),
             resourceQuota.getAge(),
           ]}
-          renderItemMenu={(item: ResourceQuota) => {
-            return <ResourceQuotaMenu object={item}/>
-          }}
+          renderItemMenu={(item: ResourceQuota): JSX.Element => <ResourceQuotaMenu object={item} />}
           addRemoveButtons={{
-            onAdd: () => AddQuotaDialog.open(),
+            onAdd: (): void => AddQuotaDialog.open(),
             addTooltip: <Trans>Create new ResourceQuota</Trans>
           }}
         />
@@ -62,7 +60,7 @@ export class ResourceQuotas extends React.Component<Props> {
   }
 }
 
-export function ResourceQuotaMenu(props: KubeObjectMenuProps<ResourceQuota>) {
+export function ResourceQuotaMenu(props: KubeObjectMenuProps<ResourceQuota>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
   );
@@ -70,4 +68,4 @@ export function ResourceQuotaMenu(props: KubeObjectMenuProps<ResourceQuota>) {
 
 apiManager.registerViews(resourceQuotaApi, {
   Menu: ResourceQuotaMenu,
-})
+});