meshery/meshery

[UX] UI: Real-time status of operations in notifications

Open

#13.284 geöffnet am 16. Jan. 2025

Auf GitHub ansehen
 (8 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)HTML (10.013 Stars) (3.101 Forks)batch import
component/uiframework/reacthelp wantedissue/willfixkind/enhancementlanguage/javascriptpriority/low

Beschreibung

Current Behavior

Currently, Meshery users will receive one or more notifications per operation performed in order to apprise them of an operation's progress or outcome.

https://github.com/user-attachments/assets/71aeb98d-7229-4eb6-81b6-5f027a710790

Desired Behavior

The behavior of the operation status in this GitHub notification is great inspiration for a UX improvement in Meshery.

https://github.com/user-attachments/assets/b381440b-64bf-4791-b732-2e00072cfb7a

Implementation

  1. Must be driven through enhancement in the reusable component library in Sistent.

Acceptance Tests

  1. No matter what form this improvement takes, it must be implemented universally; the user experience must be consistent.

Mockups

TBD

Contributor Guides and Handbook

Contributor Guide

Tech Stack
reacttypescriptjavascript
Domain
frontenddeveloper experience
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 days
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
active
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
mostly clear
Voraussetzungen
ReactSistent component libraryGit workflowMeshery UI conventions
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
35
Research-Richtung
Review the current notification system in Meshery UI (likely in ui/ directory). Explore the Sistent component library (github.com/layer5io/sistent) for existing notification components. Examine the linked GitHub notification behavior video to understand the desired animation/state changes. Identify which Sistent components need to be modified or extended. Note that the implementation must be universal across all notifications. Consider starting with a small prototype and gather feedback from the maintainers via the issue comments.