Alignment + zebra stripes for requested and installed packages

[gabalafou]

Reference: #268.

Description

This PR partially implements the designs set out in 268 (comment, Figma).

For a first pass, I opted for an implementation that doesn't require refactoring the frontend code.

The design in #268 adds a "Version installed" column to the top table ("Requested packages"). That would require some refactoring, so instead I decided to keep the two tables semantically distinct. In this PR, the top table shows the list of packages that were requested, while the bottom table shows all of the packages that were installed (this includes the requested packages and all of their dependencies). Screenshots below.

I also ignored a few stylistic details in the design. For example, there are no horizontal lines in the table designs but there are in this PR. This is because MUI's tables include the lines automatically, and we decided in a previous team meeting that we would stick to MUI default styles in the interest of time.

I believe that this PR improves the existing UI, so even though it doesn't implement all of the design changes in #268, we should be able to merge this PR and then create another PR later to implement the other changes if we decide that's what we still want to do.

Pull request checklist

• [x] Did you test this change locally?
• [x] Did you update the documentation (if required)?
• [x] Did you add/update relevant tests for this change (if required)?

Screenshots

Create new environment

View environment

Edit environment

[gabalafou]

Based on today's call, I will create a second PR to follow up this one in which I will add the "version installed" column to the top table (Requested Packages). Also:

• will not deduplicate packages from top table in bottom table
• will run anything that requires significant dev effort by Smera first (because she is still integrating feedback from the user research sessions)

[gabalafou]

Are the changes to the ChannelsList intended here? Seems like some styling stuff. As long as you're aware and sure about this, I'm okay with it.

I made the styling changes to the ChannelsList component so that it aligns with the components that appear just above it (because those other components are also modified in this PR).

About DependenciesItem: I don't know if this element ever is used on its own, it seems like it's always wrapped in a TableRow

Sure. I can make that change. Neither implementation (nether row nor cell) is ideal. But I don't want to refactor everything.

[gabalafou]

Update: @smeragoel asked me to sync with her in person about this tomorrow or Thursday, so currently this PR is waiting on input from design.

[smeragoel]

Sorry for the delay in the review!

A minor nitpick would be if it is possible to use monospace font in the input text fields as well?

Other than that, given that this is an "intermediate" fix and we already discussed that there might be more changes based on the results of the usability study, I think it is good to go.

[gabalafou]

@smeragoel, for the input text fields, you only mean for the version and not the package name or constraint fields, is that correct?

[gabalafou]

@smeragoel I updated the font in the form fields and updated the screenshots, could you take a quick look when you get a chance?

[gabalafou]

@smeragoel I also moved the columns around in the edit view. It used to be: name, installed version, version constraint. For consistency, I changed it to: name, version constraint, installed version. This also made it easier to right-align the "installed version" column.

[smeragoel]

LGTM! Thanks for your work on this @gabalafou!

[gabalafou]

Thanks @smeragoel!

@peytondmurray if you could give this one last look (perhaps using the "changes since your last review" view), that would be great!

[gabalafou]

Thanks, Peyton!