Migrate from CRA to Vite #1379

[joelvdavies]

Description

Replaces CRA with Vite. Used the default settings that create-vite would have generated in the tsconfig. The only real change caused by that is a requirement of underscores on some unused variable & I removed the props on the footer as they weren't either (noUnusedParameters).

Notes

• react-redux-toastr was incompatible (it used jsx in .js file) using old version, so upgraded v7.6.2 -> v7.6.13 which fixed
• Had an issue with clearInterval in routing.component.test.tsx not being defined which was fixed by Component test with setTimeout and vitest fake timers not working testing-library/react-testing-library#1198
• Timers behave slightly differently to before, requiring { shouldAdvanceTime: true } in some useFakeTimers
• Unlike Migrate from CRA to Vite #346 inventory-management-system#348, images could remain inside the src folder as it is not built in library mode and are exported correctly to dist/assets as a result
• Currently an issue with App.test.tsx due to the axios __mock__ not having expect.getState() assigned as expected - fixed by mocking inside the test file itself (the token storage mock also needed to be hoisted to run correctly as it needed to be done before imports - see description here https://vitest.dev/api/vi#vi-hoisted)
• Like on Migrate from CRA to Vite #346 inventory-management-system#348 cypress-failed-log has been removed
• Replaces eslint-config-react-app with eslint-plugin-react, eslint-plugin-testing-library and eslint-plugin-react-hooks like Replace eslint-config-react-app with eslint-plugin-react and others #371 inventory-management-system#372
• Removes react-app-polyfill and custom-event-polyfill (IE is no longer supported anyway, also see https://vitejs.dev/guide/build#browser-compatibility, we could use @vitejs/plugin-legacy if required)
• Uses browserslist-to-esbuild to add support for browserslist (View the currently targeted builds using npx browserslist-to-esbuild)

Warning

The index.html has moved out of the public folder into the root, so docker-ims needs to be updated on gitlab as the title can no longer be replaced as it used to be, and instead will be in /dist after being built. Likely also effects any ansible config.

Testing instructions

Add a set up instructions describing how the reviewer should test the code

• Review code
• Check Actions build
• Review changes to test coverage
• Test against other front ends

Agile board tracking

Closes #1379

[codecov]

Codecov Report

Attention: Patch coverage is 94.82759% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 86.42%. Comparing base (b51eecf) to head (bf9dce6).

Files	Patch %	Lines
src/i18n.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@                 Coverage Diff                 @@
##           react-18-#1205    #1380       +/-   ##
===================================================
- Coverage           96.76%   86.42%   -10.35%     
===================================================
  Files                  48       56        +8     
  Lines                1763     8561     +6798     
  Branches              497      893      +396     
===================================================
+ Hits                 1706     7399     +5693     
- Misses                 53     1155     +1102     
- Partials                4        7        +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 94.23077% with 3 lines in your changes missing coverage. Please review.

Project coverage is 97.66%. Comparing base (cbfa974) to head (26fab0f).

Files with missing lines	Patch %	Lines
src/i18n.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1380      +/-   ##
===========================================
+ Coverage    97.11%   97.66%   +0.55%     
===========================================
  Files           49       54       +5     
  Lines         1802     5784    +3982     
  Branches       503      906     +403     
===========================================
+ Hits          1750     5649    +3899     
- Misses          48      133      +85     
+ Partials         4        2       -2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[louise-davies]

Seems to be working ok, need to test with e.g. OG properly but I'll wait until my previous comments are addressed for a final review

[louise-davies]

LGTM and it's working well with OG. However, I don't want to merge this yet before we're ready to make the necessary deployment changes (e.g. scigateway-ansible).

I can probably make a branch for the changes for scigateway-ansible to support this work and merge it in once we are ready to switch to v3.x.x in production.

I've created an issue in scigateway-ansible: ral-facilities/scigateway-ansible#10

[joshuadkitenge]

LGTM, tested with IMS