diff --git a/package.json b/package.json
index f84abf53..a4db1273 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index abc623c8..3c378806 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -111,7 +111,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
if (menuItems.length === 0) {
return
;
}
- return
;
+ return
{menuItems}
;
}}
getItemValue={(item: any) => item.label}
items={items}
diff --git a/src/components/data-loader.tsx b/src/components/data-loader.tsx
index 35da368e..b8ccba9f 100644
--- a/src/components/data-loader.tsx
+++ b/src/components/data-loader.tsx
@@ -31,7 +31,7 @@ interface LoaderState
{
inputChanged: boolean;
}
-export class DataLoader extends React.Component | LoaderPropsNoInput, LoaderState> {
+export class DataLoader extends React.Component | LoaderPropsNoInput, LoaderState> {
public static contextTypes = {
router: PropTypes.object,
apis: PropTypes.object,
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index f7d0b696..4f447385 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -59,7 +59,7 @@ export class DropDown extends React.Component {
);
}
- public componentWillMount() {
+ public UNSAFE_componentWillMount() {
this.subscriptions = [merge(
dropDownOpened.pipe(filter((dropdown) => dropdown !== this)),
fromEvent(document, 'click').pipe(filter((event: Event) => {
diff --git a/src/components/logs-viewer/logs-viewer.tsx b/src/components/logs-viewer/logs-viewer.tsx
index 8891db97..74e2c299 100644
--- a/src/components/logs-viewer/logs-viewer.tsx
+++ b/src/components/logs-viewer/logs-viewer.tsx
@@ -24,7 +24,7 @@ export class LogsViewer extends React.Component {
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 {
);
}
- public shouldComponentUpdate(prevProps: LogsViewerProps) {
+ public shouldComponentUpdate() {
return false;
}
diff --git a/src/components/popup/popup-manager.tsx b/src/components/popup/popup-manager.tsx
index cdcedc84..b9dab8c9 100644
--- a/src/components/popup/popup-manager.tsx
+++ b/src/components/popup/popup-manager.tsx
@@ -14,7 +14,7 @@ export interface PopupApi {
},
customIcon?: {name: string, color: string},
titleColor?: string,
- defaultValues?: {},
+ defaultValues?: FormValues,
): Promise;
}
@@ -58,7 +58,7 @@ export class PopupManager implements PopupApi {
},
customIcon?: { name: string, color: string },
titleColor?: string,
- defaultValues?: {},
+ defaultValues?: FormValues,
): Promise {
return new Promise((resolve) => {
const closeAndResolve = (result: FormValues | null) => {
diff --git a/stories/table.tsx b/stories/table.tsx
index 0b77fd8f..f424d9fe 100644
--- a/stories/table.tsx
+++ b/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 {
constructor(props: any) {
super(props);
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index a2472b56..00000000
--- a/tslint.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "extends": [
- "tslint:recommended", "tslint-react"
- ],
- "jsRules": {},
- "rules": {
- "quotemark": [true, "single"],
- "no-var-requires": false,
- "interface-name": false,
- "jsx-no-multiline-js": false,
- "object-literal-sort-keys": false,
- "jsx-alignment": false,
- "max-line-length": [true, 180],
- "jsx-no-lambda": false,
- "array-type": false,
- "max-classes-per-file": false
- },
- "rulesDirectory": []
-}
diff --git a/v2/components/action-button/action-button.tsx b/v2/components/action-button/action-button.tsx
index 067ce1df..0820bbe8 100644
--- a/v2/components/action-button/action-button.tsx
+++ b/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;
diff --git a/v2/components/autocomplete/autocomplete.tsx b/v2/components/autocomplete/autocomplete.tsx
index 207579b9..d75fa234 100644
--- a/v2/components/autocomplete/autocomplete.tsx
+++ b/v2/components/autocomplete/autocomplete.tsx
@@ -28,7 +28,11 @@ export const Autocomplete = (
onItemClick?: (item: string) => void;
icon?: string;
inputref?: React.MutableRefObject;
- },
+ value: string;
+ onChange?: (e: React.ChangeEvent) => void;
+ className?: string;
+ style?: React.CSSProperties;
+ }
) => {
return (
@@ -45,7 +49,11 @@ export const RenderAutocomplete = (
onItemClick?: (item: string) => void;
icon?: string;
inputref?: React.MutableRefObject;
- },
+ value: string;
+ onChange?: (e: React.ChangeEvent) => void;
+ className?: string;
+ style?: React.CSSProperties;
+ }
) => {
const [curItems, setCurItems] = React.useState(props.items || []);
const nullInputRef = React.useRef(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 = (