Add eslint on labextension

jupyter_conda/_version.py

@@ -1,2 +1,2 @@
-version_info = (3, 1, 1)
+version_info = (3, 2, 0)
 __version__ = ".".join(map(str, version_info))

labextension/.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+package.json
+**/__tests__/

labextension/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "tsconfig.json",
+    sourceType: "module"
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/interface-name-prefix": [
+      "error",
+      { prefixWithI: "always" }
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { args: "none" }],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/quotes": [
+      "error",
+      "double",
+      { avoidEscape: true, allowTemplateLiterals: false }
+    ],
+    curly: ["error", "all"],
+    eqeqeq: "error",
+    "prefer-arrow-callback": "error"
+  },
+  settings: {
+    react: {
+      version: "detect"
+    }
+  }
+};

labextension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab_conda",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Manage your conda environments from JupyterLab",
   "keywords": [
     "jupyter",
@@ -29,11 +29,13 @@
   "scripts": {
     "build": "tsc",
     "clean": "rimraf lib tsconfig.tsbuildinfo",
-    "watch": "tsc -w",
+    "eslint": "eslint . --ext .ts,.tsx --fix",
+    "eslint:check": "eslint . --ext .ts,.tsx",
     "precommit": "pretty-quick --staged",
     "prepare": "jlpm run clean && jlpm run build",
     "prettier": "npx prettier --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
-    "test": "jest"
+    "test": "jest",
+    "watch": "tsc -w"
   },
   "dependencies": {
     "@jupyterlab/application": "^1.2.0",
@@ -55,9 +57,16 @@
     "@babel/preset-env": "^7",
     "@jupyterlab/testutils": "^1.2.2",
     "@types/jest": "^24",
-    "@types/react": "~16.8.0",
+    "@types/react": "~16.8.13",
     "@types/react-virtualized": "^9.21.4",
     "@types/semver": "^6.0.1",
+    "@typescript-eslint/eslint-plugin": "^2.21.0",
+    "@typescript-eslint/parser": "^2.21.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-jsdoc": "^22.0.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
     "husky": "^0.14.0",
     "jest": "^24",
     "jest-fetch-mock": "^2.1.2",
@@ -90,6 +99,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "~16.8.0"
+    "@types/react": "~16.8.4"
   }
 }

labextension/src/CondaEnvWidget.tsx

@@ -38,7 +38,7 @@ export class CondaEnvWidget extends ReactWidget {
     super.onResize(msg);
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <NbConda height={this.height} width={this.width} model={this.envModel} />
     );

labextension/src/components/CondaEnvItem.tsx

@@ -5,7 +5,7 @@ import { GlobalStyle } from "./globalStyles";
 /**
  * Environment item properties
  */
