Currently there is no way to test the UI in its entirety. This includes the UI located across the napps.
Importance
I believe that this issue is of high importance for the transition from vue2 to vue3 because:
The UI within the napps isn't being covered by @vue/compat, which means that the code within the napps isn't being tested/reviewed so it cannot be properly transitioned from Vue2 to Vue3.
Due to the fact that the napps are being loaded in at runtime, the dev server does not have access to these. So to test the Kytos UI, one has to bundle it and then copy and paste the files into the Kytos web UI folder. This is a bit tedius, time-consuming, and does not allow for quick testing of the UI.
Fixing this issue means that in the future other developers would have an easier time managing/working with the UI.
Current Fix
The best solution that I have in mind would be to create a bash script that would specifically look for the UI of each napp within the other repos and store them within a file. Then the webpack config files could be updated to use the DefinePlugin which replaces variables in the code with other values or expressions at compile time. This plugin would be used to conditionally utilize different pieces of code. The reason for this is to have two sections of code within the files responsible for loading the napps, one for dev where the files are directly accessible within the UI repo, and one for prod where the files are loaded in at runtime.
This would separate the prod environment from the dev environment and allow proper testing of all code.
There are also a few bugs that would need to be fixed along the way.
The webpack configuration files would need to be modified and new loaders would need to be added in order to bundle the napps together with the rest of the UI.
It would also be nice to have some way to individually test the UI within each napp separately. Such as having a single toolbar component and some scripts that load it in for viewing and testing.
Issue
Currently there is no way to test the UI in its entirety. This includes the UI located across the napps.
Importance
I believe that this issue is of high importance for the transition from vue2 to vue3 because:
Current Fix
The best solution that I have in mind would be to create a bash script that would specifically look for the UI of each napp within the other repos and store them within a file. Then the webpack config files could be updated to use the
DefinePluginwhich replaces variables in the code with other values or expressions at compile time. This plugin would be used to conditionally utilize different pieces of code. The reason for this is to have two sections of code within the files responsible for loading the napps, one for dev where the files are directly accessible within the UI repo, and one for prod where the files are loaded in at runtime. This would separate the prod environment from the dev environment and allow proper testing of all code. There are also a few bugs that would need to be fixed along the way. The webpack configuration files would need to be modified and new loaders would need to be added in order to bundle the napps together with the rest of the UI.Related Issues
https://github.com/kytos-ng/ui/issues/86#issue-2543609426 https://github.com/kytos-ng/ui/issues/87#issue-2543648364 https://github.com/kytos-ng/ui/issues/88#issue-2543678742
Additional Thoughts
It would also be nice to have some way to individually test the UI within each napp separately. Such as having a single toolbar component and some scripts that load it in for viewing and testing.