feat(table): update table to support error messages

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.26
+
+- Updated table component to support error messages
+
 ## 3.0.25
 
 - Updated images for markdown files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.25",
+  "version": "3.0.26",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Table/components/Error/Error400Overlay.tsx

@@ -36,7 +36,11 @@ const flexColumn = {
   alignItems: 'center',
 }
 
-export const Error400Overlay = () => (
+export const Error400Overlay = ({
+  errorMessage4xx,
+}: {
+  errorMessage4xx?: string
+}) => (
   <Box
     sx={{
       ...flexRow,
@@ -49,13 +53,18 @@ export const Error400Overlay = () => (
     <Box
       sx={{
         ...flexColumn,
-        paddingTop: '20px',
       }}
     >
-      <Typography variant="body2">
-        Something went wrong. Please contact
-      </Typography>
-      <Typography variant="body2">your administrator</Typography>
+      {errorMessage4xx ? (
+        <Typography variant="body2">{errorMessage4xx}</Typography>
+      ) : (
+        <>
+          <Typography variant="body2">
+            Something went wrong. Please contact
+          </Typography>
+          <Typography variant="body2">your administrator</Typography>
+        </>
+      )}
     </Box>
   </Box>
 )

src/components/basic/Table/components/Error/Error500Overlay.tsx

@@ -29,7 +29,13 @@ const flexColumn = {
   alignItems: 'center',
 }
 
-export const Error500Overlay = ({ reload }: { reload: () => void }) => (
+export const Error500Overlay = ({
+  reload,
+  errorMessage5xx,
+}: {
+  reload: () => void
+  errorMessage5xx?: string
+}) => (
   <Box
     sx={{
       ...flexColumn,
@@ -42,7 +48,7 @@ export const Error500Overlay = ({ reload }: { reload: () => void }) => (
       }}
       variant="body2"
     >
-      Load Failed. Reload
+      {errorMessage5xx ?? 'Load Failed. Reload'}
     </Typography>
     <div
       onClick={reload}

src/components/basic/Table/index.tsx

@@ -75,6 +75,7 @@ export interface TableProps extends DataGridProps {
   fontSizeCell?: string
   error?: {
     status: number
+    message?: string
   }
   reload?: () => void
   autoFocus?: boolean
@@ -175,6 +176,23 @@ export const Table = ({
     }
   }
 
+  const renderErrorMessage = () => {
+    if (error == null) {
+      return <Typography variant="body2">{noRowsMsg ?? 'No rows'}</Typography>
+    }
+    if (error.status >= 400 && error.status < 500) {
+      return <Error400Overlay errorMessage4xx={error.message} />
+    }
+    return (
+      <Error500Overlay
+        reload={() => {
+          reload?.()
+        }}
+        errorMessage5xx={error.message}
+      />
+    )
+  }
+
   const NoRowsOverlay = () => {
     return (
       <Stack
@@ -183,20 +201,7 @@ export const Table = ({
         justifyContent="center"
         sx={{ backgroundColor: '#fff', pointerEvents: 'auto' }}
       >
-        {error != null && error.status === 500 && (
-          <Error500Overlay
-            reload={() => {
-              reload?.()
-            }}
-          />
-        )}
-        {error != null &&
-          (error.status === 400 ||
-            error.status === 404 ||
-            error.status === 401) && <Error400Overlay />}
-        {error == null && (
-          <Typography variant="body2">{noRowsMsg ?? 'No rows'}</Typography>
-        )}
+        {renderErrorMessage()}
       </Stack>
     )
   }