cleanup Lens repo with tighter linting

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

dashboard/client/components/drawer/drawer-item-labels.tsx

@@ -6,7 +6,7 @@ interface Props extends DrawerItemProps {
   labels: string[];
 }
 
-export function DrawerItemLabels(props: Props) {
+export function DrawerItemLabels(props: Props): JSX.Element {
   const { labels, ...itemProps } = props;
   if (!labels || !labels.length) {
     return null;
@@ -15,5 +15,5 @@ export function DrawerItemLabels(props: Props) {
     <DrawerItem {...itemProps} labelsOnly>
       {labels.map(label => <Badge key={label} label={label} title={label}/>)}
     </DrawerItem>
-  )
+  );
 }

dashboard/client/components/drawer/drawer-item.tsx

@@ -11,16 +11,18 @@ export interface DrawerItemProps extends React.HTMLAttributes<any> {
 }
 
 export class DrawerItem extends React.Component<DrawerItemProps> {
-  render() {
-    const { name, title, labelsOnly, children, hidden, ...elemProps } = this.props
+  render(): JSX.Element {
+    const { name, title, labelsOnly, children, hidden, ...elemProps } = this.props;
     let { className } = this.props;
-    if (hidden) return null
+    if (hidden) {
+      return null;
+    }
     className = cssNames("DrawerItem", className, { labelsOnly });
     return (
       <div {...elemProps} className={className} title={title}>
         <span className="name">{name}</span>
         <span className="value">{children}</span>
       </div>
-    )
+    );
   }
 }

dashboard/client/components/drawer/drawer-param-toggler.tsx

@@ -15,15 +15,15 @@ interface State {
 export class DrawerParamToggler extends React.Component<Props, State> {
   public state: State = {}
 
-  toggle = () => {
-    this.setState({ open: !this.state.open })
+  toggle = (): void => {
+    this.setState({ open: !this.state.open });
   }
 
-  render() {
-    const { label, children } = this.props
-    const { open } = this.state
-    const icon = `arrow_drop_${open ? "up" : "down"}`
-    const link = open ? _i18n._(t`Hide`) : _i18n._(t`Show`)
+  render(): JSX.Element {
+    const { label, children } = this.props;
+    const { open } = this.state;
+    const icon = `arrow_drop_${open ? "up" : "down"}`;
+    const link = open ? _i18n._(t`Hide`) : _i18n._(t`Show`);
     return (
       <div className="DrawerParamToggler">
         <div className="flex gaps align-center">
@@ -35,6 +35,6 @@ export class DrawerParamToggler extends React.Component<Props, State> {
         </div>
         <div className={cssNames("param-content", { open })}>{children}</div>
       </div>
-    )
+    );
   }
 }

dashboard/client/components/drawer/drawer-title.tsx

@@ -8,12 +8,12 @@ interface Props {
 }
 
 export class DrawerTitle extends React.Component<Props> {
-  render() {
-    const { title, children, className } = this.props
+  render(): JSX.Element {
+    const { title, children, className } = this.props;
     return (
       <div className={cssNames("DrawerTitle", className)}>
         {title || children}
       </div>
-    )
+    );
   }
 }

dashboard/client/components/drawer/drawer.tsx

@@ -40,32 +40,36 @@ export class Drawer extends React.Component<DrawerProps> {
     this.restoreScrollPos();
   });
 
-  componentDidMount() {
-    window.addEventListener("mousedown", this.onMouseDown)
-    window.addEventListener("click", this.onClickOutside)
-    window.addEventListener("keydown", this.onEscapeKey)
+  componentDidMount(): void {
+    window.addEventListener("mousedown", this.onMouseDown);
+    window.addEventListener("click", this.onClickOutside);
+    window.addEventListener("keydown", this.onEscapeKey);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.stopListenLocation();
-    window.removeEventListener("mousedown", this.onMouseDown)
-    window.removeEventListener("click", this.onClickOutside)
-    window.removeEventListener("keydown", this.onEscapeKey)
+    window.removeEventListener("mousedown", this.onMouseDown);
+    window.removeEventListener("click", this.onClickOutside);
+    window.removeEventListener("keydown", this.onEscapeKey);
   }
 
-  saveScrollPos = () => {
-    if (!this.scrollElem) return;
+  saveScrollPos = (): void => {
+    if (!this.scrollElem) {
+      return;
+    }
     const key = browserHistory.location.key;
     this.scrollPos.set(key, this.scrollElem.scrollTop);
   }
 
-  restoreScrollPos = () => {
-    if (!this.scrollElem) return;
+  restoreScrollPos = (): void => {
+    if (!this.scrollElem) {
+      return;
+    }
     const key = browserHistory.location.key;
     this.scrollElem.scrollTop = this.scrollPos.get(key) || 0;
   }
 
-  onEscapeKey = (evt: KeyboardEvent) => {
+  onEscapeKey = (evt: KeyboardEvent): void=> {
     if (!this.props.open) {
       return;
     }
@@ -74,52 +78,66 @@ export class Drawer extends React.Component<DrawerProps> {
     }
   }
 
-  onClickOutside = (evt: MouseEvent) => {
-    const { contentElem, mouseDownTarget, close, props: { open } } = this
+  onClickOutside = (evt: MouseEvent): void => {
+    const { contentElem, mouseDownTarget, close, props: { open } } = this;
     if (!open || evt.defaultPrevented || contentElem.contains(mouseDownTarget)) {
       return;
     }
     const clickedElem = evt.target as HTMLElement;
     const isOutsideAnyDrawer = !clickedElem.closest('.Drawer');
     if (isOutsideAnyDrawer) {
-      close()
+      close();
     }
-    this.mouseDownTarget = null
+    this.mouseDownTarget = null;
   }
 
-  onMouseDown = (evt: MouseEvent) => {
+  onMouseDown = (evt: MouseEvent): void => {
     if (this.props.open) {
-      this.mouseDownTarget = evt.target as HTMLElement
+      this.mouseDownTarget = evt.target as HTMLElement;
     }
   }
 
-  close = () => {
-    const { open, onClose } = this.props
-    if (open) onClose();
+  close = (): void => {
+    const { open, onClose } = this.props;
+    if (open) {
+      onClose();
+    }
   }
 
-  render() {
-    const { open, position, title, animation, children, toolbar, size, usePortal } = this.props
+  render(): JSX.Element {
+    const { open, position, title, animation, children, toolbar, size, usePortal } = this.props;
     let { className, contentClass } = this.props;
     className = cssNames("Drawer", className, position, themeStore.activeTheme.type);
     contentClass = cssNames("drawer-content flex column box grow", contentClass);
-    const style = size ? { "--size": size } as React.CSSProperties : undefined;
+    const style: React.CSSProperties = size ? { ["--size" as string]: size } : undefined;
     const drawer = (
       <Animate name={animation} enter={open}>
-        <div className={className} style={style} ref={e => this.contentElem = e}>
+        <div 
+          className={className}
+          style={style}
+          ref={(e): void => {
+            this.contentElem = e;
+          }}
+        >
           <div className="drawer-wrapper flex column">
             <div className="drawer-title flex align-center">
               <div className="drawer-title-text">{title}</div>
               {toolbar}
               <Icon material="close" onClick={this.close}/>
             </div>
-            <div className={contentClass} onScroll={this.saveScrollPos} ref={e => this.scrollElem = e}>
+            <div 
+              className={contentClass}
+              onScroll={this.saveScrollPos}
+              ref={(e): void => {
+                this.scrollElem = e;
+              }}
+            >
               {children}
             </div>
           </div>
         </div>
       </Animate>
-    )
+    );
     return usePortal ? createPortal(drawer, document.body) : drawer;
   }
 }

dashboard/client/components/drawer/index.ts

@@ -1,5 +1,5 @@
-export * from "./drawer"
-export * from "./drawer-title"
-export * from "./drawer-item"
-export * from "./drawer-item-labels"
-export * from "./drawer-param-toggler"
+export * from "./drawer";
+export * from "./drawer-title";
+export * from "./drawer-item";
+export * from "./drawer-item-labels";
+export * from "./drawer-param-toggler";