Teil von #29650 (TopLogic UI on MUI), Richtung 1: Komponenten, die TL fehlen.

Ziel

Ein Element <alert> für .view.xml, das eine hervorgehobene Meldung im Seiteninhalt zeigt (MUI-Gegenstück: Alert mit AlertTitle).

Heute gibt es Meldungen nur systemweit (TLNoticeBar, maintenance-notice) und als vorübergehenden Toast (TLSnackbar, notify). Eine dauerhaft im Inhalt stehende Meldung ("Dieser Vorgang ist abgeschlossen", "Es fehlen Pflichtangaben in Abschnitt 3") fehlt.

Anforderungen

• Schweregrad info, success, warning, error mit passendem Icon; Titel optional; Text als I18N-Text oder als TL-Script-Ausdruck über einen Kanal.
• Sichtbarkeit steuerbar (z.B. mit visible-if), optional vom Benutzer schließbar.
• Optional Aktionen (Kommandos) in der Meldung.
• Zustandsvertrag in state.proto (siehe #29643); die Schweregrade entsprechen SnackbarState.Variant.
• Gestaltung über die Theme-Tokens der Statusfarben.

Lösung

{{{#!xml <alert severity="warning" inputs="ticket"

visible-if="t -> $t.get(my.app:Ticket#overdue)"
title-expr="t -> $t"
message-expr="t -> #('The ticket is overdue.'@en, 'Das Ticket ist überfällig.'@de)"
closable="true">
<on-dismiss>
<notify expr="t -> ..."/>
</on-dismiss>
<generic-command input="ticket">...</generic-command>

</alert> }}}

• Schweregrad severity (info als Vorgabe, success, warning, error) bestimmt Farbe und Icon. Die Icons sind Theme-Bilder (Icons.ALERT_INFO, ALERT_SUCCESS, ALERT_WARNING, ALERT_ERROR) und im Theme austauschbar.
• Titel (optional) und Text jeweils als statischer I18N-Text (<title>, <message>) oder als TL-Script-Funktion (title-expr, message-expr). Das Ergebnis einer Funktion wird als Text angezeigt (I18N-Literal in der Sprache des Benutzers, sonst das Label des Objekts). Genau eine der beiden Text-Angaben ist nötig, höchstens eine der Titel-Angaben; sonst meldet die Konfiguration einen Fehler.
• Eingaben: Alle Funktionen (visible-if, title-expr, message-expr) bekommen die Werte der Kanäle aus inputs als Argumente (bei mehreren Kanälen geschachtelt: a -> b -> ...). Sie werden neu ausgewertet, sobald ein Kanal einen neuen Wert bekommt oder sich eines der Eingabeobjekte ändert; eine Funktion, die über die Eingabeobjekte hinaus navigiert, nennt die erreichten Typen in observed-types.
• Sichtbarkeit visible-if (optional): Die Meldung wird gezeigt, solange die Bedingung gilt.
• Schließen closable (Vorgabe false): Der Benutzer kann die Meldung schließen. Eine geschlossene Meldung erscheint wieder, sobald sich etwas ändert (ein Eingabekanal bekommt einen neuen Wert, oder die Auswertung ergibt eine andere Sichtbarkeit, einen anderen Titel oder Text) oder die View in einer neuen Sitzung neu aufgebaut wird. Das Schließen wird nicht gespeichert; Verlassen und erneutes Aufrufen der Seite in derselben Sitzung lässt die Meldung geschlossen.
• Rückruf beim Schließen on-dismiss (optional): Kette von View-Aktionen, die beim Schließen ausgeführt wird; ihre Eingabe ist der Wert des ersten Eingabekanals. Damit kann z.B. in einer Transaktion am Objekt vermerkt werden, dass der Hinweis zur Kenntnis genommen wurde, und die Meldung über visible-if dauerhaft ausgeblendet werden.
• Aktionen: Kommandos im Element werden als Schaltflächen in der Meldung angezeigt.
• Zustandsvertrag AlertState in state.proto (Schweregrad vom Typ SnackbarState.Variant), Client-Komponente TLAlert (ersetzbar über die Komponentenbibliothek); Gestaltung über die Klassen .tl-alert des Design-Systems mit den Tokens --tl-status-<rolle>-*. Fehler und Warnungen werden als role="alert", Informationen und Erfolge als role="status" angekündigt.
• Das Kommando dismiss verwendet die Argumente DismissArguments der Snackbar mit; die Bezeichnung des aufgezeichneten Schritts lautet nun allgemein "Meldung {generation} schließen".
• Demo in com.top_logic.demo.react: Seite "Hinweisboxen" unter "Demos" (alle Schweregrade, schließbare Meldung mit Kommando, Meldung berechnet aus einem bearbeitbaren Objekt).