Alignment + zebra stripes for requested and installed packages #393

gabalafou · 2024-04-17T15:49:31Z

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

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

Screenshots

Create new environment

View environment

Edit environment

gabalafou · 2024-04-23T16:43:59Z

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)

test/dependencies/DependenciesItem.test.tsx

peytondmurray

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.

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. Arguably you could just make the DependencyItem a table row, moving one level inside the component. Really it seems fine as is though.

gabalafou

I added some style tweaks.

src/features/channels/components/ChannelsEdit.tsx

gabalafou · 2024-04-24T11:10:57Z

src/features/dependencies/components/DependenciesItem.tsx

-            width: isEditMode ? "140px" : "auto",
-            marginLeft: isEditMode ? "20px" : "0px",


These alignment properties are no longer needed because the table layout provides the needed alignments.

gabalafou · 2024-04-24T11:34:04Z

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 · 2024-04-30T16:20:59Z

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.

- apply monospace font to version numbers - Version Requested -> Requested Version

smeragoel · 2024-05-14T12:06:41Z

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 · 2024-05-21T13:54:51Z

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

gabalafou · 2024-05-21T16:14:15Z

@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 · 2024-05-21T16:16:16Z

@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.

gabalafou

self review comments

src/components/VersionSelect.tsx

gabalafou · 2024-05-21T16:23:35Z

src/styles/index.tsx

@@ -1,7 +1,6 @@
 export * from "./StyledAccordionSummary";
 export * from "./StyledAccordionDetails";
 export * from "./StyledAccordionTitle";
-export * from "./StyledEditPackagesTableCell";


Less code, hurray!

smeragoel · 2024-05-22T07:14:17Z

LGTM! Thanks for your work on this @gabalafou!

gabalafou · 2024-05-22T11:37:10Z

Thanks @smeragoel!

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

peytondmurray

I didn't look closely at styles since @smeragoel did, but the rest of this is great. Loving the level of clarity this provides to the user, AFAIK no other package/environment management system does this. 🚀

peytondmurray · 2024-05-30T21:04:34Z

test/playwright/test_ux.py

-    page.locator(
-        "#infScroll > .infinite-scroll-component__outerdiv > .infinite-scroll-component > div > div > .MuiButtonBase-root"
-    ).first.click()
+    page.get_by_test_id("PromoteIcon").first.click()


Much cleaner! 🚀

gabalafou · 2024-05-31T15:11:41Z

Thanks, Peyton!

…-incubator#393)

gabalafou requested a review from peytondmurray April 17, 2024 15:55

gabalafou changed the title ~~Alignment + zebra stripes for requestend and installed packages~~ Alignment + zebra stripes for requested and installed packages Apr 17, 2024

peytondmurray reviewed Apr 23, 2024

View reviewed changes

test/dependencies/DependenciesItem.test.tsx Show resolved Hide resolved

peytondmurray approved these changes Apr 23, 2024

View reviewed changes

gabalafou commented Apr 24, 2024

View reviewed changes

gabalafou added the needs: review 👀 label Apr 30, 2024

gabalafou added 9 commits May 7, 2024 19:59

Alignment + zebra stripes for requestend and installed packages

cff9742

Packages installed - info tooltip

5fe2c46

fixes and tweaks

d52f895

fix test warning

186f83f

fix playwright test

236950a

style tweaks

a69b28d

consolidate StyledButtonPrimary and StyledButtonSecondary

bb2ccf2

- move TableRow into DependenciesItem

a22a4ab

- apply monospace font to version numbers - Version Requested -> Requested Version

missed spot: monospace

5458069

gabalafou force-pushed the dependency-tables branch from f058363 to 5458069 Compare May 7, 2024 18:00

monospace font for fields

012f54f

gabalafou commented May 21, 2024

View reviewed changes

lint

cd30aa0

gabalafou requested a review from peytondmurray May 28, 2024 17:51

peytondmurray approved these changes May 30, 2024

View reviewed changes

gabalafou removed the needs: review 👀 label May 31, 2024

gabalafou merged commit 2adbb8e into conda-incubator:main May 31, 2024
4 checks passed

gabalafou deleted the dependency-tables branch May 31, 2024 15:12

gabalafou added area: UI design 🎨 Items related to the user interface update_screenshots labels May 31, 2024

kcpevey mentioned this pull request Jun 19, 2024

[ENH] - Upgrade to conda-store 2024.10.1 nebari-dev/nebari#2523

Open

gabalafou added a commit to gabalafou/conda-store-ui that referenced this pull request Jul 9, 2024

Alignment + zebra stripes for requested and installed packages (conda…

0e2d047

…-incubator#393)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alignment + zebra stripes for requested and installed packages #393

Alignment + zebra stripes for requested and installed packages #393

gabalafou commented Apr 17, 2024 •

edited

Loading

gabalafou commented Apr 23, 2024

peytondmurray left a comment

gabalafou left a comment

gabalafou Apr 24, 2024

gabalafou commented Apr 24, 2024

gabalafou commented Apr 30, 2024 •

edited

Loading

smeragoel commented May 14, 2024

gabalafou commented May 21, 2024 •

edited

Loading

gabalafou commented May 21, 2024

gabalafou commented May 21, 2024 •

edited

Loading

gabalafou left a comment

gabalafou May 21, 2024

smeragoel commented May 22, 2024

gabalafou commented May 22, 2024

peytondmurray left a comment

peytondmurray May 30, 2024

gabalafou commented May 31, 2024

		width: isEditMode ? "140px" : "auto",
		marginLeft: isEditMode ? "20px" : "0px",

Alignment + zebra stripes for requested and installed packages #393

Alignment + zebra stripes for requested and installed packages #393

Conversation

gabalafou commented Apr 17, 2024 • edited Loading

Description

Pull request checklist

Screenshots

Create new environment

View environment

Edit environment

gabalafou commented Apr 23, 2024

peytondmurray left a comment

Choose a reason for hiding this comment

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou Apr 24, 2024

Choose a reason for hiding this comment

gabalafou commented Apr 24, 2024

gabalafou commented Apr 30, 2024 • edited Loading

smeragoel commented May 14, 2024

gabalafou commented May 21, 2024 • edited Loading

gabalafou commented May 21, 2024

gabalafou commented May 21, 2024 • edited Loading

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou May 21, 2024

Choose a reason for hiding this comment

smeragoel commented May 22, 2024

gabalafou commented May 22, 2024

peytondmurray left a comment

Choose a reason for hiding this comment

peytondmurray May 30, 2024

Choose a reason for hiding this comment

gabalafou commented May 31, 2024

gabalafou commented Apr 17, 2024 •

edited

Loading

gabalafou commented Apr 30, 2024 •

edited

Loading

gabalafou commented May 21, 2024 •

edited

Loading

gabalafou commented May 21, 2024 •

edited

Loading