Merge pull request #1322 from phac-nml/eslint-rules

Eslint Updates

CHANGELOG.md

@@ -2,9 +2,10 @@
 # Changelog
 
 ## [Unreleased]
-* [Developer/UI]: Refreshed the create new user account page. See [PR 1285](https://github.com/phac-nml/irida/pull/1285) for more.
+* [Developer/UI]: Refreshed the create new user account page. See [PR 1285](https://github.com/phac-nml/irida/pull/1285)
 * [Developer/UI]: Added in typescript support to webpack build, moving forward all new frontend development will use typescript. See [PR 1294](https://github.com/phac-nml/irida/pull/1294) for more.
 * [Developer/UI]: Removed `styled-components` from page header and replaced with CSS variables. See [PR 1284](https://github.com/phac-nml/irida/pull/1284)
+* [Developer/UI]: Updated eslint rule to check for object and array destructuring. See [PR 1322](https://github.com/phac-nml/irida/pull/1322)
 
 ## [22.05.4] - 2022/06/16
 * [UI]: Fixed bug preventing filter samples by file to fail on invalid url. See [PR 1318](https://github.com/phac-nml/irida/pull/1318)

src/main/webapp/.eslintrc.js

@@ -3,9 +3,11 @@ module.exports = {
     node: "true",
     browser: true,
     es2021: true,
+    jest: true,
   },
   globals: {
     i18n: true,
+    __webpack_public_path__: true,
   },
   extends: [
     "eslint:recommended",
@@ -23,5 +25,22 @@ module.exports = {
     sourceType: "module",
   },
   plugins: ["react", "jsx-a11y", "@typescript-eslint"],
-  rules: { "react/prop-types": 0 },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  rules: {
+    "react/prop-types": 0,
+    "prefer-destructuring": [
+      "error",
+      {
+        array: true,
+        object: true,
+      },
+      {
+        enforceForRenamedProperties: false,
+      },
+    ],
+  },
 };

src/main/webapp/package.json

@@ -7,7 +7,8 @@
     "start": "webpack --mode development --watch",
     "clean": "rm -r node* dist/ pages/templates/i18n/",
     "test": "jest resources/js/**/*.test.js",
-    "test:watch": "jest --watch resources/js/**/*.test.js"
+    "test:watch": "jest --watch resources/js/**/*.test.js",
+    "lint": "eslint --ext resources/js/**/*.{js,jsx,ts,tsx}"
   },
   "browserslist": [
     "last 2 Chrome versions",

src/main/webapp/resources/js/apis/cart/cart.js

@@ -37,11 +37,11 @@ export const cartApi = createApi({
               { type: "Samples", id: "LIST" },
             ]
           : [{ type: "Samples", id: "LIST" }],
-      transformResponse(response, meta) {
+      transformResponse(response) {
         return response
           .map((project) => {
             const { samples, ...p } = project;
-            return project.samples.map((sample) => ({ ...sample, project: p }));
+            return samples.map((sample) => ({ ...sample, project: p }));
           })
           .flat();
       },

src/main/webapp/resources/js/apis/files/files.js

@@ -15,33 +15,33 @@ export function uploadFiles({ files, url, onSuccess, onError }) {
    * This prompts the user if they want to continue leaving the site.
    * @param event
    */
-  const listener = event => {
+  const listener = (event) => {
     // Cancel the event as stated by the standard.
     event.preventDefault();
     // Chrome requires returnValue to be set.
     event.returnValue = window.confirm(i18n("FileUploader.listener-warning"));
   };
   window.addEventListener("beforeunload", listener);
 
-  const names = files.map(f => f.name);
+  const names = files.map((f) => f.name);
   const formData = new FormData();
   files.forEach((f, i) => formData.append(`files[${i}]`, f));
 
-  const CancelToken = axios.CancelToken;
+  const { CancelToken } = axios;
   const source = CancelToken.source();
 
   const notification = new UploadProgressNotification({
     names,
-    request: source
+    request: source,
   });
 
   return axios
     .post(url, formData, {
       headers: {
-        "Content-Type": "multipart/form-data"
+        "Content-Type": "multipart/form-data",
       },
       cancelToken: source.token,
-      onUploadProgress: function(progressEvent) {
+      onUploadProgress: function (progressEvent) {
         const totalLength = progressEvent.lengthComputable
           ? progressEvent.total
           : progressEvent.target.getResponseHeader("content-length") ||
@@ -54,10 +54,10 @@ export function uploadFiles({ files, url, onSuccess, onError }) {
           );
           notification.show(progress);
         }
-      }
+      },
     })
     .then(({ data }) => onSuccess(data))
-    .catch(error => {
+    .catch((error) => {
       if (!axios.isCancel(error)) {
         onError();
       }

src/main/webapp/resources/js/pages/user/components/UserChangePasswordForm.jsx

@@ -68,7 +68,7 @@ export function UserChangePasswordForm({ userId }) {
           label={i18n("UserChangePasswordForm.form.label.newPassword")}
           name="newPassword"
           rules={[
-            ({}) => ({
+            () => ({
               validator(_, value) {
                 return validatePassword(value);
               },

src/main/webapp/resources/js/pages/user/components/UserTable.jsx

@@ -80,7 +80,7 @@ export function UserTable() {
       title: i18n("UserTable.email"),
       key: "email",
       dataIndex: "email",
-      render(text, full) {
+      render(text) {
         return <a href={`mailto:${text}`}>{text}</a>;
       },
     },

src/main/webapp/resources/js/utilities/html-utilities.js

@@ -19,7 +19,7 @@ const CHAR_TO_ESCAPED = {
  * @returns {string} Escaped string
  */
 export function escapeHtml(htmlString) {
-  return String(htmlString).replace(/[&<>"'`=\/]/g, s => CHAR_TO_ESCAPED[s]);
+  return String(htmlString).replace(/[&<>"'`=/]/g, s => CHAR_TO_ESCAPED[s]);
 }
 
 /**