cleanup Lens repo with tighter linting

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

dashboard/client/components/+user-management-roles/add-role-dialog.tsx

@@ -1,4 +1,4 @@
-import "./add-role-dialog.scss"
+import "./add-role-dialog.scss";
 
 import * as React from "react";
 import { observable } from "mobx";
@@ -21,23 +21,23 @@ export class AddRoleDialog extends React.Component<Props> {
 
   @observable roleName = "";
 
-  static open() {
+  static open(): void {
     AddRoleDialog.isOpen = true;
   }
 
-  static close() {
+  static close(): void {
     AddRoleDialog.isOpen = false;
   }
 
-  close = () => {
+  close = (): void => {
     AddRoleDialog.close();
   }
 
-  reset = () => {
-    this.roleName = ""
+  reset = (): void => {
+    this.roleName = "";
   }
 
-  createRole = async () => {
+  createRole = async (): Promise<void> => {
     try {
       const role = await rolesStore.create({ name: this.roleName });
       showDetails(role.selfLink);
@@ -48,7 +48,7 @@ export class AddRoleDialog extends React.Component<Props> {
     }
   }
 
-  render() {
+  render(): JSX.Element {
     const { ...dialogProps } = this.props;
     const header = <h5><Trans>Create Role</Trans></h5>;
     return (
@@ -69,11 +69,13 @@ export class AddRoleDialog extends React.Component<Props> {
               placeholder={_i18n._(t`Role name`)}
               iconLeft="supervisor_account"
               value={this.roleName}
-              onChange={v => this.roleName = v}
+              onChange={(v): void => {
+                this.roleName = v;
+              }}
             />
           </WizardStep>
         </Wizard>
       </Dialog>
-    )
+    );
   }
 }

dashboard/client/components/+user-management-roles/index.ts

@@ -1,3 +1,3 @@
-export * from "./roles"
-export * from "./role-details"
-export * from "./add-role-dialog"
+export * from "./roles";
+export * from "./role-details";
+export * from "./add-role-dialog";

dashboard/client/components/+user-management-roles/role-details.tsx

@@ -1,4 +1,4 @@
-import "./role-details.scss"
+import "./role-details.scss";
 
 import React from "react";
 import { Trans } from "@lingui/macro";
@@ -15,9 +15,11 @@ interface Props extends KubeObjectDetailsProps<Role> {
 
 @observer
 export class RoleDetails extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { object: role } = this.props;
-    if (!role) return;
+    if (!role) {
+      return;
+    }
     const rules = role.getRules();
     return (
       <div className="RoleDetails">
@@ -57,15 +59,15 @@ export class RoleDetails extends React.Component<Props> {
                 </>
               )}
             </div>
-          )
+          );
         })}
 
         <KubeEventDetails object={role}/>
       </div>
-    )
+    );
   }
 }
 
 apiManager.registerViews([roleApi, clusterRoleApi], {
   Details: RoleDetails,
-})
+});

dashboard/client/components/+user-management-roles/roles.store.ts

@@ -7,41 +7,43 @@ import { apiManager } from "../../api/api-manager";
 export class RolesStore extends KubeObjectStore<Role> {
   api = clusterRoleApi
 
-  subscribe() {
-    return super.subscribe([roleApi, clusterRoleApi])
+  subscribe(): () => void {
+    return super.subscribe([roleApi, clusterRoleApi]);
   }
 
-  protected sortItems(items: Role[]) {
+  protected sortItems(items: Role[]): Role[] {
     return super.sortItems(items, [
-      role => role.kind,
-      role => role.getName(),
-    ])
+      (role): string => role.kind,
+      (role): string => role.getName(),
+    ]);
   }
 
-  protected loadItem(params: { name: string; namespace?: string }) {
-    if (params.namespace) return roleApi.get(params)
-    return clusterRoleApi.get(params)
-  }
-
-  protected loadItems(namespaces?: string[]): Promise<Role[]> {
-    if (namespaces) {
-      return Promise.all(
-        namespaces.map(namespace => roleApi.list({ namespace }))
-      ).then(items => items.flat())
-    }
-    else {
-      return Promise.all([clusterRoleApi.list(), roleApi.list()])
-        .then(items => items.flat())
-    }
-  }
-
-  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<Role>) {
+  protected loadItem(params: { name: string; namespace?: string }): Promise<Role> {
     if (params.namespace) {
-      return roleApi.create(params, data)
+      return roleApi.get(params);
     }
-    else {
-      return clusterRoleApi.create(params, data)
+    
+    return clusterRoleApi.get(params);
+  }
+
+  protected async loadItems(namespaces?: string[]): Promise<Role[]> {
+    if (namespaces) {
+      return (
+        await Promise.all(namespaces.map(namespace => roleApi.list({ namespace })))
+      ).flat();
     }
+
+    return (
+      await Promise.all([clusterRoleApi.list(), roleApi.list()])
+    ).flat();
+  }
+
+  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<Role>): Promise<Role> {
+    if (params.namespace) {
+      return roleApi.create(params, data);
+    }
+
+    return clusterRoleApi.create(params, data);
   }
 }
 

dashboard/client/components/+user-management-roles/roles.tsx

@@ -1,10 +1,10 @@
-import "./roles.scss"
+import "./roles.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
-import { IRolesRouteParams } from "../+user-management/user-management.routes";
+import { RolesRouteParams } from "../+user-management/user-management.routes";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { rolesStore } from "./roles.store";
 import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
@@ -18,24 +18,24 @@ enum sortBy {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IRolesRouteParams> {
+interface Props extends RouteComponentProps<RolesRouteParams> {
 }
 
 @observer
 export class Roles extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <>
         <KubeObjectListLayout
           className="Roles"
           store={rolesStore}
           sortingCallbacks={{
-            [sortBy.name]: (role: Role) => role.getName(),
-            [sortBy.namespace]: (role: Role) => role.getNs(),
-            [sortBy.age]: (role: Role) => role.metadata.creationTimestamp,
+            [sortBy.name]: (role: Role): string => role.getName(),
+            [sortBy.namespace]: (role: Role): string => role.getNs(),
+            [sortBy.age]: (role: Role): string => role.metadata.creationTimestamp,
           }}
           searchFilters={[
-            (role: Role) => role.getSearchFields(),
+            (role: Role): string[] => role.getSearchFields(),
           ]}
           renderHeaderTitle={<Trans>Roles</Trans>}
           renderTableHeader={[
@@ -43,29 +43,29 @@ export class Roles extends React.Component<Props> {
             { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
             { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           ]}
-          renderTableContents={(role: Role) => [
+          renderTableContents={(role: Role): (string | number)[] => [
             role.getName(),
             role.getNs() || "-",
             role.getAge(),
           ]}
-          renderItemMenu={(item: Role) => {
-            return <RoleMenu object={item}/>
+          renderItemMenu={(item: Role): JSX.Element => {
+            return <RoleMenu object={item}/>;
           }}
           addRemoveButtons={{
-            onAdd: () => AddRoleDialog.open(),
+            onAdd: (): void => AddRoleDialog.open(),
             addTooltip: <Trans>Create new Role</Trans>,
           }}
         />
         <AddRoleDialog/>
       </>
-    )
+    );
   }
 }
 
-export function RoleMenu(props: KubeObjectMenuProps<Role>) {
+export function RoleMenu(props: KubeObjectMenuProps<Role>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews([roleApi, clusterRoleApi], {