Add New Tab Menu Customization to Settings UI

[carlos-zamora]

Summary of the Pull Request

Adds customization for the New Tab Menu to the settings UI.

• Settings Model changes:
  • The Settings UI generally works by creating a copy of the entire settings model objects on which we apply the changes to. Turns out, we completely left the NewTabMenu out of that process. So I went ahead and implemented it.
  • FolderEntry
    • FolderEntry exposes Entries() (used by the new tab menu to figure out what to actually render) and RawEntries() (the actual JSON data deserialized into settings model objects). I went ahead and exposed RawEntries() since we'll need to apply changes to it to then serialize.
• View Model:
  • NewTabMenuViewModel is the main view model that interacts with the page. It maintains the current view of items and applies changes to the settings model.
  • NewTabMenuEntryViewModel and all of the other _EntryViewModel classes are wrappers for the settings model NTM entries.
  • FolderTreeViewEntry encapsulates FolderEntryViewModel. It allows us to construct a TreeView of just folders.
• View changes and additions:
  • Added FontIconGlyph to the SettingContainer
  • Added a New Tab Menu item to the navigation view
  • Adding entries: a stack of SettingContainers is used here. We use the new FontIconGlyph to make this look nice!
  • Reordering entries: drag and drop is supported! This might not work in admin mode though, and we can't drag and drop into folders. Buttons were added to make this keyboard accessible.
  • To move entries into a folder, a button was added which then displays a TreeView of all folders.
  • Multiple entries can be moved to a folder or deleted at once!
  • Breadcrumbs are used for folders
  • When a folder is entered, additional controls are displayed to customize that folder.
     

Verification

• ✅ a11y pass
• ✅ keyboard accessible
• scenarios:
  • ✅ add entries (except actions)
  • ✅ changes propagated to settings model (aka "saving works")
  • ✅ reorder entries
  • ✅ move entries to an existing folder
  • ✅ delete multiple entries
  • ✅ delete individual entries
  • ✅ display entries (including actions)

Follow-ups

• add support for adding and editing action entries
• when we discard changes or save, it would be cool if we could stay on the same page
• allow customizing the folder entry before adding it (current workaround is to add it, then edit it)
• improve UI for setting icon (reuse UI from Improve Profile.Icon UI in settings #17965)

[carlos-zamora]

Demo

Top-level view

"Move to folder" dialog

Edit Folder view

[lhecker]

TBH nothing in this PR was a problem for me, although there are some nits. I'm mostly curious how it'll feel in practice (once it's in Canary). 🙂

[PankajBhojwani]

Played around with the branch, it's super cool! Mostly just nits but a couple blockers particularly around the repeated revoking/setting up of the same event handler

[carlos-zamora]

Feedback from Bug Bash (11/19)

• Should "Delete Selected Items" not be enabled if there are no items selected?
• ^ Same with "Move selected entries to folder..."
• "delete item button" different height from reorder buttons
• Make ListView proportionally larger (WinUI makes it hard to drag & drop sometimes, and instead scrolls)
• When a new entry is added into ListView, we should scroll to it
• Pill in NavViewItem disappears when "Discard changes" from nested folder view
• Crashes when I add my PowerShell profile that has no icon into a nested folder
• Moving a folder into itself deletes the folder
  • Create a folder entry
  • Select it
  • Click "move selected entries to folder"
  • Select itself to move into
  • Folder gets deleted
  • FIXED:
    • TreeView doesn't have a SelectionChanged event 😭. So we aren't able to update IsPrimaryButtonEnabled smartly. Instead, we'll just allow the user to proceed forward and silently fail. If multiple items were selected, move all of them except for the selected/destination folder.
• I tried to move nothing (no selection!) into and it crashed
• actually moving anything into root from root broke

[PankajBhojwani]

Looks and feels great! Excited for this

[carlos-zamora]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).