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 93.18182% with 3 lines in your changes missing coverage. Please review.

Project coverage is 97.59%. Comparing base (7477db6) to head (75ccf21).
Report is 39 commits behind head on develop.

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

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1380      +/-   ##
===========================================
+ Coverage    97.13%   97.59%   +0.46%     
===========================================
  Files           48       53       +5     
  Lines         1814     5614    +3800     
  Branches       496      608     +112     
===========================================
+ Hits          1762     5479    +3717     
- Misses          48      134      +86     
+ Partials         4        1       -3     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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

[joshdimanteto]

LGTM, tested with IMS

[joelvdavies]

Note: Vite v6 support added to react router v7 (So still using v5 here)

[joshdimanteto]

LGTM, tested with IMS

[louise-davies]

Just realised there's a lingering reference to build instead of dist - in .github/workflows/release-build.yml, on this step:

 - name: Create tarball
        run: |
          mv build scigateway-$TAG_NAME
          tar -czf scigateway-$TAG_NAME.tar.gz scigateway-$TAG_NAME

We need to switch the mv build to mv dist as otherwise the built code won't get bundled for the release tar

[louise-davies]

LGTM - I have deployed this on datagateway-dseg and it works well :)

[joshdimanteto]

Tested with operations gateway and IMS. LGTM

[louise-davies]

@joelvdavies I think this is ready to go in now that I've tested deploying it and the corresponding DataGateway PR got merged