From 985057ab4e9f111e7e58e86b6da8d9f425a96451 Mon Sep 17 00:00:00 2001 From: Misode Date: Fri, 2 Jul 2021 02:59:19 +0200 Subject: [PATCH] Allow multiple errors and dismissing errors --- src/app/components/ErrorPanel.tsx | 9 ++++++++- src/app/components/Octicon.tsx | 1 + src/app/components/PreviewPanel.tsx | 4 ++-- src/app/pages/Generator.tsx | 20 +++++++++++++------- src/styles/global.css | 16 ++++++++++++++++ 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/app/components/ErrorPanel.tsx b/src/app/components/ErrorPanel.tsx index e04c84b8..64fd7c38 100644 --- a/src/app/components/ErrorPanel.tsx +++ b/src/app/components/ErrorPanel.tsx @@ -1,5 +1,12 @@ -export function ErrorPanel({ error }: { error: string }) { +import { Octicon } from './Octicon' + +type ErrorPanelProps = { + error: string, + onDismiss?: () => unknown, +} +export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) { return
+ {onDismiss &&
{Octicon.x}
}

{error}

You can report this as a bug on GitHub

diff --git a/src/app/components/Octicon.tsx b/src/app/components/Octicon.tsx index c4cbdb1b..2646c76d 100644 --- a/src/app/components/Octicon.tsx +++ b/src/app/components/Octicon.tsx @@ -26,5 +26,6 @@ export const Octicon = { three_bars: , unfold: , upload: , + x: , x_circle: , } diff --git a/src/app/components/PreviewPanel.tsx b/src/app/components/PreviewPanel.tsx index 4937b29b..f59fb2da 100644 --- a/src/app/components/PreviewPanel.tsx +++ b/src/app/components/PreviewPanel.tsx @@ -44,7 +44,7 @@ export const Previews: { }, ] -type PreviewProps = { +type PreviewPanelProps = { lang: string, model: DataModel | null, version: VersionId, @@ -52,7 +52,7 @@ type PreviewProps = { shown: boolean, onError: (message: string) => unknown, } -export function PreviewPanel({ lang, model, version, id, shown }: PreviewProps) { +export function PreviewPanel({ lang, model, version, id, shown }: PreviewPanelProps) { const [, setCount] = useState(0) useModel(model, () => { diff --git a/src/app/pages/Generator.tsx b/src/app/pages/Generator.tsx index f0d686f3..fd249a0b 100644 --- a/src/app/pages/Generator.tsx +++ b/src/app/pages/Generator.tsx @@ -19,7 +19,13 @@ type GeneratorProps = { } export function Generator({ lang, changeTitle, version, onChangeVersion }: GeneratorProps) { const loc = locale.bind(null, lang) - const [error, setError] = useState('') + const [errors, setErrors] = useState([]) + const addError = (error: string) => { + setErrors([...errors, error]) + } + const dismissError = (error: string) => { + setErrors(errors.filter(e => e !== error)) + } const [errorBoundary] = useErrorBoundary() if (errorBoundary) { return
@@ -45,7 +51,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener .then(b => setBlockStates(b)) getModel(version, generator.id) .then(m => setModel(m)) - .catch(e => { console.error(e); setError(e.message) }) + .catch(e => { console.error(e); addError(e.message) }) }, [version, generator.id]) const reset = () => { @@ -92,7 +98,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener setPresetResults(presets) } }) - .catch(e => { console.error(e); setError(e.message) }) + .catch(e => { console.error(e); addError(e.message) }) }, [version, generator.id, presetFilter]) const loadPreset = (id: string) => { @@ -163,8 +169,8 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener - {error && } - + {errors.map(e => dismissError(e)} />)} +
@@ -181,10 +187,10 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
- +
- +
} diff --git a/src/styles/global.css b/src/styles/global.css index fd7d2dfe..d59dfe5b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -219,6 +219,10 @@ main > .controls { padding: 4px 16px 50vh; } +.error + .tree { + margin-top: 0; +} + .popup-source { position: fixed; display: flex; @@ -464,6 +468,18 @@ main.has-preview { margin: 10px 0; } +.error .error-dismiss { + float: right; + cursor: pointer; + margin-left: 10px; +} + +.error-dismiss svg { + display: block; + width: 24px; + height: 24px; +} + .error a { color: var(--text-1) }