Story #18219

Include properties in collection right-side info panel

Added by Peter Amstutz 8 months ago. Updated about 2 months ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Category:
Workbench2
Target version:
Start date:
12/15/2021
Due date:
% Done:

100%

Estimated time:
(Total: 0.00 h)
Story points:
-
Release relationship:
Auto

Description

The "info" panel for collections should include the collection properties.

They are currently not included because there is a separate panel on the collection page for viewing and editing properties.

Changes:

Add a read-only view of properties into the collection details component. This content is displayed both in the right side details and the top of the main collection panel. There should be a "edit" button which opens the property editing dialog. The interface for showing/editing properties should match the one for groups.

Remove the "Properties" sub-panel. This also has the benefit of freeing up some additional vertical space for the file browsing panel.

edit-btn-style-change.png (46.7 KB) edit-btn-style-change.png Lucas Di Pentima, 01/07/2022 07:02 PM
property chips current styling.png (480 KB) property chips current styling.png Lucas Di Pentima, 01/14/2022 11:45 AM
property chips proposed styling.png (466 KB) property chips proposed styling.png Lucas Di Pentima, 01/14/2022 11:45 AM

Subtasks

Task #18236: Review 18219-props-in-collection-details-panelResolvedPeter Amstutz

Task #18627: Review 18219-prop-chips-stylingResolvedPeter Amstutz


Related issues

Has duplicate Arvados - Bug #18550: Info page of a project does not show propertiesResolved

Associated revisions

Revision b130d859
Added by Lucas Di Pentima 4 months ago

Merge branch '18219-props-in-collection-details-panel'. Closes #18219

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <>

Revision 866f9d08
Added by Lucas Di Pentima 4 months ago

Merge branch '18219-edit-btn-styling'. Refs #18219

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <>

Revision 22b351e5
Added by Lucas Di Pentima 4 months ago

Merge branch '18219-prop-chips-styling'. Refs #18219

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <>

History

#1 Updated by Peter Amstutz 8 months ago

  • Target version set to 2021-10-27 sprint
  • Description updated (diff)

#2 Updated by Peter Amstutz 8 months ago

  • Description updated (diff)

#3 Updated by Peter Amstutz 8 months ago

  • Target version changed from 2021-10-27 sprint to 2021-10-13 sprint

#4 Updated by Peter Amstutz 8 months ago

  • Assigned To set to Stephen Smith

#5 Updated by Peter Amstutz 7 months ago

  • Description updated (diff)

#6 Updated by Peter Amstutz 7 months ago

  • Target version changed from 2021-10-13 sprint to 2021-10-27 sprint

#7 Updated by Peter Amstutz 7 months ago

  • Target version changed from 2021-10-27 sprint to 2021-11-10 sprint

#8 Updated by Peter Amstutz 6 months ago

  • Target version changed from 2021-11-10 sprint to 2021-11-24 sprint

#9 Updated by Peter Amstutz 6 months ago

  • Target version changed from 2021-11-24 sprint to 2021-12-08 sprint

#10 Updated by Peter Amstutz 5 months ago

  • Target version changed from 2021-12-08 sprint to 2022-01-05 sprint

#11 Updated by Peter Amstutz 5 months ago

  • Related to Bug #18550: Info page of a project does not show properties added

