chore: migrates from tslint to eslint

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
+  },
+  "overrides": [
+    {
+      "files": "./stories/*.tsx",
+      "rules": {
+        "react/display-name": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

antd/components/input/input.stories.tsx

@@ -42,7 +42,7 @@ Disabled.args = {
     placeholder: 'Type something here',
 };
 
-export const Error = (args: any) => {
+export const Error = () => {
     return (
         <div style={{width: '50%', marginBottom: '1em'}}>
             <Form>
@@ -61,7 +61,7 @@ Error.args = {
     placeholder: 'Type something here',
 };
 
-export const Warning = (args: any) => {
+export const Warning = () => {
     return (
         <div style={{width: '50%', marginBottom: '1em'}}>
 

package.json

@@ -11,7 +11,7 @@
     ],
     "scripts": {
         "build": "build-storybook -o ./dist/storybook",
-        "lint": "tslint -p .",
+        "lint": "eslint --ext .tsx .",
         "test": "jest",
         "utils:icons": "rm -f src/assets/fonts/* && node ./scripts/icons/generator.js",
         "start": "start-storybook -p 6006",
@@ -80,6 +80,8 @@
         "@types/storybook__addon-actions": "^5.2.1",
         "@types/storybook__addon-links": "^3.3.0",
         "@types/storybook__react": "^3.0.7",
+        "@typescript-eslint/eslint-plugin": "^5.36.1",
+        "@typescript-eslint/parser": "^5.36.1",
         "@types/uuid": "^9.0.1",
         "@types/yamljs": "^0.2.31",
         "babel-loader": "^8.2.5",
@@ -91,6 +93,8 @@
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.7",
         "enzyme-to-json": "^3.6.2",
+        "eslint": "^8.23.0",
+        "eslint-plugin-react": "^7.31.1",
         "foreman": "^3.0.1",
         "glob": "^8.0.3",
         "gulp": "^4.0.2",
@@ -119,8 +123,6 @@
         "ts-jest": "^26.5.6",
         "ts-loader": "^9.4.3",
         "ts-node": "^10.9.1",
-        "tslint": "^5.20.1",
-        "tslint-react": "^3.4.0",
         "webfonts-generator": "^0.4.0",
         "webpack": "^5.76.2",
         "webpack-bundle-analyzer": "^4.9.0",

src/components/autocomplete/autocomplete.tsx

@@ -111,7 +111,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
                 if (menuItems.length === 0) {
                     return <div style={{display: 'none'}} />;
                 }
-                return <div style={{...style, ...this.menuStyle, background: 'white', zIndex: 20, maxHeight: '20em'}} children={menuItems} />;
+                return <div style={{...style, ...this.menuStyle, background: 'white', zIndex: 20, maxHeight: '20em'}}>{menuItems}</div>;
             }}
             getItemValue={(item: any) => item.label}
             items={items}

src/components/data-loader.tsx

@@ -31,7 +31,7 @@ interface LoaderState<TInput, TResult> {
   inputChanged: boolean;
 }
 
-export class DataLoader<D = {}, I = undefined> extends React.Component<LoaderProps<I, D> | LoaderPropsNoInput<D>, LoaderState<I, D>> {
+export class DataLoader<D = any, I = undefined> extends React.Component<LoaderProps<I, D> | LoaderPropsNoInput<D>, LoaderState<I, D>> {
     public static contextTypes = {
         router: PropTypes.object,
         apis: PropTypes.object,

src/components/dropdown/dropdown.tsx

@@ -59,7 +59,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
 
-    public componentWillMount() {
+    public UNSAFE_componentWillMount() {
         this.subscriptions = [merge(
             dropDownOpened.pipe(filter((dropdown) => dropdown !== this)),
             fromEvent(document, 'click').pipe(filter((event: Event) => {

src/components/logs-viewer/logs-viewer.tsx

@@ -24,7 +24,7 @@ export class LogsViewer extends React.Component<LogsViewerProps> {
         super(props);
     }
 
-    public componentWillReceiveProps(nextProps: LogsViewerProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: LogsViewerProps) {
         if (this.props.source.key !== nextProps.source.key) {
             this.refresh(nextProps.source);
         }
@@ -61,7 +61,7 @@ export class LogsViewer extends React.Component<LogsViewerProps> {
         );
     }
 
-    public shouldComponentUpdate(prevProps: LogsViewerProps) {
+    public shouldComponentUpdate() {
         return false;
     }
 

src/components/popup/popup-manager.tsx

@@ -14,7 +14,7 @@ export interface PopupApi {
         },
         customIcon?: {name: string, color: string},
         titleColor?: string,
-        defaultValues?: {},
+        defaultValues?: FormValues,
     ): Promise<FormValues | null>;
 }
 
@@ -58,7 +58,7 @@ export class PopupManager implements PopupApi {
         },
         customIcon?: { name: string, color: string },
         titleColor?: string,
-        defaultValues?: {},
+        defaultValues?: FormValues,
     ): Promise<FormValues | null> {
         return new Promise((resolve) => {
             const closeAndResolve = (result: FormValues | null) => {

stories/table.tsx

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react';
 import {default as classNames} from 'classnames';
 import * as React from 'react';
 
-class TableExample extends React.Component<{}, {selectedIndex: number}> {
+class TableExample extends React.Component<any, {selectedIndex: number}> {
 
     constructor(props: any) {
         super(props);

v2/components/action-button/action-button.tsx

@@ -8,7 +8,7 @@ import {Theme} from '../theme-div/theme-div';
 import './action-button.scss';
 
 export interface ActionButtonProps {
-    // tslint:disable-next-line:ban-types
+    // eslint-disable-next-line @typescript-eslint/ban-types
     action?: Function;
     label?: string;
     icon?: string;

v2/components/autocomplete/autocomplete.tsx

@@ -28,7 +28,11 @@ export const Autocomplete = (
         onItemClick?: (item: string) => void;
         icon?: string;
         inputref?: React.MutableRefObject<HTMLInputElement>;
-    },
+        value: string;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        className?: string;
+        style?: React.CSSProperties;
+    }
 ) => {
     return (
         <KeybindingProvider>
@@ -45,7 +49,11 @@ export const RenderAutocomplete = (
         onItemClick?: (item: string) => void;
         icon?: string;
         inputref?: React.MutableRefObject<HTMLInputElement>;
-    },
+        value: string;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        className?: string;
+        style?: React.CSSProperties;
+    }
 ) => {
     const [curItems, setCurItems] = React.useState(props.items || []);
     const nullInputRef = React.useRef<HTMLInputElement>(null);
@@ -73,8 +81,8 @@ export const RenderAutocomplete = (
         const filtered = (props.items || []).filter((i) => {
             if (i) {
                 return props.abbreviations !== undefined
-                ? i.toLowerCase().includes(debouncedVal?.toLowerCase()) || props.abbreviations.get(i)?.includes(debouncedVal?.toLowerCase())
-                : i.toLowerCase().includes(debouncedVal?.toLowerCase());
+                    ? i.toLowerCase().includes(debouncedVal?.toLowerCase()) || props.abbreviations.get(i)?.includes(debouncedVal?.toLowerCase())
+                    : i.toLowerCase().includes(debouncedVal?.toLowerCase());
             }
             return false;
         });
@@ -111,7 +119,7 @@ export const RenderAutocomplete = (
 
     useKeybinding({
         keys: Key.ESCAPE,
-        action: (e) => {
+        action: () => {
             if (showSuggestions) {
                 reset();
                 setShowSuggestions(false);
@@ -140,7 +148,7 @@ export const RenderAutocomplete = (
 
     useKeybinding({
         keys: Key.UP,
-        action: (e) => {
+        action: () => {
             if (showSuggestions) {
                 nav(-1);
                 return false;
@@ -244,7 +252,7 @@ export const RenderAutocomplete = (
                         </div>
                     ))}
                 </ThemeDiv>,
-                document.body,
+                document.body
             )}
         </div>
     );

v2/components/input/input.tsx

@@ -51,7 +51,7 @@ export const useDebounce = (value: string, debouncems: number): string => {
  * A formatted field, accompanied by the `useInput` hook. `useInput` returns a `[data, setData, props]` thruple, where `data` and `setData` are analagous to `React.useState`,
  * and `props` are designed to be included in the Input component with a spread operator: `<Input YOUR_PROPS_HERE {...props} />`
  */
-export const Input = (props: React.InputHTMLAttributes<HTMLInputElement> & {innerref?: React.MutableRefObject<any>}) => (
+export const Input = (props: React.InputHTMLAttributes<HTMLInputElement> & {innerref?: React.MutableRefObject<any>, className?: string}) => (
     <ThemeDiv className='input-container'>
         <input {...(props as any)} className={props.className ? `${props.className} input` : 'input'} ref={props.innerref} />
     </ThemeDiv>

v2/components/theme-div/theme-div.tsx

@@ -15,6 +15,7 @@ export const ThemeDiv = (
         disabled?: boolean;
         innerref?: React.LegacyRef<any>;
         theme?: Theme;
+        className?: string;
     } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
 ) => {
     const theme = props.theme || useTheme();

v2/components/ticker/ticker.stories.tsx

@@ -9,7 +9,7 @@ export default {
     },
 };
 
-export const Primary = (args: any) => {
+export const Primary = () => {
     const [randVal, setRandVal] = React.useState(0);
 
     React.useEffect(() => {

v2/shared/keypress.tsx

@@ -261,7 +261,7 @@ export const KeybindingContext = React.createContext<{
     useKeybinding: KeyFxn;
 }>({
     keybindingState: NewGroupMap(),
-    useKeybinding: (props: KeyFxnProps) => null,
+    useKeybinding: () => null,
 });
 
 export const KeybindingProvider = (props: {children: React.ReactNode}) => {