diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx | 75 |
1 files changed, 57 insertions, 18 deletions
diff --git a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx index a56c82dee..47863d73e 100644 --- a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx +++ b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx @@ -18,7 +18,6 @@ import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useTranslationContext } from "../../../web-util/src/index.browser.js"; import { - ErrorAlert, Alert as AlertNotification, useAlertContext, } from "../context/alert.js"; @@ -37,41 +36,78 @@ function AlertContext({ context: undefined | object; }): VNode { const [more, setMore] = useState(false); + const [wrap, setWrap] = useState(false); const { i18n } = useTranslationContext(); if (!more) { return ( <div style={{ display: "flex", justifyContent: "right" }}> - <a onClick={() => setMore(true)}> + <a + onClick={() => setMore(true)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > <i18n.Translate>more info</i18n.Translate> </a> </div> ); } + const errorInfo = JSON.stringify( + context === undefined ? { cause } : { context, cause }, + undefined, + 2, + ); return ( - <pre style={{ overflow: "overlay" }}> - {JSON.stringify( - context === undefined ? { cause } : { context, cause }, - undefined, - 2, - )} - </pre> + <Fragment> + <div style={{ display: "flex", justifyContent: "right" }}> + <a + onClick={() => setWrap(!wrap)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > + <i18n.Translate>wrap text</i18n.Translate> + </a> + + <a + onClick={() => navigator.clipboard.writeText(errorInfo)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > + <i18n.Translate>copy content</i18n.Translate> + </a> + + <a + onClick={() => setMore(false)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > + <i18n.Translate>less info</i18n.Translate> + </a> + </div> + <pre + style={ + wrap + ? { + whiteSpace: "pre-wrap", + overflowWrap: "anywhere", + } + : { + overflow: "overlay", + } + } + > + {errorInfo} + </pre> + </Fragment> ); } export function ErrorAlertView({ - error: alert, + error, onClose, }: { - error: ErrorAlert; + error: AlertNotification; onClose?: () => Promise<void>; }): VNode { return ( - <Alert title={alert.message} severity={alert.type} onClose={onClose}> - <div style={{ display: "flex", flexDirection: "column" }}> - <div>{alert.description}</div> - <AlertContext context={alert.context} cause={alert.cause} /> - </div> - </Alert> + <Wrapper> + <AlertView alert={error} onClose={onClose} /> + </Wrapper> ); } @@ -86,6 +122,9 @@ export function AlertView({ <Alert title={alert.message} severity={alert.type} onClose={onClose}> <div style={{ display: "flex", flexDirection: "column" }}> <div>{alert.description}</div> + {alert.type === "error" ? ( + <AlertContext context={alert.context} cause={alert.cause} /> + ) : undefined} </div> </Alert> ); @@ -104,5 +143,5 @@ export function CurrentAlerts(): VNode { } function Wrapper({ children }: { children: ComponentChildren }): VNode { - return <div style={{ margin: "2em" }}>{children}</div>; + return <div style={{ margin: "1em" }}>{children}</div>; } |