cleanup Lens repo with tighter linting

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

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

@@ -1,4 +1,4 @@
-import "./add-role-binding-dialog.scss"
+import "./add-role-binding-dialog.scss";
 
 import React from "react";
 import { computed, observable } from "mobx";
@@ -9,7 +9,7 @@ import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Select, SelectOption } from "../select";
 import { SubTitle } from "../layout/sub-title";
-import { IRoleBindingSubject, RoleBinding, ServiceAccount, Role } from "../../api/endpoints";
+import { RoleBindingSubject, RoleBinding, ServiceAccount, Role } from "../../api/endpoints";
 import { Icon } from "../icon";
 import { Input } from "../input";
 import { NamespaceSelect } from "../+namespaces/namespace-select";
@@ -25,7 +25,7 @@ import { roleBindingsStore } from "./role-bindings.store";
 interface BindingSelectOption extends SelectOption {
   value: string; // binding name
   item?: ServiceAccount | any;
-  subject?: IRoleBindingSubject; // used for new user/group when users-management-api not available
+  subject?: RoleBindingSubject; // used for new user/group when users-management-api not available
 }
 
 interface Props extends Partial<DialogProps> {
@@ -36,12 +36,12 @@ export class AddRoleBindingDialog extends React.Component<Props> {
   @observable static isOpen = false;
   @observable static data: RoleBinding = null;
 
-  static open(roleBinding?: RoleBinding) {
+  static open(roleBinding?: RoleBinding): void {
     AddRoleBindingDialog.isOpen = true;
     AddRoleBindingDialog.data = roleBinding;
   }
 
-  static close() {
+  static close(): void {
     AddRoleBindingDialog.isOpen = false;
   }
 
@@ -56,36 +56,41 @@ export class AddRoleBindingDialog extends React.Component<Props> {
   @observable bindContext = ""; // empty value means "cluster-wide", otherwise bind to namespace
   @observable selectedAccounts = observable.array<ServiceAccount>([], { deep: false });
 
-  @computed get isEditing() {
+  @computed get isEditing(): boolean {
     return !!this.roleBinding;
   }
 
-  @computed get selectedRole() {
+  @computed get selectedRole(): Role {
     return rolesStore.items.find(role => role.getId() === this.selectedRoleId);
   }
 
-  @computed get selectedBindings() {
+  @computed get selectedBindings(): ServiceAccount[] {
     return [
       ...this.selectedAccounts,
-    ]
+    ];
   }
 
-  close = () => {
+  close = (): void => {
     AddRoleBindingDialog.close();
   }
 
-  async loadData() {
+  async loadData(): Promise<void> {
     const stores = [
       namespaceStore,
       rolesStore,
       serviceAccountsStore,
     ];
-    this.isLoading = true;
-    await Promise.all(stores.map(store => store.loadAll()));
-    this.isLoading = false;
+    try {
+      this.isLoading = true;
+      await Promise.all(stores.map(store => store.loadAll()));
+    } catch (error) {
+      Notifications.error(error);
+    } finally {
+      this.isLoading = false;
+    }
   }
 
-  onOpen = async () => {
+  onOpen = async (): Promise<void> => {
     await this.loadData();
 
     if (this.roleBinding) {
@@ -98,13 +103,13 @@ export class AddRoleBindingDialog extends React.Component<Props> {
     }
   }
 
-  reset = () => {
+  reset = (): void => {
     this.selectedRoleId = "";
     this.bindContext = "";
     this.selectedAccounts.clear();
   }
 
-  onBindContextChange = (namespace: string) => {
+  onBindContextChange = (namespace: string): void => {
     this.bindContext = namespace;
     const roleContext = this.selectedRole && this.selectedRole.getNs() || "";
     if (this.bindContext && this.bindContext !== roleContext) {
@@ -112,16 +117,16 @@ export class AddRoleBindingDialog extends React.Component<Props> {
     }
   }
 
-  createBindings = async () => {
+  createBindings = async (): Promise<void> => {
     const { selectedRole, bindContext: namespace, selectedBindings, bindingName, useRoleForBindingName } = this;
 
-    const subjects = selectedBindings.map((item: KubeObject | IRoleBindingSubject) => {
+    const subjects = selectedBindings.map((item: KubeObject | RoleBindingSubject) => {
       if (item instanceof KubeObject) {
         return {
           name: item.getName(),
           kind: item.kind,
           namespace: item.getNs(),
-        }
+        };
       }
       return item;
     });
@@ -133,8 +138,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           roleBinding: this.roleBinding,
           addSubjects: subjects,
         });
-      }
-      else {
+      } else {
         const name = useRoleForBindingName ? selectedRole.getName() : bindingName;
         roleBinding = await roleBindingsStore.create({ name, namespace }, {
           subjects: subjects,
@@ -152,7 +156,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
   };
 
   @computed get roleOptions(): BindingSelectOption[] {
-    let roles = rolesStore.items as Role[]
+    let roles = rolesStore.items as Role[];
     if (this.bindContext) {
       // show only cluster-roles or roles for selected context namespace
       roles = roles.filter(role => !role.getNs() || role.getNs() === this.bindContext);
@@ -163,8 +167,8 @@ export class AddRoleBindingDialog extends React.Component<Props> {
       return {
         value: role.getId(),
         label: name + (namespace ? ` (${namespace})` : "")
-      }
-    })
+      };
+    });
   }
 
   @computed get serviceAccountOptions(): BindingSelectOption[] {
@@ -175,12 +179,12 @@ export class AddRoleBindingDialog extends React.Component<Props> {
         item: account,
         value: name,
         label: <><Icon small material="account_box"/> {name} ({namespace})</>
-      }
-    })
+      };
+    });
   }
 
-  renderContents() {
-    const unwrapBindings = (options: BindingSelectOption[]) => options.map(option => option.item || option.subject);
+  renderContents(): JSX.Element {
+    const unwrapBindings = (options: BindingSelectOption[]): any[] => options.map(option => option.item || option.subject);
     return (
       <>
         <SubTitle title={<Trans>Context</Trans>}/>
@@ -189,7 +193,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           themeName="light"
           isDisabled={this.isEditing}
           value={this.bindContext}
-          onChange={({ value }) => this.onBindContextChange(value)}
+          onChange={({ value }): void => this.onBindContextChange(value)}
         />
 
         <SubTitle title={<Trans>Role</Trans>}/>
@@ -200,7 +204,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           isDisabled={this.isEditing}
           options={this.roleOptions}
           value={this.selectedRoleId}
-          onChange={({ value }) => this.selectedRoleId = value}
+          onChange={({ value }): void => this.selectedRoleId = value}
         />
         {
           !this.isEditing && (
@@ -209,7 +213,9 @@ export class AddRoleBindingDialog extends React.Component<Props> {
                 theme="light"
                 label={<Trans>Use same name for RoleBinding</Trans>}
                 value={this.useRoleForBindingName}
-                onChange={v => this.useRoleForBindingName = v}
+                onChange={(v): void => {
+                  this.useRoleForBindingName = v;
+                }}
               />
               {
                 !this.useRoleForBindingName && (
@@ -218,7 +224,9 @@ export class AddRoleBindingDialog extends React.Component<Props> {
                     placeholder={_i18n._(t`Name`)}
                     disabled={this.isEditing}
                     value={this.bindingName}
-                    onChange={v => this.bindingName = v}
+                    onChange={(v): void => {
+                      this.bindingName = v;
+                    }}
                   />
                 )
               }
@@ -233,17 +241,19 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           placeholder={_i18n._(t`Select service accounts`)}
           autoConvertOptions={false}
           options={this.serviceAccountOptions}
-          onChange={(opts: BindingSelectOption[]) => {
-            if (!opts) opts = [];
+          onChange={(opts: BindingSelectOption[]): void => {
+            if (!opts) {
+              opts = [];
+            }
             this.selectedAccounts.replace(unwrapBindings(opts));
           }}
           maxMenuHeight={200}
         />
       </>
-    )
+    );
   }
 
-  render() {
+  render(): JSX.Element {
     const { ...dialogProps } = this.props;
     const { isEditing, roleBinding, selectedRole, selectedBindings } = this;
     const roleBindingName = roleBinding ? roleBinding.getName() : "";
@@ -275,6 +285,6 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           </WizardStep>
         </Wizard>
       </Dialog>
-    )
+    );
   }
 }

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

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

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

@@ -1,9 +1,9 @@
-import "./role-binding-details.scss"
+import "./role-binding-details.scss";
 
 import * as React from "react";
 import { t, Trans } from "@lingui/macro";
 import { AddRemoveButtons } from "../add-remove-buttons";
-import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
+import { clusterRoleBindingApi, RoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
 import { autobind, prevDefault } from "../../utils";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -23,28 +23,28 @@ interface Props extends KubeObjectDetailsProps<RoleBinding> {
 
 @observer
 export class RoleBindingDetails extends React.Component<Props> {
-  @observable selectedSubjects = observable.array<IRoleBindingSubject>([], { deep: false });
+  @observable selectedSubjects = observable.array<RoleBindingSubject>([], { deep: false });
 
-  async componentDidMount() {
+  async componentDidMount(): Promise<void> {
     disposeOnUnmount(this, [
-      reaction(() => this.props.object, (obj) => {
+      reaction(() => this.props.object, (_obj) => {
         this.selectedSubjects.clear();
       })
-    ])
+    ]);
   }
 
-  selectSubject(subject: IRoleBindingSubject) {
+  selectSubject(subject: RoleBindingSubject): void {
     const { selectedSubjects } = this;
     const isSelected = selectedSubjects.includes(subject);
     selectedSubjects.replace(
       isSelected
         ? selectedSubjects.filter(sub => sub !== subject) // unselect
         : selectedSubjects.concat(subject) // select
-    )
+    );
   }
 
   @autobind()
-  removeSelectedSubjects() {
+  removeSelectedSubjects(): void {
     const { object: roleBinding } = this.props;
     const { selectedSubjects } = this;
     ConfirmDialog.open({
@@ -53,10 +53,10 @@ export class RoleBindingDetails extends React.Component<Props> {
       message: (
         <p><Trans>Remove selected bindings for <b>{roleBinding.getName()}</b>?</Trans></p>
       )
-    })
+    });
   }
 
-  render() {
+  render(): JSX.Element {
     const { selectedSubjects } = this;
     const { object: roleBinding } = this.props;
     if (!roleBinding) {
@@ -104,7 +104,7 @@ export class RoleBindingDetails extends React.Component<Props> {
                   <TableCell className="type">{kind}</TableCell>
                   <TableCell className="ns">{namespace || "-"}</TableCell>
                 </TableRow>
-              )
+              );
             })
           }
         </Table>
@@ -112,13 +112,13 @@ export class RoleBindingDetails extends React.Component<Props> {
         <KubeEventDetails object={roleBinding}/>
 
         <AddRemoveButtons
-          onAdd={() => AddRoleBindingDialog.open(roleBinding)}
+          onAdd={(): void => AddRoleBindingDialog.open(roleBinding)}
           onRemove={selectedSubjects.length ? this.removeSelectedSubjects : null}
           addTooltip={<Trans>Add bindings to {name}</Trans>}
           removeTooltip={<Trans>Remove selected bindings from ${name}</Trans>}
         />
       </div>
-    )
+    );
   }
 }
 

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

@@ -1,6 +1,6 @@
-import difference from "lodash/difference"
-import uniqBy from "lodash/uniqBy"
-import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
+import difference from "lodash/difference";
+import uniqBy from "lodash/uniqBy";
+import { clusterRoleBindingApi, RoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { apiManager } from "../../api/api-manager";
@@ -9,57 +9,58 @@ import { apiManager } from "../../api/api-manager";
 export class RoleBindingsStore extends KubeObjectStore<RoleBinding> {
   api = clusterRoleBindingApi
 
-  subscribe() {
-    return super.subscribe([clusterRoleBindingApi, roleBindingApi])
+  subscribe(): () => void {
+    return super.subscribe([clusterRoleBindingApi, roleBindingApi]);
   }
 
-  protected sortItems(items: RoleBinding[]) {
+  protected sortItems(items: RoleBinding[]): RoleBinding[] {
     return super.sortItems(items, [
-      roleBinding => roleBinding.kind,
-      roleBinding => roleBinding.getName()
-    ])
+      (roleBinding): string => roleBinding.kind,
+      (roleBinding): string => roleBinding.getName()
+    ]);
   }
 
-  protected loadItem(params: { name: string; namespace?: string }) {
-    if (params.namespace) return roleBindingApi.get(params)
-    return clusterRoleBindingApi.get(params)
-  }
-
-  protected loadItems(namespaces?: string[]) {
-    if (namespaces) {
-      return Promise.all(
-        namespaces.map(namespace => roleBindingApi.list({ namespace }))
-      ).then(items => items.flat())
-    }
-    else {
-      return Promise.all([clusterRoleBindingApi.list(), roleBindingApi.list()])
-        .then(items => items.flat())
-    }
-  }
-
-  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<RoleBinding>) {
+  protected loadItem(params: { name: string; namespace?: string }): Promise<RoleBinding> {
     if (params.namespace) {
-      return roleBindingApi.create(params, data)
+      return roleBindingApi.get(params);
     }
-    else {
-      return clusterRoleBindingApi.create(params, data)
+
+    return clusterRoleBindingApi.get(params);
+  }
+
+  protected async loadItems(namespaces?: string[]): Promise<RoleBinding[]> {
+    if (namespaces) {
+      return (
+        await Promise.all(namespaces.map(namespace => roleBindingApi.list({ namespace })))
+      ).flat();
     }
+    
+    return (
+      await Promise.all([clusterRoleBindingApi.list(), roleBindingApi.list()])
+    ).flat();
+  }
+
+  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<RoleBinding>): Promise<RoleBinding> {
+    if (params.namespace) {
+      return roleBindingApi.create(params, data);
+    }
+
+    return clusterRoleBindingApi.create(params, data);
   }
 
   async updateSubjects(params: {
     roleBinding: RoleBinding;
-    addSubjects?: IRoleBindingSubject[];
-    removeSubjects?: IRoleBindingSubject[];
-  }) {
+    addSubjects?: RoleBindingSubject[];
+    removeSubjects?: RoleBindingSubject[];
+  }): Promise<RoleBinding> {
     const { roleBinding, addSubjects, removeSubjects } = params;
     const currentSubjects = roleBinding.getSubjects();
     let newSubjects = currentSubjects;
     if (addSubjects) {
       newSubjects = uniqBy(currentSubjects.concat(addSubjects), ({ kind, name, namespace }) => {
         return [kind, name, namespace].join("-");
-      })
-    }
-    else if (removeSubjects) {
+      });
+    } else if (removeSubjects) {
       newSubjects = difference(currentSubjects, removeSubjects);
     }
     return this.update(roleBinding, {

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

@@ -1,17 +1,15 @@
-import "./role-bindings.scss"
+import "./role-bindings.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
-import { Icon } from "../icon";
-import { IRoleBindingsRouteParams } from "../+user-management/user-management.routes";
+import { RoleBindingsRouteParams } from "../+user-management/user-management.routes";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { clusterRoleBindingApi, RoleBinding, roleBindingApi } from "../../api/endpoints";
 import { roleBindingsStore } from "./role-bindings.store";
 import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
-import { KubeObject } from "../../api/kube-object";
 import { apiManager } from "../../api/api-manager";
 
 enum sortBy {
@@ -21,25 +19,25 @@ enum sortBy {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IRoleBindingsRouteParams> {
+interface Props extends RouteComponentProps<RoleBindingsRouteParams> {
 }
 
 @observer
 export class RoleBindings extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="RoleBindings"
         store={roleBindingsStore}
         sortingCallbacks={{
-          [sortBy.name]: (binding: RoleBinding) => binding.getName(),
-          [sortBy.namespace]: (binding: RoleBinding) => binding.getNs(),
-          [sortBy.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
-          [sortBy.age]: (binding: RoleBinding) => binding.metadata.creationTimestamp,
+          [sortBy.name]: (binding: RoleBinding): string => binding.getName(),
+          [sortBy.namespace]: (binding: RoleBinding): string => binding.getNs(),
+          [sortBy.bindings]: (binding: RoleBinding): string => binding.getSubjectNames(),
+          [sortBy.age]: (binding: RoleBinding): string => binding.metadata.creationTimestamp,
         }}
         searchFilters={[
-          (binding: RoleBinding) => binding.getSearchFields(),
-          (binding: RoleBinding) => binding.getSubjectNames(),
+          (binding: RoleBinding): string[] => binding.getSearchFields(),
+          (binding: RoleBinding): string => binding.getSubjectNames(),
         ]}
         renderHeaderTitle={<Trans>Role Bindings</Trans>}
         renderTableHeader={[
@@ -48,30 +46,30 @@ export class RoleBindings extends React.Component<Props> {
           { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(binding: RoleBinding) => [
+        renderTableContents={(binding: RoleBinding): (string | number)[] => [
           binding.getName(),
           binding.getSubjectNames(),
           binding.getNs() || "-",
           binding.getAge(),
         ]}
-        renderItemMenu={(item: RoleBinding) => {
-          return <RoleBindingMenu object={item}/>
+        renderItemMenu={(item: RoleBinding): JSX.Element => {
+          return <RoleBindingMenu object={item}/>;
         }}
         addRemoveButtons={{
-          onAdd: () => AddRoleBindingDialog.open(),
+          onAdd: (): void => AddRoleBindingDialog.open(),
           addTooltip: <Trans>Create new RoleBinding</Trans>,
         }}
       />
-    )
+    );
   }
 }
 
-export function RoleBindingMenu(props: KubeObjectMenuProps<RoleBinding>) {
+export function RoleBindingMenu(props: KubeObjectMenuProps<RoleBinding>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews([roleBindingApi, clusterRoleBindingApi], {
   Menu: RoleBindingMenu,
-})
+});