cleanup Lens repo with tighter linting

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

dashboard/client/components/+config-secrets/add-secret-dialog.tsx

@@ -1,4 +1,4 @@
-import "./add-secret-dialog.scss"
+import "./add-secret-dialog.scss";
 
 import React from "react";
 import { observable } from "mobx";
@@ -14,7 +14,7 @@ import { SubTitle } from "../layout/sub-title";
 import { NamespaceSelect } from "../+namespaces/namespace-select";
 import { Select, SelectOption } from "../select";
 import { Icon } from "../icon";
-import { IKubeObjectMetadata } from "../../api/kube-object";
+import { KubeObjectMetadata } from "../../api/kube-object";
 import { base64 } from "../../utils";
 import { Notifications } from "../notifications";
 import { showDetails } from "../../navigation";
@@ -23,34 +23,41 @@ import upperFirst from "lodash/upperFirst";
 interface Props extends Partial<DialogProps> {
 }
 
-interface ISecretTemplateField {
+interface SecretTemplateField {
   key: string;
   value?: string;
   required?: boolean;
 }
 
-interface ISecretTemplate {
-  [field: string]: ISecretTemplateField[];
-  annotations?: ISecretTemplateField[];
-  labels?: ISecretTemplateField[];
-  data?: ISecretTemplateField[];
+interface SecretTemplate {
+  [field: string]: SecretTemplateField[];
+  annotations?: SecretTemplateField[];
+  labels?: SecretTemplateField[];
+  data?: SecretTemplateField[];
 }
 
-type ISecretField = keyof ISecretTemplate;
+type SecretField = keyof SecretTemplate;
+
+type RecursivePartial<T> = {
+  [P in keyof T]?:
+  T[P] extends (infer U)[] ? RecursivePartial<U>[] :
+  T[P] extends object ? RecursivePartial<T[P]> :
+  T[P];
+};
 
 @observer
 export class AddSecretDialog extends React.Component<Props> {
   @observable static isOpen = false;
 
-  static open() {
+  static open(): void {
     AddSecretDialog.isOpen = true;
   }
 
-  static close() {
+  static close(): void {
     AddSecretDialog.isOpen = false;
   }
 
-  private secretTemplate: { [p: string]: ISecretTemplate } = {
+  private secretTemplate: Partial<Record<SecretType, SecretTemplate>> = {
     [SecretType.Opaque]: {},
     [SecretType.ServiceAccountToken]: {
       annotations: [
@@ -60,7 +67,7 @@ export class AddSecretDialog extends React.Component<Props> {
     },
   }
 
-  get types() {
+  get types(): SecretType[] {
     return Object.keys(this.secretTemplate) as SecretType[];
   }
 
@@ -69,38 +76,39 @@ export class AddSecretDialog extends React.Component<Props> {
   @observable namespace = "default";
   @observable type = SecretType.Opaque;
 
-  reset = () => {
+  reset = (): void => {
     this.name = "";
     this.secret = this.secretTemplate;
   }
 
-  close = () => {
+  close = (): void => {
     AddSecretDialog.close();
   }
 
-  private getDataFromFields = (fields: ISecretTemplateField[] = [], processValue?: (val: string) => string) => {
+  private getDataFromFields = (fields: SecretTemplateField[] = [], processValue?: (val: string) => string): any => {
     return fields.reduce<any>((data, field) => {
       const { key, value } = field;
       if (key) {
         data[key] = processValue ? processValue(value) : value;
       }
       return data;
-    }, {})
+    }, {});
   }
 
-  createSecret = async () => {
+  createSecret = async (): Promise<void> => {
     const { name, namespace, type } = this;
     const { data = [], labels = [], annotations = [] } = this.secret[type];
+    const metadata: Partial<KubeObjectMetadata> = {
+      name,
+      namespace,
+      annotations: this.getDataFromFields(annotations),
+      labels: this.getDataFromFields(labels),
+    };
     const secret: Partial<Secret> = {
       type: type,
       data: this.getDataFromFields(data, val => val ? base64.encode(val) : ""),
-      metadata: {
-        name: name,
-        namespace: namespace,
-        annotations: this.getDataFromFields(annotations),
-        labels: this.getDataFromFields(labels),
-      } as IKubeObjectMetadata
-    }
+      metadata: metadata as KubeObjectMetadata,
+    };
     try {
       const newSecret = await secretsApi.create({ namespace, name }, secret);
       showDetails(newSecret.selfLink);
@@ -111,18 +119,18 @@ export class AddSecretDialog extends React.Component<Props> {
     }
   }
 
-  addField = (field: ISecretField) => {
+  addField = (field: SecretField): void => {
     const fields = this.secret[this.type][field] || [];
     fields.push({ key: "", value: "" });
     this.secret[this.type][field] = fields;
   }
 
-  removeField = (field: ISecretField, index: number) => {
+  removeField = (field: SecretField, index: number): void => {
     const fields = this.secret[this.type][field] || [];
     fields.splice(index, 1);
   }
 
-  renderFields(field: ISecretField) {
+  renderFields(field: SecretField): JSX.Element {
     const fields = this.secret[this.type][field] || [];
     return (
       <>
@@ -131,7 +139,7 @@ export class AddSecretDialog extends React.Component<Props> {
             small
             tooltip={_i18n._(t`Add field`)}
             material="add_circle_outline"
-            onClick={() => this.addField(field)}
+            onClick={(): void => this.addField(field)}
           />
         </SubTitle>
         <div className="secret-fields">
@@ -145,14 +153,18 @@ export class AddSecretDialog extends React.Component<Props> {
                   title={key}
                   tabIndex={required ? -1 : 0}
                   readOnly={required}
-                  value={key} onChange={v => item.key = v}
+                  value={key} onChange={(v): void => {
+                    item.key = v;
+                  }}
                 />
                 <Input
                   multiLine maxRows={5}
                   required={required}
                   className="value"
                   placeholder={_i18n._(t`Value`)}
-                  value={value} onChange={v => item.value = v}
+                  value={value} onChange={(v): void => {
+                    item.value = v;
+                  }}
                 />
                 <Icon
                   small
@@ -160,17 +172,17 @@ export class AddSecretDialog extends React.Component<Props> {
                   tooltip={required ? <Trans>Required field</Trans> : <Trans>Remove field</Trans>}
                   className="remove-icon"
                   material="remove_circle_outline"
-                  onClick={() => this.removeField(field, index)}
+                  onClick={(): void => this.removeField(field, index)}
                 />
               </div>
-            )
+            );
           })}
         </div>
       </>
-    )
+    );
   }
 
-  render() {
+  render(): JSX.Element {
     const { ...dialogProps } = this.props;
     const { namespace, name, type } = this;
     const header = <h5><Trans>Create Secret</Trans></h5>;
@@ -189,7 +201,9 @@ export class AddSecretDialog extends React.Component<Props> {
                 autoFocus required
                 placeholder={_i18n._(t`Name`)}
                 validators={systemName}
-                value={name} onChange={v => this.name = v}
+                value={name} onChange={(v): void => {
+                  this.name = v;
+                }}
               />
             </div>
             <div className="flex auto gaps">
@@ -198,7 +212,7 @@ export class AddSecretDialog extends React.Component<Props> {
                 <NamespaceSelect
                   themeName="light"
                   value={namespace}
-                  onChange={({ value }) => this.namespace = value}
+                  onChange={({ value }): void => this.namespace = value}
                 />
               </div>
               <div className="secret-type">
@@ -206,7 +220,7 @@ export class AddSecretDialog extends React.Component<Props> {
                 <Select
                   themeName="light"
                   options={this.types}
-                  value={type} onChange={({ value }: SelectOption) => this.type = value}
+                  value={type} onChange={({ value }: SelectOption): void => this.type = value}
                 />
               </div>
             </div>
@@ -216,6 +230,6 @@ export class AddSecretDialog extends React.Component<Props> {
           </WizardStep>
         </Wizard>
       </Dialog>
-    )
+    );
   }
 }

dashboard/client/components/+config-secrets/index.ts

@@ -1,4 +1,4 @@
-export * from "./secrets.route"
-export * from "./secrets"
-export * from "./secret-details"
+export * from "./secrets.route";
+export * from "./secrets";
+export * from "./secret-details";
 

dashboard/client/components/+config-secrets/secret-details.tsx

@@ -27,7 +27,7 @@ export class SecretDetails extends React.Component<Props> {
   @observable data: { [name: string]: string } = {};
   @observable revealSecret: { [name: string]: boolean } = {};
 
-  async componentDidMount() {
+  componentDidMount(): void {
     disposeOnUnmount(this, [
       autorun(() => {
         const { object: secret } = this.props;
@@ -36,10 +36,10 @@ export class SecretDetails extends React.Component<Props> {
           this.revealSecret = {};
         }
       })
-    ])
+    ]);
   }
 
-  saveSecret = async () => {
+  saveSecret = async (): Promise<void> => {
     const { object: secret } = this.props;
     this.isSaving = true;
     try {
@@ -51,13 +51,15 @@ export class SecretDetails extends React.Component<Props> {
     this.isSaving = false;
   }
 
-  editData = (name: string, value: string, encoded: boolean) => {
+  editData = (name: string, value: string, encoded: boolean): void => {
     this.data[name] = encoded ? value : base64.encode(value);
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: secret } = this.props;
-    if (!secret) return null;
+    if (!secret) {
+      return null;
+    }
     return (
       <div className="SecretDetails">
         <KubeObjectMeta object={secret}/>
@@ -86,18 +88,20 @@ export class SecretDetails extends React.Component<Props> {
                         theme="round-black"
                         className="box grow"
                         value={value || ""}
-                        onChange={value => this.editData(name, value, !revealSecret)}
+                        onChange={(value): void => this.editData(name, value, !revealSecret)}
                       />
                       {decodedVal && (
                         <Icon
                           material={`visibility${revealSecret ? "" : "_off"}`}
                           tooltip={revealSecret ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
-                          onClick={() => this.revealSecret[name] = !revealSecret}
+                          onClick={(): void => {
+                            this.revealSecret[name] = !revealSecret;
+                          }}
                         />)
                       }
                     </div>
                   </div>
-                )
+                );
               })
             }
             <Button
@@ -115,4 +119,4 @@ export class SecretDetails extends React.Component<Props> {
 
 apiManager.registerViews(secretsApi, {
   Details: SecretDetails,
-})
+});

dashboard/client/components/+config-secrets/secrets.route.ts

@@ -3,9 +3,9 @@ import { buildURL } from "../../navigation";
 
 export const secretsRoute: RouteProps = {
   path: "/secrets"
-}
+};
 
-export interface ISecretsRouteParams {
+export interface SecretsRouteParams {
 }
 
 export const secretsURL = buildURL(secretsRoute.path);

dashboard/client/components/+config-secrets/secrets.tsx

@@ -1,4 +1,4 @@
-import "./secrets.scss"
+import "./secrets.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
@@ -7,7 +7,7 @@ import { RouteComponentProps } from "react-router";
 import { Secret, secretsApi } from "../../api/endpoints";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { AddSecretDialog } from "./add-secret-dialog";
-import { ISecretsRouteParams } from "./secrets.route";
+import { SecretsRouteParams } from "./secrets.route";
 import { KubeObjectListLayout } from "../kube-object";
 import { Badge } from "../badge";
 import { secretsStore } from "./secrets.store";
@@ -22,27 +22,27 @@ enum sortBy {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<ISecretsRouteParams> {
+interface Props extends RouteComponentProps<SecretsRouteParams> {
 }
 
 @observer
 export class Secrets extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <>
         <KubeObjectListLayout
           className="Secrets" store={secretsStore}
           sortingCallbacks={{
-            [sortBy.name]: (item: Secret) => item.getName(),
-            [sortBy.namespace]: (item: Secret) => item.getNs(),
-            [sortBy.labels]: (item: Secret) => item.getLabels(),
-            [sortBy.keys]: (item: Secret) => item.getKeys(),
-            [sortBy.type]: (item: Secret) => item.type,
-            [sortBy.age]: (item: Secret) => item.metadata.creationTimestamp,
+            [sortBy.name]: (item: Secret): string => item.getName(),
+            [sortBy.namespace]: (item: Secret): string => item.getNs(),
+            [sortBy.labels]: (item: Secret): string[] => item.getLabels(),
+            [sortBy.keys]: (item: Secret): string[] => item.getKeys(),
+            [sortBy.type]: (item: Secret): string => item.type,
+            [sortBy.age]: (item: Secret): string => item.metadata.creationTimestamp,
           }}
           searchFilters={[
-            (item: Secret) => item.getSearchFields(),
-            (item: Secret) => item.getKeys(),
+            (item: Secret): string[] => item.getSearchFields(),
+            (item: Secret): string[] => item.getKeys(),
           ]}
           renderHeaderTitle={<Trans>Secrets</Trans>}
           renderTableHeader={[
@@ -53,7 +53,7 @@ export class Secrets extends React.Component<Props> {
             { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
             { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           ]}
-          renderTableContents={(secret: Secret) => [
+          renderTableContents={(secret: Secret): (string | JSX.Element[] | number)[] => [
             secret.getName(),
             secret.getNs(),
             secret.getLabels().map(label => <Badge key={label} label={label}/>),
@@ -61,11 +61,11 @@ export class Secrets extends React.Component<Props> {
             secret.type,
             secret.getAge(),
           ]}
-          renderItemMenu={(item: Secret) => {
-            return <SecretMenu object={item}/>
+          renderItemMenu={(item: Secret): JSX.Element => {
+            return <SecretMenu object={item}/>;
           }}
           addRemoveButtons={{
-            onAdd: () => AddSecretDialog.open(),
+            onAdd: (): void => AddSecretDialog.open(),
             addTooltip: <Trans>Create new Secret</Trans>
           }}
         />
@@ -75,12 +75,12 @@ export class Secrets extends React.Component<Props> {
   }
 }
 
-export function SecretMenu(props: KubeObjectMenuProps<Secret>) {
+export function SecretMenu(props: KubeObjectMenuProps<Secret>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(secretsApi, {
   Menu: SecretMenu,
-})
+});