[alan412]

Overview

Pretty big overhaul of Version UI based off discussions.
While mostly a UI change, it did add the ability to add tags and notes to versions. (Versions stored before this just have no tags and no notes unless they are edited.)

Linked Issues

None.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that causes existing functionality to change)
• Documentation update
• Code style/formatting updates
• Refactoring / Renaming
• UI change
• Blocks style change
• Blocks theme change
• Python tools
• Other

How Has This Been Tested?

Put on browser, put on systemcore. Make lots of versions
Play with filtering

Screenshots (if applicable)

Versions List now has Current specified separately from the list of versions. If a version has notes available, they show up as a note icon (where the tooltip shows the notes). A user can add tags (seen here as a favorite) and the system adds "deployed" or "downloaded" tags. (that are a different color to show them)

From this screen if you click on the row it views the version. If you click on the compare it compares to current. If you click on the pencil, it allows you to edit the details (description, tags, and notes - all optional). The trashcan allows you to delete a version.

The clean up takes you to a cleanup dialog which makes it easier to do bulk deletions.

There is a filter button that exposes a filter section to make it easier to find a version. This is hidden until pressed as it is advanced functionality.

When you click filter, it reduces the table to only five rows (instead of 10) and allows you to filter in a variety of ways. Each row is ANDed together (ie, it has to match each row)

After you have selected a filter, you can choose to shrink the filter selection but it lets you know there is an active filter and you aren't seeing everything

The compare is now a more traditional "left/right" pane where you can swap which is on the left and the right. By default when you start, the newest is on the right (current is by definition always the newest)

From here you can Choose what you want the left or right pane to be and you go to a very familiar dialog where you can paginate or use all the same filters.

Finally, the clean up dialog. Right now when you go in there, by default it starts out showing you all versions older than 14 days without a description. (In this case there are none).

You can change the definition to what you would like. You can click "select all x" to select all of them (across pages) and then delete them all at once.

I don't actually believe this much write up is necessary, but I put it here because thinking through it helps me make sure I am not forgetting pieces. (For example - I changed how the filtering on tags worked as I found it difficult to explain the other way.)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have run through the docs/testing_before_pr_checklist.md

[miriamsr]

How does adding the tags work? Are there any that exist by default or do teams have to create them? Can I go back and add a tag later to a previously saved version?

[alan412]

How does adding the tags work? Are there any that exist by default or do teams have to create them? Can I go back and add a tag later to a previously saved version?

@miriamsr :

There are none that exist by default. You can create them by typing and/or pick from all that have been used before in that project.

Yes, you can go add (or remove) a tag later to a previously saved version. The only restriction is that you can't add or remove the system-defined tags. (deployed and downloaded)

[WestsideRobotics]

Wow this looks great Alan.

Couple of thoughts on the Clean Up page...

• I understand "Select all x", namely all files on all pages, even those not shown on the current pages. Dangerous but probably useful and desirable. Hopefully it's a toggle that can be unselected?

• A common feature of such interfaces is an unlabeled checkbox above the stack of individual checkboxes. (In this case, to the left of Description.) Checking that box, selects all the boxes shown on the current page. That box and/or individual boxes can be unchecked. Slower and safer?

-- Chris

[alan412]

@WestsideRobotics - your comment got me to thinking about how "Gmail" handles this and I decided to copy the pattern there.
So now the pattern looks like:

Initial View:

After you decide to select all on the page if there are more pages, you get a banner that asks if you wanted to select those as well:

If you do, you get a banner that is letting you know more is selected than you see:

I like this. While it takes one more click to select lots, it follows a known pattern (Gmail) and seems fair for something like that.