From b68e6a6235e17e56e55d8f9ef390c599a70fc633 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Thu, 26 May 2022 15:36:49 +0800 Subject: [PATCH] refactor(console): update error boundary styles per latest design --- .../src/components/AppError/index.module.scss | 58 +++++++++++++++++++ .../console/src/components/AppError/index.tsx | 43 ++++++++++++++ .../ErrorBoundary/index.module.scss | 34 ----------- .../src/components/ErrorBoundary/index.tsx | 23 ++------ packages/console/src/icons/Arrow.tsx | 10 +++- packages/phrases/src/locales/en.ts | 1 + packages/phrases/src/locales/zh-cn.ts | 1 + 7 files changed, 115 insertions(+), 55 deletions(-) create mode 100644 packages/console/src/components/AppError/index.module.scss create mode 100644 packages/console/src/components/AppError/index.tsx delete mode 100644 packages/console/src/components/ErrorBoundary/index.module.scss diff --git a/packages/console/src/components/AppError/index.module.scss b/packages/console/src/components/AppError/index.module.scss new file mode 100644 index 000000000..82e4d6722 --- /dev/null +++ b/packages/console/src/components/AppError/index.module.scss @@ -0,0 +1,58 @@ +@use '@/scss/underscore' as _; + +.container { + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--color-surface-1); + color: var(--color-text); + padding: _.unit(6); + height: 100vh; + overflow-y: auto; + + > * { + margin-top: _.unit(6); + } + + img { + height: 256px; + width: 256px; + margin-top: _.unit(30); + } + + label { + font: var(--font-title-large); + } + + .summary { + display: flex; + align-items: center; + margin-top: _.unit(4); + + span { + display: inline-block; + font: var(--font-body-medium); + } + + .expander { + margin-left: _.unit(2); + color: var(--color-primary); + cursor: pointer; + } + + svg { + width: 20px; + height: 20px; + color: var(--color-primary); + } + } + + .details { + width: 470px; + background-color: var(--color-layer-1); + border-radius: 16px; + font: var(--font-body-medium); + padding: _.unit(6); + white-space: pre-wrap; + } +} diff --git a/packages/console/src/components/AppError/index.tsx b/packages/console/src/components/AppError/index.tsx new file mode 100644 index 000000000..c6e5d1c7b --- /dev/null +++ b/packages/console/src/components/AppError/index.tsx @@ -0,0 +1,43 @@ +import React, { Fragment, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import ErrorImage from '@/assets/images/warning.svg'; +import { ArrowDown, ArrowUp } from '@/icons/Arrow'; + +import * as styles from './index.module.scss'; + +type Props = { + errorMessage?: string; + callStack?: string; +}; + +const AppError = ({ errorMessage, callStack }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const [isDetailsOpen, setIsDetailsOpen] = useState(false); + + return ( +
+ oops + +
+ {errorMessage} + {callStack && ( + <> + { + setIsDetailsOpen(!isDetailsOpen); + }} + > + {t('errors.more_details')} + + {isDetailsOpen ? : } + + )} +
+ {callStack && isDetailsOpen &&
{callStack}
} +
+ ); +}; + +export default AppError; diff --git a/packages/console/src/components/ErrorBoundary/index.module.scss b/packages/console/src/components/ErrorBoundary/index.module.scss deleted file mode 100644 index 2a3f4953c..000000000 --- a/packages/console/src/components/ErrorBoundary/index.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@/scss/underscore' as _; - -.container { - overflow-y: auto; - height: 100vh; - - .wrapper { - display: flex; - flex-direction: column; - background-color: var(--color-layer-1); - color: var(--color-text); - padding: _.unit(6); - width: 858px; - min-height: 100%; - margin: 0 auto; - - > *:not(:first-child) { - margin-top: _.unit(6); - } - - img { - height: 300px; - } - - img, - h2 { - align-self: center; - } - - details { - white-space: pre-wrap; - } - } -} diff --git a/packages/console/src/components/ErrorBoundary/index.tsx b/packages/console/src/components/ErrorBoundary/index.tsx index 818a38cb1..bdd71c009 100644 --- a/packages/console/src/components/ErrorBoundary/index.tsx +++ b/packages/console/src/components/ErrorBoundary/index.tsx @@ -1,14 +1,10 @@ import { conditional } from '@silverhand/essentials'; import React, { Component, ReactNode } from 'react'; -import { TFunction, withTranslation } from 'react-i18next'; -import ErrorImage from '@/assets/images/table-error.svg'; - -import * as styles from './index.module.scss'; +import AppError from '../AppError'; type Props = { children: ReactNode; - t: TFunction; }; type State = { @@ -40,26 +36,15 @@ class ErrorBoundary extends Component { }; render() { - const { children, t } = this.props; + const { children } = this.props; const { callStack, errorMessage, hasError } = this.state; if (hasError) { - return ( -
-
- oops -

{t('admin_console.errors.something_went_wrong')}

-
- {errorMessage} - {callStack} -
-
-
- ); + return ; } return children; } } -export default withTranslation()(ErrorBoundary); +export default ErrorBoundary; diff --git a/packages/console/src/icons/Arrow.tsx b/packages/console/src/icons/Arrow.tsx index cb37b0f41..360ea3893 100644 --- a/packages/console/src/icons/Arrow.tsx +++ b/packages/console/src/icons/Arrow.tsx @@ -10,7 +10,10 @@ export const ArrowDown = (props: SVGProps) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; @@ -25,7 +28,10 @@ export const ArrowUp = (props: SVGProps) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 69e60762a..66ada0ffc 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -115,6 +115,7 @@ const translation = { invalid_uri_format: 'Invalid URI format', required_field_missing: 'Please enter {{field}}', required_field_missing_plural: 'You have to enter at least one {{field}}', + more_details: 'More details', }, tab_sections: { overview: 'Overview', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index a8bab92b4..3dbd247c7 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -115,6 +115,7 @@ const translation = { invalid_uri_format: '无效的 URI 格式', required_field_missing: '请输入{{field}}', required_field_missing_plural: '{{field}}不能全部为空', + more_details: '查看详情', }, tab_sections: { overview: '概览',