podman-desktop icon indicating copy to clipboard operation
podman-desktop copied to clipboard

Make troubleshooting page more visible by adding it under Settings

Open odockal opened this issue 7 months ago • 1 comments

Is your enhancement related to a problem? Please describe

Sometimes (I cannot find the exact comment), people might not be aware there is troubleshooting page ("just" a small icon in the status bar), which can help them to solve their problem or understand the problem.

Describe the solution you'd like

Create new link the Settings navigation bar "Troubleshooting". Should be easy and improving situation.

Describe alternatives you've considered

No response

Additional context

No response

odockal avatar May 06 '25 15:05 odockal

@odockal: I think I made a mistake when I considered this a UX/UI Issue (and assigned myself). Is there actually any design work involved, please?

vancura avatar Jun 19 '25 10:06 vancura

@vancura I opened the issue so it wont get lost in the space. We have had a multiple users reporting a problems that could be better reported/ maybe even fixed if they found/saw troubleshooting page.

I think it depends on the proposed solution, if is good enough. Is it sufficient for Troubleshooting page visibility to be more readable when in link is present in the settings ? And then we could expand on the content of the troubleshooting itself. Which is about other discussion I think.

odockal avatar Jul 01 '25 06:07 odockal

Ah, this is related to https://github.com/podman-desktop/podman-desktop/issues/10518#issuecomment-2574983273. We discussed this yesterday with @MariaLeonova:

Maybe we can have some quick actions in the panel that would show directly from the bulb icon? Some really most frequently used. The rest would be behind the More button (or something). The most used actions in the quick menu, with the rest of them behind the button.

We'll draw a wireframe when there's time, but it won't land for 1.20.0. Can we remove the Milestone, please? /c @nichjones1 @rujutashinde

Note: This is an improvement of the Statusbar area, which is now being designed.

vancura avatar Jul 01 '25 10:07 vancura

@rujutashinde I need to postpone this to the sprint 278, as I will be away. But maybe @MariaLeonova would have time for this sooner? :)

vancura avatar Jul 01 '25 13:07 vancura

I have moved to the sprint 278. @MariaLeonova if you want to pick it up feel free to reassign it

rujutashinde avatar Jul 01 '25 14:07 rujutashinde

@vancura @rujutashinde of course, I can look into it next sprint!

MariaLeonova avatar Jul 04 '25 09:07 MariaLeonova

I will do this.

vancura avatar Jul 31 '25 12:07 vancura

If we place the Troubleshooting button in the left menu while maintaining its function to open an external section rather than another Settings pane, we should implement it with a distinct visual treatment from the outset.

Settings buttons lead to sub-panels within the Settings context. The Troubleshooting button, however, would redirect users to a different application section entirely. This functional difference warrants a differentiated design approach to set proper user expectations.

Proposed implementation:

  • Visual distinction: The Troubleshooting button should feature a modified appearance that signals its unique navigation behavior.
  • Clear iconography: A shortcut/arrow icon would explicitly communicate that this element serves as a shortcut to another application section
  • Consistent integration: The design maintains overall interface coherence while providing functional clarity

This approach prevents user confusion by providing immediate visual cues about the button's behavior, enhancing the overall navigation experience.

Image

What do you think?

Figma

/c @MariaLeonova @Firewall

vancura avatar Sep 09 '25 13:09 vancura

This would be helpful, while also maintaining the right status bar icon. I would also propose having a dot indicator on Settings, and on Settings > Troubleshooting, in case there's anything that requires the user's attention ATM; same as we have for the Dashboard:

Image

It is quite natural for people to miss UI elements in the lower right corner, so adding an extra indicator on the left would def help.

MariaLeonova avatar Sep 09 '25 15:09 MariaLeonova

Good points, @MariaLeonova, thanks! The icon in the status bar should really be the same. The notification dot makes total sense, too. I will update the design soon.

vancura avatar Sep 10 '25 10:09 vancura

Icons are now discussed in https://github.com/podman-desktop/podman-desktop/issues/10663#issuecomment-3284710794

vancura avatar Sep 12 '25 10:09 vancura

~Due to color changes, this is currently blocked by #13946.~

vancura avatar Sep 17 '25 09:09 vancura

Troubleshooting, in case there's anything that requires the user's attention ATM; same as we have for the Dashboard:

Is there actually a chance that there's something that requires the user's attention in Troubleshooting?

vancura avatar Sep 18 '25 11:09 vancura

New version:

Image

There are three notable changes:

  1. The expand/collapse chevron now follows the Apple HIG: it points right when collapsed and down when expanded. This is the opposite of the current behavior in Podman Desktop, but it aligns with the native macOS convention and feels consistent.

  2. A dot indicates an unread notification (pending the discussion in my comment above).

  3. The Help menu in the bottom-right uses the correct Troubleshooting icon.

Note: The unread-notification dot always appears in this location. If that position is occupied by the expand/collapse chevron, the submenu auto-expands to reveal the settings panel containing the notification, and the dot moves to the corresponding panel menu item. This prevents icon collisions and shows the exact place of notification immediately.

For completeness, here are the dark, high-contrast light, and high-contrast dark comps. The appearance of the menu, status bar, and the rest of the UI is not within the scope of this ticket and is included here for aesthetic purposes. This is WIP, and a subject of change.

Image Image Image

If you have comments on a particular detail, please comment in Figma.

vancura avatar Sep 21 '25 12:09 vancura

I love the icons, it adds a lot of clarity to the menu items, great addition.

Couple of ideas:

  1. I'm not sure if it is technically feasable, but we could also consider having the contents of the troubleshooting page just appear in the right area, instead of redirecting to the full screen page. I don't think it needs the 100% horizontal space, it could give it a more integrated experience. I wouldn't change the experience when you open it from the menu in the bottom right, it can still be full screen then.
  2. The icon in the statusbar (not the one in the heplp menu) for the troubleshooting page is now a 💡 and you are using crosshair symbol now. Shall we make those consistent?

Is there actually a chance that there's something that requires the user's attention in Troubleshooting?

I don't think we have something that matches that. I also would expect that if we know there is something wrong to route them to the Troubleshooting page. We should attempt to fix the issue for the user and point them to the pag where they can. Directing the user to the troubleshooting page feels like adding extra steps.

Firewall avatar Sep 24 '25 17:09 Firewall

Thanks for the feedback, @Firewall.

I'm not sure if it is technically feasable, but we could also consider having the contents of the troubleshooting page just appear in the right area, instead of redirecting to the full screen page.

It is technically feasible, but not good from a UX perspective. The Troubleshooting panel has five tabs (Repair & Connections, which is simple, but also Logs, Gather Logs, Stores, and Kubernetes, which are more complex and visually heavy). That's quite too much for the constrained space in the bottom-right panel.

There's no reason to change the Troubleshooting UI – it can stay where it is now (we'll refresh it with the new design system soon anyway, or rather it will refresh automatically with the UI components "modernization").

The primary objective of this ticket is to add a shortcut to the Settings menu that directly opens the Troubleshooting panel in its current form. I just used the opportunity to visually refresh the menu, as it currently doesn't support new icons (such as the shortcut, as seen below).

The icon in the statusbar for the troubleshooting page is now a 💡 and you are using crosshair symbol now. Shall we make those consistent?

Sorry about that, that's a glitch on my side. Fixed here:

Image

vancura avatar Sep 25 '25 11:09 vancura

Looks great now!

Firewall avatar Sep 29 '25 13:09 Firewall

A small update with the new Experimental icon:

Image

vancura avatar Sep 29 '25 13:09 vancura

Based on the UX call discussion from September 25, 2025, I'm closing this design ticket as the design work is complete and approved.

Changes to Podman Desktop UX:

  • Refresh the design of the Settings menu, following the design above (refer to the Figma document for more details; work with @vancura on the front-end engineering.
  • Use the new icons for Settings menu items, including updating the Troubleshooting icon in both the status bar and status bar menu.
  • Add a Troubleshooting shortcut to the Settings menu that opens the existing full-screen Troubleshooting dialog.
  • Use the shortcut arrow icon to signal that this behaves differently from standard Settings panels.

FYI, no changes in the current UX:

  • No change: Maintain the current Troubleshooting dialog structure with its five tabs (no integration into the settings panel)
  • No change: Keep all existing access points (status bar icon, help menu, and new settings shortcut)

Deferred to future work:

  • Status bar icon highlighting when troubleshooting is accessed from settings - this will be part of the broader status bar refresh project. See #12908
  • Any changes to the troubleshooting dialog itself – it will automatically refresh with the upcoming design system modernization.

The team agreed that Troubleshooting should be accessible from anywhere in the application, not just from settings.

While @deboer-tim raised valid concerns about having multiple access points, the final decision was that the settings shortcut serves as a discovery mechanism for users who don't notice the status bar icon, while the status bar remains the primary access method.

The design has been reviewed and approved by the team. I'll file a new implementation ticket shortly.

Thanks to everyone who contributed feedback, especially @odockal for the original request, @MariaLeonova for the notification dot suggestion, and @Firewall for the detailed review.

vancura avatar Sep 29 '25 14:09 vancura

@vancura is there a ticket for the implementation?

Firewall avatar Sep 29 '25 14:09 Firewall

@Firewall I am working on it. Will be ready tomorrow.

vancura avatar Sep 29 '25 15:09 vancura

Implementation ticket: https://github.com/podman-desktop/podman-desktop/issues/14135

vancura avatar Sep 30 '25 10:09 vancura

@MariaLeonova @vancura @Firewall great work all!

odockal avatar Oct 03 '25 09:10 odockal