Profile reordering for Settings UI

[carlos-zamora]

Description of the new feature/enhancement

The Settings UI doesn't have a way of reordering your profiles. In the JSON, we're able to just reorder the array of profiles.list.

Some considerations to keep in mind include:

• New Tab Menu Customization:
  • allow actions in the dropdown
  • nesting profiles/actions in the dropdown

Ideally, we could have a design that's future-proof. But since we don't know when the above will be implemented, we could just go with a simple non-future-proof design now, then redesign later.

EDIT: We should also consider deprecating hidden once this is in.

Proposed technical implementation details (optional)

A few ideas have come to mind, but @cinnamon-msft and I haven't actually taken the time to sit down and design this yet. I'll list a few ideas here, but I'm excited to see what ideas the community can come up with:

1. Drag and drop NavigationView's menu items

Pretty straightforward. The idea is that you can drag and drop the menu items for profiles.

Concerns:

• knowing that those menu items are drag-able isn't intuitive. Maybe we could add some kind of
  gripper icon?
  
• not really future-proof
• TECHNICALLY: I don't believe the items in a nav view can be re-ordered trivially (without implementing a fork of nav view, quite likely).
  • Open question: Can we just stick the list of profiles as a ListView with CanReorder=true inside the NavView?
  • This would almost certainly require a huge refactor of how navigation works in the settings UI

2. Add an index "setting" in Profile > General

This would probably be a number box on each Profile > General page (not base layer).

Concerns:

• don't like that you can't see all the overall order

[carlos-zamora]

@cinnamon-msft assigning you for now since we need a design. I don't think we'll need to write up a design doc though, tbh, but we'll play it by ear.

[ultrasound1372]

I think if this were implemented keyboard accessibility would also need to be considered. I was personally thinking the up/down buttons like present in the path environment variable dialog in system properties, but not sure if that would visually mesh well with this UI. If it uses dragging I'd think something like alt+up/down could work if we're only moving one profile at a time. Would reordering be the only way for me to change the control+shift+number layout to activate the 11th profile in my list? Said 11th profile happens to be a VS native tools prompt and I'd like that to go above all my MSYS prompts.

[BuzyBeeC]

Perhaps a hybrid solution, where profiles are displayed as a numbered list (indexed) in the settings, would combine the best of each. On the left of each profile icon would a be a number “text box” that can be changed via typing. The GUI could visibly reorder profiles based on this number to make it clear. It would intuitively fit with the ctrl+shift+<0-9> shortcut. It could also probably be made keyboard accessible as @ultrasound1372 mentioned but much more efficient than moving one position at a time.

Since the GUI would already update position in the list, a reverse drag-and-drop option that updates the index could maybe be added as a bonus (with gripper icon on the right). I don’t think it would be too unintuitive without it though since many rearranging actions in modern GUIs are drag-and-drop. After all, I first stumbled upon this thread after trying to drag to reorder the profiles.

[ultrasound1372]

If @BuzyBeeC's thing is considered, I think that that numeric edit should be a spin control rather than a simple edit. That would also allow range limits to be placed and cut down on input validation requirements. You can't change this profile to index 20 when you only have 10 profiles, after all. And for keyboard users this would let us change the ordering with simple up/down arrow on the box.

[BuzyBeeC]

If @BuzyBeeC's thing is considered, I think that that numeric edit should be a spin control rather than a simple edit. That would also allow range limits to be placed and cut down on input validation requirements. You can't change this profile to index 20 when you only have 10 profiles, after all. And for keyboard users this would let us change the ordering with simple up/down arrow on the box.

This sounds like a simpler and more user-friendly approach.

[brian-kneebone-hp-com]

I'm more of a fan of click/drag (for mouse/finger users) and the keyboard options proposed above for those that require it (I'd assume CTRL+UP/DOWN or ALT+ UP/DOWN or whatever convention I'm not aware of that makes the most sense would be nice). Why create a new UI if it's not absolutely required. At least for me, my first instinct was to try these techniques, but I might be a weirdo.

PS - I had to mention this by editing the comment. I love that Microsoft Terminal lets us modify the JSON properties more directly for cases where there's not a UI to enable what people are after. This is so freeing in software design and it needs to be applauded/encouraged with others. Letting people customize experiences who are willing to take the leap even experimenting with config files, APIs, etc. before the more friendly user experiences get figured out always feels like the right balance for general and power users. Thank you!

[ultrasound1372]

Unfortunately, there is no standard for keyboard only reordering or drag and drop. This would be one of the first applications I know of to implement such a thing, second in my knowledge only to foobar2000's list of decoders. Everything else is either use cut/paste or you're just dead out of luck if you can't see. Depending on if you're going to allow multiple movements at once I would go with either alt or control as they said. If you can drag multiple consecutive profiles at once, to reorder a group, I'd select those with shift and move them with alt. Otherwise I'd use control. If you let people select with shift and use control someone might get confused with the other thing where you can control arrows to avoid changing the selection and space to toggle it for the currently focused item, allowing noncontiguous selection. For reordering though that doesn't make sense.

[zadjii-msft]

You can always reorder the profiles manually in the settings.json file before this gets added.

[psztoch]

I do this to myself. But regular users (programmers) complain and don't want to use powershell 7 which is added at the end.

[zadjii-msft]

Uh, it absolutely does....?

