Spike: experiment with adding charm viewport to display zarf output when deploying bundle

[Madeline-UX]

Is your feature request related to a problem? Please describe

To reduce the amount of data the terminal outputs and the amount of scrolling user must do to see the status of package deployments, we want to experiment with adding a viewport component to allow the user to view all of the zarf output if they want to but reduce the space the output takes in the terminal.

Keep zarf output formatting the same for now.

Describe the solution you'd like

• Given a user has deployed a bundle
• When a package is being deployed,
• Then print the zarf output into a viewport component

Additional context

Charm Viewport component - -View SBOMs after deployment with this command:
$ zarf package inspect -s .tar.zst

Sketch -

Figma mock up -

[Madeline-UX]

Additional experimentation with TUI design:

Goals:

• Reduce amount of data shown only to the data users need to know the status of the deployment,
• Hypothesis: when deploying a bundle, users only look to zarf deployment stream as a means of knowing the status and progress of the deployment and rarely, if ever go back to review the output. Most users will not miss the zarf output. We want to test this theory by removing all output - minus error message if a package fails and see what data users ask for back.

Implementation:

• Use Charm.sh lipgloss to create box container for each package with a progress bar for their deployment.
• Add different states based on status of package deployment (deployed-in progress, deployed - successful, deployed - failure.

Design Updated 3/8/24 by @Madeline-UX

https://www.figma.com/file/MUItIzpzLBLuIyt225Bwgl/Zarf?type=design&node-id=1946%3A5242&mode=design&t=BvlGopEFzmYsFDdu-1