server Migrate to React 19, Vite, functional components and general modernize the UI

Fixes https://github.com/gotify/server/issues/695

To test this modification:

(cd ui && yarn)
(cd ui && yarn build)
go run .
(cd ui && yarn start)

Now access the address yarn start shows you.

Oct 15 '24 06:10 mfechner

Ok, to sum it up. The migration to vite is more or less done. But it seems that state management is broken, after a login the message component is not loaded.

I tried to update the router, but that is even worse. They broke the complete API and do not even provide a migration script for it.

As I mainly develop in Angular I need to read about react before I continue, but it seems that this upgrade to vite is depending on updating all libs to a more current version.

If someone else here have a strategy how to update the ui, any feedback is welcome. I understand now the comment from @jmattheis that this will not be an easy task ;)

Oct 17 '24 04:10 mfechner

@mfechner I feel you (:, I think the only good way it to start from scratch and copy component by component into a new project, so that you don't have to fix 100 errors to get something working. It's on my todo list, sadly it's multi hour effort.

Oct 18 '24 19:10 jmattheis

@jmattheis thanks a lot for your feedback. I currently study react to better understand react itself. It's to early to really make a statement here, but why you do not use the standard state management of react. That would help to get rid of a third party lib and would also simplify upgrade in the future.

I'm on this task but it will take some time ;)

Oct 22 '24 15:10 mfechner

The codebase is quite old, pre react hooks. In my experience it wasn't that ergonomic to use contexts for global state, so I've used a lib. Currently I like https://github.com/pmndrs/zustand for it's simplicity and small footprint.

Oct 25 '24 09:10 jmattheis

I started now with a rewrite, but this will be a massiv change. Steps I plan to do:

rewrite all class based components as functional components to be able to use all hook
upgrade react in first step to 18.3.1 and later to 19
upgrade material to v6
replace state management with @reduxjs/toolkit and react-redux
upgrade react-router to 7
use vite 6

I think it will be nearly impossible to get this changes sliced into small commit, as all steps link somehow together. Maybe later try to get also rid of not needed third party libs like axios. The fetch API is normally more than enough nowadays.

I update you, if I have something to show, but it will for sure take some days maybe some weeks.

Dec 28 '24 19:12 mfechner

This is now a first version we can start. The newly rewritten react app looks ok and tests I did are working fine. There can be some finetuning, like loading indicator or use redux RTK query.

There are some todos left (infinite loading component for messages), but it is now a good starting point.

The only problem I have is that puppeteer sometimes is just not loading the page and therefore tests are not running. Maybe someone has an idea why?

@jmattheis would be nice if you can have a look, it was really a lot of work

Jan 01 '25 12:01 mfechner

All tests are now working fine for me.

Jan 02 '25 08:01 mfechner

I'll have a look at this in the coming days, but I'll take some time.

Jan 02 '25 17:01 jmattheis

I'll have a look at this in the coming days, but I'll take some time.

thank you very much. I found other small issues I corrected in the meantime. The webinterface itself seems to work, but I have problem with the tests. Sometimes they are failing (about 2 failures if doing 10 test runs).

The problems I found is that for most actions a submit or a click on a button was not blocking (running in background), which I reverted to the behaviour the released gotify version has. But something with the test is maybe broken and as I never used pupeteer before, that is hard for me to analyse, so I need some help with the tests.

Later we can addnice indicators, if you e.g. click on Submit the button is replaced by an loading indicator.

I have here some very nice ideas, but I will provide this later in another PR, as that is not related to this topic.

Let us first get the update to react 19 merged, then we can continue further in smaller steps.

Maybe we can release these changes as a beta version to enable users testing it.

Jan 02 '25 18:01 mfechner

Failing tests seem to be related to puppeteer upgrade. I downgraded it and I see the tests are working better.

I will work through the commits again and will maybe rebase some of them, so they match better.

@jmattheis the current implementation does not have the virtual scrolling for messages, should I include it here, ot as another PR? Also paging is currently not implemented (which I can currently not test, so I have to create a datasource to work with paging).

Jan 08 '25 19:01 mfechner

I removed now some commits and placed them into different branches.

Fixed error net:ERR_INCOMPLETE_CHUNKED_ENCODING in branch https://github.com/mfechner/gotify-server/commits/fix_err_incomplete_chunked_encoding/
Readded a virtual section for messages in branch https://github.com/mfechner/gotify-server/commits/virtuoso_virtual_message_list/
Use a LoadingButton to give the user feedback that the button was clicked and something is happening, Use a memoized message selector to only rerender the messages component if the messages have really changed, Renamed name into appName to be more clear about the purpose of this variable in branch https://github.com/mfechner/gotify-server/commits/added_loading_indicators/

They belong in a way to the migration (to restore the original functionality), but can be merged within another PRs.

Paging of message (if it is ok for you), I will implement later, so we do not have to many branches we need to merge in correct order.

Jan 09 '25 13:01 mfechner

Depending on my decision in https://github.com/gotify/server/pull/696#discussion_r1906019369 I'd want the same functionality as on current master in this PR. There is another open discussion which is unanswered.

Jan 11 '25 18:01 jmattheis

Depending on my decision in #696 (comment) I'd want the same functionality as on current master in this PR. There is another open discussion which is unanswered.

ok, I will also commit other commits into this branch to restore functionality to match the currently release gotify version as good as possible.

Jan 15 '25 15:01 mfechner

Hey, sorry for the long delay. I've created #818 that used parts of this PR but kept using mobx. This will hopefully be merged soon. Thanks for your work.

Aug 04 '25 10:08 jmattheis

Thanks a lot @jmattheis, I upgraded now also the FreeBSD package to version 2.7.3.

Oct 12 '25 07:10 mfechner