CAT-1079 NickAkhmetov/Linting updates (#3646)

CHANGELOG-eslint-v9.md

@@ -0,0 +1,2 @@
+- Update to ESLint v9.
+- Update minor versions of development dependencies to resolve security concerns.

context/app/static/js/components/cells/CellTypeResults/utils.ts

@@ -1,6 +1,6 @@
 // Extracts the CLID from a cell name string provided in the format <Cell Type Name> (<CLID>)
 export function extractCLID(cellName: string) {
-  const match = cellName.match(/\((CL[^)]+)\)/);
+  const match = /\((CL[^)]+)\)/.exec(cellName);
   return match ? match[1] : null;
 }
 

context/app/static/js/components/cells/DatasetsSelectedByExpression/hooks.tsx

@@ -115,7 +115,6 @@ function useDatasetsSelectedByExpression() {
     };
     try {
       completeStep(createStepText(queryType, cellVariableNames, minExpressionLog, minCellPercentage));
-      /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
       const serviceResults = await new CellsService().getDatasets(queryParams);
       const datasets = 'list' in serviceResults ? serviceResults.list : serviceResults;
 
@@ -136,7 +135,7 @@ function useDatasetsSelectedByExpression() {
           return acc;
         }, [] as WrappedCellsResultsDataset[]),
       );
-      /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+
       if ('list' in serviceResults) {
         setResultCounts(serviceResults);
       }
@@ -150,7 +149,7 @@ function useDatasetsSelectedByExpression() {
         // but after the user submits their data, the component collapses,
         // so the message is hidden, and the user just sees the please wait.
         // Not sure what the best long term solution is, but this unblocks Nils.
-        // eslint-disable-next-line no-alert
+
         // alert(e.message);
       }
     }

context/app/static/js/components/detailPage/files/DataProducts/hooks.ts

