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

[PankajBhojwani]

Instead of clearing CurrentFolder, can we first check whether the previous CurrentFolder exists and then reset that as the current folder? Similar to the way the ColorSchemesPageVM resets the current scheme if that scheme still exists

[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

[github-actions]

@check-spelling-bot Report

🔴 Please review

See the 📂 files view, the 📜action log, or 📝 job summary for details.

Unrecognized words (1)

QOL

Previously acknowledged words that are now absent

barbaz Ralph 🫥

To accept these unrecognized words as correct and remove the previously acknowledged and now absent words, you could run the following commands

... in a clone of the [email protected]:microsoft/terminal.git repository
on the dev/cazamor/SUI/newTabMenu branch (ℹ️ how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/v0.0.22/apply.pl' |
perl - 'https://github.com/microsoft/terminal/actions/runs/11962841195/attempts/1'

Available 📚 dictionaries could cover words (expected and unrecognized) not in the 📘 dictionary

This includes both expected items (2229) from .github/actions/spelling/expect/alphabet.txt
.github/actions/spelling/expect/expect.txt
.github/actions/spelling/expect/web.txt and unrecognized words (1)

Dictionary	Entries	Covers	Uniquely
cspell:cpp/src/lang-jargon.txt	11	1	1
cspell:swift/src/swift.txt	53	1	1
cspell:gaming-terms/dict/gaming-terms.txt	59	1	1
cspell:monkeyc/src/monkeyc_keywords.txt	123	1	1
cspell:cryptocurrencies/cryptocurrencies.txt	125	1	1

Consider adding them (in .github/workflows/spelling2.yml) for uses: check-spelling/[email protected] in its with:

      with:
        extra_dictionaries:
          cspell:cpp/src/lang-jargon.txt
          cspell:swift/src/swift.txt
          cspell:gaming-terms/dict/gaming-terms.txt
          cspell:monkeyc/src/monkeyc_keywords.txt
          cspell:cryptocurrencies/cryptocurrencies.txt

To stop checking additional dictionaries, add (in .github/workflows/spelling2.yml) for uses: check-spelling/[email protected] in its with:

check_extra_dictionaries: ''

Errors (1)

See the 📂 files view, the 📜action log, or 📝 job summary for details.

❌ Errors	Count
❌ ignored-expect-variant	6

See ❌ Event descriptions for more information.

✏️ Contributor please read this

By default the command suggestion will generate a file named based on your commit. That's generally ok as long as you add the file to your commit. Someone can reorganize it later.

If the listed items are:

• ... misspelled, then please correct them instead of using the command.
• ... names, please add them to .github/actions/spelling/allow/names.txt.
• ... APIs, you can add them to a file in .github/actions/spelling/allow/.
• ... just things you're using, please add them to an appropriate file in .github/actions/spelling/expect/.
• ... tokens you only need in one place and shouldn't generally be used, you can add an item in an appropriate file in .github/actions/spelling/patterns/.

See the README.md in each directory for more information.

🔬 You can test your commits without appending to a PR by creating a new branch with that extra change and pushing it to your fork. The check-spelling action will run in response to your push -- it doesn't require an open pull request. By using such a branch, you can limit the number of typos your peers see you make. 😉

If the flagged items are 🤯 false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it,
  try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.