#12 Updated by Peter Amstutz 5 months ago

  • Related to deleted (Bug #18550: Info page of a project does not show properties)

#13 Updated by Peter Amstutz 5 months ago

  • Has duplicate Bug #18550: Info page of a project does not show properties added

#14 Updated by Peter Amstutz 5 months ago

  • Assigned To changed from Stephen Smith to Lucas Di Pentima

#15 Updated by Lucas Di Pentima 5 months ago

  • Status changed from New to In Progress

#16 Updated by Lucas Di Pentima 5 months ago

Updates at arvados-workbench2|91ca19a - branch 18219-props-in-collection-details-panel
Test run: developer-tests-workbench2: #545

  • Removes collection's property editor panel.
  • Adds collection's property list to the main info panel and also the details panel.
  • Allows editing the collection properties from within the details panel, like in projects.
  • Removes code duplication related to the property editor dialog.
  • Updates tests.

#17 Updated by Lucas Di Pentima 5 months ago

Updates at arvados-workbench2|a589802b
Test run: developer-tests-workbench2: #547

  • Fixes the "Warning: React does not recognize the `panelIlluminated` prop on a DOM element." warning messages related to the MultiPanelView components.

#18 Updated by Peter Amstutz 5 months ago

This is

Lucas Di Pentima wrote:

Updates at arvados-workbench2|91ca19a - branch 18219-props-in-collection-details-panel
Test run: developer-tests-workbench2: #545

This is a big improvement.

However, there was one thing that I found little confusing. If you are on the collection page, and the info panel is closed, you can't edit the properties. There's no pencil button when the the details are shown in the main panel.

But I also feel like the pencil button is inconsistent with the rest of the details panel which is read-only. All the other changes are done through the command menu.

Can we either (a) add an "Edit Properties" menu item that appears on the context/three dots menu or (b) Remove the separate property editor dialog entirely, and incorporate property editing into the "Edit Project" and "Edit Collection" dialog boxes?

#19 Updated by Lucas Di Pentima 5 months ago

Updates at arvados-workbench2|3836b03c
Test run: developer-tests-workbench2: #554

  • Adds properties edition capabilities to project's edit dialog.
  • Adds properties edition capabilities to collection's create & edit dialogs.
  • Adds tests.

Most of the code changes are about my attempts to reduce the amount of code duplication that was made on the resources' create & edit dialog. Right now we have consistency in terms of collections & projects can be created with properties, and also properties can be seen & edited from the details panel.

#20 Updated by Lucas Di Pentima 5 months ago

Updates at arvados-workbench2|160074ea
Test run: developer-tests-workbench2: #555

  • Fixes group management cypress tests.

It seems that the "create group" dialog is another source of code duplication, but not the "group edit" dialog, because the former doesn't include the properties editor, but the latter does (and that was the reason some test failed).

#21 Updated by Lucas Di Pentima 5 months ago

Updates at arvados-workbench2|f6396d36
Test run: developer-tests-workbench2: #556

  • Adds property edition capabilities to the group create dialog.

#22 Updated by Lucas Di Pentima 5 months ago

  • Target version changed from 2022-01-05 sprint to 2022-01-19 sprint

#23 Updated by Peter Amstutz 4 months ago

Looks pretty good, two comments:

- It seems awkward to have the pencil button that only edits properties, and only appears in the side panel. I think should do one of:

  • Move the pencil up to the top of the details panel, and change it so that it opens the general editing dialog
  • OR just get rid of the pencil altogether (because the general editing dialog is already available via right-click menu)

- Both the group and collection edit dialogs feel crowded. I think this can be fixed by some extra padding between the fields, because right now the fields sort of run together.

#24 Updated by Peter Amstutz 4 months ago

a couple of clarifications from gitter discussion:

To be consistent, both the group details and collection details should have the edit pencil moved to the top, which should open the general edit dialog. This implies properties-only dialog can go away.

#25 Updated by Lucas Di Pentima 4 months ago

Updates at arvados-workbench2|f024fc6c
Test run: developer-tests-workbench2: #557

  • Replaces the property editor dialog with the resource editor dialog on the project & collection details panel.
  • Removes unused property editor dialog code.
  • Adjusts create/update resource dialog layout adding some vertical space between fields.
  • Fixes tests.

#26 Updated by Peter Amstutz 4 months ago

Lucas Di Pentima wrote:

Updates at arvados-workbench2|f024fc6c
Test run: developer-tests-workbench2: #557

  • Replaces the property editor dialog with the resource editor dialog on the project & collection details panel.
  • Removes unused property editor dialog code.
  • Adjusts create/update resource dialog layout adding some vertical space between fields.
  • Fixes tests.

This LGTM, thanks!

#27 Updated by Lucas Di Pentima 4 months ago

  • % Done changed from 0 to 100
  • Status changed from In Progress to Resolved

#28 Updated by Lucas Di Pentima 4 months ago

Updates at arvados-workbench2|15b6918 - branch 18219-edit-btn-styling

As requested in the last demo, I've improved the edit button styling following the existing app's style to make it clearer that it is a button.
Screenshot attached for easy reviewing.

#29 Updated by Ward Vandewege 4 months ago

Lucas Di Pentima wrote:

Updates at arvados-workbench2|15b6918 - branch 18219-edit-btn-styling

As requested in the last demo, I've improved the edit button styling following the existing app's style to make it clearer that it is a button.
Screenshot attached for easy reviewing.

LGTM, thanks!

#30 Updated by Peter Amstutz 4 months ago

  • Status changed from Resolved to Feedback

Another couple of followup comments:

  • In the two-column mode (rendering details in the main panel) could we make the properties full-width, so they flow and take up less vertical space?
  • In the single column mode (right side details panel) could you adjust the styling so the chips don't touch?

#31 Updated by Lucas Di Pentima 4 months ago

Updates at arvados-workbench2|4c3a13a - branch 18219-prop-chips-styling

  • Makes the property chips list to use the complete horizontal space without regards of the twoCol prop setting.
  • Fixes chip spacing in the collection's detail panel.

Attached screen captures for easy comparison.

#32 Updated by Peter Amstutz 4 months ago

Lucas Di Pentima wrote:

Updates at arvados-workbench2|4c3a13a - branch 18219-prop-chips-styling

  • Makes the property chips list to use the complete horizontal space without regards of the twoCol prop setting.
  • Fixes chip spacing in the collection's detail panel.

Attached screen captures for easy comparison.

yep, that's perfect, exactly what I was hoping for. LGTM

#33 Updated by Lucas Di Pentima 4 months ago

  • Status changed from Feedback to Resolved

#34 Updated by Peter Amstutz about 2 months ago

  • Release set to 46

Also available in: Atom PDF