chore: fix eslint command in package.json, add lintWebapp command in …

…build.gradle.kts and fix eslint errors

build.gradle.kts

@@ -312,6 +312,11 @@ tasks.named<PnpmTask>("pnpmInstall") {
     finalizedBy(":pnpmCachePrune")
 }
 
+tasks.register<PnpmTask>("lintWebapp") {
+    dependsOn(":pnpmInstall")
+    pnpmCommand.set(listOf("lint"))
+}
+
 tasks.register<PnpmTask>("cleanWebapp") {
     dependsOn(":pnpmInstall")
     pnpmCommand.set(listOf("clean"))

src/main/webapp/package.json

@@ -8,7 +8,7 @@
     "clean": "run-z --then rm -rf dist/ pages/templates/i18n/",
     "test": "run-z --then jest resources/js/**/*.test.js",
     "test_watch": "run-z --then jest --watch resources/js/**/*.test.js",
-    "lint": "run-z --then eslint --ext resources/js/**/*.{js,jsx,ts,tsx}"
+    "lint": "run-z --then eslint resources/js/**/*.{js,jsx,ts,tsx}"
   },
   "browserslist": [
     "last 2 Chrome versions",

src/main/webapp/resources/js/components/AnalysesQueue.jsx

@@ -28,7 +28,7 @@ const UPDATE_QUEUE_COUNT_DELAY = 60000;
  * @return {*}
  * @constructor
  */
-export function AnalysesQueue({}) {
+export function AnalysesQueue() {
   const [running, setRunning] = useState(null);
   const [queued, setQueued] = useState(null);
 

src/main/webapp/resources/js/components/PhylocanvasComponent.jsx

@@ -21,8 +21,8 @@ export function PhylocanvasComponent({ data, className, style, treeType }) {
     tree.load(data);
     tree.setTreeType(treeType);
     setCurrentTree(tree);
-  }, [treeType]);
+  }, [currentTree, data, treeType]);
 
   // Renders the phylocanvas tree
   return <div id="phyloCanvasDiv" style={style} className={className} />;
-}
+}

src/main/webapp/resources/js/contexts/AnalysesTableContext.js

