Alignment + zebra stripes for requested and installed packages

gabalafou commented 3 months ago

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

create-new-environment-specification

View environment

view-environment-specification

Edit environment

edit-environment-specification

gabalafou commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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.