Also, feel free to just rebind the actions to whatever you want:

        { "command": { "action": "newTab", "index": 0 }, "keys": "ctrl+shift+1" },
        { "command": { "action": "newTab", "index": 1 }, "keys": "ctrl+shift+2" },
        { "command": { "action": "newTab", "index": 2 }, "keys": "ctrl+shift+3" },
        { "command": { "action": "newTab", "index": 3 }, "keys": "ctrl+shift+4" },
        { "command": { "action": "newTab", "index": 4 }, "keys": "ctrl+shift+5" },
        { "command": { "action": "newTab", "index": 5 }, "keys": "ctrl+shift+6" },
        { "command": { "action": "newTab", "index": 6 }, "keys": "ctrl+shift+7" },
        { "command": { "action": "newTab", "index": 7 }, "keys": "ctrl+shift+8" },
        { "command": { "action": "newTab", "index": 8 }, "keys": "ctrl+shift+9" },

Just change the index to whichever index profile you want.

[zadjii-msft]

@ggjulio FWIW, the first profile you have in your list is not actually your Ubuntu distro. That one's marked hidden: true. I'd reckon there's another Ubuntu profile, probably with a source that mentions "Canonical", right below the azure cloud shell 😉

[ggjulio]

Ho crap, I'm dumb, didn't see this property's value was true... sorry for all the spam,
I'll delete all those useless messages...
Thank for your time @zadjii-msft

[zadjii-msft]

Don't worry about it! Sometimes, things like that can be helpful for other folks to read and learn from too ☺️

[tietomattias]

@ggjulio I had the same mistake in my JSON >.<

[NewtonChutney]

Ahh.. Was just about to raise a duplicate issue! 😅
+1 on this request
BTW, is the backlog prioritized based on the 👍 hits?

[zadjii-msft]

BTW, is the backlog prioritized based on the 👍 hits?

More or less, yea.

[ReDNeQ]

That Drag and Drop tho! Sure I edited the JSON file, but man o man, some of us want it all. ;)

[raghuwanshi]

You can always reorder the profiles manually in the settings.json file before this gets added.

We used to customize everything manually in the settings.json, then why do we even have a Settings GUI? The answer is simple 'ease of use' or user friendliness.

[eduarddejong]

You can always reorder the profiles manually in the settings.json file before this gets added.

We used to customize everything manually in the settings.json, then why do we even have a Settings GUI? The answer is simple 'ease of use' or user friendliness.

The reason I appreciate the help of a GUI for the Terminal is that the settings JSON file is still not as easy to restore from a backup version as this is the case with the one of VS Code for example. And I mean like after a Windows reinstall or on another machine.

With a bit of file comparing and merging using VS Code or Meld we'll get the job done, but there are always some profiles with unique GUIDs, etc., that need to be corrected on the new system.

And I also don't know about any automated syncing solution yet.

So in other words, we simply cannot really argu that that JSON file editing "should" be the preferred or even intended way of settings editing.

[allusernamestakenexceptthis]

Based on no.2 solution. Why not add sort_order key/value that accept any integer and in settings of profile as numeric textbox. default is 10 with increment of 10. e.g. 10,20,30,40,50. that way it's easy for users to just change the one they want or set profile to be always last like 9999.

The menu then reorders based on this Ascending. For most users that needs it, this would do the job. and should be easy to implement. Perhaps can be added to advanced since not a very friendly design.

[nikhil-swamix]

2023-12-03.03-05-45.mp4

please have a look at the video. and code https://github.com/nikhil-swamix/TerminalProfileManager .
Context, wrong order was reducing productivity for me. so built this. but kind of works, atleast on my pc. this is more like modding, not official solution.

Features:

• drag and drop profiles to reorder them, and save the new order to the settings file.
• intelligently read settings from AppData/Local folder irrespective of user name.
• color theme matched to windows terminal dark mode.
• edit/extend logic using simple python code and change GUI using html and css.
• if python already installed, half the setup is done.
• jquery, jquery-UI and bootstrap used for GUI. Keyboard support in future.
• hidden profiles explicitly dimmed.

Future Development:

• Add searchbar - fuzzy search when you have too many profiles
• always on top window setting, which allows quick nav.
• Hide Unhide profile Toggle button for each profile
• more profile customization via the float popup.

@allusernamestakenexceptthis @eduarddejong @raghuwanshi @ReDNeQ @zadjii-msft @NewtonChutney @tietomattias @ggjulio @ultrasound1372 @psztoch @brian-kneebone-hp-com @BuzyBeeC @carlos-zamora

[nikhil-swamix]

Terminal direct integration is now added!

@carlos-zamora @zadjii-msft

• dear guys, i have a small question, how are guids generated? which core elements are responsible?
  

[NewtonChutney]

2023-12-03.03-05-45.mp4

@Nikhil-Software-Cartel this looks more like a PoC but I think the idea here is to have the list in the main terminal settings page itself be draggable

[trparky]

When will this be something that's added to Terminal?

[Agent-E11]

@trparky It looks like it is planned (at some point) #10000

[Agent-E11]

@caihongxu It is way faster to open the settings.json file and reorder them there. The list is located at profiles.list

[alcarcdr]

You can always reorder the profiles manually in the settings.json file before this gets added.

We used to customize everything manually in the settings.json, then why do we even have a Settings GUI? The answer is simple 'ease of use' or user friendliness.

Having the GUI Settings would mean things being easer, if in reality it didn't mean we end up wasting lots of time searching for advice, and discussing, features it doesn't have, ones we would expect it to.
Reordering displayed lists of profiles should have been a top UX requirement, yet having the JSON settings file has resulted in neglect.

If we're being given both GUI and JSON file settings, then we should get a nice little button that pops up a little doc listing User Use Cases requirements that need to be done in the JSON settings.