[PoC] UI/UX Update

[donyunardi]

Related: https://github.com/insightsengineering/nestdevs-tasks/issues/58

Summary

The work on the teal transform module has prompted us to take a second look at the teal UI to ensure it is efficient, intuitive. and easy to understand.

Below is the proposed design:

The most noticeable change is the location of the sidebar, which has been moved to the left side. The goal is to help users understand how the data transforms during module activities. With this design, users will work from left to right, as the data flows from being filtered, transformed, and finally to the module's encoding area.

The teal data module will consistently appear in the app, allowing users to rerun it if needed.

Definition of Done

• Create prototype of new design, deploy, and have another round of review.
  • One prototype without delayed data ?
  • One prototype with delayed data ?
  • One module with custom transformations
  • One module with transformations within the module (encoding panel) ?

For the PoC deliverable, we can start with a rough outline to get an overall idea before diving into the details and updating everything (e.g., unit tests, shinytest2, etc.).

Tasks

• teal sidebar UI
  • https://github.com/insightsengineering/teal/issues/1316 (8 SP)
    • Move the sidebar to the left-hand side.
    • Move Sidebar should be in the module.
    • Update the sidebar UI to a collapsible group or another preferred design for collapsibles. However, all groups should be able to be expanded at the same time.
    • Add a feature to minimize and expand the menu when the hamburger button is clicked.
  • https://github.com/insightsengineering/teal/issues/1317 (8 SP)
    • To match the proposed design
• https://github.com/insightsengineering/coredev-tasks/issues/578 (3 SP)
• Gather feedback from SMEs and Super Users.

When it's ready for implementation (we will create a new issue for this)

Definition of Done:

• All elements should be compatible with bootstrap 5
  • UI should be responsive and looks proper between large/small dimension
• All elements should react to bslib theme changes
  • Colors should not be hardcoded

Tasks

• Organize web assets (js and css) throughout all teal packages
• write/update unit tests
• update teal elements to support bootstrap 5
  • https://github.com/insightsengineering/teal/issues/1242
• manual testing
• update shinytest2 for teal framework packages and modules
• update teal.gallery demo apps
  • update gifs
  • possibly update app.R
• Review and update all vignettes or README that has screenshots of teal app in all teal frameworks packages

Previous tasks

• https://github.com/insightsengineering/teal.slice/issues/252
• https://github.com/insightsengineering/teal/issues/802
• https://github.com/insightsengineering/teal.slice/issues/338