Upgrade to React 18

[AlexisSouquiere]

TODO:

• Upgrade all the dependencies and move to React 18
• Fix all the props (params, history) issues
• Migration from create-react-app to vite
• Fix all the CSS issues
• enzyme EOL (tests)
• axio-progress-bar dependency conflict. Replace ? Force ?

[AlexisSouquiere]

@tchiotludo to follow the frontend dependencies upgrade PR.
AKHQ is starting fine, runs well on the main screens where I fixed the different props issues due to migrating to React 18
Some CSS is broken.

I didn't start to rewrite everything to functional components. I preferred an intermediate approach by recreating withRouter (as explained here that uses the hooks)

[jonasvoelcker]

Hi @tchiotludo,

I think we are in a state where some feedback would be really good to proceed. I don't have the clusters or knowhow to see every single page and feature but I guess the basics have been done :)

Those are the main changes I think we made:

• Migrated frontend from Create React App to vite
• Replaced enzyme testing engine with vitest
• Using the latest version of each used dependency, this also resolves the npm audit
• The sidebar is now scrollable in expanded mode if there are too many clusters
• Forms are no longer using white input fields, the UI is more consequent in its dark mode
• All icons were changed from fontawesome version 4 to 6
• The routing should no longer produce multiple history entries and the usage of the back-button is useful again
• All printed times are now based on the operation system's timezone rather than UTC
• Time selection within all DatePicker-Components can now be made in steps of 15 minutes

FYI: @AlexisSouquiere

[AlexisSouquiere]

I will install this version on our DEV cluster next week to get some feedback and see if we missed anything.
As discussed with @jonasvoelcker I will do some tests on the authentication and see if everything is fine too (routing, etc.)

[tchiotludo]

@jonasvoelcker @AlexisSouquiere thanks for the amazing work so far.
Sorry for my lack of time, I see there is a lot of very good progress on this, thanks a lot !!! 👏 👏 👏
I'm really happy to see all this change that seem to be developer & user experience!

Is there any blocker on your side so far?

[jonasvoelcker]

Hey @tchiotludo,

from what I tested with our cluster we do not have blockers yet but there should be a good amount of testing by different people which @AlexisSouquiere starts next week in his company I guess.

Sometimes there were some weird behaviors in the routing and the "newest"-search should undergo some heavy rework at some time, but I think this topic shouldn't block the release and take place in another pull request.

If you could make some checks in parallel to Alexis I would be really greatful for that, currently I have some time left for this but after next week this will decrease drastically I guess.

One last thought: Vite mentions that the component's render-behavior is not quite right and it hinders the hot reload to take place. As the tool seems to work well in production mode I didn't invest time in fixing the component's composition as this would mean a massive amount of time to implement a new concept for that.

[AlexisSouquiere]

@tchiotludo as Jonas said, I just deployed this branch on one of our instance to get feedback from other users.
In the meantime I will continue to do some non-regression tests and I hope that I'll be able to give a GO next week !

[AlexisSouquiere]

@tchiotludo PR is ready for me. I think that after merging we can let people trying it on the dev branch for a week or two before releasing but I didn't had any complains on my side with this new version.

cc @jonasvoelcker. Thanks again for your work and help on this one. You did the biggest parts 👏

[tchiotludo]

quick try in my side, seems to be working, congrats for the huge amount of work!