Add Vuetify component framework to Satellite UI

[ferristocrat]

Description

The goal of this roadmap item is to make the satellite frontend development process easier, smoother & pixel perfect by adding a frontend framework to the Satellite UI. The current thinking is that we can integrate Vuetify, a popular Material Design component framework, into the Satellite UI frontend. This will enable the development team to build a more consistent and visually appealing user interface, while also increasing the speed and efficiency of the development process.

In Scope

• Integration of Vuetify into the Satellite UI frontend codebase.
• Refactoring of existing UI components to leverage Vuetify's Material Design components and styles.

Out of Scope

• Complete redesign of the Satellite UI.
• Changes to existing frontend libraries we use (such as ChartJS)

Problem/Pain Point

Currently, the Satellite UI frontend lacks a consistent design framework, leading to potential inconsistencies in the user interface and increased development time for UI components.

Impact

Integrating Vuetify into the Satellite UI frontend will provide a consistent design framework, resulting in a more visually appealing and consistent user interface. By streamlining the development process, the team will be able to create new UI components more efficiently, further enhancing the user experience. Additional benefits include:

• Vite Support: Smaller bundle sizes with automatic tree-shaking, improving application performance.
• Responsive Layout: The default configuration of Vuetify components is responsive, allowing the Satellite UI to adapt to different screen sizes seamlessly.
• Cross-Browser Compatibility: Vuetify supports all modern browsers, including Safari 13+ (using polyfills). Components are designed for a minimum width of 320px.

Why Now

Having a consistent design framework is essential for maintaining a high-quality user experience. Integrating Vuetify now will set the foundation for future UI improvements and help ensure the Satellite UI remains visually appealing and easy to use. In addition, it will give us things like accessibility and internationalization "out of the box."

Success Metrics

• Improvement in the visual consistency and appeal of the Satellite UI as reported by customers.
• Reduction in the time required to develop new UI components.
• Increase in the efficiency of the development process, as measured by shorter development cycles and faster UI updates.

Links

• Milestone(s):
  • https://github.com/storj/storj/milestone/43

[NiaStorj]

Update as of 8/3:

Latest features in Vuetify are published at https://consoledev.storj.rodeo/vuetifypoc Features currently implemented: change name change password project dashboard charts project dashboard cards buckets list access list all projects dashboard accept/decline invite on all projects dashboard open project sign out

[NiaStorj]

Next steps (week of 8/7) Object Broswer work needs to be started. Appears to be a heavy lift to complete in 2 sprints.

[NiaStorj]

Update 8/17:

Working on billing page functionality in current sprint

Next is object browser

Moved to 23 due to the heavy lifting of object browser and also Storj Select

[NiaStorj]

8/24/23 Update: Still tracking for sprint 24. Risk concern:
Business priorities for:

• SPC
• Storj Select (cloudwave)

[NiaStorj]

9/7/23 Update:

Tracking Need to deploy to QA Demo to Tome Find any bugs If QA signs off, we can deploy a beta

[iglesiasbrandon]

This was deployed to QA, this week! we need to do a bit more testing before we roll this out into production.