cleanup Lens repo with tighter linting

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

dashboard/client/components/+apps-helm-charts/helm-chart-details.tsx

@@ -16,6 +16,9 @@ import { createInstallChartTab } from "../dock/install-chart.store";
 import { Badge } from "../badge";
 import { _i18n } from "../../i18n";
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const placeholder = require("./helm-placeholder.svg");
+
 interface Props {
   chart: HelmChart;
   hideDetails(): void;
@@ -31,7 +34,9 @@ export class HelmChartDetails extends Component<Props> {
 
   @disposeOnUnmount
   chartSelector = autorun(async () => {
-    if (!this.props.chart) return;
+    if (!this.props.chart) {
+      return;
+    }
     this.chartVersions = null;
     this.selectedChart = null;
     this.description = null;
@@ -43,42 +48,43 @@ export class HelmChartDetails extends Component<Props> {
     });
   });
 
-  loadChartData(version?: string) {
+  loadChartData(version?: string): void {
     const { chart: { name, repo } } = this.props;
-    if (this.chartPromise) this.chartPromise.cancel();
+    if (this.chartPromise) {
+      this.chartPromise.cancel();
+    }
     this.chartPromise = helmChartsApi.get(repo, name, version);
   }
 
   @autobind()
-  onVersionChange(opt: SelectOption) {
+  onVersionChange(opt: SelectOption): void {
     const version = opt.value;
     this.selectedChart = this.chartVersions.find(chart => chart.version === version);
     this.description = null;
     this.loadChartData(version);
     this.chartPromise.then(data => {
-      this.description = data.readme
+      this.description = data.readme;
     });
   }
 
   @autobind()
-  install() {
+  install(): void {
     createInstallChartTab(this.selectedChart);
-    this.props.hideDetails()
+    this.props.hideDetails();
   }
 
-  renderIntroduction() {
+  renderIntroduction(): JSX.Element {
     const { selectedChart, chartVersions, onVersionChange } = this;
-    const placeholder = require("./helm-placeholder.svg");
     return (
       <div className="introduction flex align-flex-start">
         <img
           className="intro-logo"
-          src={selectedChart.getIcon() || placeholder}
-          onError={(event) => event.currentTarget.src = placeholder}
+          src={selectedChart.icon || placeholder}
+          onError={(event: React.SyntheticEvent<HTMLImageElement, Event>): void => event.currentTarget.src = placeholder}
         />
         <div className="intro-contents box grow">
           <div className="description flex align-center justify-space-between">
-            {selectedChart.getDescription()}
+            {selectedChart.description}
             <Button primary label={_i18n._(t`Install`)} onClick={this.install}/>
           </div>
           <DrawerItem name={_i18n._(t`Version`)} className="version" onClick={stopPropagation}>
@@ -86,16 +92,16 @@ export class HelmChartDetails extends Component<Props> {
               themeName="outlined"
               menuPortalTarget={null}
               options={chartVersions.map(chart => chart.version)}
-              value={selectedChart.getVersion()}
+              value={selectedChart.version}
               onChange={onVersionChange}
             />
           </DrawerItem>
           <DrawerItem name={_i18n._(t`Home`)}>
-            <a href={selectedChart.getHome()} target="_blank">{selectedChart.getHome()}</a>
+            <a href={selectedChart.home} target="_blank" rel="noreferrer">{selectedChart.home}</a>
           </DrawerItem>
           <DrawerItem name={_i18n._(t`Maintainers`)} className="maintainers">
             {selectedChart.getMaintainers().map(({ name, email, url }) =>
-              <a key={name} href={url ? url : `mailto:${email}`} target="_blank">{name}</a>
+              <a key={name} href={url ? url : `mailto:${email}`} target="_blank" rel="noreferrer">{name}</a>
             )}
           </DrawerItem>
           {selectedChart.getKeywords().length > 0 && (
@@ -108,8 +114,10 @@ export class HelmChartDetails extends Component<Props> {
     );
   }
 
-  renderContent() {
-    if (this.selectedChart === null || this.description === null) return <Spinner center/>;
+  renderContent(): JSX.Element {
+    if (this.selectedChart === null || this.description === null) {
+      return <Spinner center/>;
+    }
     return (
       <div className="box grow">
         {this.renderIntroduction()}
@@ -120,7 +128,7 @@ export class HelmChartDetails extends Component<Props> {
     );
   }
 
-  render() {
+  render(): JSX.Element {
     const { chart, hideDetails } = this.props;
     const title = chart ? <Trans>Chart: {chart.getFullName()}</Trans> : "";
     return (

dashboard/client/components/+apps-helm-charts/helm-chart.store.ts

@@ -2,51 +2,48 @@ import { observable } from "mobx";
 import { autobind } from "../../utils";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { ItemStore } from "../../item.store";
-import flatten from "lodash/flatten"
+import flatten from "lodash/flatten";
 import compareVersions from 'compare-versions';
 
-export interface IChartVersion {
+export interface ChartVersion {
   repo: string;
   version: string;
 }
 
 @autobind()
 export class HelmChartStore extends ItemStore<HelmChart> {
-  @observable versions = observable.map<string, IChartVersion[]>();
+  @observable versions = observable.map<string, ChartVersion[]>();
 
-  loadAll() {
-    return this.loadItems(() => helmChartsApi.list());
+  async loadAll(): Promise<void> {
+    await this.loadItems(() => helmChartsApi.list());
   }
 
-  getByName(name: string, repo: string) {
-    return this.items.find(chart => chart.getName() === name && chart.getRepository() === repo);
+  getByName(desiredName: string, desiredRepo: string): HelmChart {
+    return this.items.find(({ name, repo }) => desiredName === name && desiredRepo === repo);
   }
 
-  protected sortVersions = (versions: IChartVersion[]) => {
-    return versions.sort((first, second) => {
-      return compareVersions(second.version, first.version)
-    });
+  protected sortVersions = (versions: ChartVersion[]): ChartVersion[] =>  {
+    return versions.sort((first, second) => compareVersions(second.version, first.version));
   };
 
-  async getVersions(chartName: string, force?: boolean): Promise<IChartVersion[]> {
+  async getVersions(chartName: string, force?: boolean): Promise<ChartVersion[]> {
     let versions = this.versions.get(chartName);
     if (versions && !force) {
       return versions;
     }
-    const loadVersions = (repo: string) => {
-      return helmChartsApi.get(repo, chartName).then(({ versions }) => {
-        return versions.map(chart => ({
-          repo: repo,
-          version: chart.getVersion()
-        }))
-      })
+    const loadVersions = async (repo: string): Promise<ChartVersion[]> => {
+      const { versions } = await helmChartsApi.get(repo, chartName);
+      return versions.map(({version}) => ({ repo, version, }));
     };
+
     if (!this.isLoaded) {
       await this.loadAll();
     }
+
     const repos = this.items
       .filter(chart => chart.getName() === chartName)
-      .map(chart => chart.getRepository());
+      .map(({repo}) => repo);
+    
     versions = await Promise.all(repos.map(loadVersions))
       .then(flatten)
       .then(this.sortVersions);
@@ -55,7 +52,7 @@ export class HelmChartStore extends ItemStore<HelmChart> {
     return versions;
   }
 
-  reset() {
+  reset(): void {
     super.reset();
     this.versions.clear();
   }

dashboard/client/components/+apps-helm-charts/helm-charts.route.ts

@@ -1,14 +1,14 @@
-import { RouteProps } from "react-router"
+import { RouteProps } from "react-router";
 import { appsRoute } from "../+apps/apps.route";
 import { buildURL } from "../../navigation";
 
 export const helmChartsRoute: RouteProps = {
   path: appsRoute.path + "/charts/:repo?/:chartName?"
-}
+};
 
-export interface IHelmChartsRouteParams {
+export interface HelmChartsRouteParams {
   chartName?: string;
   repo?: string;
 }
 
-export const helmChartsURL = buildURL<IHelmChartsRouteParams>(helmChartsRoute.path)
+export const helmChartsURL = buildURL<HelmChartsRouteParams>(helmChartsRoute.path);

dashboard/client/components/+apps-helm-charts/helm-charts.tsx

@@ -3,7 +3,7 @@ import "./helm-charts.scss";
 import React, { Component } from "react";
 import { RouteComponentProps } from "react-router";
 import { observer } from "mobx-react";
-import { helmChartsURL, IHelmChartsRouteParams } from "./helm-charts.route";
+import { helmChartsURL, HelmChartsRouteParams } from "./helm-charts.route";
 import { helmChartStore } from "./helm-chart.store";
 import { HelmChart } from "../../api/endpoints/helm-charts.api";
 import { HelmChartDetails } from "./helm-chart-details";
@@ -18,39 +18,38 @@ enum sortBy {
   repo = "repo",
 }
 
-interface Props extends RouteComponentProps<IHelmChartsRouteParams> {
+interface Props extends RouteComponentProps<HelmChartsRouteParams> {
 }
 
 @observer
 export class HelmCharts extends Component<Props> {
-  componentDidMount() {
+  componentDidMount(): void {
     helmChartStore.loadAll();
   }
 
-  get selectedChart() {
-    const { match: { params: { chartName, repo } } } = this.props
+  get selectedChart(): HelmChart {
+    const { match: { params: { chartName, repo } } } = this.props;
     return helmChartStore.getByName(chartName, repo);
   }
 
-  showDetails = (chart: HelmChart) => {
+  showDetails = (chart: HelmChart): void => {
     if (!chart) {
-      navigation.merge(helmChartsURL())
-    }
-    else {
+      navigation.merge(helmChartsURL());
+    } else {
       navigation.merge(helmChartsURL({
         params: {
           chartName: chart.getName(),
-          repo: chart.getRepository(),
+          repo: chart.repo,
         }
-      }))
+      }));
     }
   }
 
-  hideDetails = () => {
+  hideDetails = (): void => {
     this.showDetails(null);
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <>
         <ItemListLayout
@@ -59,19 +58,19 @@ export class HelmCharts extends Component<Props> {
           isClusterScoped={true}
           isSelectable={false}
           sortingCallbacks={{
-            [sortBy.name]: (chart: HelmChart) => chart.getName(),
-            [sortBy.repo]: (chart: HelmChart) => chart.getRepository(),
+            [sortBy.name]: (chart: HelmChart): string => chart.getName(),
+            [sortBy.repo]: ({repo}: HelmChart): string => repo,
           }}
           searchFilters={[
-            (chart: HelmChart) => chart.getName(),
-            (chart: HelmChart) => chart.getVersion(),
-            (chart: HelmChart) => chart.getAppVersion(),
-            (chart: HelmChart) => chart.getKeywords(),
+            (chart: HelmChart): string => chart.getName(),
+            ({ version }: HelmChart): string => version,
+            (chart: HelmChart): string => chart.getAppVersion(),
+            ({ keywords }: HelmChart): string[] => keywords,
           ]}
           filterItems={[
-            (items: HelmChart[]) => items.filter(item => !item.deprecated)
+            (items: HelmChart[]): HelmChart[] => items.filter(item => !item.deprecated)
           ]}
-          customizeHeader={() => (
+          customizeHeader={(): JSX.Element => (
             <SearchInput placeholder={_i18n._(t`Search Helm Charts`)}/>
           )}
           renderTableHeader={[
@@ -83,18 +82,18 @@ export class HelmCharts extends Component<Props> {
             { title: <Trans>Repository</Trans>, className: "repository", sortBy: sortBy.repo },
 
           ]}
-          renderTableContents={(chart: HelmChart) => [
-            <figure>
+          renderTableContents={(chart: HelmChart): (HTMLElement | string | React.ReactNode)[] => [
+            <figure key="placeholder-img">
               <img
-                src={chart.getIcon() || require("./helm-placeholder.svg")}
-                onLoad={evt => evt.currentTarget.classList.add("visible")}
+                src={chart.icon || require("./helm-placeholder.svg")}
+                onLoad={(evt): void => evt.currentTarget.classList.add("visible")}
               />
             </figure>,
             chart.getName(),
-            chart.getDescription(),
-            chart.getVersion(),
+            chart.description,
+            chart.version,
             chart.getAppVersion(),
-            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() }
+            { title: chart.repo, className: chart.repo.toLowerCase() }
           ]}
           detailsItem={this.selectedChart}
           onDetails={this.showDetails}