cleanup Lens repo with tighter linting

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

dashboard/client/components/layout/login-layout.tsx

@@ -13,7 +13,7 @@ interface Props {
 }
 
 export class LoginLayout extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { className, header, title, footer, children } = this.props;
     return (
       <section className={cssNames('LoginLayout flex', className)}>

dashboard/client/components/layout/main-layout.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { matchPath, RouteProps } from "react-router-dom";
-import { createStorage, cssNames } from "../../utils";
+import { StorageHelper, cssNames } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { Sidebar } from "./sidebar";
 import { configStore } from "../../config.store";
@@ -29,7 +29,7 @@ interface Props {
 
 @observer
 export class MainLayout extends React.Component<Props> {
-  public storage = createStorage("main_layout", { pinnedSidebar: true });
+  public storage = new StorageHelper("main_layout", { pinnedSidebar: true });
 
   @observable isPinned = this.storage.get().pinnedSidebar;
   @observable isAccessible = true;
@@ -39,13 +39,13 @@ export class MainLayout extends React.Component<Props> {
     isPinned => this.storage.merge({ pinnedSidebar: isPinned })
   );
 
-  toggleSidebar = () => {
+  toggleSidebar = (): void => {
     this.isPinned = !this.isPinned;
     this.isAccessible = false;
     setTimeout(() => this.isAccessible = true, 250);
   }
 
-  render() {
+  render(): JSX.Element {
     const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props;
     const { clusterName } = configStore.config;
     const { pathname } = navigation.location;
@@ -66,10 +66,10 @@ export class MainLayout extends React.Component<Props> {
         </aside>
 
         {tabs && (
-          <Tabs center onChange={url => navigate(url)}>
+          <Tabs center onChange={navigate}>
             {tabs.map(({ title, path, url, ...routeProps }) => {
               const isActive = !!matchPath(pathname, { path, ...routeProps });
-              return <Tab key={url} label={title} value={url} active={isActive}/>
+              return <Tab key={url} label={title} value={url} active={isActive}/>;
             })}
           </Tabs>
         )}

dashboard/client/components/layout/sidebar.tsx

@@ -5,8 +5,7 @@ import { computed, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { matchPath, NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { configStore } from "../../config.store";
-import { createStorage, cssNames } from "../../utils";
+import { StorageHelper, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
 import { namespacesURL } from "../+namespaces/namespaces.route";
@@ -28,12 +27,12 @@ import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { navigation } from "../../navigation";
-import { isAllowedResource } from "../../api/rbac"
+import { isAllowedResource } from "../../api/rbac";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
-type SidebarContextValue = {
+interface SidebarContextValue {
   pinned: boolean;
-};
+}
 
 interface Props {
   className?: string;
@@ -43,11 +42,13 @@ interface Props {
 
 @observer
 export class Sidebar extends React.Component<Props> {
-  async componentDidMount() {
-    if (!crdStore.isLoaded && isAllowedResource('customresourcedefinitions')) crdStore.loadAll()
+  async componentDidMount(): Promise<void> {
+    if (!crdStore.isLoaded && isAllowedResource('customresourcedefinitions')) {
+      return crdStore.loadAll();
+    }
   }
 
-  renderCustomResources() {
+  renderCustomResources(): JSX.Element[] {
     return Object.entries(crdStore.groups).map(([group, crds]) => {
       const submenus = crds.map(crd => {
         return {
@@ -55,8 +56,8 @@ export class Sidebar extends React.Component<Props> {
           component: CrdList,
           url: crd.getResourceUrl(),
           path: crdResourcesRoute.path,
-        }
-      })
+        };
+      });
       return (
         <SidebarNavItem
           key={group}
@@ -66,13 +67,12 @@ export class Sidebar extends React.Component<Props> {
           subMenus={submenus}
           text={group}
         />
-      )
-    })
+      );
+    });
   }
 
-  render() {
+  render(): JSX.Element {
     const { toggle, isPinned, className } = this.props;
-    const { allowedResources } = configStore;
     const query = namespaceStore.getContextParams();
     return (
       <SidebarContext.Provider value={{ pinned: isPinned }}>
@@ -185,7 +185,7 @@ export class Sidebar extends React.Component<Props> {
           </div>
         </div>
       </SidebarContext.Provider>
-    )
+    );
   }
 }
 
@@ -200,7 +200,7 @@ interface SidebarNavItemProps {
   subMenus?: TabRoute[];
 }
 
-const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
+const navItemStorage = new StorageHelper<[string, boolean][]>("sidebar_menu_item", []);
 const navItemState = observable.map<string, boolean>(navItemStorage.get());
 reaction(() => [...navItemState], value => navItemStorage.set(value));
 
@@ -209,15 +209,15 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
   static contextType = SidebarContext;
   public context: SidebarContextValue;
 
-  @computed get isExpanded() {
+  @computed get isExpanded(): boolean {
     return navItemState.get(this.props.id);
   }
 
-  toggleSubMenu = () => {
+  toggleSubMenu = (): void => {
     navItemState.set(this.props.id, !this.isExpanded);
   }
 
-  isActive = () => {
+  isActive = (): boolean => {
     const { routePath, url } = this.props;
     const { pathname } = navigation.location;
     return !!matchPath(pathname, {
@@ -225,7 +225,7 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
     });
   }
 
-  render() {
+  render(): JSX.Element {
     const { id, isHidden, subMenus = [], icon, text, url, children, className } = this.props;
     if (isHidden) {
       return null;
@@ -256,13 +256,13 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
             })}
           </ul>
         </div>
-      )
+      );
     }
     return (
       <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={this.isActive}>
         {icon}
         <span className="link-text">{text}</span>
       </NavLink>
-    )
+    );
   }
 }

dashboard/client/components/layout/sub-header.tsx

@@ -1,4 +1,4 @@
-import "./sub-header.scss"
+import "./sub-header.scss";
 import * as React from "react";
 import { cssNames } from "../../utils";
 
@@ -9,17 +9,17 @@ export interface SubHeaderProps {
 }
 
 export class SubHeader extends React.Component<SubHeaderProps> {
-  render() {
+  render(): JSX.Element {
     const { withLine, compact, children } = this.props;
     let { className } = this.props;
     className = cssNames("SubHeader", {
       withLine,
       compact,
-    }, className)
+    }, className);
     return (
       <div className={className}>
         {children}
       </div>
-    )
+    );
   }
 }

dashboard/client/components/layout/sub-title.tsx

@@ -1,4 +1,4 @@
-import "./sub-title.scss"
+import "./sub-title.scss";
 import * as React from "react";
 import { cssNames } from "../../utils";
 
@@ -9,16 +9,16 @@ interface Props {
 }
 
 export class SubTitle extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { compact, title, children } = this.props;
     let { className } = this.props;
     className = cssNames("SubTitle", className, {
       compact,
-    })
+    });
     return (
       <div className={className}>
         {title} {children}
       </div>
-    )
+    );
   }
 }