@@ -24,7 +24,7 @@ const originDenylist = ['https://github.com/hubmapconsortium/portal-containers']
 const nameDenylist = ['pipeline.cwl'];
 
 export function getGithubRepoName(origin: string) {
-  const match = origin.match(/github.com\/([^/]+)\/([^/]+)(\/|$)/);
+  const match = /github.com\/([^/]+)\/([^/]+)(\/|$)/.exec(origin);
   if (match) {
     return match[2];
   }

context/app/static/js/components/detailPage/multi-assay/RelatedMultiAssayLinks/RelatedMultiAssayLinks.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';

context/app/static/js/components/detailPage/provenance/ProvGraph/ProvGraph.spec.js

@@ -3,7 +3,6 @@ import { fireEvent, waitFor } from '@testing-library/react';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 
-// eslint-disable-next-line
 import { render, screen, appProviderEndpoints } from 'test-utils/functions';
 import sampleProv, { sampleDescendantsProv } from './fixtures/sample_prov';
 import donorProv from './fixtures/donor_prov';

context/app/static/js/components/detailPage/visualization/Visualization/hooks.ts

@@ -62,7 +62,7 @@ export function useVitessceConfig({ vitData, setVitessceState, markerGene }: Use
       let vitessceURLConf;
       try {
         vitessceURLConf = fragment.length > 0 ? decodeURLParamsToConf(fragment) : null;
-      } catch (err) {
+      } catch {
         // If URL cannot be parsed, display error and show Vitessce.
         toastError('View configuration from URL was not able to be parsed.');
         setVitessceDefaults(vitData);

context/app/static/js/components/detailPage/visualization/VisualizationWrapper/VisualizationWrapper.tsx

@@ -4,7 +4,6 @@ import VisualizationErrorBoundary from './VisualizationError';
 import { VizContainerStyleContext } from './ContainerStylingContext';
 import { VisualizationSuspenseFallback } from './VisualizationSuspenseFallback';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 const Visualization = React.lazy(() => import('../Visualization'));
 
 interface VisualizationWrapperProps {

context/app/static/js/components/publications/AggsList/hooks.js

@@ -27,7 +27,6 @@ function usePublicationDatasetsAggs({ descendantUUID, aggsField, associatedColle
   const { searchHits: collectionDatasets } = useSearchHits(getCollectionDatasetsQuery(associatedCollectionUUID));
 
   const collectionDatasetsUUIDs =
-    // eslint-disable-next-line no-underscore-dangle
     collectionDatasets.length > 0 ? collectionDatasets[0]?._source?.datasets.map(({ uuid }) => uuid) : [];
 
   const query = associatedCollectionUUID

context/app/static/js/components/savedLists/SavedEntitiesTable/SavedEntitiesTable.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import React, { useState } from 'react';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';

context/app/static/js/components/savedLists/listTextFields/index.js

@@ -13,7 +13,6 @@ function TitleTextField({ handleChange, title }) {
       label="Title"
       fullWidth
       variant="outlined"
-      // eslint-disable-next-line prettier/prettier
       placeholder="Like “Spleen-Related Data” or “ATAC-seq Visualizations”"
       inputProps={{ maxLength: maxTitleLength }}
       onChange={handleChange}

context/app/static/js/components/search/SearchBar.tsx

@@ -20,7 +20,7 @@ function SearchBar() {
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      setSearch(input.match(/^\s*HBM\S+\s*$/i) ? `"${input}"` : input);
+      setSearch(/^\s*HBM\S+\s*$/i.exec(input) ? `"${input}"` : input);
 
       const category = 'Free Text Search';
 

context/app/static/js/components/search/store.ts

@@ -171,7 +171,7 @@ export function parseURLState(stateJSON: string) {
   try {
     const parsed = searchURLStateSchema.parse(JSON.parse(stateJSON));
     return parsed;
-  } catch (e) {
+  } catch {
     return {};
   }
 }

context/app/static/js/components/searchPage/__tests__/SelectedFilter.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line
+
 import { render, screen } from 'test-utils/functions';
 
 import SelectedFilter from '../SelectedFilter';

context/app/static/js/components/searchPage/__tests__/SortingTableHead.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line
+
 import { render, screen } from 'test-utils/functions';
 
 import SortingTableHead from '../SortingTableHead';

context/app/static/js/components/searchPage/config.js

@@ -1,5 +1,5 @@
 /* eslint-disable prettier/prettier */
-// eslint-disable-next-line import/named
+ 
 import { capitalizeString } from 'js/helpers/functions';
 import { listFilter, rangeFilter, field, hierarchicalFilter, boolListFilter } from './utils';
 

context/app/static/js/components/searchPage/filters/Filters/Filters.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line
+
 import { render, screen } from 'test-utils/functions';
 import { SearchkitProvider, SearchkitManager } from 'searchkit';
 

context/app/static/js/components/workspaces/hooks.ts

@@ -154,7 +154,7 @@ function useMatchingWorkspaceTemplates(workspace: MergedWorkspace | Record<strin
   const matchingTemplates = workspaceFiles.reduce((acc, file) => {
     // match the filename without extension given a file path.
     const regex = /[\w-]+?(?=\.)/;
-    const fileNameMatch = getWorkspaceFileName(file).match(regex);
+    const fileNameMatch = regex.exec(getWorkspaceFileName(file));
     const templateName = fileNameMatch ? fileNameMatch[0] : '';
     if (templateName && templateName in templates) {
       return { ...acc, [templateName]: templates[templateName] };
@@ -284,7 +284,7 @@ export function useCreateAndLaunchWorkspace() {
 
       try {
         workspace = await createWorkspace(body);
-      } catch (e) {
+      } catch {
         toastErrorCreateWorkspace();
         return;
       }
@@ -298,7 +298,7 @@ export function useCreateAndLaunchWorkspace() {
           templatePath,
           resourceOptions,
         });
-      } catch (e) {
+      } catch {
         toastErrorLaunchWorkspace();
       }
     },

context/app/static/js/helpers/functions.ts

@@ -30,7 +30,7 @@ export function shouldCapitalizeString(s: string, idx = 1) {
   if (idx === 0) {
     return true;
   }
-  return NOT_CAPITALIZED_WORDS.indexOf(lowerCase) === -1;
+  return !NOT_CAPITALIZED_WORDS.includes(lowerCase);
 }
 
 export function capitalizeAndReplaceDashes(s: string) {

context/app/static/js/helpers/swr/fetchers.ts

@@ -34,7 +34,7 @@ async function f({
       let errorBody: Record<string, unknown> = { error: rawText };
       try {
         errorBody = JSON.parse(rawText) as Record<string, unknown>;
-      } catch (e) {
+      } catch {
         // Ignore and use the raw text instead since error was not returned as json
       }
       const message = errorMessages[response.status] ?? `The request to ${url} failed.`;
@@ -48,7 +48,7 @@ async function f({
     if (returnResponse) {
       return response;
     }
-    return response.json();
+    return response.json() as Promise<unknown>;
   });
 }
 

context/app/static/js/hooks/useImmediateDescendantProv.js

@@ -16,7 +16,7 @@ async function getEntityData(hubmapID, elasticsearchEndpoint, groupsToken) {
     return {};
   }
   const results = await response.json();
-  // eslint-disable-next-line no-underscore-dangle
+
   return results.hits.hits[0]._source;
 }
 

context/app/static/js/pages/Workspace/Workspace.tsx

@@ -54,6 +54,7 @@ interface WorkspacePageProps {
 }
 
 function LaunchStopButton(props: ButtonProps) {
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string -- this is a valid use case
   const variant = props?.children?.toString() === 'Stop Jobs' ? 'outlined' : 'contained';
   return <Button {...props} variant={variant} />;
 }

context/app/static/js/pages/search/Search.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line
+
 import { render, screen } from 'test-utils/functions';
 
 import Search from './Search';

context/app/static/js/shared-styles/accordions/AccordionSteps/AccordionSteps.tsx

@@ -14,6 +14,7 @@ function AccordionSteps({ steps, id }: AccordionStepsProps) {
   return steps.map(({ heading, content, ref }, i) => (
     <StepAccordion
       id={`${id}-${i}`}
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       key={String(heading)}
       index={i}
       summaryHeading={heading}

context/app/static/js/shared-styles/buttons/TooltipButton/TooltipIconButton.tsx

@@ -6,11 +6,12 @@ import TooltipButtonBase from './TooltipButtonBase';
 
 export type TooltipButtonProps<E extends ElementType = IconButtonTypeMap['defaultComponent']> = {
   tooltip: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
 } & IconButtonProps<E>;
 
 function TooltipIconButton<E extends ElementType = IconButtonTypeMap['defaultComponent']>(
   { children, ...props }: TooltipButtonProps<E>,
-  ref: React.Ref<HTMLButtonElement>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   return (
     <TooltipButtonBase {...props} ref={ref} isIconButton>
@@ -19,7 +20,8 @@ function TooltipIconButton<E extends ElementType = IconButtonTypeMap['defaultCom
   );
 }
 
-const ForwardedTooltipIconButton = React.forwardRef(TooltipIconButton);
+// @ts-expect-error Forwarded refs break button/link polymorphism, so we need to cast the forwarded ref to the correct type
+const ForwardedTooltipIconButton = React.forwardRef(TooltipIconButton) as typeof TooltipIconButton;
 
 const RectangularTooltipIconButton = styled(ForwardedTooltipIconButton)(() => ({
   borderRadius: '0px',