Merge pull request #3321 from marmelab/replace-tslint-with-eslint

[RFR] Replace tslint with eslint

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+build
+lib
+esm

.eslintrc

@@ -0,0 +1,22 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+        "react-app",
+        "plugin:prettier/recommended",
+        "prettier/@typescript-eslint",
+        "prettier/babel",
+        "prettier/react"
+    ],
+    "plugins": [
+        "@typescript-eslint",
+        "import",
+        "jsx-a11y",
+        "prettier",
+        "react",
+        "react-hooks"
+    ],
+    "rules": {
+        "no-use-before-define": "off",
+        "prettier/prettier": "error"
+    }
+}

Makefile

@@ -98,7 +98,7 @@ serve-github-pages: ## Serve the doc from a Github Pages docker container
 
 lint: ## lint the code and check coding conventions
 	@echo "Running linter..."
-	@yarn -s tslint 'packages/*/src/**/*.*s'
+	@yarn -s lint
 
 prettier: ## prettify the source code using prettier
 	@echo "Running prettier..."

cypress/.eslintrc

@@ -0,0 +1,9 @@
+{
+    "extends": "../.eslintrc",
+    "plugins": [
+        "cypress"
+    ],
+      "env": {
+        "cypress/globals": true
+    }
+}

cypress/integration/list.js

@@ -194,30 +194,36 @@ describe('List Page', () => {
     describe('expand panel', () => {
         it('should show an expand button opening the expand element', () => {
             cy.contains('1-10 of 13'); // wait for data
-            cy.get('[role="expand"]')
+            cy.get('[aria-label="Expand"]')
                 .eq(0)
-                .click();
-            cy.get('[role="expand-content"]').should(el =>
+                .click()
+                .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
+                .should(el => expect(el).to.have.attr('aria-label', 'Close'));
+
+            cy.get('#13-expand').should(el =>
                 expect(el).to.contain(
                     'Curabitur eu odio ullamcorper, pretium sem at, blandit libero. Nulla sodales facilisis libero, eu gravida tellus ultrices nec. In ut gravida mi. Vivamus finibus tortor tempus egestas lacinia. Cras eu arcu nisl. Donec pretium dolor ipsum, eget feugiat urna iaculis ut.'
                 )
             );
-            cy.get('.datagrid-body').should(el =>
-                expect(el).to.not.contain('[role="expand-content"]')
-            );
         });
 
         it('should accept multiple expands', () => {
             cy.contains('1-10 of 13'); // wait for data
-            cy.get('[role="expand"]')
+            cy.get('[aria-label="Expand"]')
                 .eq(0)
-                .click();
-            cy.get('[role="expand"]')
-                .eq(1)
-                .click();
-            cy.get('[role="expand-content"]').should(el =>
-                expect(el).to.have.length(2)
-            );
+                .click()
+                .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
+                .should(el => expect(el).to.have.attr('aria-label', 'Close'));
+
+            cy.get('#13-expand').should(el => expect(el).to.exist);
+
+            cy.get('[aria-label="Expand"]')
+                .eq(0) // We still targets the first button labeled Expand because the previous one should now have a Close label
+                .click()
+                .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
+                .should(el => expect(el).to.have.attr('aria-label', 'Close'));
+
+            cy.get('#12-expand').should(el => expect(el).to.exist);
         });
     });
 

cypress/support/ListPage.js

@@ -15,9 +15,9 @@ export default url => ({
         recordRows: '.datagrid-body tr',
         viewsColumn: '.datagrid-body tr td:nth-child(7)',
         datagridHeaders: 'th',
-        sortBy: name => `th span[data-sort=\"${name}\"]`,
+        sortBy: name => `th span[data-sort="${name}"]`,
         svg: (name, criteria = '') =>
-            `th span[data-sort=\"${name}\"] svg${criteria}`,
+            `th span[data-sort="${name}"] svg${criteria}`,
         logout: '.logout',
         bulkActionsToolbar: '[data-test=bulk-actions-toolbar]',
         customBulkActionsButton:

examples/data-generator/src/commands.js

@@ -58,7 +58,7 @@ export default (db, { serializeDate }) => {
                 (total_ex_taxes + delivery_fees + taxes).toFixed(2)
             ),
             status: status,
-            returned: status == 'delivered' ? weightedBoolean(10) : false,
+            returned: status === 'delivered' ? weightedBoolean(10) : false,
         };
     });
 };

examples/data-generator/src/finalize.js

@@ -22,15 +22,15 @@ export default function(db) {
         customers[command.customer_id].nbProducts += command.basket.length;
         return customers;
     }, {});
