saleor-dashboard-feedback

Guides error, warning, and success feedback patterns for Saleor Dashboard toasts and inline UI.

1.0k|1.2k|Updated Jun 19, 2019
One-click install
npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-feedback
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: saleor-dashboard-feedback
Source: https://github.com/saleor/saleor-dashboard/tree/main/.claude/skills/saleor-dashboard-feedback
Command: npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-feedback

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers working on Saleor Dashboard often misuse toast notifications, dumping raw GraphQL errors into toasts or narrating multi-step flows, which leaves merchants without actionable on-page recovery paths.

Core Features & Use Cases

  • Channel selection ladder: Decide between inline field errors, section errors, page banners, setup checklists, toasts, and background task UI based on whether the merchant must act.
  • Toast quality rules: Enforce copy conventions (sentence case, "Couldn't" vs "Failed to", no trailing periods on success), stickiness behavior, queue limits (max 3, FIFO, dedupe), and aggregation of bulk failures.
  • Use Case: When adding save/mutation error handling to a voucher form in src/discounts/, map GraphQL errors to form fields first, then fire a single short sticky error toast with a recovery hint instead of dumping the full validation list into a toast.

Quick Start

Ask the assistant to review the error handling in my voucher save mutation and apply the Saleor Dashboard feedback rules for toasts and inline errors.

Frequently Asked Questions about saleor-dashboard-feedback

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
When should I use a toast vs inline error in a React dashboard?

Use inline field or section errors when the merchant must fix something on the page, and toasts only to acknowledge terminal, non-blocking outcomes of an action they just took. Serious failures pair a short toast with a persistent banner or inline surface.

How do I handle GraphQL mutation errors with useNotifier in Saleor Dashboard?

Map GraphQL errors to form fields or sections first, then call notify with a short error title and optional recovery text. Never dump raw API payloads into the toast; use autohide around 10 seconds when inline errors already own the recovery.

What toast copy conventions does Saleor Dashboard follow?

Success toasts use noun plus past participle with no trailing period, like "Voucher saved". Errors use "Couldn't" for user issues and "Failed to" for system issues, plus a short recovery sentence, matching the button verb that triggered the action.

Does the Saleor Dashboard toast queue limit visible notifications?

Yes, the queue in notificationQueue.tsx shows a maximum of 3 toasts with FIFO overflow and dedupes by status plus title. Errors and toasts with action buttons stay sticky until dismissed, while success and info auto-dismiss after about 5 seconds.

When should I not use a toast notification?

Avoid toasts for billing or permission denials, multi-step triage, field validation, setup blockers, and narrating in-progress flows. These belong in banners, checklists, or inline UI; also aggregate bulk failures into one toast instead of one per row.