Added rule for ESlint to detect missing key property in iterators. (#…

…6387) Co-authored-by: Steve Piercy <[email protected]>
plone · Oct 9, 2024 · 0dcfb58 · 0dcfb58
1 parent 436c45d
commit 0dcfb58
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 40 deletions.
diff --git a/docs/source/upgrade-guide/index.md b/docs/source/upgrade-guide/index.md
@@ -503,6 +503,12 @@ razzle.config.js
 
 The change involves adding a new `paths` argument to the `customModifyWebpackConfig` function.
 
+### Added rule for ESlint to detect missing key property in iterators.
+
+The `react/jsx-key` rule has been enabled in ESlint for catching missing `key` in JSX iterators.
+You might catch some violations in your project or add-on code after running ESlint.
+Adding the missing `key` property whenever the violation is reported will fix it.
+
 (volto-upgrade-guide-17.x.x)=
 
 ## Upgrading to Volto 17.x.x

diff --git a/packages/volto/.eslintrc b/packages/volto/.eslintrc
@@ -6,29 +6,30 @@
     "browser": true,
     "node": true,
     "mocha": true,
-    "jasmine": true
+    "jasmine": true,
   },
   "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
-      "legacyDecorators": true
-    }
+      "legacyDecorators": true,
+    },
   },
   "rules": {
     "import/no-unresolved": 1,
+    "react/jsx-key": [2, { "checkFragmentShorthand": true }],
     "no-alert": 1,
     "no-console": 1,
     "no-debugger": 1,
     "prettier/prettier": [
       "error",
-      { "trailingComma": "all", "singleQuote": true }
+      { "trailingComma": "all", "singleQuote": true },
     ],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/react-in-jsx-scope": "off",
-    "jsx-a11y/label-has-associated-control": "off"
+    "jsx-a11y/label-has-associated-control": "off",
   },
   "settings": {
     "import/resolver": {
@@ -39,18 +40,18 @@
           ["@plone/registry", "../registry/src"],
           ["@plone/types", "../types"],
           ["@package", "./src"],
-          ["@root", "./src"]
+          ["@root", "./src"],
         ],
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
       },
       "babel-plugin-root-import": {
-        "rootPathSuffix": "src"
-      }
+        "rootPathSuffix": "src",
+      },
     },
     "import/core-modules": ["load-volto-addons"],
     "react": {
-      "version": "detect"
-    }
+      "version": "detect",
+    },
   },
   "overrides": [
     {
@@ -60,17 +61,14 @@
       // Re-add it if at some point, we stop relying on it
       "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
       "plugins": ["prettier", "react-hooks", "jsx-a11y"],
-      "parser": "@typescript-eslint/parser"
+      "parser": "@typescript-eslint/parser",
     },
     {
-      "files": [
-        "**/*.stories.js",
-        "**/*.stories.jsx"
-      ],
+      "files": ["**/*.stories.js", "**/*.stories.jsx"],
       "rules": {
-        "import/no-anonymous-default-export": "off"
-      }
-    }
+        "import/no-anonymous-default-export": "off",
+      },
+    },
   ],
   "globals": {
     "root": true,
@@ -86,6 +84,6 @@
     "Cypress": true,
     "jest": true,
     "socket": true,
-    "webpackIsomorphicTools": true
-  }
+    "webpackIsomorphicTools": true,
+  },
 }
