Present error to users if fetching entity details fails (#486)

* Update error component to show more details if present

* Update dialog to handle errors

* Pass any fetch errors to dialog components

* Display any fetch errors for projects and pipelines and tweak loading state

* Pass error object from all views

Author: annavik

ui/src/components/info-dialog/info-dialog.tsx

@@ -7,7 +7,7 @@ import { useActivePage } from './useActivePage'
 
 export const InfoDialog = ({ name, slug }: { name: string; slug: string }) => {
   const { activePage, setActivePage } = useActivePage()
-  const { page, isLoading } = usePageDetails(slug)
+  const { page, isLoading, error } = usePageDetails(slug)
 
   return (
     <Dialog.Root
@@ -20,6 +20,7 @@ export const InfoDialog = ({ name, slug }: { name: string; slug: string }) => {
       <Dialog.Content
         ariaCloselabel={translate(STRING.CLOSE)}
         isLoading={isLoading}
+        error={error}
       >
         <Dialog.Header title={name} />
         {page ? (

ui/src/design-system/components/dialog/dialog.module.scss

@@ -111,6 +111,10 @@ $dialog-padding-medium: 32px;
   }
 }
 
+.errorContent {
+  padding: 32px;
+}
+
 @media only screen and (max-width: $medium-screen-breakpoint) {
   .dialog {
     max-width: calc(100% - (2 * $dialog-padding-medium));

ui/src/design-system/components/dialog/dialog.tsx

@@ -1,5 +1,6 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import classNames from 'classnames'
+import { Error } from 'pages/error/error'
 import { ReactNode } from 'react'
 import { Icon, IconType } from '../icon/icon'
 import { LoadingSpinner } from '../loading-spinner/loading-spinner'
@@ -28,12 +29,14 @@ const Content = ({
   children,
   isCompact,
   isLoading,
+  error,
   onOpenAutoFocus,
 }: {
   ariaCloselabel: string
   children: ReactNode
   isCompact?: boolean
   isLoading?: boolean
+  error?: any
   onOpenAutoFocus?: (event: Event) => void
 }) => (
   <Dialog.Portal>
@@ -46,12 +49,20 @@ const Content = ({
     </Dialog.Overlay>
     <Dialog.Content
       className={classNames(styles.dialog, {
-        [styles.compact]: isCompact,
+        [styles.compact]: isCompact || error,
         [styles.loading]: isLoading,
       })}
       onOpenAutoFocus={onOpenAutoFocus}
     >
-      <div className={styles.dialogContent}>{children}</div>
+      <div className={styles.dialogContent}>
+        {error ? (
+          <div className={styles.errorContent}>
+            <Error error={error} />
+          </div>
+        ) : (
+          children
+        )}
+      </div>
       <Dialog.Close className={styles.dialogClose} aria-label={ariaCloselabel}>
         <Icon type={IconType.Close} size={12} />
       </Dialog.Close>

ui/src/pages/collection-details/collection-details.tsx

@@ -50,7 +50,7 @@ export const CollectionDetails = () => {
   })
 
   if (!isLoading && error) {
-    return <Error />
+    return <Error error={error} />
   }
 
   return (

ui/src/pages/deployment-details/deployment-details-dialog.tsx

@@ -16,7 +16,7 @@ export const DeploymentDetailsDialog = ({ id }: { id: string }) => {
   const navigate = useNavigate()
   const { projectId } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
-  const { deployment, isLoading } = useDeploymentDetails(id)
+  const { deployment, isLoading, error } = useDeploymentDetails(id)
 
   useEffect(() => {
     setDetailBreadcrumb(deployment ? { title: deployment.name } : undefined)
@@ -41,6 +41,7 @@ export const DeploymentDetailsDialog = ({ id }: { id: string }) => {
       <Dialog.Content
         ariaCloselabel={translate(STRING.CLOSE)}
         isLoading={isLoading}
+        error={error}
       >
         {deployment ? (
           <DeploymentDetailsDialogContent deployment={deployment} />

ui/src/pages/deployments/deployments.tsx

@@ -24,7 +24,7 @@ export const Deployments = () => {
   const canCreate = userPermissions?.includes(UserPermission.Create)
 
   if (!isLoading && error) {
-    return <Error />
+    return <Error error={error} />
   }
 
   return (

ui/src/pages/error/error.module.scss

@@ -1,4 +1,3 @@
-@import 'src/design-system/variables/variables.scss';
 @import 'src/design-system/variables/colors.scss';
 @import 'src/design-system/variables/typography.scss';
 
@@ -17,9 +16,3 @@
   border-radius: 8px;
   border: 1px solid $color-neutral-100;
 }
-
-@media only screen and (max-width: $small-screen-breakpoint) {
-  .wrapper {
-    margin: 32px 16px;
-  }
-}

ui/src/pages/error/error.tsx

@@ -2,13 +2,16 @@ import styles from './error.module.scss'
 
 interface ErrorProps {
   message?: string
-  details?: string
+  error?: any
 }
 
 export const Error = ({
   message = 'Something went wrong!',
-  details = 'Unknown error',
+  error,
 }: ErrorProps) => {
+  const details =
+    error?.response?.data?.detail ?? error?.message ?? 'Unknown error'
+
   return (
     <div className={styles.wrapper}>
       <h1 className={styles.message}>{message} 🪲</h1>

ui/src/pages/jobs/jobs.tsx

@@ -33,7 +33,7 @@ export const Jobs = () => {
   const canCreate = userPermissions?.includes(UserPermission.Create)
 
   if (!isLoading && error) {
-    return <Error />
+    return <Error error={error} />
   }
 
   return (
@@ -74,7 +74,7 @@ const JobDetailsDialog = ({ id }: { id: string }) => {
   const navigate = useNavigate()
   const { projectId } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
-  const { job, isLoading, isFetching } = useJobDetails(id)
+  const { job, isLoading, isFetching, error } = useJobDetails(id)
 
   useEffect(() => {
     setDetailBreadcrumb(job ? { title: job.name } : undefined)
@@ -97,6 +97,7 @@ const JobDetailsDialog = ({ id }: { id: string }) => {
       <Dialog.Content
         ariaCloselabel={translate(STRING.CLOSE)}
         isLoading={isLoading}
+        error={error}
       >
         {job ? (
           <JobDetails

ui/src/pages/occurrences/occurrences.tsx

@@ -53,7 +53,7 @@ export const Occurrences = () => {
   const { selectedView, setSelectedView } = useSelectedView('table')
 
   if (!isLoading && error) {
-    return <Error />
+    return <Error error={error} />
   }
 
   return (
@@ -125,7 +125,7 @@ const OccurrenceDetailsDialog = ({ id }: { id: string }) => {
   const navigate = useNavigate()
   const { projectId } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
-  const { occurrence, isLoading } = useOccurrenceDetails(id)
+  const { occurrence, isLoading, error } = useOccurrenceDetails(id)
 
   useEffect(() => {
     setDetailBreadcrumb(
@@ -152,6 +152,7 @@ const OccurrenceDetailsDialog = ({ id }: { id: string }) => {
       <Dialog.Content
         ariaCloselabel={translate(STRING.CLOSE)}
         isLoading={isLoading}
+        error={error}
       >
         {occurrence ? <OccurrenceDetails occurrence={occurrence} /> : null}
       </Dialog.Content>