Update eslint to v9

[pylipp]

Background

We use eslint as tool for our front-end code, currently v8.56 which has reached EOL in 2024.

Task

• update eslint to v9
• take into consideration the migration guide from https://eslint.org/docs/latest/use/migrate-to-9.0.0
• migrate all config files

More instructions

• write modern, correct TypeScript with valid Type annotations that don't result in any tsc errors
• make sure all FE builds pass with pnpm -C front build and pnpm -C statviz build
• make sure all FE tests pass with pnpm test
• try to do as little code changes as possible to achieve the requested functionality
• use Claude Opus 4 model to solve this

[Horlawale-ui]

@pylipp Assign me to this issue so that I can fix and make a PR

[pylipp]

superceded by https://trello.com/c/kquoFxow

[MomoRazor]

Finally found some time to work on this, sorry for the delay! This is where I'm at:

• Althought eslint 10 has been released while working on this, still sticking to eslint 9 for now, as supporting packages (named below) still do not fully support v10)
• Supporting packages not supporting v10 - eslint-plugin-import, eslint-plugin-jsx-ally, eslint-plugin-react, eslint-plugin-react-hooks - all in use, unable to remove and do not recommend replacing unless v10 support a lot long.

Related to previous PR:
I've attempted to review this PR, however given that it is impossible to update with the latest master, there are many changes which render it outdated, so I've resolved to continue on my own branch. Thank you for contributing regardless Eric!

I have restarted this process, because in my previous approach to this, I had already done some code base changes which might have been too much to review for this upgrade. This new approach is on a new branch

The following is a detailed list of all the changes in the code that were required due to the Eslint upgrade. This list is greatly reduced from the original one (eslint v9 pointed to 290 errors) since any errors regarding to the any type were downgraded to warnings in order to decrease the amount of code change required at one go.

Type Name issues (e.g. switching Boolean to boolean)

• front/src/mocks/functions.ts
• front/src/providers/ApolloAuth0Provider.tsx
• front/src/components/Table/Filter.tsx
• front/src/views/Transfers/ShipmentView/components/ShipmentCard.tsx
• front/src/views/Transfers/ShipmentView/components/ShipmentTabs.tsx
• front/src/views/Transfers/ShipmentView/components/ShipmentContent.tsx

These are very small changes, with no real need for review and no performance impact, apart from silencing warnings,

Set States withing useEffect anti-pattern (see here)

• front/src/App.tsx
• front/src/components/HeaderMenu/BaseSwitcher.tsx
• front/src/hooks/useLoadAndSetGlobalPreferences.ts
• front/src/views/Box/BoxView.tsx
• front/src/views/BoxCreate/BoxCreateView.tsx
• front/src/views/BoxCreate/components/BoxCreate.tsx
• front/src/components/BoxReconciliationOverlay/components/MatchProductsForm.tsx
• front/src/components/QrReader/components/QrReaderMultiBoxContainer.tsx
• front/src/views/Boxes/components/BoxesFilter.tsx
• front/src/views/Boxes/components/RemoveTagsButton.tsx
• front/src/views/Distributions/DistroEventView/components/State2Packing/components/PackedContentListOverlay.tsx
• shared-components/statviz/hooks/useValueFilter.ts
• shared-components/statviz/hooks/useShareableLink.ts
• front/src/views/Distributions/DistrosDashboardView/DistrosDashboardView.tsx
• front/src/views/BoxEdit/components/BoxEdit.tsx
• front/src/views/Transfers/ShipmentView/ShipmentView.tsx
• front/src/views/Transfers/CreateShipment/components/CreateShipment.tsx
• front/src/views/Transfers/CreateTransferAgreement/components/CreateTransferAgreement.tsx

These are the most high-impact and code intensive changes, as they target possible re-render issues and memory leak possibilities.

React Immutability & Memoization Issue fixes

• front/src/components/BoxReconciliationOverlay/components/BoxReconciliationAccordion.tsx
• front/src/views/Box/components/AddItemsToBoxOverlay.tsx
• front/src/views/Box/components/TakeItemsFromBoxOverlay.tsx
• front/src/views/BoxCreate/components/BoxCreate.tsx
• front/src/components/BoxReconciliationOverlay/components/MatchProductsForm.tsx
• front/src/components/BoxReconciliationOverlay/components/ReceiveLocationForm.tsx
• front/src/views/BoxEdit/components/BoxEdit.tsx
• shared-components/statviz/components/visualizations/movedBoxes/BoxFlowSankey.tsx
• front/src/views/EditStandardProduct/components/EditStandardProductForm.tsx
• front/src/views/Transfers/ShipmentView/components/ShipmentContent.tsx
• shared-components/statviz/components/visualizations/createdBoxes/TopCreatedProducts.tsx
• shared-components/statviz/components/visualizations/demographic/DemographicPyramid.tsx
• shared-front/src/App.tsx
• shared-components/statviz/components/custom-graphs/BarChartCenterAxis.tsx
• front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx
• front/src/views/Transfers/CreateShipment/components/CreateShipment.tsx
• front/src/views/Transfers/CreateTransferAgreement/components/CreateTransferAgreement.tsx
• shared-components/statviz/components/filter/TimeRangeSelect.tsx
• shared-components/statviz/components/filter/TabbedTagDropdown.tsx

These are medium-impact, but relatively easy to review. They might increase optimization and reactivity to state change in some areas.

Removing or changing @ts-ignore to avoid hiding issues

• front/src/components/BoxReconciliationOverlay/BoxReconciliationOverlay.test.tsx
• /front/src/views/Distributions/DistroEventView/components/State2Packing/components/PackingAddBoxOrItemsForPackingListEntryOverlay/PackingScanBoxOrFindByLabelOverlayContent.tsx
• shared-components/statviz/components/nivo/SankeyChart.tsx
• shared-components/statviz/components/nivo/Sunburst.tsx
• shared-components/statviz/components/visualizations/createdBoxes/CreatedBoxesFilterContainer.tsx
• shared-components/statviz/components/visualizations/stock/StockOverviewPie.tsx
• shared-components/statviz/components/visualizations/movedBoxes/MovedBoxesFilterContainer.tsx

These changes only serve to silence warnings properly where required, no impact on functionality.

Usage of non-null Anti-Pattern

• front/src/components/QrReader/QrReaderContainer.tsx
• front/src/views/Box/components/BoxCard.tsx
• front/src/views/Distributions/DistroEventView/components/State2Packing/components/PackedContentListOverlay.tsx
• front/src/views/Distributions/dataTransformers.ts
• front/src/views/EditCustomProduct/EditCustomProductView.tsx
• front/src/views/Transfers/CreateTransferAgreement/CreateTransferAgreementView.tsx
• front/src/views/Transfers/TransferAgreementOverview/TransferAgreementOverviewView.tsx
• shared-components/statviz/components/visualizations/demographic/DemographicFilterContainer.tsx
• shared-components/statviz/components/visualizations/movedBoxes/MovedBoxesFilterContainer.tsx
• front/src/views/Distributions/DistrosDashboardView/DistrosDashboardView.tsx
• front/src/views/Transfers/ShipmentView/ShipmentView.tsx

These possible fix hidden null safety bugs that were previously silenced through non-null operators, medium impact with very limited code review requirement.

This is, in my opinion, the least amount of changes that can be done for this upgrade while still tackling the real possible r-render issues highlighted by eslint v9. An exhaustive lists of warnings and errors from eslint can be generated by running npx eslint . > eslint-report.txt

Apologies for the massive change log regardless, however if you'd like to tackle the changes here in a more granular fashion, let me know and we can separate them in batches, prioritizing them with highest impact first.