-    Object.keys(customersBySpending).map(customer_id => {
+    Object.keys(customersBySpending).forEach(customer_id => {
         if (customersBySpending[customer_id].nbProducts > 10) {
             db.customers[customer_id].groups.push('collector');
         }
     });
 
     // add 'ordered_once' group
     db.customers
-        .filter(customer => customer.nb_commands == 1)
+        .filter(customer => customer.nb_commands === 1)
         .forEach(customer => customer.groups.push('ordered_once'));
 
     // add 'compulsive' group

examples/data-generator/src/invoices.js

@@ -1,8 +1,4 @@
-import { random, lorem } from 'faker/locale/en';
-import subDays from 'date-fns/sub_days';
-import { randomDate } from './utils';
-
-export default (db, { serializeDate }) => {
+export default db => {
     let id = 0;
 
     return db.commands

examples/simple/src/comments/CommentList.js

@@ -61,7 +61,7 @@ const exporter = (records, fetchRelatedRecords) =>
                 console.error(error);
             }
             downloadCSV(csv, 'comments');
-        })
+        });
     });
 
 const CommentPagination = ({

examples/simple/src/comments/PostPreview.js

@@ -11,7 +11,7 @@ const PostPreview = props => {
         [props.resource, props.id]
     );
     const version = useSelector(state => state.admin.ui.viewVersion);
-    const isLoading = useSelector(state => state.admin.loading > 0);
+    useSelector(state => state.admin.loading > 0);
 
     return (
         <SimpleShowLayout version={version} record={record} {...props}>

examples/simple/src/comments/PostQuickCreate.js

@@ -57,7 +57,7 @@ const PostQuickCreate = ({ onCancel, onSave }) => {
                 },
             });
         },
-        [onSave]
+        [dispatch, onSave]
     );
 
     return (

examples/simple/src/comments/PostReferenceInput.js

@@ -47,7 +47,7 @@ const PostReferenceInput = props => {
                 {}
             )
         );
