Integrate angular app into SORMAS

[MartinWahnschaffe]

Situation Description & Motivation

As the long-term goal is to move from Vaadin to Angular, we need a foundation that allows us to:

1. Move existing SORMAS features (e.g. mSERS, Case Surveillance, etc.) from Vaadin to Angular
2. Build the UI for new features only in Angular and no longer in Vaadin

The https://github.com/hzi-braunschweig/SORMAS-Angular project provides a lot of the core functionality of SORMAS. Unfortunately none of the features is complete in a way that would allow it to completely replace the existing SORMAS Vaadin UI.

High-Level Explanation

The idea is to run the Vaadin UI and Angular UI in parallel. We will not embedded one UI into the other. Instead, we will use the different views of SORMAS as the separation between the two frontends. In other words, we will switch between both frontends using links.
E.g. .../sormas-ui/#!cases would be provided by the Sormas Vaadin UI, while .../sormas-web/about would be provided by the Sormas Angular UI.

Goal:

• sormas-web module in the SORMAS-Project repository with all the basic dependencies that can be copied from SORMAS-Angular. The whole vertical slice from backend to frontend should be in one repository.
• Navigation menu that looks like the one of the current Vaadin application and needs to be configured based on which features are available (as configured in the backend) and thus have an entry in the navigation menu.
• An easy way to provide URL of each view, so the correct frontend is used. This either needs to be kept in sync for both frontends or use a shared logic in the backend.
• Single-sign-on (keycloak)
• Clarify whether legacy login (basic auth) should still be supported
• I18n has to work

Timeline

Tasks

• POC angular shell/navigation UI for new SORMAS features [8] #11630
• Introduce vaadin-style side menu and legacy links to the angular app [~8-13] #11665
• Add ReST endpoint to provide effective user rights of a user [1] #11818
• Consider feature types and user rights to decide which menu entries should be visible #11821
• Define config that allows switching between production and preview mode
• Define exact IDs for all controls, so they can be accessed by autmated UI tests
• Define what exactly has to be done for accessibility
• Move angular code into SORMAS-Project. Preferably as sormas-web instead of sormas-angular. Consolidate docker files
• Clarify whether legacy login (basic auth) should still be supported, currently it's not working properly
• Setup a test instance nightly deployed with docker-based versions of SORMAS and the angular app
• I18n: Automatically pick URL based on user's language choice
• Style angular tables to be as compact as the legacy ones (e.g. smaller font)
• Directory view lazy loading needs to pre-load entries (currently it only loads the visible entries, which is a bad user experience)

Alternatives

Risks

• The transition period where old and new version of a view (e.g. cases) are supported (or in preview), should be as short as possible, so we can drop the vaadin view and the related automated tests as quickly as possible.