@@ -14,9 +14,8 @@ const initialContext = {
 const AnalysesTableContext = React.createContext(initialContext);
 
 function AnalysesTableProvider(props) {
-  const [analysesTableContext, setAnalysesTableContext] = useState(
-    initialContext
-  );
+  const [analysesTableContext, setAnalysesTableContext] =
+    useState(initialContext);
 
   /*
    * This function gets the analysis duration and state, and

src/main/webapp/resources/js/contexts/AnalysisDetailsContext.js

@@ -87,7 +87,7 @@ function AnalysisDetailsProvider(props) {
     getVariablesForDetails(analysisIdentifier).then((data) => {
       dispatch({ type: TYPES.DETAILS, payload: data });
     });
-  }, [getVariablesForDetails]);
+  }, [analysisIdentifier]);
 
   useEffect(() => {
     dispatch({

src/main/webapp/resources/js/contexts/AnalysisSamplesContext.js

@@ -13,29 +13,28 @@ const initialContext = {
   samples: null,
   singleEndSamples: null,
   referenceFile: [],
-  loading: true
+  loading: true,
 };
 
 const AnalysisSamplesContext = React.createContext(initialContext);
 
 function AnalysisSamplesProvider(props) {
-  const [analysisSamplesContext, setAnalysisSamplesContext] = useState(
-    initialContext
-  );
+  const [analysisSamplesContext, setAnalysisSamplesContext] =
+    useState(initialContext);
   const { analysisIdentifier } = useContext(AnalysisContext);
   const [sampleDisplayHeight, setSampleDisplayHeight] = useState(null);
 
   function getAnalysisInputSamples() {
     updateHeight();
     getAnalysisInputFiles(analysisIdentifier).then(
       ({ pairedEndSamples, singleEndSamples, referenceFile }) => {
-        setAnalysisSamplesContext(analysisSamplesContext => {
+        setAnalysisSamplesContext((analysisSamplesContext) => {
           return {
             ...analysisSamplesContext,
             samples: pairedEndSamples,
             singleEndSamples: singleEndSamples,
             referenceFile: referenceFile,
-            loading: false
+            loading: false,
           };
         });
       }
@@ -65,7 +64,7 @@ function AnalysisSamplesProvider(props) {
       value={{
         analysisSamplesContext,
         sampleDisplayHeight,
-        getAnalysisInputSamples
+        getAnalysisInputSamples,
       }}
     >
       {props.children}

src/main/webapp/resources/js/contexts/AnalysisShareContext.js

@@ -6,21 +6,20 @@
 import React, { useState } from "react";
 
 const initialContext = {
-  sharedProjects: []
+  sharedProjects: [],
 };
 
 const AnalysisShareContext = React.createContext(initialContext);
 
 function AnalysisShareProvider(props) {
-  const [analysisShareContext, setAnalysisShareContext] = useState(
-    initialContext
-  );
+  const [analysisShareContext, setAnalysisShareContext] =
+    useState(initialContext);
 
   function storeSharedProjects(sharedProjectObject) {
-    setAnalysisShareContext(analysisShareContext => {
+    setAnalysisShareContext((analysisShareContext) => {
       return {
         ...analysisShareContext,
-        sharedProjects: sharedProjectObject.sharedProjects
+        sharedProjects: sharedProjectObject.sharedProjects,
       };
     });
   }
@@ -32,15 +31,16 @@ function AnalysisShareProvider(props) {
    * an analysis can be shared with
    */
   function updateSharedProjectShareStatus(sharedProjectObject) {
-    const indexOfProjectToUpdate = analysisShareContext.sharedProjects.findIndex(
-        sharedProj =>
-          sharedProj.project.identifier === sharedProjectObject.projectId
-      ),
+    const indexOfProjectToUpdate =
+        analysisShareContext.sharedProjects.findIndex(
+          (sharedProj) =>
+            sharedProj.project.identifier === sharedProjectObject.projectId
+        ),
       sharedProjects = [...analysisShareContext.sharedProjects];
     sharedProjects[indexOfProjectToUpdate].shared =
       sharedProjectObject.shareStatus;
 
-    setAnalysisShareContext(analysisShareContext => {
+    setAnalysisShareContext((analysisShareContext) => {
       return { ...analysisShareContext, sharedProjects: sharedProjects };
     });
   }
@@ -50,7 +50,7 @@ function AnalysisShareProvider(props) {
       value={{
         analysisShareContext,
         storeSharedProjects,
-        updateSharedProjectShareStatus
+        updateSharedProjectShareStatus,
       }}
     >
       {props.children}

src/main/webapp/resources/js/contexts/SequencingRunsContext.js

@@ -14,17 +14,19 @@ function SequencingRunsProvider({ children }) {
     order: "descend",
     column: "createdDate",
     total: undefined,
-    filters: {}
+    filters: {},
   });
 
-  useEffect(() => updateTable(), [
-    updateTable,
-    tableState.search,
-    tableState.current,
-    tableState.order,
-    tableState.column,
-    tableState.filters
-  ]);
+  useEffect(
+    () => updateTable(),
+    [
+      updateTable,
+      tableState.search,
+      tableState.order,
+      tableState.column,
+      tableState.filters,
+    ]
+  );
 
   /**
    * Called whenever the table needs to be re-rendered.
@@ -38,7 +40,7 @@ function SequencingRunsProvider({ children }) {
       sortColumn: tableState.column,
       sortDirection: tableState.order,
       search: tableState.search,
-      filters: tableState.filters
+      filters: tableState.filters,
     }).then(({ analyses, total }) => {
       setTableState({ ...tableState, ...{ total, analyses, loading: false } });
     });
@@ -50,5 +52,5 @@ function SequencingRunsProvider({ children }) {
 export {
   SequencingRunsProvider,
   Consumer as SequencingRunConsumer,
-  SequencingRunsContext
+  SequencingRunsContext,
 };

src/main/webapp/resources/js/contexts/UserGroupsContext.js

@@ -18,18 +18,20 @@ function UserGroupsProvider(props) {
    * Deletes User Group and shows confirmation notification.
    */
   function userGroupsContextDeleteUserGroup(id, url) {
-    deleteUserGroup(id).then((message) => {
-      navigate(`${url}`, { replace: true });
-      notification.success({ message });
-    }).catch((message) => {
-      notification.error({ message })
-    });
+    deleteUserGroup(id)
+      .then((message) => {
+        navigate(`${url}`, { replace: true });
+        notification.success({ message });
+      })
+      .catch((message) => {
+        notification.error({ message });
+      });
   }
 
   return (
     <UserGroupsContext.Provider
       value={{
-        userGroupsContextDeleteUserGroup
+        userGroupsContextDeleteUserGroup,
       }}
     >
       {props.children}

src/main/webapp/resources/js/hooks/useTableSelect.js

@@ -16,7 +16,7 @@ export function useTableSelect(list = []) {
       const set = new Set(selected);
       setSelectedItems(list.filter((item) => set.has(item.key)));
     }
-  }, [selected]);
+  }, [list, selected]);
 
   return [{ selected, selectedItems }, { setSelected }];
 }

src/main/webapp/resources/js/redux/getStore.js

@@ -32,7 +32,7 @@ export function getStore(reducers = {}, sagas = {}, initialState) {
     typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
       ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
           trace: true,
-          traceLimit: 25
+          traceLimit: 25,
         })
       : compose;
 

src/main/webapp/resources/js/utilities/antdesign-table-utilities.ts

@@ -14,7 +14,9 @@ export const defaultShowPageSizeChanger = true;
 /**
  * Set the common pagination options for the ant design tables
  */
-export function getPaginationOptions(totalEntries: number): TablePaginationConfig {
+export function getPaginationOptions(
+  totalEntries: number
+): TablePaginationConfig {
   const config = {
     total: totalEntries,
     hideOnSinglePage: totalEntries <= defaultPageSize,
@@ -34,7 +36,7 @@ export function getPaginationOptions(totalEntries: number): TablePaginationConfi
   } else {
     return {
       ...config,
-      pageSizeOptions: ["10", "20", "50", '100'],
+      pageSizeOptions: ["10", "20", "50", "100"],
     };
   }
 }

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

@@ -6,6 +6,6 @@ import * as XLSX from "xlsx";
  * @param {string} data - csv representation of the table data.
  */
 export default ({ filename, data }) => {
-  const workbook = XLSX.read(data, { type: 'binary', raw: true, dense: true });
-  XLSX.writeFile(workbook, filename, { bookType: 'xlsx', type: 'base64' });
+  const workbook = XLSX.read(data, { type: "binary", raw: true, dense: true });
+  XLSX.writeFile(workbook, filename, { bookType: "xlsx", type: "base64" });
 };

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

@@ -10,7 +10,7 @@ const CHAR_TO_ESCAPED = {
   "'": "'",
   "/": "/",
   "`": "`",
-  "=": "="
+  "=": "=",
 };
 
 /**
@@ -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]);
 }
 
 /**