cleanup Lens repo with tighter linting

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

dashboard/client/components/table/index.ts

@@ -1,5 +1,5 @@
-export * from './table'
-export * from './table-head'
-export * from './table-row'
-export * from './table-cell'
+export * from './table';
+export * from './table-head';
+export * from './table-row';
+export * from './table-cell';
 

dashboard/client/components/table/table-cell.tsx

@@ -14,62 +14,64 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
   checkbox?: boolean; // render cell with a checkbox
   isChecked?: boolean; // mark checkbox as checked or not
   sortBy?: SortBy; // column name, must be same as key in sortable object <Table sortable={}/>
-  _sorting?: Partial<SortParams>; // <Table> sorting state, don't use this prop outside (!)
-  _sort?(sortBy: SortBy): void; // <Table> sort function, don't use this prop outside (!)
-  _nowrap?: boolean; // indicator, might come from parent <TableHead>, don't use this prop outside (!)
+  sorting?: Partial<SortParams>; // <Table> sorting state, don't use this prop outside (!)
+  sort?(sortBy: SortBy): void; // <Table> sort function, don't use this prop outside (!)
+  nowrap?: boolean; // indicator, might come from parent <TableHead>, don't use this prop outside (!)
 }
 
 export class TableCell extends React.Component<TableCellProps> {
   @autobind()
-  onClick(evt: React.MouseEvent<HTMLDivElement>) {
+  onClick(evt: React.MouseEvent<HTMLDivElement>): void {
     if (this.props.onClick) {
       this.props.onClick(evt);
     }
     if (this.isSortable) {
-      this.props._sort(this.props.sortBy);
+      this.props.sort(this.props.sortBy);
     }
   }
 
-  get isSortable() {
-    const { _sorting, sortBy } = this.props;
-    return _sorting && sortBy !== undefined;
+  get isSortable(): boolean {
+    const { sorting, sortBy } = this.props;
+    return !!sorting && sortBy !== undefined;
   }
 
-  renderSortIcon() {
-    const { sortBy, _sorting } = this.props;
-    if (!this.isSortable) return;
-    const sortActive = _sorting.sortBy === sortBy;
-    const sortIconName = (!sortActive || _sorting.orderBy === "desc") ? "arrow_drop_down" : "arrow_drop_up";
+  renderSortIcon(): JSX.Element {
+    const { sortBy, sorting } = this.props;
+    if (!this.isSortable) {
+      return;
+    }
+    const sortActive = sorting.sortBy === sortBy;
+    const sortIconName = (!sortActive || sorting.orderBy === "desc") ? "arrow_drop_down" : "arrow_drop_up";
     return (
       <Icon
         className={cssNames("sortIcon", { enabled: sortActive })}
         material={sortIconName}
       />
-    )
+    );
   }
 
-  renderCheckbox() {
+  renderCheckbox(): JSX.Element {
     const { checkbox, isChecked } = this.props;
     const showCheckbox = isChecked !== undefined;
     if (checkbox && showCheckbox) {
-      return <Checkbox value={isChecked}/>
+      return <Checkbox value={isChecked}/>;
     }
   }
 
-  render() {
-    const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, ...cellProps } = this.props;
+  render(): JSX.Element {
+    const { className, checkbox, isChecked: _isChecked, sortBy: _sortBy, sort: _sort, sorting: _sorting, nowrap, children, title, ...cellProps } = this.props;
     const classNames = cssNames("TableCell", className, {
       checkbox: checkbox,
-      nowrap: _nowrap,
+      nowrap: nowrap,
       sorting: this.isSortable,
     });
     const content = title || children;
     return (
       <div {...cellProps} className={classNames} onClick={this.onClick}>
         {this.renderCheckbox()}
-        {_nowrap ? <div className="content">{content}</div> : content}
+        {nowrap ? <div className="content">{content}</div> : content}
         {this.renderSortIcon()}
       </div>
-    )
+    );
   }
 }

dashboard/client/components/table/table-head.tsx

@@ -17,7 +17,7 @@ export class TableHead extends React.Component<TableHeadProps> {
     sticky: true,
   }
 
-  render() {
+  render(): JSX.Element {
     const { className, sticky, nowrap, showTopLine, children, ...headProps } = this.props;
     const classNames = cssNames("TableHead", className, {
       sticky, nowrap,
@@ -27,6 +27,6 @@ export class TableHead extends React.Component<TableHeadProps> {
       <div className={classNames} {...headProps}>
         {children}
       </div>
-    )
+    );
   }
 }

dashboard/client/components/table/table-row.tsx

@@ -17,13 +17,13 @@ export interface TableRowProps extends React.DOMAttributes<HTMLDivElement> {
 }
 
 export class TableRow extends React.Component<TableRowProps> {
-  render() {
-    const { className, nowrap, selected, disabled, children, sortItem, searchItem, ...rowProps } = this.props;
+  render(): JSX.Element {
+    const { className, nowrap, selected, disabled, children, sortItem: _sortItem, searchItem: _searchItem, ...rowProps } = this.props;
     const classNames = cssNames("TableRow", className, { selected, nowrap, disabled });
     return (
       <div className={classNames} {...rowProps}>
         {children}
       </div>
-    )
+    );
   }
 }

dashboard/client/components/table/table.tsx

@@ -9,14 +9,14 @@ import { TableHead, TableHeadElem, TableHeadProps } from "./table-head";
 import { TableCellElem } from "./table-cell";
 import { VirtualList } from "../virtual-list";
 import { navigation, setQueryParams } from "../../navigation";
-import orderBy from "lodash/orderBy"
+import orderBy from "lodash/orderBy";
 import { ItemObject } from "../../item.store";
 
 // todo: refactor + decouple search from location
 
 export type SortBy = string;
 export type OrderBy = "asc" | "desc" | string;
-export type SortParams = { sortBy: SortBy; orderBy: OrderBy }
+export interface SortParams { sortBy: SortBy; orderBy: OrderBy }
 export type SortingCallback<D = any> = (data: D) => string | number | (string | number)[];
 
 export interface TableProps extends React.DOMAttributes<HTMLDivElement> {
@@ -57,14 +57,14 @@ export class Table extends React.Component<TableProps> {
 
   @computed get sortParams(): Partial<SortParams> {
     if (this.props.sortSyncWithUrl) {
-      const sortBy = navigation.searchParams.get("sortBy")
-      const orderBy = navigation.searchParams.get("orderBy")
+      const sortBy = navigation.searchParams.get("sortBy");
+      const orderBy = navigation.searchParams.get("orderBy");
       return { sortBy, orderBy };
     }
     return this.sortParamsLocal || {};
   }
 
-  renderHead() {
+  renderHead(): JSX.Element {
     const { sortable, children } = this.props;
     const content = React.Children.toArray(children) as (TableRowElem | TableHeadElem)[];
     const headElem: React.ReactElement<TableHeadProps> = content.find(elem => elem.type === TableHead);
@@ -83,10 +83,10 @@ export class Table extends React.Component<TableProps> {
             );
             return React.cloneElement(elem, {
               title: title,
-              _sort: this.sort,
-              _sorting: this.sortParams,
-              _nowrap: headElem.props.nowrap,
-            })
+              sort: this.sort,
+              sorting: this.sortParams,
+              nowrap: headElem.props.nowrap,
+            });
           })
         });
       }
