Add error boundary to the project dashboard list

GitOrigin-RevId: 0f4cc3b4db62efe25ceeff202f305d08ddd73968

services/web/frontend/js/features/project-list/components/project-list-root.tsx

@@ -25,6 +25,8 @@ import LoadMore from './load-more'
 import { useEffect } from 'react'
 import getMeta from '../../../utils/meta'
 import WelcomeMessageNew from './welcome-message-new'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import { GenericErrorBoundaryFallback } from '../../../shared/components/generic-error-boundary-fallback'
 
 function ProjectListRoot() {
   const { isReady } = useWaitForI18n()
@@ -191,4 +193,4 @@ function DashApiError() {
   )
 }
 
-export default ProjectListRoot
+export default withErrorBoundary(ProjectListRoot, GenericErrorBoundaryFallback)

services/web/frontend/js/shared/components/default-message.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+
+type DefaultMessageProps = {
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function DefaultMessage({ className, style }: DefaultMessageProps) {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <span style={style}>{`${t('generic_something_went_wrong')}. `}</span>
+      <span className={className}>{`${t('please_refresh')}`}</span>
+    </>
+  )
+}

services/web/frontend/js/shared/components/error-boundary-fallback.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { Alert } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
+import { DefaultMessage } from './default-message'
 
 export const ErrorBoundaryFallback: FC<{ modal?: ReactNode }> = ({
   children,
@@ -8,14 +8,8 @@ export const ErrorBoundaryFallback: FC<{ modal?: ReactNode }> = ({
 }) => {
   return (
     <div className="error-boundary-alert">
-      <Alert bsStyle="danger">{children || <DefaultContent />}</Alert>
+      <Alert bsStyle="danger">{children || <DefaultMessage />}</Alert>
       {modal}
     </div>
   )
 }
-
-const DefaultContent = () => {
-  const { t } = useTranslation()
-
-  return <p>{`${t('generic_something_went_wrong')}. ${t('please_refresh')}`}</p>
-}

services/web/frontend/js/shared/components/generic-error-boundary-fallback.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Icon from './icon'
+import { Button } from 'react-bootstrap'
+import { useLocation } from '../hooks/use-location'
+import { DefaultMessage } from './default-message'
+
+export const GenericErrorBoundaryFallback: FC = ({ children }) => {
+  const { t } = useTranslation()
+  const { reload: handleClick } = useLocation()
+
+  return (
+    <div className="error-boundary-container">
+      <div className="icon-error-boundary-container">
+        <Icon
+          accessibilityLabel={`${t('generic_something_went_wrong')} ${t(
+            'please_refresh'
+          )}`}
+          type="exclamation-triangle fa-2x"
+          fw
+        />
+      </div>
+      {children || (
+        <div className="error-message-container">
+          <DefaultMessage className="small" style={{ fontWeight: 'bold' }} />
+        </div>
+      )}
+      <Button bsStyle="primary" onClick={handleClick}>
+        {t('refresh')}
+      </Button>
+    </div>
+  )
+}

services/web/frontend/stylesheets/app/editor/error-boundary.less

@@ -5,3 +5,36 @@
   background-color: @ol-blue-gray-0;
   padding: @line-height-computed / 2;
 }
+
+.error-boundary-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 211px;
+  justify-content: center;
+  margin: auto;
+  padding: 0px;
+  width: 266px;
+}
+
+.error-message-container {
+  align-items: center;
+  color: @neutral-90;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 56px;
+  padding: 0px;
+  width: 266px;
+}
+
+.icon-error-boundary-container {
+  align-items: center;
+  background: #ffffff;
+  border-radius: 999px;
+  display: grid;
+  height: 88px;
+  padding: 24px;
+  width: 88px;
+}

services/web/frontend/stylesheets/app/project-list-react.less

@@ -5,6 +5,7 @@
     padding-top: @header-height;
     padding-bottom: 0;
     min-height: calc(~'100vh -' @header-height);
+    display: flex;
   }
 
   .container:before {