feat: add reload prop for error screen manager

Author: AbhishekA1509

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.79-beta-13",
+    "version": "0.0.79-beta-14",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/ErrorPage.tsx

@@ -4,7 +4,7 @@ import GenericEmptyState from './EmptyState/GenericEmptyState'
 import { ErrorPageType } from './Types'
 import { noop, refresh, reportIssue } from './Helper'
 
-const ErrorPage = ({ code, image, title, subTitle, imageType, heightToDeduct }: ErrorPageType) => {
+const ErrorPage = ({ code, image, title, subTitle, imageType, heightToDeduct, reload }: ErrorPageType) => {
     const { push } = useHistory()
     const redirectToHome = () => {
         push(`/${ROUTES.APP_LIST}`)
@@ -29,7 +29,11 @@ const ErrorPage = ({ code, image, title, subTitle, imageType, heightToDeduct }:
             case ERROR_STATUS_CODE.BAD_REQUEST:
             case ERROR_STATUS_CODE.BAD_GATEWAY:
             case ERROR_STATUS_CODE.SERVICE_TEMPORARY_UNAVAILABLE:
-                return { onClick: refresh, renderButtonText: ERROR_EMPTY_SCREEN.TRY_AGAIN, isButtonAvailable: true }
+                return {
+                    onClick: reload ?? refresh,
+                    renderButtonText: ERROR_EMPTY_SCREEN.TRY_AGAIN,
+                    isButtonAvailable: true,
+                }
             default:
                 return { onClick: noop, renderButtonText: '', isButtonAvailable: false }
         }

src/Common/ErrorScreenManager.tsx

@@ -18,6 +18,7 @@ const ErrorScreenManager = ({ code, reload, subtitle, reloadClass, heightToDeduc
                         image={badRequest}
                         imageType={ImageType.Large}
                         heightToDeduct={heightToDeduct}
+                        reload={reload}
                     />
                 )
             case ERROR_STATUS_CODE.UNAUTHORIZED:

src/Common/Types.ts

@@ -139,7 +139,7 @@ export interface GenericEmptyStateType {
 }
 
 export interface ErrorPageType
-    extends Pick<GenericEmptyStateType, 'image' | 'title' | 'subTitle' | 'renderButton' | 'imageType'> {
+    extends Pick<GenericEmptyStateType, 'image' | 'title' | 'subTitle' | 'renderButton' | 'imageType'>, Pick<ErrorScreenManagerProps, 'reload'> {
     code: number
     heightToDeduct?: number
 }

src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx

@@ -25,6 +25,11 @@ const APIResponseHandler = ({
     }
 
     if (error) {
+        // This will be used for handling error screen for small screen size
+        if (genericSectionErrorProps) {
+            return <GenericSectionErrorState {...genericSectionErrorProps} />
+        }
+
         // TODO: Can extend ErrorScreenNotFound
         if (error?.code === 404) {
             return (
@@ -35,10 +40,6 @@ const APIResponseHandler = ({
             )
         }
 
-        if (genericSectionErrorProps) {
-            return <GenericSectionErrorState {...genericSectionErrorProps} />
-        }
-
         return <Reload {...reloadProps} />
     }