install experience on package detail pages

[susanev]

this issue is meant to describe the user experience not break down associated eng work

overview

on the package detail page we want install information to be displayed up in the header so its easily accessible no matter what tab folks are on

design details

ux designs in figma

• heading: Install in Any Language
• dropdown that allows folks to pick a language (should get an aria-label of Language)
• use copy component that was built by @kimberleyamackenzie

[praneetloke]

use copy component that was built by @kimberleyamackenzie

The one from the Pulumi Console? Is that possible, @kimberleyamackenzie?

[susanev]

oh theres also one here https://www.pulumi.com/get-started/
but it will require some size adjustments

[kimberleyamackenzie]

yeah, we won't be able to port the one over from the console as is (and much of the CSS is specific to modifying some material UI base components, so that probably won't be too helpful either).

[praneetloke]

@kimberleyamackenzie thanks for confirming. That's my thoughts as well on the cross-use. It looks like we have one at the URL Susan linked above, though. So we could take a look to see how we could reuse that for the registry page.

[kimberleyamackenzie]

Eng work (edited with additional details from susan's comment below):

• Use existing theme pulumi-install component to build a higher order composition w/ button, dropdown, header, styles, etc.
• New component should connect to state (probably local storage, given that it's a single key/value pair?) to persist info about language
• Pull new component into relevant template in registry
• Update styling for the layout to accommodate this new component, including behavior on different screens.

I estimated this a small, probably leaning closer to the 2 day mark, depending on any layout bits that are tricky. There's some prior art in the service console as well (for the get started card) that whoever picks this up could refer to.

A couple questions for @susanev

1. Should this install experience disappear at the same screen size when the right side nav disappears?
2. Did you imagine the language choice would persist from page-to-page and package-to-package? We should be able to use local storage easily for this if so, doesn't add a ton of complexity.

[susanev]

1. yes, i dont think we have any need for folks to install on mobile devices.
2. yes. we should use the same behaviour for this that we do with the language chooser in the docs. so they should only have to pick it once.

[cnunciato]

Was just going to pop in and mention maybe extending pulumi-install, yes! And it should be fairly straightforward to have this component get/set the current language preference as well such that things "just work" between this and the language chooser.

We could think about pulling a component like this into Facet, too, so that it could be used in the Console as well, and elsewhere -- but at this point that's probably just something to keep in mind, rather than actually do yet.

[kimberleyamackenzie]

During parking lot today, it came up that this work actually isn't prioritized anymore. I had gotten a fair chunk of this done before those wires got uncrossed, so I'm gonna save it all in a branch, and whoever picks this up in the future, touch base with me if you'd like so I can share the work I've done so far.