Add react eslint config

demo/src/TreeViewFinderConfig.js

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -148,4 +148,15 @@ const TreeViewFinderConfig = (props) => {
     );
 };
 
+TreeViewFinderConfig.propTypes = {
+    dynamicData: PropTypes.bool,
+    dataFormat: PropTypes.string,
+    multiselect: PropTypes.bool,
+    onlyLeaves: PropTypes.bool,
+    onDynamicDataChange: PropTypes.func,
+    onDataFormatChange: PropTypes.func,
+    onSelectionTypeChange: PropTypes.func,
+    onOnlyLeavesChange: PropTypes.func,
+};
+
 export default TreeViewFinderConfig;

demo/src/app.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 
 import TopBar from '../../src/components/TopBar';
 import SnackbarProvider from '../../src/components/SnackbarProvider';
@@ -197,6 +198,11 @@ const MyButton = (props) => {
     );
 };
 
+MyButton.propTypes = {
+    variant: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+};
+
 const AppContent = ({ language, onLanguageClick }) => {
     const history = useHistory();
     const location = useLocation();
@@ -372,11 +378,11 @@ const AppContent = ({ language, onLanguageClick }) => {
                         onSearchTermChange={searchMatchingEquipments}
                         onSelectionChange={displayEquipment}
                         elementsFound={equipmentsFound}
-                        renderElement={(props) => (
+                        renderElement={(args) => (
                             <EquipmentItem
                                 classes={equipmentClasses}
-                                {...props}
-                                key={props.element.key}
+                                {...args}
+                                key={args.element.key}
                             />
                         )}
                         onLanguageClick={onLanguageClick}
@@ -582,6 +588,11 @@ const AppContent = ({ language, onLanguageClick }) => {
     );
 };
 
+AppContent.propTypes = {
+    language: PropTypes.string.isRequired,
+    onLanguageClick: PropTypes.func.isRequired,
+};
+
 const App = () => {
     const [computedLanguage, setComputedLanguage] = useState(LANG_ENGLISH);
     const [language, setLanguage] = useState(LANG_ENGLISH);

package.json

@@ -80,11 +80,13 @@
     "eslintConfig": {
         "extends": [
             "react-app",
-            "plugin:prettier/recommended"
+            "plugin:prettier/recommended",
+            "plugin:react/recommended"
         ],
         "rules": {
             "prettier/prettier": "warn",
-            "import/no-webpack-loader-syntax": "off"
+            "import/no-webpack-loader-syntax": "off",
+            "react/prop-types": 1
         }
     },
     "author": "gridsuite team",

src/components/AuthenticationRouter/AuthenticationRouter.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import SignInCallbackHandler from '../SignInCallbackHandler';
 import {
@@ -73,4 +74,13 @@ const AuthenticationRouter = ({
         </React.Fragment>
     );
 };
+
+AuthenticationRouter.propTypes = {
+    userManager: PropTypes.object,
+    signInCallbackError: PropTypes.func,
+    dispatch: PropTypes.func,
+    history: PropTypes.object,
+    location: PropTypes.object,
+};
+
 export default AuthenticationRouter;

src/components/ElementSearchDialog/equipment-item.js

@@ -4,13 +4,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import React from 'react';
+import PropTypes from 'prop-types';
 import { TagRenderer } from './index';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
 import OverflowableText from '../OverflowableText';
-import React from 'react';
+
 import { EQUIPMENT_TYPE } from '../../utils/EquipmentType';
 
 export const EquipmentItem = ({
@@ -53,8 +55,15 @@ export const EquipmentItem = ({
                         </span>
                     ))}
                 </OverflowableText>
-                {suffixRenderer({ props, element })}
+                {suffixRenderer({ element, ...props })}
             </div>
         </li>
     );
 };
+
+EquipmentItem.propTypes = {
+    inputValue: PropTypes.string,
+    element: PropTypes.any,
+    suffixRenderer: PropTypes.node,
+    classes: PropTypes.object,
+};

src/components/ElementSearchDialog/tag-renderer.js

@@ -4,13 +4,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import React from 'react';
+import PropTypes from 'prop-types';
 import OverflowableText from '../OverflowableText';
 import clsx from 'clsx';
-import React from 'react';
 import { EQUIPMENT_TYPE } from '../../utils/EquipmentType';
-import PropTypes from 'prop-types';
 
-export const TagRenderer = ({ props, element }) => {
+export const TagRenderer = ({ element, ...props }) => {
     if (
         element.type !== EQUIPMENT_TYPE.SUBSTATION.name &&
         element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL.name
@@ -29,5 +29,5 @@ export const TagRenderer = ({ props, element }) => {
 
 TagRenderer.propTypes = {
     element: PropTypes.object,
-    props: PropTypes.object,
+    classes: PropTypes.object.isRequired,
 };

src/components/Login/Login.js

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
@@ -87,4 +88,9 @@ const Login = ({ onLoginClick, disabled }) => {
     );
 };
 
+Login.propTypes = {
+    onLoginClick: PropTypes.func,
+    disabled: PropTypes.bool,
+};
+
 export default Login;

src/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -547,6 +547,7 @@ MuiVirtualizedTable.propTypes = {
             maxWidth: PropTypes.number,
             unit: PropTypes.string,
             fractionDigits: PropTypes.number,
+            clickable: PropTypes.bool,
         })
     ).isRequired,
     enableExportCSV: PropTypes.bool,
@@ -558,6 +559,7 @@ MuiVirtualizedTable.propTypes = {
     rowHeight: PropTypes.number,
     filter: PropTypes.func,
     sort: PropTypes.func,
+    rowCount: PropTypes.number,
 };
 
 export default withStyles(defaultStyles)(MuiVirtualizedTable);

src/components/OverflowableText/overflowable-text.js

@@ -52,9 +52,10 @@ export const OverflowableText = ({ text, className, children, ...props }) => {
             <div
                 {...props}
                 ref={element}
-                children={children || text}
                 className={clsx(className, classes.overflow)}
-            />
+            >
+                {children || text}
+            </div>
         </Tooltip>
     );
 };

src/components/ReportViewer/log-table.js

@@ -5,6 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { memo } from 'react';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import withStyles from '@mui/styles/withStyles';
 import TableCell from '@mui/material/TableCell';
@@ -96,4 +97,8 @@ const LogTable = ({ logs }) => {
     );
 };
 
+LogTable.propTypes = {
+    logs: PropTypes.array.isRequired,
+};
+
 export default memo(LogTable);

src/components/ReportViewer/report-item.js

@@ -98,6 +98,7 @@ ReportItem.propTypes = {
     color: PropTypes.string,
     labelInfo: PropTypes.string,
     labelText: PropTypes.string.isRequired,
+    labelIconColor: PropTypes.string,
 };
 
 export default ReportItem;

src/components/ReportViewer/report-viewer.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 import makeStyles from '@mui/styles/makeStyles';
 import TreeView from '@mui/lab/TreeView';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -130,3 +131,8 @@ export default function ReportViewer({
         )
     );
 }
+
+ReportViewer.propTypes = {
+    jsonReport: PropTypes.object.isRequired,
+    maxSubReports: PropTypes.number,
+};

src/components/ReportViewerDialog/report-viewer-dialog.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import makeStyles from '@mui/styles/makeStyles';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
@@ -74,3 +75,10 @@ export default function ReportViewerDialog(props) {
         </Dialog>
     );
 }
+
+ReportViewerDialog.propTypes = {
+    title: PropTypes.string,
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    jsonReport: PropTypes.object.isRequired,
+};

src/components/SignInCallbackHandler/SignInCallbackHandler.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
 
 const SignInCallbackHandler = ({ userManager, handleSignInCallback }) => {
     useEffect(() => {
@@ -16,4 +17,10 @@ const SignInCallbackHandler = ({ userManager, handleSignInCallback }) => {
 
     return <h1> </h1>;
 };
+
+SignInCallbackHandler.propTypes = {
+    userManager: PropTypes.object,
+    handleSignInCallback: PropTypes.func,
+};
+
 export default SignInCallbackHandler;

src/components/SilentRenewCallbackHandler/SilentRenewCallbackHandler.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
 
 const SilentRenewCallbackHandler = ({
     userManager,
@@ -20,4 +21,9 @@ const SilentRenewCallbackHandler = ({
     return <h1>Technical token renew window, you should not see this</h1>;
 };
 
+SilentRenewCallbackHandler.propTypes = {
+    userManager: PropTypes.object,
+    handleSilentRenewCallback: PropTypes.func,
+};
+
 export default SilentRenewCallbackHandler;

src/components/SnackbarProvider/SnackbarProvider.js

@@ -35,4 +35,6 @@ const SnackbarProvider = React.forwardRef((props, ref) => {
     );
 });
 
+SnackbarProvider.displayName = 'SnackbarProvider';
+
 export default SnackbarProvider;

src/components/TopBar/TopBar.js

@@ -806,6 +806,7 @@ TopBar.propTypes = {
     onSearchTermChange: PropTypes.func,
     onSelectionChange: PropTypes.func,
     elementsFound: PropTypes.array,
+    renderElement: PropTypes.func,
     onLanguageClick: PropTypes.func.isRequired,
     language: PropTypes.string.isRequired,
 };