Config UI: visualize Messaging

[Maschga]

🖼 visualize messaging section
💪 use TypeScript
🔕 add toggle to enable or disable specific events

TODO:

• events: how to handle variables in title/message (?)
• services: removing all services does work in ui but not in backend
• testing

Events:

Add messaging:

Messaging:

\cc @naltatis

[naltatis]

Hi @Maschga, here a few considerations regarding the layout of this modal. We have a lot of different things to show here.

• less tabs: on mobile screens the tabs are wrapping which becomes confusing. therefore I'd recommend we organize this in two tabs: Events, Services. Similar to the existing data structure. Maybe adding a number-indicator for better overview of the enabled services.
• events: I've attached a screenshot/mock illustrating how enabling/disabling of specific events could look like. The switch + disable/grayout pattern is already used similarly on the "Issues" page. Technically it's a little tricky since a disabled status does not exist in our data structure yet. We could work around it but this would essentially mean, that the users will lose custom message text once they disable and save them. That's why I'd suggest extending the event data structure and add an optional (non-breaking) disabled attribute. All other options (forcing the user to delete title/msg, storing disabled texts in local-storage) are messy.
• services: as said initially, I'd combine the services into one tab. This functionality did not work on my machine. maybe because I updated the branch before. not sure. My expected for would be: User can click on a "add service" button, select the desired service type (mail, telegram, ...). This will add a service-block with form. User can delete this with a delete button. This is very close to our data structure. For the "service selection" we could use a dropdown button.

This looks very promising. Thanks for your work so far and sorry for my delayed response.

[Maschga]

FYI: Updated screenshots, added TODO.

[Maschga]

@naltatis I'm done so far. The user interface is basically complete, and the tests are written.

services: removing all services does work in ui but not in backend

I noticed this bug, which I haven't been able to figure out yet.
For example, if you create two services in the UI, save them, and then delete them again, unfortunately this is not saved in the backend as an empty services array; instead, both services reappear.
However, if you delete only one of the two services and leave the other one there and save it, this is also saved in the backend, and only one service is correctly displayed in the UI afterwards.
It would be great if you could take a look at it.

events: how to handle variables in title/message

There is also the question of how best to display the variables for the events in the UI.
Perhaps we shouldn't try to solve everything at once, but rather finish the UI first and then think about it later. A link to the documentation might be sufficient for now.

And last but not least, I'm looking forward to your PR. :-)