@@ -94,7 +94,7 @@ export class Table extends React.Component<TableProps> {
     }
   }
 
-  getSorted(items: any[]) {
+  getSorted(items: any[]): any[] {
     const { sortParams } = this;
     const sortingCallback = this.props.sortable[sortParams.sortBy] || noop;
     return orderBy(
@@ -105,21 +105,20 @@ export class Table extends React.Component<TableProps> {
   }
 
   @autobind()
-  protected onSort(params: SortParams) {
+  protected onSort(params: SortParams): void {
     const { sortSyncWithUrl, onSort } = this.props;
     if (sortSyncWithUrl) {
-      setQueryParams(params)
-    }
-    else {
+      setQueryParams(params);
+    } else {
       this.sortParamsLocal = params;
     }
     if (onSort) {
-      onSort(params)
+      onSort(params);
     }
   }
 
   @autobind()
-  sort(colName: SortBy) {
+  sort(colName: SortBy): void {
     const { sortBy, orderBy } = this.sortParams;
     const sameColumn = sortBy == colName;
     const newSortBy: SortBy = colName;
@@ -130,7 +129,7 @@ export class Table extends React.Component<TableProps> {
     });
   }
 
-  renderRows() {
+  renderRows(): React.ReactNode {
     const { sortable, noItems, children, virtual, customRowHeights, rowLineHeight, rowPadding, items, getTableRow, selectedItemId, className } = this.props;
     const content = React.Children.toArray(children) as (TableRowElem | TableHeadElem)[];
     let rows: React.ReactElement<TableRowProps>[] = content.filter(elem => elem.type === TableRow);
@@ -139,8 +138,8 @@ export class Table extends React.Component<TableProps> {
       sortedItems = this.getSorted(sortedItems);
       if (rows.length) {
         rows = sortedItems.map(item => rows.find(row => {
-          return item == row.props.sortItem
-        }))
+          return item == row.props.sortItem;
+        }));
       }
     }
     if (!rows.length && !items.length && noItems) {
@@ -168,7 +167,7 @@ export class Table extends React.Component<TableProps> {
     return rows;
   }
 
-  render() {
+  render(): JSX.Element {
     const { selectable, scrollable, sortable, autoSize, virtual } = this.props;
     let { className } = this.props;
     className = cssNames("Table flex column", className, {
@@ -179,6 +178,6 @@ export class Table extends React.Component<TableProps> {
         {this.renderHead()}
         {this.renderRows()}
       </div>
-    )
+    );
   }
 }