-export interface EnvItemProps {
+export interface IEnvItemProps {
   /**
    * Environment name
    */
@@ -23,18 +23,18 @@ export interface EnvItemProps {
 /**
  * Environment item component
  */
-export class CondaEnvItem extends React.Component<EnvItemProps> {
-  render() {
-    return (
-      <div
-        className={this.props.selected ? Style.SelectedItem : Style.Item}
-        onClick={() => this.props.onClick(this.props.name)}
-      >
-        {this.props.name}
-      </div>
-    );
-  }
-}
+export const CondaEnvItem: React.FunctionComponent<IEnvItemProps> = (
+  props: IEnvItemProps
+) => {
+  return (
+    <div
+      className={props.selected ? Style.SelectedItem : Style.Item}
+      onClick={(): void => props.onClick(props.name)}
+    >
+      {props.name}
+    </div>
+  );
+};
 
 namespace Style {
   export const Item = style(GlobalStyle.ListItem, {
@@ -59,7 +59,7 @@ namespace Style {
 
     $nest: {
       "&::after": {
-        content: `' '`,
+        content: "' '",
         display: "inline-block",
         padding: "0 5px",
         width: 0,

labextension/src/components/CondaEnvList.tsx

@@ -61,51 +61,47 @@ export interface IEnvListProps {
 /**
  * React component for the environment list
  */
-export class CondaEnvList extends React.Component<IEnvListProps> {
-  render() {
-    let isDefault = false;
-    const listItems = this.props.environments.map((env, idx) => {
-      let selected = env.name === this.props.selected;
-      if (selected) {
-        // Forbid clone and removing the environment named "base" (base conda environment)
-        // and the default one (i.e. the one containing JupyterLab)
-        isDefault = env.is_default || env.name === "base";
-      }
-      return (
-        <CondaEnvItem
-          name={env.name}
-          key={env.name}
-          selected={
-            this.props.selected ? env.name === this.props.selected : false
-          }
-          onClick={this.props.onSelectedChange}
-        />
-      );
-    });
-
+export const CondaEnvList: React.FunctionComponent<IEnvListProps> = (
+  props: IEnvListProps
+) => {
+  let isDefault = false;
+  const listItems = props.environments.map((env, idx) => {
+    const selected = env.name === props.selected;
+    if (selected) {
+      // Forbid clone and removing the environment named "base" (base conda environment)
+      // and the default one (i.e. the one containing JupyterLab)
+      isDefault = env.is_default || env.name === "base";
+    }
     return (
-      <div className={Style.Panel}>
-        <CondaEnvToolBar
-          isBase={isDefault}
-          isPending={this.props.isPending}
-          onCreate={this.props.onCreate}
-          onClone={this.props.onClone}
-          onImport={this.props.onImport}
-          onExport={this.props.onExport}
-          onRefresh={this.props.onRefresh}
-          onRemove={this.props.onRemove}
-        />
-        <div
-          className={Style.ListEnvs(
-            this.props.height - ENVIRONMENTTOOLBARHEIGHT - 32
-          )}
-        >
-          {listItems}
-        </div>
-      </div>
+      <CondaEnvItem
+        name={env.name}
+        key={env.name}
+        selected={props.selected ? env.name === props.selected : false}
+        onClick={props.onSelectedChange}
+      />
     );
-  }
-}
+  });
+
+  return (
+    <div className={Style.Panel}>
+      <CondaEnvToolBar
+        isBase={isDefault}
+        isPending={props.isPending}
+        onCreate={props.onCreate}
+        onClone={props.onClone}
+        onImport={props.onImport}
+        onExport={props.onExport}
+        onRefresh={props.onRefresh}
+        onRemove={props.onRemove}
+      />
+      <div
+        className={Style.ListEnvs(props.height - ENVIRONMENTTOOLBARHEIGHT - 32)}
+      >
+        {listItems}
+      </div>
+    </div>
+  );
+};
 
 namespace Style {
   export const Panel = style({
@@ -117,7 +113,7 @@ namespace Style {
     width: ENVIRONMENTPANELWIDTH
   });
 
-  export const ListEnvs = (height: number) =>
+  export const ListEnvs = (height: number): string =>
     style({
       height: height,
       overflowY: "auto",

labextension/src/components/CondaEnvToolBar.tsx

@@ -8,7 +8,7 @@ export const ENVIRONMENTTOOLBARHEIGHT = 40;
 /**
  * Environment panel toolbar properties
  */
-export interface CondaEnvToolBarProps {
+export interface ICondaEnvToolBarProps {
   /**
    * Is the current environment the root one
    */
@@ -43,7 +43,7 @@ export interface CondaEnvToolBarProps {
   onRemove(): void;
 }
 
-export const CondaEnvToolBar = (props: CondaEnvToolBarProps) => {
+export const CondaEnvToolBar = (props: ICondaEnvToolBarProps): JSX.Element => {
   let refreshClasses = "fa fa-refresh";
   if (props.isPending) {
     refreshClasses = refreshClasses + " fa-spin";

labextension/src/components/CondaPkgList.tsx

@@ -58,10 +58,11 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
     super(props);
   }
 
-  render() {
-    const rowGetter = ({ index }: IIndex) => this.props.packages[index];
+  render(): JSX.Element {
+    const rowGetter = ({ index }: IIndex): Conda.IPackage =>
+      this.props.packages[index];
 
-    const iconRender = ({ rowData }: ICellRender) => {
+    const iconRender = ({ rowData }: ICellRender): JSX.Element => {
       if (rowData.version_installed) {
         if (rowData.version_selected === "none") {
           return <i className={Style.StatusRemove} />;
@@ -91,15 +92,16 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
       return false;
     };
 
-    const nameRender = ({ rowData }: ICellRender) => {
+    const nameRender = ({ rowData }: ICellRender): JSX.Element => {
       if (rowData.home && rowData.home.length > 0) {
         // TODO possible enhancement - open in a JupyterLab Panel
         return (
           <a
             className={Style.Link}
             href={rowData.home}
-            onClick={evt => evt.stopPropagation()}
+            onClick={(evt): void => evt.stopPropagation()}
             target="_blank"
+            rel="noopener noreferrer"
           >
             {rowData.name} <i className="fa fa-external-link" />
           </a>
@@ -108,14 +110,14 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
       return <span>{rowData.name}</span>;
     };
 
-    const changeRender = ({ rowData }: ICellRender) => (
+    const changeRender = ({ rowData }: ICellRender): JSX.Element => (
       <HTMLSelect
         className={Style.VersionSelection}
         value={rowData.version_selected}
-        onClick={(evt: React.MouseEvent) => {
+        onClick={(evt: React.MouseEvent): void => {
           evt.stopPropagation();
         }}
-        onChange={(evt: React.ChangeEvent<HTMLSelectElement>) =>
+        onChange={(evt: React.ChangeEvent<HTMLSelectElement>): void =>
           this.props.onPkgChange(rowData, evt.target.value)
         }
         iconProps={{
@@ -148,14 +150,14 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
     return (
       <div className={Style.TableContainer}>
         <AutoSizer disableHeight>
-          {({ width }) => (
+          {({ width }): JSX.Element => (
             <Table
               className={Style.Table}
               headerClassName={Style.Header}
               headerHeight={29}
               height={this.props.height}
-              onRowClick={({ rowData }) => this.props.onPkgClick(rowData)}
-              rowClassName={({ index }) => {
+              onRowClick={({ rowData }): void => this.props.onPkgClick(rowData)}
+              rowClassName={({ index }): string => {
                 if (index >= 0) {
                   return index % 2 === 0
                     ? Style.RowEven(isSelected(index))
@@ -198,7 +200,7 @@ export class CondaPkgList extends React.Component<IPkgListProps> {
                 />
               )}
               <Column
-                cellRenderer={({ rowData }: ICellRender) => (
+                cellRenderer={({ rowData }: ICellRender): JSX.Element => (
                   <span
                     className={
                       rowData.updatable
@@ -267,7 +269,7 @@ namespace Style {
     // }
   });
 
-  export const RowEven = (selected: boolean) =>
+  export const RowEven = (selected: boolean): string =>
     style({
       background: selected ? "var(--jp-brand-color3)" : "unset",
       $nest: {
@@ -277,7 +279,7 @@ namespace Style {
       }
     });
 
-  export const RowOdd = (selected: boolean) =>
+  export const RowOdd = (selected: boolean): string =>
     style({
       background: selected
         ? "var(--jp-brand-color3)"
@@ -365,7 +367,7 @@ namespace Style {
 
     $nest: {
       "&::before": {
-        content: `'↗️'`,
+        content: "'↗️'",
         paddingRight: 2
       }
     }