-    }, [newPostId]);
+    }, [dispatch, newPostId]);
 
     const handleNewClick = useCallback(event => {
         event.preventDefault();

examples/simple/src/posts/PostCreate.js

@@ -33,7 +33,7 @@ const SaveWithNoteButton = props => {
             handleSubmit(values => {
                 dispatch(saveWithNote(values, basePath, redirect));
             }),
-        [basePath, redirect]
+        [basePath, dispatch, handleSubmit, redirect]
     );
 
     return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;

examples/simple/src/posts/PostShow.js

@@ -45,7 +45,7 @@ const PostShow = props => (
                         <TextField source="id" />
                         <TextField source="title" />
                         {controllerProps.record &&
-                            controllerProps.record.title ==
+                            controllerProps.record.title ===
                                 'Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi' && (
                                 <TextField source="teaser" />
                             )}

examples/simple/src/posts/ResetViewsButton.js

@@ -14,7 +14,7 @@ const ResetViewsButton = props => {
                 crudUpdateMany(resource, selectedIds, { views: 0 }, basePath)
             )
         );
-    }, [basePath, resource, selectedIds]);
+    }, [basePath, dispatch, resource, selectedIds]);
 
     return (
         <Button label="simple.action.resetViews" onClick={handleClick}>

examples/simple/src/users/UserList.js

@@ -14,10 +14,10 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
-export const UserIcon = PeopleIcon;
 
 import Aside from './Aside';
 import UserEditEmbedded from './UserEditEmbedded';
+export const UserIcon = PeopleIcon;
 
 const UserFilter = ({ permissions, ...props }) => (
     <Filter {...props}>

package.json

@@ -11,8 +11,9 @@
         "test": "yarn -s test-unit && yarn -s test-e2e",
         "test-ci": "yarn -s test-unit-ci && yarn -s test-e2e",
         "doc": "cd docs && jekyll server . --watch",
-        "lint": "eslint ./packages/**/src ./examples/**/src ./cypress/**",
-        "prettier": "prettier --config ./.prettierrc.js --write --list-different \"packages/*/src/**/*.{js,json,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,json,tsx,css,md}\" \"cypress/**/*.{js,ts,json,tsx,css,md}\"",        "run-simple": "cd examples/simple && yarn -s start",
+        "lint": "eslint --ext .js,.ts,.tsx \"./packages/**/src/**/*.{js,ts,tsx}\" \"./examples/**/src/**/*.{js,ts,tsx}\" \"./cypress/**/*.{js,ts,tsx}\"",
+        "prettier": "prettier --config ./.prettierrc.js --write --list-different \"packages/*/src/**/*.{js,json,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,json,tsx,css,md}\" \"cypress/**/*.{js,ts,json,tsx,css,md}\"",
+        "run-simple": "cd examples/simple && yarn -s start",
         "run-tutorial": "yarn run -s build && cd examples/tutorial && yarn -s start",
         "run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn -s start",
         "run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn -s start"
@@ -38,10 +39,13 @@
         }
     },
     "devDependencies": {
-        "@types/jest": "^23.3.5",
+        "@types/jest": "^24.0.13",
         "@types/react": "^16.8.0",
         "@types/react-redux": "^7.0.9",
         "@types/recompose": "^0.27.0",
+        "@typescript-eslint/eslint-plugin": "^1.9.0",
+        "@typescript-eslint/parser": "^1.9.0",
+        "babel-eslint": "^10.0.1",
         "cheerio": "~1.0.0-rc.2",
         "cross-env": "^5.2.0",
         "express": "~4.16.3",
@@ -53,10 +57,16 @@
         "prettier": "~1.17.1",
         "raf": "~3.4.1",
         "ts-jest": "^24.0.0",
-        "tslint": "^5.16.0",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-plugin-prettier": "^2.0.1",
-        "tslint-react": "^3.6.0",
+        "eslint": "^5.16.0",
+        "eslint-config-prettier": "^4.3.0",
+        "eslint-plugin-cypress": "^2.2.1",
+        "eslint-plugin-flowtype": "^3.9.1",
+        "eslint-plugin-import": "^2.17.3",
+        "eslint-plugin-jsx-a11y": "^6.2.1",
+        "eslint-plugin-prettier": "^3.1.0",
+        "eslint-plugin-react": "^7.13.0",
+        "eslint-config-react-app": "^4.0.1",    
+        "eslint-plugin-react-hooks": "^1.6.0",
         "wait-on": "^3.2.0"
     },
     "workspaces": [

packages/ra-core/src/actions/dataActions/crudUpdateMany.ts

@@ -1,4 +1,4 @@
-import { Identifier, Record } from '../../types';
+import { Identifier } from '../../types';
 import { UPDATE_MANY } from '../../dataFetchActions';
 import { FETCH_END, FETCH_ERROR } from '../fetchActions';
 import { NotificationSideEffect, RefreshSideEffect } from '../../sideEffect';

packages/ra-core/src/controller/CreateController.tsx

@@ -80,7 +80,7 @@ interface Props {
 const CreateController = (props: Props) => {
     useCheckMinimumRequiredProps(
         'Create',
-        ['basePath', 'location', 'resource'],
+        ['basePath', 'location', 'resource', 'children'],
         props
     );
     const {
@@ -104,13 +104,9 @@ const CreateController = (props: Props) => {
         (data: Partial<Record>, redirect: RedirectionSideEffect) => {
             dispatch(crudCreate(resource, data, basePath, redirect));
         },
-        [resource, basePath]
+        [resource, basePath] // eslint-disable-line react-hooks/exhaustive-deps
     );
 
-    if (!children) {
-        return null;
-    }
-
     const resourceName = translate(`resources.${resource}.name`, {
         smart_count: 1,
         _: inflection.humanize(inflection.singularize(resource)),

packages/ra-core/src/controller/EditController.tsx

@@ -81,11 +81,12 @@ interface Props {
  *     export default App;
  */
 const EditController = (props: Props) => {
-    useCheckMinimumRequiredProps('Edit', ['basePath', 'resource'], props);
+    useCheckMinimumRequiredProps(
+        'Edit',
+        ['basePath', 'resource', 'children'],
+        props
+    );
     const { basePath, children, id, resource, undoable } = props;
-    if (!children) {
-        return null;
-    }
     const translate = useTranslate();
     const dispatch = useDispatch();
     const version = useVersion();
@@ -104,7 +105,7 @@ const EditController = (props: Props) => {
 
     useEffect(() => {
         dispatch(resetForm(REDUX_FORM_NAME));
-    }, [resource, id, version]);
+    }, [resource, id, version]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const resourceName = translate(`resources.${resource}.name`, {
         smart_count: 1,
@@ -133,7 +134,7 @@ const EditController = (props: Props) => {
                 dispatch(updateAction);
             }
         },
-        [id, resource, basePath, record]
+        [resource, id, record, basePath, undoable] // eslint-disable-line react-hooks/exhaustive-deps
     );
 
     return children({

packages/ra-core/src/controller/ListController.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, cleanup } from 'react-testing-library';
+import { fireEvent, cleanup } from 'react-testing-library';
 import lolex from 'lolex';
 import TextField from '@material-ui/core/TextField/TextField';
 

packages/ra-core/src/controller/ListController.tsx

@@ -113,7 +113,7 @@ const defaultSort = {
 const ListController = (props: Props) => {
     useCheckMinimumRequiredProps(
         'List',
-        ['basePath', 'location', 'resource'],
+        ['basePath', 'location', 'resource', 'children'],
         props
     );
     if (props.filter && isValidElement(props.filter)) {

packages/ra-core/src/controller/ShowController.tsx

@@ -71,11 +71,12 @@ interface Props {
  *     export default App;
  */
 const ShowController = (props: Props) => {
-    useCheckMinimumRequiredProps('Show', ['basePath', 'resource'], props);
+    useCheckMinimumRequiredProps(
+        'Show',
+        ['basePath', 'resource', 'children'],
+        props
+    );
     const { basePath, children, id, resource } = props;
-    if (!children) {
-        return null;
-    }
     const translate = useTranslate();
     const version = useVersion();
     const { data: record, loading } = useGetOne(resource, id, {
@@ -99,6 +100,7 @@ const ShowController = (props: Props) => {
         id,
         record,
     });
+
     return children({
         isLoading: loading,
         defaultTitle,

packages/ra-core/src/controller/field/ReferenceFieldController.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from 'react-testing-library';
+import { cleanup } from 'react-testing-library';
 
 import ReferenceFieldController from './ReferenceFieldController';
 import renderWithRedux from '../../util/renderWithRedux';

packages/ra-core/src/controller/field/ReferenceFieldController.tsx

@@ -1,6 +1,9 @@
 import { FunctionComponent, ReactNode, ReactElement } from 'react';
 import { Record } from '../../types';
-import useReference, { UseReferenceProps, LinkToFunctionType } from './useReference';
+import useReference, {
+    UseReferenceProps,
+    LinkToFunctionType,
+} from './useReference';
 
 interface Props {
     allowEmpty?: boolean;