task/increase js linting

client/eslint.config.ts

@@ -11,6 +11,8 @@ export default defineConfig([
   {
     files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     plugins: { js },
+      languageOptions: { globals: globals.jest, },
+    ...js.configs.recommended,
   },
   // tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
@@ -40,6 +42,11 @@ export default defineConfig([
       'react-hooks/refs': 0,
       'react/display-name': 0,
       'react/prop-types': 0,
+      "no-unused-vars": ["error", {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }],
     },
   },
 ]);

client/src/components/Allocations/AllocationsCells.jsx

@@ -63,7 +63,7 @@ export const Remaining = ({ cell }) => {
   };
   return (
     <div className="sub-table-row">
-      {cell.value.map(({ remaining, ratio, type, id }) => (
+      {cell.value.map(({ remaining, ratio, type, _id }) => (
         <div key={uuidv4()} className="sub-table-cell">
           <span>
             <Badge

client/src/components/Allocations/AllocationsLayout.jsx

@@ -1,16 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import {
-  Link,
-  NavLink as RRNavLink,
-  Route,
-  useHistory,
-  Switch,
-  Redirect,
-} from 'react-router-dom';
-import { Nav, NavItem, NavLink } from 'reactstrap';
+import { Link, Route, useHistory, Switch, Redirect } from 'react-router-dom';
 import { string } from 'prop-types';
-import { Icon, LoadingSpinner, Section, SectionTableWrapper } from '_common';
+import { LoadingSpinner, Section, SectionTableWrapper } from '_common';
 import { AllocationsTable } from './AllocationsTables';
 import { AllocationsTeamViewModal } from './AllocationsModals';
 import * as ROUTES from '../../constants/routes';
@@ -29,8 +21,7 @@ export const Header = ({ page }) => {
 };
 Header.propTypes = { page: string.isRequired };
 
-export const Actions = ({ page }) => {
-  const root = `${ROUTES.WORKBENCH}${ROUTES.ALLOCATIONS}/${page}`;
+export const Actions = ({ _page }) => {
   return (
     <a
       className="btn btn-primary"

client/src/components/Allocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.jsx

@@ -86,7 +86,7 @@ const AllocationsManageTeamTable = ({ rawData, projectId }) => {
                 <Button
                   type="link"
                   disabled={removingUserOperation.loading}
-                  onClick={(e) => {
+                  onClick={(_e) => {
                     dispatch({
                       type: 'REMOVE_USER_FROM_TAS_PROJECT',
                       payload: {

client/src/components/Allocations/AllocationsModals/AllocationsModals.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
+import { fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { AllocationsTeamViewModal } from './index';
 import renderComponent from 'utils/testing';

client/src/components/Allocations/tests/AllocationsTables.test.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
-import { createMemoryHistory } from 'history';
 import configureStore from 'redux-mock-store';
 import { AllocationsTable } from '../AllocationsTables';
 
@@ -21,7 +20,7 @@ const mockInitialState = {
 };
 const mockStore = configureStore();
 describe('Allocations Table', () => {
-  let getByText, rerender, debug;
+  let getByText, rerender;
   beforeEach(() => {
     const utils = render(
       <Provider
@@ -36,7 +35,6 @@ describe('Allocations Table', () => {
     );
     getByText = utils.getByText;
     rerender = utils.rerender;
-    debug = utils.debug;
   });
 
   it('should have relevant columns for data for the Allocations Table', () => {

client/src/components/Applications/AppBrowser/AppBrowser.test.jsx

@@ -23,7 +23,7 @@ describe('App Browser', () => {
     const store = mockStore({
       apps: { ...appTrayExpectedFixture, defaultTab: 'Simulation' },
     });
-    const { container, getByText } = renderComponent(<AppBrowser />, store);
+    const { getByText } = renderComponent(<AppBrowser />, store);
     expect(
       getByText('Simulation [1]', { selector: '.active.nav-link .nav-text' })
     ).toBeDefined();

client/src/components/Applications/AppForm/AppForm.jsx

@@ -492,7 +492,7 @@ export const AppSchemaForm = ({ app }) => {
         validateOnMount={isFirstRender.current}
         initialValues={initialValues}
         initialTouched={initialValues}
-        validationSchema={(props) => {
+        validationSchema={(_props) => {
           if (jobSubmission.submitting) {
             /* to to avoid a strange error where values are valid but yup returns invalid,
             we stop invalidating during submission. This occurs only when validateOnMount is set.
@@ -556,7 +556,7 @@ export const AppSchemaForm = ({ app }) => {
                   ? getAllocationValidation(allocations).test(
                       'exec-systems-check',
                       'You need an allocation with access to at least one system to run this application.',
-                      function (value) {
+                      function (_value) {
                         const isValidExecSystems =
                           !isAppUsingDynamicExecSystem(app) ||
                           (isAppUsingDynamicExecSystem(app) &&
@@ -568,7 +568,7 @@ export const AppSchemaForm = ({ app }) => {
             });
           });
         }}
-        onSubmit={(values, { setSubmitting, resetForm }) => {
+        onSubmit={(values, { _setSubmitting, _resetForm }) => {
           const job = cloneDeep(values);
           job.name = job.name.trim();
 
@@ -705,7 +705,7 @@ export const AppSchemaForm = ({ app }) => {
       >
         {({
           values,
-          errors,
+          _errors,
           isValid,
           isSubmitting,
           handleReset,
@@ -819,7 +819,7 @@ export const AppSchemaForm = ({ app }) => {
                   )}
                   {Object.entries(appFields.parameterSet)
                     .map(
-                      ([parameterSet, parameterValue]) =>
+                      ([_parameterSet, parameterValue]) =>
                         Object.keys(parameterValue).length
                     )
                     .reduce((a, b) => a + b) > 0 && (

client/src/components/Applications/AppForm/AppForm.test.jsx

@@ -706,10 +706,7 @@ describe('AppSchemaForm', () => {
       },
       execSystems: execSystemsFixture,
     };
-    const { getByText, container } = renderAppSchemaFormComponent(
-      store,
-      appFixture
-    );
+    const { container } = renderAppSchemaFormComponent(store, appFixture);
     const execSystemDropDown = container.querySelector(
       'select[name="execSystemId"]'
     );

client/src/components/Applications/AppForm/AppFormSchema.js

@@ -92,7 +92,7 @@ const FormSchema = (app) => {
                 regex,
                 param.notes.validator.message
               );
-          } catch (SyntaxError) {
+          } catch (_SyntaxError) {
             console.warn('Invalid regex pattern for app');
           }
         }

client/src/components/Applications/AppForm/AppFormUtils.test.js

@@ -23,17 +23,6 @@ describe('AppFormUtils', () => {
     },
   };
 
-  const serialFronteraApp = {
-    ...helloWorldAppFixture,
-    definition: {
-      ...helloWorldAppFixture.definition,
-      notes: {
-        ...helloWorldAppFixture.definition.notes,
-        hideNodeCountAndCoresPerNode: true,
-      },
-    },
-  };
-
   const exampleFormValue = {
     execSystemLogicalQueue: 'normal',
     nodeCount: 1,

client/src/components/Applications/AppForm/fixtures/AppForm.executionsystems.fixture.js

@@ -156,7 +156,6 @@ export const execSystemsFixture = [
     batchSchedulerProfile: 'tacc-apptainer',
     jobCapabilities: [],
     tags: [],
-    tags: [],
     notes: {
       label: 'Frontera custom',
     },

client/src/components/Applications/AppLayout/AppLayout.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Provider, useSelector } from 'react-redux';
+import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import AppsRoutes, { AppsLayout } from './AppLayout';
 import { MemoryRouter, Route } from 'react-router-dom';
@@ -31,7 +31,7 @@ describe('AppsLayout', () => {
     const store = mockStore({
       apps: { ...appTrayExpectedFixture, loading: true, categoryDict: {} },
     });
-    const { getByText, getByTestId } = renderComponent(<AppsLayout />, store);
+    const { getByTestId } = renderComponent(<AppsLayout />, store);
     expect(getByTestId('loading-spinner')).toBeDefined();
   });
   it('Display the correct error message', () => {

client/src/components/Dashboard/Dashboard.jsx

@@ -23,7 +23,7 @@ function Dashboard() {
   const panelCount = getPanelCount(
     ['DashboardTickets'],
     [hideApps, hideSystemMonitor].filter((isHidden) => !isHidden),
-    ...(Boolean(customDashboardSection) ? [['customDashboardSection']] : [])
+    ...(customDashboardSection ? [['customDashboardSection']] : [])
   );
 
   const contentLayoutName =

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Button } from '_common';
 import PropTypes from 'prop-types';
@@ -117,9 +116,9 @@ const DataFilesBreadcrumbs = ({
   scheme,
   system,
   path,
-  section,
-  operation,
-  isPublic,
+  _section,
+  _operation,
+  _isPublic,
   className,
 }) => {
   const paths = [];

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.test.jsx

@@ -5,7 +5,6 @@ import renderComponent from 'utils/testing';
 import DataFilesBreadcrumbs from './DataFilesBreadcrumbs';
 import systemsFixture from '../fixtures/DataFiles.systems.fixture';
 import filesFixture from '../fixtures/DataFiles.files.fixture';
-import { initialSystemState } from '../../../redux/reducers/datafiles.reducers';
 import { projectsFixture } from '../../../redux/sagas/fixtures/projects.fixture';
 import { fireEvent } from '@testing-library/react';
 
@@ -118,7 +117,6 @@ describe('DataFilesBreadcrumbs', () => {
     const store = mockStore({
       systems: systemsFixture,
     });
-    const history = createMemoryHistory();
     const { getByText } = renderComponent(
       <DataFilesBreadcrumbs
         api="tapis"

client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx

@@ -16,7 +16,7 @@ const BreadcrumbsDropdown = ({
   scheme,
   system,
   path,
-  section,
+  _section,
   isPublic,
 }) => {
   const paths = [];

client/src/components/DataFiles/DataFilesModals/DataFilesDownloadMessageModal.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { Button, FormField, InlineMessage, SectionMessage } from '_common';
@@ -16,11 +16,6 @@ const DataFilesDownloadMessageModal = () => {
 
   const isOpen = useSelector((state) => state.files.modals.downloadMessage);
 
-  const params = useSelector(
-    (state) => state.files.params.FilesListing,
-    shallowEqual
-  );
-
   const selectedFiles = useSelector(
     ({ files: { selected, listing } }) =>
       selected.FilesListing.map((i) => ({

client/src/components/DataFiles/DataFilesModals/DataFilesExtractModal.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, InlineMessage } from '_common';
 import { useHistory, useLocation } from 'react-router-dom';

client/src/components/DataFiles/DataFilesModals/DataFilesLinkModal.jsx

@@ -40,15 +40,15 @@ const DataFilesLinkActions = ({ status, onClick }) => {
           disabled={disabled}
           type="primary"
           size="medium"
-          onClick={(e) => onClick('delete')}
+          onClick={(_e) => onClick('delete')}
         >
           Delete
         </Button>
         <Button
           disabled={disabled}
           type="primary"
           size="medium"
-          onClick={(e) => onClick('put')}
+          onClick={(_e) => onClick('put')}
         >
           Replace Link
         </Button>
@@ -61,7 +61,7 @@ const DataFilesLinkActions = ({ status, onClick }) => {
       disabled={disabled}
       type="primary"
       size="long"
-      onClick={(e) => onClick('post')}
+      onClick={(_e) => onClick('post')}
     >
       Generate Link
     </Button>

client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx

@@ -10,7 +10,6 @@ import {
 import DataFilesTable from '../../DataFilesTable/DataFilesTable';
 import { FileIcon } from '../../DataFilesListing/DataFilesListingCells';
 import styles from './DataFilesModalListingTable.module.scss';
-import { useSelector, shallowEqual } from 'react-redux';
 
 export function getCurrentDirectory(path) {
   return path.split('/').pop();

client/src/components/DataFiles/DataFilesModals/DataFilesMoveModal.jsx

@@ -1,13 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { useHistory, useLocation } from 'react-router-dom';
-import {
-  useSelectedFiles,
-  useFileListing,
-  useSystems,
-  useModal,
-} from 'hooks/datafiles';
+import { useSelectedFiles, useFileListing, useModal } from 'hooks/datafiles';
 
 import { useMove } from 'hooks/datafiles/mutations';
 import DataFilesBreadcrumbs from '../DataFilesBreadcrumbs/DataFilesBreadcrumbs';
@@ -28,11 +23,6 @@ const DataFilesMoveModal = React.memo(() => {
   const { move, status, setStatus } = useMove();
 
   const dispatch = useDispatch();
-  const { data: systems } = useSystems();
-
-  const { fetchSelectedSystem } = useSystems();
-
-  const selectedSystem = fetchSelectedSystem(params);
 
   const reloadPage = () => {
     history.push(location.pathname);

client/src/components/DataFiles/DataFilesModals/DataFilesRenameModal.jsx

@@ -17,14 +17,14 @@ const DataFilesRenameModal = () => {
     params: { api, scheme },
   } = useFileListing('FilesListing');
 
-  const { rename: renameCallback, setStatus } = useRename();
+  const { rename: renameCallback, _setStatus } = useRename();
 
   const toggle = () => toggleModal({ operation: 'rename', props: {} });
 
   const dispatch = useDispatch();
   const history = useHistory();
   const location = useLocation();
-  const reloadPage = (name, newPath) => {
+  const reloadPage = (_name, _newPath) => {
     history.push(location.pathname);
   };
 

client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx

@@ -58,7 +58,7 @@ function DataFilesUploadModalListingTable({
           </tr>
         </thead>
         <tbody>
-          {uploadedFiles.map((file, i) => (
+          {uploadedFiles.map((file, _i) => (
             <tr key={file.id}>
               <td style={{ verticalAlign: 'middle' }}>{file.data.name}</td>
               <td style={{ verticalAlign: 'middle' }}>

client/src/components/DataFiles/DataFilesModals/tests/DataFilesCompressModal.test.jsx

@@ -8,10 +8,7 @@ import DataFilesToolbarAppsModalFixture, {
   compressAppFixture,
 } from './DataFilesToolbarAppsModals.fixture';
 import DataFilesCompressModal from '../DataFilesCompressModal';
-import {
-  getAllocationForToolbarAction,
-  getAppUtil,
-} from 'hooks/datafiles/mutations/toolbarAppUtils';
+import { getAppUtil } from 'hooks/datafiles/mutations/toolbarAppUtils';
 
 vi.mock('@tanstack/react-query');
 vi.mock('hooks/datafiles/mutations/toolbarAppUtils');