Skip to content

Instantly share code, notes, and snippets.

@vancura

vancura/danger-buttons.md

Last active October 24, 2025 14:44
Show Gist options
  • Save vancura/ce1b2212daee8a5e351541ebd1da7852 to your computer and use it in GitHub Desktop.
Save vancura/ce1b2212daee8a5e351541ebd1da7852 to your computer and use it in GitHub Desktop.
Download ZIP
Danger Button Candidates Analysis
Raw
danger-buttons.md

NOTE: This document is deprecated in favor of podman-desktop/podman-desktop#14590

Danger Button Candidates Analysis

This is the analysis of all potential danger button candidates to determine which buttons should be styled as danger (red) buttons.

Only buttons that immediately perform destructive actions should be danger buttons. Buttons that open confirmation dialogs should remain primary/secondary styled, with the confirmation button in the dialog being danger styled instead.

All buttons (not just danger ones) should be reworded to quickly explain the action. Especially a destructive button with the label Yes is dangerous. The user must understand the action without reading the explanation above the button just by reading the button label. Note: this is out of the scope of this task, here we just discuss changing buttons to danger ones.

There are three group of buttons based on what we need (or need not) to do:

Group A: Buttons that open dialogs first

Do not style as danger buttons.

These buttons only trigger a confirmation dialog. The destructive action requires a second click in the dialog. The button inside the dialog (e.g., Yes, Ok, Confirm) should be danger styled instead.

Prune operations

  1. Prune Button (1 button, 4 resource types)
    • File: packages/renderer/src/lib/engine/Prune.svelte:98
    • Function: openPruneDialog() at line 16
    • Pattern: Shows window.showMessageBox with Yes/Cancel or image-specific options
    • Dialog Buttons: Yes / All unused images / All untagged images buttons should be danger styled
    • Resource Types: containers, images, pods, volumes

Individual resource deletes with withConfirmation()

All these use the withConfirmation() helper which shows a Yes/Cancel confirmation dialog before executing:

  1. Delete Container

  2. Delete Image

  3. Delete Pod

  4. Delete Volume

  5. Delete Manifest

  6. Delete Compose

Kubernetes resource deletes with withConfirmation()

  1. Delete Deployment

  2. Delete Service

  3. Delete Job

  4. Delete CronJob

  5. Delete Pod (Kubernetes)

  6. Delete ConfigMap/Secret

  7. Delete Ingress/Route

  8. Delete PersistentVolumeClaim

  9. Delete Port Forward

Bulk delete operations with withBulkConfirmation()

These use withBulkConfirmation() which conditionally shows a confirmation dialog based on user settings:

  1. Delete Selected Pods

  2. Delete Selected Tasks

  3. Delete Selected Volumes

  4. Delete Selected Kubernetes Objects

  5. Delete Selected Containers

  6. Delete Selected Extension Folders

  7. Delete Selected Images

Kubernetes context with dialog

  1. Delete Kubernetes Context

Onboarding cancellation with custom modal

  1. Cancel Setup Button
    • File: packages/renderer/src/lib/onboarding/Onboarding.svelte:501
    • Function: setDisplayCancelSetup(true) shows custom modal
    • Modal: Lines 508-530 show Skip the entire setup? dialog
    • Modal Button: Ok button at line 526 should be danger styled (calls cancelSetup())
    • Note: The Cancel button that opens the dialog should remain secondary

Group B: Buttons that perform immediate destructive actions

These should be styled as danger buttons.

These buttons execute destructive operations directly without showing a confirmation dialog first.

