refactor(console): add retry button on error (#6158)

packages/console/src/components/AppError/index.module.scss

@@ -37,6 +37,7 @@
       display: inline-flex;
       align-items: center;
       margin-left: _.unit(2);
+      margin-top: _.unit(2);
       color: var(--color-primary);
       cursor: pointer;
     }

packages/console/src/components/AppError/index.tsx

@@ -1,3 +1,4 @@
+import { useLogto } from '@logto/react';
 import { Theme } from '@logto/schemas';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,6 +7,7 @@ import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg';
 import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg';
 import ErrorDark from '@/assets/images/error-dark.svg';
 import Error from '@/assets/images/error.svg';
+import Button from '@/ds-components/Button';
 import useTheme from '@/hooks/use-theme';
 import { onKeyDownHandler } from '@/utils/a11y';
 
@@ -23,18 +25,27 @@ function AppError({ title, errorCode, errorMessage, callStack, children }: Props
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const theme = useTheme();
+  const { clearAllTokens } = useLogto();
 
   return (
     <div className={styles.container}>
       {theme === Theme.Light ? <Error /> : <ErrorDark />}
       <label>{title ?? t('errors.something_went_wrong')}</label>
+      <Button
+        title="general.retry"
+        size="large"
+        onClick={async () => {
+          await clearAllTokens();
+          window.location.reload();
+        }}
+      />
       <div className={styles.summary}>
         <span>
           {errorCode}
           {errorCode && errorMessage && ': '}
           {errorMessage}
           {callStack && (
-            <span
+            <div
               role="button"
               tabIndex={0}
               className={styles.expander}
@@ -47,10 +58,11 @@ function AppError({ title, errorCode, errorMessage, callStack, children }: Props
             >
               {t('errors.more_details')}
               {isDetailsOpen ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-            </span>
+            </div>
           )}
         </span>
       </div>
+
       {callStack && isDetailsOpen && <div className={styles.details}>{callStack}</div>}
       {children}
     </div>