diff --git a/packages/volto/news/6387.breaking b/packages/volto/news/6387.breaking
@@ -0,0 +1 @@
+Added `react/jsx-key` rule for ESlint to detect missing key property in iterators. @sneridagh
diff --git a/packages/volto/src/components/manage/Contents/Contents.jsx b/packages/volto/src/components/manage/Contents/Contents.jsx
@@ -1397,6 +1397,7 @@ class Contents extends Component {
                                         {breach.targets
                                           .map((target) => (
                                             <Link
+                                              key={target['@id']}
                                               to={flattenToAppURL(
                                                 target['@id'],
                                               )}
@@ -1467,6 +1468,7 @@ class Contents extends Component {
                                     {breach.targets
                                       .map((target) => (
                                         <Link
+                                          key={target['@id']}
                                           to={flattenToAppURL(target['@id'])}
                                           title="Navigate to this item"
                                         >

diff --git a/packages/volto/src/components/manage/Controlpanels/DatabaseInformation.jsx b/packages/volto/src/components/manage/Controlpanels/DatabaseInformation.jsx
@@ -150,6 +150,7 @@ const DatabaseInformation = () => {
               </Table.Row>
             </Table.Header>
             {databaseInformation.cache_detail_length.map((item) => (
+              // eslint-disable-next-line react/jsx-key
               <Table.Row>
                 <Table.Cell>{item.connection}</Table.Cell>
                 <Table.Cell>{item.ngsize}</Table.Cell>

diff --git a/packages/volto/src/components/manage/Controlpanels/UpgradeControlPanel.jsx b/packages/volto/src/components/manage/Controlpanels/UpgradeControlPanel.jsx
@@ -251,6 +251,7 @@ class UpgradeControlPanel extends Component {
                 <Container>
                   {map(upgradeSteps, (upgradeGroup) => [
                     <UpgradeStep
+                      key={upgradeGroup[0]}
                       title={upgradeGroup[0]}
                       steps={upgradeGroup[1]}
                     />,

diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx
@@ -188,18 +188,20 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
           </Form>
           {(!many_groups || query_group_filter.length > 1) &&
             filter_options?.map((filter_option) => (
-              <Form.Field>
-                <Checkbox
-                  name={`filter_option_${filter_option.value}`}
-                  key={filter_option.value}
-                  title={filter_option.label}
-                  label={filter_option.label}
-                  defaultChecked={false}
-                  onChange={(event, { checked }) => {
-                    onSelectOptionHandler(filter_option, checked);
-                  }}
-                />
-              </Form.Field>
+              <React.Fragment key={filter_option.value}>
+                <Form.Field>
+                  <Checkbox
+                    name={`filter_option_${filter_option.value}`}
+                    key={filter_option.value}
+                    title={filter_option.label}
+                    label={filter_option.label}
+                    defaultChecked={false}
+                    onChange={(event, { checked }) => {
+                      onSelectOptionHandler(filter_option, checked);
+                    }}
+                  />
+                </Form.Field>
+              </React.Fragment>
             ))}
         </div>
         <UserGroupMembershipListing

diff --git a/packages/volto/src/components/manage/Pluggable/Pluggable.test.js b/packages/volto/src/components/manage/Pluggable/Pluggable.test.js
@@ -57,8 +57,8 @@ describe('<Pluggable />', () => {
                     </header>
                     <div className="pastanaga-menu-list">
                       <ul>
-                        {pluggables.map((p) => (
-                          <>{p()}</>
+                        {pluggables.map((p, index) => (
+                          <React.Fragment key={index}>{p()}</React.Fragment>
                         ))}
                       </ul>
                     </div>
@@ -92,7 +92,7 @@ describe('<Pluggable />', () => {
                     <div className="pastanaga-menu-list">
                       <ul>
                         {pluggables.map((p) => (
-                          <>{p()}</>
+                          <React.Fragment key={p}>{p()}</React.Fragment>
                         ))}
                       </ul>
                     </div>

diff --git a/packages/volto/src/components/manage/Sidebar/ObjectBrowserNav.jsx b/packages/volto/src/components/manage/Sidebar/ObjectBrowserNav.jsx
@@ -51,6 +51,7 @@ const ObjectBrowserNav = ({
         currentSearchResults.items.map((item) =>
           view === 'icons' ? (
             <li
+              key={item['@id']}
               className="image-wrapper"
               title={`${item['@id']} (${item['@type']})`}
             >

diff --git a/packages/volto/src/components/manage/Toolbar/More.jsx b/packages/volto/src/components/manage/Toolbar/More.jsx
@@ -311,8 +311,8 @@ const More = (props) => {
                 </header>
                 <div className="pastanaga-menu-list">
                   <ul>
-                    {pluggables.map((p) => (
-                      <>{p()}</>
+                    {pluggables.map((p, index) => (
+                      <React.Fragment key={index}>{p()}</React.Fragment>
                     ))}
                   </ul>
                 </div>

diff --git a/packages/volto/src/components/theme/Icon/Icon.stories.jsx b/packages/volto/src/components/theme/Icon/Icon.stories.jsx
@@ -43,6 +43,7 @@ const iconElements = Object.keys(icons).map((iconName) => {
   const icon = icons[iconName];
   return (
     <center
+      key={icons[iconName]}
       style={{
         float: 'left',
         width: '150px',

diff --git a/packages/volto/src/components/theme/Widgets/ArrayWidget.jsx b/packages/volto/src/components/theme/Widgets/ArrayWidget.jsx
@@ -5,14 +5,14 @@ const ArrayWidget = ({ value, children, className }) =>
   value ? (
     <span className={cx(className, 'array', 'widget')}>
       {value.map((item, key) => (
-        <>
+        <React.Fragment key={item.token}>
           {key ? ', ' : ''}
           <span key={item.token || item.title || item}>
             {children
               ? children(item.title || item.token || item)
               : item.title || item.token || item}
           </span>
-        </>
+        </React.Fragment>
       ))}
     </span>
   ) : (

diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx
@@ -158,6 +158,7 @@ class Html extends Component {
                   }}
                 ></script>
                 {extractor.getStyleElements().map((elem) => (
+                  // eslint-disable-next-line react/jsx-key
                   <noscript>
                     {React.cloneElement(elem, {
                       rel: 'stylesheet',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Added `react/jsx-key` rule for ESlint to detect missing key property in iterators. @sneridagh