Direct execution operations (need danger styling)

  1. Extension Uninstall ⚠️

    • File: packages/renderer/src/lib/extensions/InstalledExtensionCardLeftLifecycleDelete.svelte:28
    • Function: deleteExtension() at line 16
    • Pattern: Directly calls window.ddExtensionDelete() or window.removeExtension() with no confirmation
    • Component: Uses LoadingIconButton
    • Severity: HIGH - permanently removes extensions
    • Recommendation: Should be danger
    • Where to find it in: Extensions → Find any installed extension card → action buttons on the left side of each extension card → The trash icon button

  2. Extension Folder Untrack (Individual) ⚠️

    • File: packages/renderer/src/lib/extensions/dev-mode/selectable/ActionUntrack.svelte:21-25
    • Function: untrackExtensionFolder()
    • Pattern: Directly removes folder tracking with no confirmation
    • Severity: MEDIUM - only affects dev mode
    • Recommendation: Should be danger
    • Where to find it: Extensions → Local Extensions → trash icon on the right side of each extension folder row (only visible when extension is stopped)
CleanShot 2025-10-23 at 10 11 30@2x
  1. CLI Tool Uninstall ⚠️
    • File: packages/renderer/src/lib/preferences/PreferencesCliTool.svelte:207-217
    • Pattern: Directly calls uninstall operation with no confirmation
    • Component: Uses LoadingIconButton
    • Severity: HIGH - removes CLI tools
    • Recommendation: Should be danger
    • Where to find it: Settings → CLI Tools → Find any installed CLI tool (e.g., kubectl, helm, podman, docker) → Look for the trash icon button (only visible for installed CLI tools that support uninstall)
CleanShot 2025-10-23 at 10 14 04@2x
  1. Registry Removal ⚠️
    • File: packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte:366
    • Function: removeExistingRegistry() at line 227
    • Pattern: Directly calls window.unregisterImageRegistry() with no confirmation
    • Component: Uses DropdownMenu.Item
    • Severity: MEDIUM - removes registry configuration
    • Recommendation: Should be danger
    • Where to find it: Settings → Registries → Find any configured registry (e.g., docker.io, quay.io, custom registries) → Click the three-dot menu → Look for Remove option in the dropdown menu (Note: this is a menu item and not a button, but it's still useful to list it here)
CleanShot 2025-10-23 at 10 18 25@2x

Task manager operations (lower priority)

  1. Task Manager Clear All 🔶
    • File: packages/renderer/src/lib/task-manager/button/TaskManagerClearAllButton.svelte:8
    • Function: clearNotifications() from stores
    • Pattern: Directly clears all notifications with no confirmation
    • Severity: LOW - only clears UI notifications, not user data
    • Recommendation: Maybe be danger (lower priority)
    • Where to find it: Bell icon in the bottom-right corner → The Task Manager panel slides up from the bottom → Look at the top-right corner → Clear all
CleanShot 2025-10-23 at 10 21 37@2x

  1. Task/Notification Individual Delete 🔶

    • File: packages/renderer/src/lib/task-manager/table/action/TaskManagerActionsDelete.svelte:17
    • Function: removeTask() at line 12
    • Pattern: Directly calls window.clearTask() with no confirmation
    • Note: Only shown for completed tasks
    • Severity: VERY LOW - archives completed tasks
    • Recommendation: Maybe be danger (very low priority)
    • Where to find it: Bell icon in the bottom-right corner → The Task Manager panel slides up → Find any completed task in the list (green checkmark) → Look for the trash icon button in the actions column on the right (Note: Only visible for completed tasks, not running or failed tasks)

  2. Log/Terminal Clear 🔶

Group C: Buttons that should not be danger but currently are

  1. Cleanup/Purge Data
CleanShot 2025-10-23 at 09 52 20@2x

Questions for clarification

  1. Task Manager Clear All: Is clearing all notifications considered destructive enough for danger styling? It doesn't delete user data, just UI notifications.
  2. Reversible operations: Extension uninstall and CLI tool uninstall can be reversed by reinstalling. Should they still be danger buttons?
  3. Cleanup/Purge button exception: Should we maintain the current pattern where this button is danger styled even though it shows a dialog, due to its prominent warnings?
  4. Component support: Should ListItemButtonIcon, LoadingIconButton, and DropdownMenu.Item components support danger styling?

Related

Notes

This analysis was assisted by Claude Code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment